styles.css

:root {
  --bg: #0c1012;
  --bg-soft: #13191d;
  --panel: rgba(14, 19, 23, 0.86);
  --panel-strong: rgba(20, 27, 32, 0.96);
  --line: rgba(194, 212, 222, 0.14);
  --line-strong: rgba(194, 212, 222, 0.28);
  --text: #eef4f2;
  --text-muted: #9eb0af;  /* Renamed for clarity but kept value */
  --muted: #9eb0af;
  --accent: #abffcb;
  --accent-glow: rgba(171, 255, 203, 0.15);
  --accent-deep: #245e48;
  --danger: #ff756f;
  --sidebar-w: 300px;
  
  /* UPDATED TYPOGRAPHY */
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  
  /* REQUESTED LETTER SPACING (-3% to -5%) */
  --tracking-tighter: -0.05em; /* -5% */
  --tracking-tight: -0.03em;   /* -3% */
  --tracking-normal: -0.01em;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body { margin: 0; }
img { max-width: 100%; display: block; }
button, input, select, output { font: inherit; letter-spacing: inherit; }

/* ========================================
   APP SHELL — view switching via data-view
   ======================================== */
.app {
  height: 100vh;
  overflow: hidden;
}

.app[data-view="landing"] {
  display: flex;
}

.app[data-view="landing"] .topbar,
.app[data-view="landing"] .studio {
  display: none;
}

.app[data-view="editor"] {
  display: grid;
  grid-template-rows: auto 1fr;
}

.app[data-view="editor"] .view-landing {
  display: none;
}

/* ========================================
   LANDING VIEW (REDESIGNED)
   ======================================== */
.view-landing {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  /* Subtle background noise/gradient */
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(171, 255, 203, 0.03), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(121, 216, 255, 0.02), transparent 25%);
}

/* --- Navigation --- */
.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-text {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: var(--tracking-tight);
}

.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--text);
}

/* --- Hero Section --- */
.hero-section {
  padding: 40px 24px 60px; /* Reduced vertical padding since flex will center it */
  min-height: calc(100vh - 90px); /* Fill remaining viewport (Nav is approx 80-90px) */
  text-align: center;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  gap: 32px;
  align-items: center;
}

.hero-badge {
  background: rgba(171, 255, 203, 0.05);
  border: 1px solid rgba(171, 255, 203, 0.2);
  color: var(--accent);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  display: inline-block;
  backdrop-filter: blur(4px);
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
  margin: 0;
  text-wrap: balance;
}

.text-gradient {
  background: linear-gradient(135deg, #fff 30%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.6;
  margin: 0 auto;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-embed {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.hero-embed-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  outline: none;
}

.hero-embed-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(171, 255, 203, 0.22);
}

.hero-embed-image {
  height: 72px;
  width: auto;
  max-width: min(520px, 100%);
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border: 1px solid transparent;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: var(--tracking-tight);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: var(--tracking-tight);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text);
}

/* --- Tools Section --- */
.tools-section {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: var(--tracking-tighter);
}

.section-header p {
  color: var(--muted);
  font-size: 1.1rem;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
}

.tool-card {
  appearance: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: var(--text);
  text-align: left;
  align-items: flex-start;
}

.tool-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border-color: var(--line-strong);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.tool-card:hover .tool-card-icon {
  color: var(--accent);
  transform: scale(1.1);
}

.tool-card-icon {
  color: var(--muted);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.tool-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tool-card-name {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: var(--tracking-tight);
}

.tool-card-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.landing-badges { /* Deprecated in new design */
  display: none;
}

/* --- Features Section --- */
.features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding: 60px 48px 100px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.feature-card p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* --- Footer --- */
.landing-footer {
  border-top: 1px solid var(--line);
  padding: 48px;
  background: var(--bg-soft);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text);
}

/* Mobile responsive specifics for Landing */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.8rem;
  }
  .landing-nav {
    padding: 24px;
  }
  .features-section {
    padding: 48px 24px;
  }
}

/* ========================================
   OLD LANDING STYLES (Kept minimally or overridden if referenced by JS)
   ======================================== */
/* These classes were largely replaced above, but keeping empty shells 
   helps avoid breakage if JS selects them strictly. 
   Actually, the new HTML structure uses new classes, so we are safe. 
   However, we need to ensure the JS 'data-select-tool' still works. 
*/
/* 
   .tool-card class is reused above.
   .view-landing is reused above.
*/

/* --- Back button --- */
.back-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 160ms ease;
  padding: 0;
}

.back-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   TOPBAR
   ======================================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(16, 21, 26, 0.98), rgba(12, 16, 18, 0.95));
  backdrop-filter: blur(16px);
  z-index: 20;
  position: relative;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-icon {
  font-size: 1.1rem;
  color: var(--accent);
  line-height: 1;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: var(--tracking-tighter);
}

/* Centered file metadata in topbar */
.topbar-meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  max-width: 340px;
}

.topbar-filename {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.topbar-chips {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.topbar-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.pill {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ========================================
   STUDIO
   ======================================== */
.studio {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 15% 25%, rgba(171, 255, 203, 0.03), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(125, 194, 255, 0.04), transparent 35%),
    radial-gradient(circle, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-color: var(--bg);
  background-size: auto, auto, 20px 20px;
}

/* ========================================
   DROPZONE
   ======================================== */
.dropzone {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  padding: 48px 24px;
  cursor: pointer;
  transition: background 280ms ease;
}

.dropzone.is-active,
.dropzone:hover,
.dropzone:focus-visible {
  background: radial-gradient(ellipse at center, rgba(171, 255, 203, 0.05), transparent 60%);
  outline: none;
}

.dropzone-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 400px;
}

.drop-icon-ring {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  animation: pulse-ring 3.5s ease-in-out infinite;
  transition: border-color 300ms ease, transform 300ms ease;
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(171, 255, 203, 0.12); }
  50% { box-shadow: 0 0 0 18px rgba(171, 255, 203, 0); }
}

.dropzone:hover .drop-icon-ring,
.dropzone.is-active .drop-icon-ring {
  border-color: var(--accent);
  transform: translateY(-6px);
  animation: none;
}

.dropzone-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}

.drop-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 300;
}

/* --- Dropzone collapsed --- */
.dropzone.has-image {
  display: none;
}

/* ========================================
   EDITOR PANEL — side-by-side
   ======================================== */
.editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.editor-panel.is-hidden { display: none; }

.editor-body {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  flex: 1;
  min-height: 0;
}

/* --- Canvas area (left) --- */
.canvas-area {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.canvas-discard-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(14, 19, 23, 0.72);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  z-index: 5;
}

.canvas-discard-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(20, 27, 32, 0.86);
}

.canvas-discard-btn:active {
  transform: translateY(0px);
}

.canvas-discard-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 255, 203, 0.22);
}

.crop-surface {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop-surface img {
  max-width: 100%;
  max-height: calc(100vh - 48px - 48px);
  object-fit: contain;
  display: block;
}

/* ========================================
   TOOL SIDEBAR (right)
   ======================================== */
.tool-sidebar {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--panel-strong);
  overflow-y: auto;
}

/* --- File meta --- */
.sidebar-meta {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.sidebar-file-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.meta-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 0.62rem;
  white-space: nowrap;
}

.meta-chip dt {
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meta-chip dd {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

/* --- Tool switcher dropdown --- */
.sidebar-tool-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.tool-switcher {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: border-color 160ms ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239eb0af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.tool-switcher:focus {
  border-color: rgba(171, 255, 203, 0.4);
  outline: none;
}

/* --- Sidebar tool panels --- */
.sidebar-panels {
  flex: 1;
  min-height: 0;
}

.sidebar-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.sidebar-panel.is-active {
  display: flex;
}

.sidebar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 500;
  transition: border-color 160ms ease;
}

.sidebar-select:focus {
  border-color: rgba(171, 255, 203, 0.35);
  outline: none;
}

.sidebar-select option,
.tool-switcher option {
  background: var(--bg-soft);
  color: var(--text);
}

.sidebar-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 500;
  transition: border-color 160ms ease;
}

.sidebar-input:focus {
  border-color: rgba(171, 255, 203, 0.35);
  outline: none;
}

.sidebar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sidebar-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
}

.sidebar-check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

.sidebar-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-range {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
}

.sidebar-range-value {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}



/* ========================================
   BUTTONS
   ======================================== */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 7px 13px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  white-space: nowrap;
  transition: all 160ms ease;
}

.btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.72rem;
}

.btn-full {
  width: 100%;
  text-align: center;
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent), #79d8ff);
  color: #071112;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 14px rgba(171, 255, 203, 0.14);
}

.btn-accent:hover {
  box-shadow: 0 4px 22px rgba(171, 255, 203, 0.25);
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--text);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-strong);
}

/* ========================================
   CROPPER.JS OVERRIDES
   ======================================== */
.cropper-view-box,
.cropper-face {
  border-radius: 0;
}

/* ========================================
   SCROLLBAR & SELECTION
   ======================================== */
::selection {
  background: rgba(171, 255, 203, 0.18);
  color: var(--text);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(194, 212, 222, 0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(194, 212, 222, 0.22); }

/* ========================================
   RESPONSIVE
   ======================================== */

/* --- Tablet / Small Desktop (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  
  :root {
    --sidebar-w: 260px;
  }

  .canvas-area {
    padding: 16px;
  }
}

/* --- Mobile Landscape / Tablets (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Landing Adjustments */
  .hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
  
  .landing-nav {
    padding: 16px 24px;
  }
  
  .features-section {
    padding: 40px 24px;
    gap: 24px;
  }

  /* Editor Layout: Stack Vertical */
  .editor-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .tool-sidebar {
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: 45vh; /* Limit height of tools on mobile */
    overscroll-behavior: contain;
  }
  
  .canvas-area {
    /* Height is flexible based on remaining space */
    min-height: 200px;
  }

  .crop-surface img {
    /* Ensure image fits in the reduced canvas area */
    max-height: calc(55vh - 48px); /* Approximate available height */
  }

  /* Content Pages */
  .text-content {
    padding: 40px 20px;
  }
  
  .page-title {
    font-size: 2rem;
  }
}

/* --- Mobile Portrait (max-width: 640px) --- */
@media (max-width: 640px) {
  /* General */
  .app[data-view="editor"] .topbar {
    padding: 0 8px;
    gap: 8px;
  }

  /* Topbar: Compact Mode */
  .topbar-brand .brand-name {
    display: none; /* Hide text logo to save space */
  }

  .topbar-status {
    flex: 1;
    overflow: hidden;
  }

  .status-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions {
    gap: 4px;
  }

  .topbar-actions .btn {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  /* Show Undo/Reset but make compact */
  .topbar-actions .btn-ghost {
    display: inline-block; /* Restore functionality */
    padding: 4px 6px;
  }

  /* Landing */
  .tool-grid {
    grid-template-columns: 1fr; /* Single column for tools */
    gap: 12px;
  }

  .tool-card {
    padding: 24px 20px;
  }

  .landing-footer {
    padding: 32px 24px;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 12px;
  }
  
  /* Hero */
  .hero-section {
    padding: 20px;
    min-height: auto; /* Allow natural height on small screens if content overflows */
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   CONTENT PAGES (Privacy, Changelog, License)
   ======================================== */
.text-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px;
  flex: 1;
  width: 100%;
  text-align: center; /* Center headers and intro text */
}

.prose, .license-frame, .changelog-list {
  text-align: left; /* Keep long-form content readable */
  margin: 0 auto;   /* Ensure centered block within parent */
}

.page-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  letter-spacing: var(--tracking-tighter);
}

.last-updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

.prose p {
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 24px;
}

.prose strong {
  color: var(--text);
}

/* Changelog Styles */
.changelog-entry {
  margin-bottom: 60px;
}

.changelog-entry header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.changelog-entry h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.changelog-entry time {
  color: var(--muted);
  font-family: monospace;
  font-size: 0.9rem;
}

.changelog-entry ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.changelog-entry li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}

[class^="badge-"] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 70px;
  text-align: center;
}

.badge-new { background: rgba(171, 255, 203, 0.1); color: var(--accent); border: 1px solid rgba(171, 255, 203, 0.2); }
.badge-feature { background: rgba(121, 216, 255, 0.1); color: #79d8ff; border: 1px solid rgba(121, 216, 255, 0.2); }
.badge-fix { background: rgba(255, 117, 111, 0.1); color: var(--danger); border: 1px solid rgba(255, 117, 111, 0.2); }

/* License Styles */
.license-frame {
  background: var(--bg-soft);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 0.8rem;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;          /* Added to support centering internal block */
  justify-content: center; /* Center the text block horizontally */
}

.license-text {
  font-family: monospace;
  color: var(--muted);
  white-space: pre-wrap;
  margin: 0;
  width: fit-content;    /* Allow block to shrink to text width */
  text-align: left;      /* Keep internal text left-aligned */
}

/* ========================================
   CANVAS PROCESSING OVERLAY
   ======================================== */
.canvas-processing-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 18, 0.72);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.canvas-processing-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

.canvas-processing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 36px;
  background: rgba(16, 24, 30, 0.9);
  border: 1px solid rgba(171, 255, 203, 0.15);
  border-radius: 14px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(171, 255, 203, 0.06);
  min-width: 220px;
  text-align: center;
}

.canvas-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(171, 255, 203, 0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: canvas-spin 0.7s linear infinite;
}

@keyframes canvas-spin {
  to { transform: rotate(360deg); }
}

.canvas-status-text {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  max-width: 220px;
}

.canvas-progress-shell {
  width: 140px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.canvas-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #79d8ff);
  transition: width 220ms ease;
}


/* ========================================
   SIDEBAR SHARED COMPONENTS
   ======================================== */
.sidebar-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.sidebar-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 500;
  resize: vertical;
  min-height: 60px;
  transition: border-color 160ms ease;
  line-height: 1.5;
}

.sidebar-textarea:focus {
  border-color: rgba(171, 255, 203, 0.35);
  outline: none;
}

.sidebar-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-color {
  width: 36px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.sidebar-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.sidebar-color::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.btn-group {
  display: flex;
  gap: 2px;
}

.btn-xs {
  padding: 4px 6px;
  font-size: 0.68rem;
}

.btn-toggle {
  flex: 1;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 160ms ease, background 160ms ease;
}

.btn-toggle.active {
  opacity: 1;
  background: rgba(171, 255, 203, 0.12);
  border-color: rgba(171, 255, 203, 0.3);
  color: var(--accent);
}