/* Theme variables (dark + light), base element resets, top-level page layout. */
  :root {
    --bg: #0a0a0c;
    --fg: #ffffff;
    --surface: color-mix(in srgb, var(--fg) 2.5%, transparent);
    --surface-2: color-mix(in srgb, var(--fg) 4.5%, transparent);
    --border: color-mix(in srgb, var(--fg) 6%, transparent);
    --border-strong: color-mix(in srgb, var(--fg) 10%, transparent);
    /* secondary tiers bumped (30→42, 18→27) — labels/placeholders were near-invisible */
    --text: color-mix(in srgb, var(--fg) 90%, transparent);
    --text-dim: color-mix(in srgb, var(--fg) 60%, transparent);
    --text-muted: color-mix(in srgb, var(--fg) 42%, transparent);
    --text-faint: color-mix(in srgb, var(--fg) 27%, transparent);
    --shadow-strong: rgba(0,0,0,0.6);
    --modal-backdrop: rgba(0,0,0,0.65);
    --accent: #d4a574;
    --accent-strong: #e8bc8b;
    --accent-soft: rgba(212,165,116,0.14);
    --accent-soft-2: rgba(212,165,116,0.28);
    --accent-border: rgba(212,165,116,0.45);
    --gen-btn-text: #1a1207;
  }
  [data-theme="light"] {
    --bg: #f7f3eb;
    --fg: #1a1612;
    /* Text alphas need bumping — black-on-cream reads fainter than white-on-black at the same
       opacity. Secondary tiers raised further (52→62, 38→48): labels were washing out. */
    --text: color-mix(in srgb, var(--fg) 92%, transparent);
    --text-dim: color-mix(in srgb, var(--fg) 74%, transparent);
    --text-muted: color-mix(in srgb, var(--fg) 62%, transparent);
    --text-faint: color-mix(in srgb, var(--fg) 48%, transparent);
    /* Surfaces and borders a touch heavier so they hold against the cream */
    --surface: color-mix(in srgb, var(--fg) 4%, transparent);
    --surface-2: color-mix(in srgb, var(--fg) 7%, transparent);
    --border: color-mix(in srgb, var(--fg) 10%, transparent);
    --border-strong: color-mix(in srgb, var(--fg) 16%, transparent);
    --shadow-strong: rgba(33,28,22,0.15);
    --modal-backdrop: rgba(33,28,22,0.45);
    --accent: #a86f3a;
    --accent-strong: #8a5728;
    --accent-soft: rgba(168,111,58,0.10);
    --accent-soft-2: rgba(168,111,58,0.22);
    --accent-border: rgba(168,111,58,0.35);
    --gen-btn-text: #fff8ec;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-weight: 400;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
  }

  header {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .logo {
    width: 28px; height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--border);
  }
  .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  header h1 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.045em;
    background: linear-gradient(180deg, #f3ddbf 0%, #d4a574 52%, #a86f3a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* gold-on-cream needs darker stops to hold contrast */
  [data-theme="light"] header h1 {
    background-image: linear-gradient(180deg, #b8834a 0%, #a86f3a 55%, #7a4a20 100%);
  }
  header span {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 2px;
    font-weight: 400;
  }

  .mode-toggle {
    display: flex;
    background: transparent;
    gap: 2px;
  }
  .nav-create { position: relative; display: inline-block; }
  .nav-create-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 75;
    min-width: 160px; padding: 6px; flex-direction: column; gap: 2px;
    /* opaque plate — --surface is translucent and the page bleeds through */
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: 11px;
    box-shadow: 0 14px 40px var(--shadow-strong, rgba(0,0,0,.55));
  }
  .nav-create.open .nav-create-menu { display: flex; }
  .nav-create-menu button {
    background: none; border: 0; font: inherit; font-size: 13px; font-weight: 500;
    color: var(--text-dim); text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  }
  .nav-create-menu button:hover { background: var(--surface-2); color: var(--text); }
  .nav-create-menu button.active { color: var(--accent-strong); }
  .mode-btn {
    background: none; border: none;
    /* --text-dim (not muted): nav labels were near-invisible on dark. font-family:inherit —
       <button> never inherits the body font, so the button items rendered in the UA default
       (Arial) while the <a> items (Gallery/Profile) got the body stack and looked heavier. */
    color: var(--text-dim);
    font-size: 12px; font-weight: 500;
    font-family: inherit;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
    letter-spacing: -0.005em;
  }
  .mode-btn:hover { color: var(--text); background: var(--surface); }
  .mode-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 500;
  }

  .theme-toggle {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-dim);
    width: 30px; height: 30px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    margin-left: 8px;
  }
  .theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-border); }
  .theme-toggle svg { width: 14px; height: 14px; }
  [data-theme="light"] .theme-toggle .icon-sun { display: none; }
  [data-theme="light"] .theme-toggle .icon-moon { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }

  .layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 61px);
  }
  /* grid items default to min-width:auto, so a wide child (e.g. the templates strip's
     thumbnails) blows the column out past the viewport instead of scrolling — this is why
     the strip must NOT dictate page width, especially on phones. */
  .layout > .sidebar, .layout > .main { min-width: 0; }

  .sidebar {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sidebar-inner {
    overflow-y: auto;
    flex: 1;
    padding: 20px 16px;
  }
  .sidebar-inner::-webkit-scrollbar { width: 4px; }
  .sidebar-inner::-webkit-scrollbar-track { background: transparent; }
  .sidebar-inner::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 4px; }

  .section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-dim);   /* functional headers — one tier up from muted for legibility */
    text-transform: uppercase;
    margin-bottom: 9px;
    margin-top: 22px;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  }
  .section-label:first-child { margin-top: 0; }

  /* Composition slot in scene sidebar */
  .comp-slot {
    background: color-mix(in srgb, var(--fg) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s;
  }
  .comp-slot:hover { border-color: rgba(212,165,116,0.4); }
  .comp-slot img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
  }
  .comp-slot-empty {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px;
    color: var(--text-faint);
    font-size: 11px;
    text-align: center;
    padding: 12px;
  }
  .comp-slot-label {
    font-size: 10px;
    color: var(--text-dim);
    padding: 6px 8px;
    text-align: center;
    background: rgba(0,0,0,0.25);
  }
  .comp-slot-change {
    position: absolute;
    inset: 0; bottom: 26px;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
    font-size: 11px; color: var(--text); font-weight: 500;
    pointer-events: none;
  }
  .comp-slot:hover .comp-slot-change { opacity: 1; }
  /* touch has no hover: keep the affordance as a slim bottom bar */
  @media (hover: none) {
    .comp-slot-change { opacity: 1; top: auto; bottom: 26px; height: 22px;
                        background: rgba(0,0,0,0.45); font-size: 10px; }
  }