/* ============================================================
   SIUU MAGIC Redesign — Design tokens + App styles
   Ported from design_handoff_siuu_refresh/design_files/
   ============================================================ */

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@200;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Bebas+Neue&family=Playfair+Display:ital,wght@0,600;0,800;1,500;1,600&family=Oswald:wght@700;900&family=Merriweather:wght@700;900&family=Be+Vietnam+Pro:ital,wght@1,700;1,800&display=swap&subset=vietnamese');

/* ===== Scrollbar — brand styling ===== */
/* Global WebKit track defaults (day); applyAuraAccent injects #rd-sb <style> to update per theme.
   2026-07-29: these were leftover pre-redesign values (solid green thumb, tan track) —
   disconnected from the aura system entirely. Now uses --accent-line (same token every
   other soft-accent border/line in the redesign uses) so the resting thumb is at least
   theme-correct before JS runs. The real "too dark on hover" fix is in auraSystem.ts —
   the injected #rd-sb override used to jump straight to the FULLY OPAQUE accent color
   on hover, see that file's comment. */
::-webkit-scrollbar { width: 6px; background:var(--bg); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 38%, transparent); }

/* ===== Base vars (layout + motion) ===== */
:root {
  --rd-font-sans: 'Bricolage Grotesque', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --rd-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --rd-font-serif: 'Fraunces', Georgia, serif;
  --rd-r-card: 12px;
  --rd-r-btn: 9px;
  --rd-r-inset: 8px;
  --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rd-maxw: 1560px;
  --rd-pad-x: 48px;
}

/* ===== Logo gradient — dark Aurora vs light Paper ===== */
[data-theme="dark"]  { --logo-g1:#3EC695; --logo-g2:#5FD0C4; --logo-g3:#6F8CFF; --logo-g4:#B48BFF; --logo-s1:#519FBD; --logo-s2:#5C7EB2; }
[data-theme="light"] { --logo-g1:#209E61; --logo-g2:#1FAAAD; --logo-g3:#4077DB; --logo-g4:#7C5CE0; --logo-s1:#1D84AB; --logo-s2:#30719D; }
:root { --logo-ink:#070604; --logo-cream:#F7F2EA; }
[data-theme="dark"]  { --logo-primary:var(--logo-cream); --logo-asset:url('/redesign/assets/shared/logo/siuu-magic-silk-signal-cream.svg'); --logo-mark-asset:url('/redesign/assets/shared/logo/siuu-magic-silk-signal-mark-cream.svg'); }
[data-theme="light"] { --logo-primary:var(--logo-ink); --logo-asset:url('/redesign/assets/shared/logo/siuu-magic-silk-signal-ink.svg'); --logo-mark-asset:url('/redesign/assets/shared/logo/siuu-magic-silk-signal-mark-ink.svg'); }

/* Shell background must follow the redesign theme. The legacy body bg is a hard
   #030303 (index.html --bg-color); without this it shows through as a black flash
   on the light theme whenever .rd-app doesn't fully paint (re-render, overflow,
   error-boundary). [data-theme] body outspecs the legacy `body{}` rule. */
[data-theme="dark"]  body { background-color: var(--bg); }
[data-theme="light"] body { background-color: var(--bg); }

/* ===== DARK theme tokens — Aurora Twilight ===== */
[data-theme="dark"] {
  --bg:          #0d0e16;
  --bg-veil:     #10111b;
  --card:        #171827;
  --card-2:      #1d1e30;
  --inset:       #12131f;
  --line:        #312e42;
  --line-2:      #47405f;
  --ink:         #f3eddf;
  --ink-dim:     #a99d90;
  --ink-faint:   #766f85;
  --emerald:     #5ac49c;
  --emerald-2:   #48aa86;
  --emerald-ink: #08120f;
  --emerald-soft:rgba(90,196,156,0.14);
  --emerald-line:rgba(90,196,156,0.34);
  --action:      #5ac49c;
  --action-hover:#48aa86;
  --action-ink:  #08120f;
  --action-soft: #19372f;
  --violet:      #a48bff;
  --gold:        #f0cd86;
  --gold-deep:   #caa45e;
  --aqua:        #5fd0c4;
  --spend:       #d6906a;
  --rose:        #ff6b8a;
  --aurora: linear-gradient(115deg,#3ec695,#43c6c0,#6f8cff,#b06cff);
  --grad:   linear-gradient(110deg,#ece9f6,#5fd0c4 34%,#6f8cff 62%,#c79bff);
  --grad-soft: linear-gradient(110deg,rgba(236,233,246,0.15),rgba(95,208,196,0.4),rgba(111,140,255,0.35));
  --rd-shadow:   0 30px 80px -40px rgba(0,0,0,0.9);
  /* Shared card elevation ramp (one light model, one shadow color per theme).
     Dark theme = neutral black. Size laddered: 1 small → 3 large → rd-shadow xl. */
  --shadow-1:    0 8px 22px -10px rgba(0,0,0,.55);
  --shadow-2:    0 18px 42px -20px rgba(0,0,0,.62);
  --shadow-3:    0 28px 58px -28px rgba(0,0,0,.74);
  --ph-stripe:   rgba(180,170,225,0.05);
  --film:        #0a0913;
  --stage:       radial-gradient(120% 80% at 50% 0%,#13112a,#08070f);
  /* T1 toggle system — recessed track + raised chip */
  --tog-well:    inset 0 1.5px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
  /* DNA panel recess (mosaic / covers / carousel stage) — crisp top lip, soft
     contained depth (negative spread = clean recess edge, not a band), light base lip. */
  --dna-well:    inset 0 1px 2px rgba(0,0,0,.5), inset 0 13px 26px -11px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
  /* Raised DNA tile (mosaic slot / covers card / carousel folio) — thin border +
     one uniform low lift, so every block reads as the SAME tile raised out of the
     recess (paired with var(--line) border). Used in both themes. */
  --dna-tile:    0 5px 10px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  --tog-pop:     0 1.5px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  --tog-chip:    var(--card-2);
  /* Material buttons — top-light edge + ground shadow (cast); press = sink.
     Hover (dark bg): dark drop is near-invisible, so the LIFT reads via a
     brighter top lip + lower inset shade + a bigger soft drop. No colored glow. */
  --btn-mat:       inset 0 1px 0 rgba(255,255,255,.13), 0 1.5px 4px rgba(0,0,0,.45);
  --btn-mat-hover: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.22), 0 9px 18px -6px rgba(0,0,0,.55);
  --btn-mat-press: inset 0 2px 5px rgba(0,0,0,.40), inset 0 1px 0 rgba(0,0,0,.15);
  /* Same emboss "sink" as --btn-mat-press but half the alpha — on compact
     buttons (small padding, e.g. Settings billing CTAs) the identical absolute
     inset shadow covers proportionally more surface than on a big CTA like
     .stho-btn-em, so it visually reads much darker even though the token is
     the same. Use this on small/pill buttons to match the perceived weight. */
  --btn-mat-press-soft: inset 0 1px 3px rgba(0,0,0,.20), inset 0 1px 0 rgba(0,0,0,.08);
}

/* ===== LIGHT theme tokens ===== */
[data-theme="light"] {
  --bg:          #f1eadb;
  --bg-veil:     #efe6d7;
  --card:        #fff9ee;
  --card-2:      #f4eddf;
  --inset:       #e8ddcc;
  --line:        #d5c7b5;
  --line-2:      #bfae99;
  --ink:         #1e1914;
  --ink-dim:     #75685c;
  --ink-faint:   #9b8d7d;
  --emerald:     #23885f;
  --emerald-2:   #176a4a;
  --emerald-ink: #fff9ee;
  --emerald-soft:rgba(35,136,95,0.11);
  --emerald-line:rgba(35,136,95,0.30);
  --action:      #23885f;
  --action-hover:#176a4a;
  --action-ink:  #fff9ee;
  --action-soft: #ddede4;
  --grad:        linear-gradient(96deg, #1e1914 0%, #23885f 58%, #2f9c88 100%);
  --grad-soft:   linear-gradient(96deg, #3a342a 0%, #23885f 60%, #2f9c88 100%);
  --violet:      #6f5bd0;
  --gold:        #b8862f;
  --gold-deep:   #8a5e1a;
  --aqua:        #2f8a90;
  --spend:       #b0563a;
  --rose:        #c0436a;
  --aurora: linear-gradient(115deg,#176b4c,#2e9b86,#5a73d6,#9a6cd6);
  --rd-shadow:   0 30px 70px -45px rgba(60,45,25,0.5);
  /* Light theme = WARM umber shadow (matches cream paper, not cold black). */
  --shadow-1:    0 8px 22px -10px rgba(60,45,25,.26);
  --shadow-2:    0 18px 42px -22px rgba(60,45,25,.34);
  --shadow-3:    0 28px 58px -30px rgba(60,45,25,.44);
  --ph-stripe:   rgba(42,33,22,0.05);
  --film:        #241c12;
  --stage:       radial-gradient(120% 80% at 50% 0%,#ece3d3,#ddd2bf);
  /* T1 toggle system — recessed track + raised chip */
  --tog-well:    inset 0 1px 2px rgba(42,33,22,.15), inset 0 -1px 0 rgba(255,255,255,.65);
  /* Warm umber recess (not cold black) on the cream paper — harmonious + crisp. */
  --dna-well:    inset 0 1px 1px rgba(42,33,22,.17), inset 0 11px 22px -9px rgba(42,33,22,.20), inset 0 -1.5px 0 rgba(255,255,255,.72);
  /* Raised tile — warm umber lift on the cream paper (matches the well's warmth). */
  --dna-tile:    0 5px 11px -8px rgba(42,33,22,.55), inset 0 1px 0 rgba(255,255,255,.6);
  --tog-pop:     0 1px 3px rgba(42,33,22,.14), inset 0 1px 0 rgba(255,255,255,.85);
  --tog-chip:    var(--card);
  /* Material buttons — top-light edge + ground shadow (cast); press = sink.
     Hover (paper bg): the cast shadow GROWS (bigger, softer, offset further) =
     the object lifted off the page. Classic emboss elevation. No colored glow. */
  --btn-mat:       inset 0 1px 0 rgba(255,255,255,.45), 0 1.5px 3px rgba(42,33,22,.22);
  --btn-mat-hover: inset 0 1px 0 rgba(255,255,255,.55), 0 7px 16px -4px rgba(42,33,22,.32);
  --btn-mat-press: inset 0 2px 4px rgba(42,33,22,.22), inset 0 1px 0 rgba(42,33,22,.10);
  --btn-mat-press-soft: inset 0 1px 2px rgba(42,33,22,.12), inset 0 1px 0 rgba(42,33,22,.05);
}

/* Paper grain — editorial texture */
.rd-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
[data-theme="dark"] .rd-grain::after { opacity: 0.08; mix-blend-mode: screen; }
[data-theme="light"] .rd-grain::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9%200.06' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.10;
  mix-blend-mode: multiply;
}

/* ===== App shell ===== */
.rd-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--rd-font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s var(--rd-ease);
  overflow-x: clip; /* kill any horizontal bleed/shift (clip keeps sticky working) */
}

/* ===== App bar ===== */
.rd-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  height: 62px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.rd-bar-left { display: flex; align-items: center; gap: 14px; }
/* Sub-pages show a compact SIUU mark home-button instead of the full wordmark */
.rd-logo-bolt {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background:transparent; border:1px solid var(--line);
  color:var(--logo-primary); cursor:pointer;
  transition:transform .18s var(--rd-ease), background .18s, border-color .18s;
}
.rd-logo-bolt svg { display:block; flex:none; }
.rd-logo-bolt::before {
  content:none;
}
.rd-logo-bolt:hover { transform:translateY(-1px); background:var(--inset); border-color:var(--line-2); color:var(--logo-primary); }
.rd-nav { display: flex; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); }
.rd-nav button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-dim); padding: 8px 14px; border-radius: 8px;
  transition: all 0.2s var(--rd-ease); white-space: nowrap;
}
.rd-nav button:hover { color: var(--ink); }
.rd-nav button.on { color: var(--ink); background: var(--accent-soft); }
.rd-bar-right { display: flex; align-items: center; gap: 10px; }
.rd-streak {
  font-family: var(--rd-font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--ink-faint);
}
/* .rd-energy removed 2026-07-29 with the EnergyPill component it styled —
   dead code carrying the last lightning-bolt icon from the retired Energy
   currency. Balance now renders as plain text via .rd-av-pop-credit. */
.rd-signin-btn {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #000); border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--btn-mat);
  transition: transform .2s var(--rd-ease), box-shadow .25s var(--rd-ease), filter .15s var(--rd-ease);
}
.rd-signin-btn:hover { filter: brightness(1.04); }
.rd-signin-btn:active { transform: translateY(1px); box-shadow: var(--btn-mat-press-soft); filter: brightness(.98); }
/* Radial, not the shared linear --aura-grad — a diagonal 3-stop gradient
   clipped by a small circle shows a visible band/seam at the middle stop.
   Radial has no direction to seam along, and reads more naturally on a
   circular badge anyway. Derived from --accent so it stays aura-reactive. */
.rd-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent) 65%, white 25%), var(--accent) 62%, color-mix(in srgb, var(--accent) 78%, black 22%) 100%);
  border: 1px solid var(--line-2); flex-shrink: 0;
  position: relative; overflow: hidden; box-shadow: var(--tog-pop);
}
.rd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo-mark fallback only when there's no real photo — an <AvatarImg> child
   makes the span non-:empty, so this simply doesn't fire once a photo loads. */
.rd-avatar:empty::after {
  content: ""; position: absolute; inset: 22%;
  background: var(--logo-mark-asset) center / contain no-repeat;
}

/* ===== Avatar hover popup ===== */
.rd-av-wrap { position: relative; display: inline-flex; }
.rd-av-popup {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 228px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border: 1px solid var(--line-2); border-radius: 16px;
  padding: 6px;
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(14px);
  z-index: 50;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.16s var(--rd-ease), transform 0.16s var(--rd-ease);
}
.rd-av-popup.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.rd-av-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.rd-av-pop-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent) 65%, white 25%), var(--accent) 62%, color-mix(in srgb, var(--accent) 78%, black 22%) 100%);
  border: 1px solid var(--line-2); flex-shrink: 0;
  position: relative; overflow: hidden; box-shadow: var(--tog-pop);
}
.rd-av-pop-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-av-pop-avatar:empty::after {
  content: ""; position: absolute; inset: 22%;
  background: var(--logo-mark-asset) center / contain no-repeat;
}
.rd-av-pop-name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.rd-av-pop-credit {
  font-family: var(--rd-font-mono); font-size: 10px;
  color: var(--ink-faint); letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
}

.rd-av-pop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-dim); padding: 9px 10px; border-radius: 9px;
  text-align: left; transition: all 0.15s var(--rd-ease);
}
.rd-av-pop-item:hover { background: var(--inset); color: var(--ink); }
.rd-av-pop-ic {
  color: var(--accent, var(--accent)); font-size: 13px;
  width: 17px; text-align: center; flex-shrink: 0;
}
.rd-av-pop-sep { height: 1px; background: var(--line); margin: 4px 0; }
.rd-av-pop-item--danger { color: #e05555; }
.rd-av-pop-item--danger:hover { background: color-mix(in srgb, #e05555 10%, transparent); color: #e05555; }

/* ===== Screen scaffold ===== */
.rd-scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: var(--accent-line) var(--bg); }
.rd-screen { max-width: var(--rd-maxw); margin: 0 auto; padding: 40px var(--rd-pad-x) 80px; }
.rd-screen--create { max-width: min(1300px, calc(100vw - 64px)); }

/* ===== Buttons ===== */
.rd-btn {
  font-family: var(--rd-font-sans); font-weight: 600; font-size: 14px;
  border-radius: var(--rd-r-btn); border: 1px solid transparent;
  padding: 14px 22px; cursor: pointer; display: inline-flex; align-items: center;
  gap: 9px; transition: all 0.25s var(--rd-ease); white-space: nowrap; line-height: 1;
}
.rd-btn-primary {
  background: var(--accent, var(--emerald)); color: var(--accent-ink, var(--emerald-ink));
  border: 1px solid color-mix(in srgb, var(--accent, var(--emerald)) 72%, #000);
  box-shadow: var(--btn-mat);
}
/* No hover lift/shadow-grow anywhere in the CTA system (site-wide decision) —
   hover is a plain brightness tick only. Press stays the material "lõm" dent:
   translateY + --btn-mat-press, no background color-mix (mixing --ink darkens
   hard on Paper, reading as a heavy fill instead of a light tap). */
.rd-btn-primary:hover:not(:disabled) { filter: brightness(1.04); }
.rd-btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--btn-mat-press); filter: brightness(.98); }
.rd-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.rd-btn-primary.rd-btn-billing,
.rd-btn-primary.rd-btn-aura {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 70%, #000);
}
.rd-btn-primary.rd-btn-billing:active:not(:disabled) {
  /* .rd-btn-aura isn't here — its own hero-scoped rule below (.rd-hero-ctas /
     .dsg-home-ctas) already gives it the correct full-strength press; it's a
     big CTA, not a compact one, so it doesn't need the soft variant.
     Uses the SOFT press shadow (half alpha) — .rd-btn-billing is a compact
     button, so the full-strength --btn-mat-press (tuned for big CTAs like
     .stho-btn-em) covers proportionally more of the button and reads as a
     dark fill instead of a light dent. No color-mix with --ink either — that
     darkens hard on Paper (ink is near-black there). */
  transform: translateY(1px);
  box-shadow: var(--btn-mat-press-soft);
  filter: brightness(.99);
}
.rd-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.rd-btn-ghost:hover { border-color: var(--accent-line); color: var(--accent); }
.rd-btn-quiet { background: var(--card-2); color: var(--ink-dim); border-color: transparent; }
.rd-btn-quiet:hover { color: var(--ink); }

/* ===== Logo wordmark ===== */
.rd-wordmark {
  background: none; border: 0; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center;
  width: 104px; height: 48px; flex-shrink: 0;
  color: var(--logo-primary); border-radius: 1px;
}
[data-theme="light"] .rd-wordmark { color: var(--logo-primary); }
.rd-wordmark > svg { display: none !important; }
.rd-wordmark::before {
  content: '';
  display: block;
  width: 104px;
  height: 48px;
  background: var(--logo-asset) center / contain no-repeat;
}
.rd-logo-img { height: 28px; width: auto; max-width: 100%; display: block; object-fit: contain; }
.rd-foot-logo {
  overflow: visible; line-height: 0; color: var(--logo-primary);
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 110px; height: 50px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.rd-foot-logo svg { display: none !important; }
.rd-foot-logo::before {
  content: '';
  display: block;
  width: 110px;
  height: 50px;
  background: var(--logo-asset) center / contain no-repeat;
}

/* ===== Eyebrow ===== */
.rd-eyebrow {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.rd-eyebrow .num { color: var(--accent); }

/* ===== Chip ===== */
.rd-chip {
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 12px; background: transparent;
  cursor: pointer; transition: all 0.2s var(--rd-ease); white-space: nowrap; line-height: 1;
}
.rd-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ===== HOME ===== */
.rd-home-hero {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px;
  /* 2026-07-22: top-aligned instead of vertically centered — centering against
     a tall right-side plate left the text block floating in extra whitespace
     with no fixed anchor, part of why it read flat/not "wow". Top-align gives
     both columns a shared, deliberate starting line like a real editorial
     layout. */
  align-items: start; padding: 32px 0 60px;
  width: 100%; max-width: none; margin: 0;
}
.rd-hero-left { display: flex; flex-direction: column; gap: 0; min-width: 0; position: relative; z-index: 2; }
.rd-hero-left .rd-eyebrow { margin: 0 0 20px; }
.rd-hero-display {
  /* 2026-07-22: pushed from clamp(40,64) to clamp(48,78) to read bigger/bolder.
     2026-07-23a: line-height 0.94 broke Vietnamese diacritics (tone marks on
     line 1 collided with line 2's ascenders) — reverted to 1.05.
     2026-07-23b: the 48-78 clamp itself was the bigger bug — at the grid's
     0.92fr left column (paired against the plate's 1.08fr), "Biến ảnh thường
     ngày" at that size is wider than the column at essentially every common
     desktop width (1280-1600px, i.e. most real laptops), not just "ultra-wide"
     as originally assumed — text overlapped straight onto the plate. Reverted
     to a size that actually fits the 0.92fr column across that whole range;
     verify any future bump against 1280/1366/1440/1536/1600 widths, not just
     the extremes. */
  font-size: clamp(40px, 4.2vw, 56px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.08; color: var(--ink);
  margin: 0 0 26px;
}
/* display:block still forces the two headline halves onto separate lines;
   white-space stays default (normal) as a safety net — if a line ever runs
   longer than the column can hold, it wraps to an extra line instead of
   overflowing on top of the plate. */
.rd-hero-display > span { display: block; }
/* Lede capped to a narrow measure (was full-width of the column) so it reads
   as a distinct, quieter layer under the display type instead of another wide
   horizontal band the same width as the headline. */
.rd-hero-lede { color: var(--ink-dim); font-size: 15.5px; line-height: 1.62; margin: 0 0 32px; max-width: 40ch; }
.rd-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Style Card promo plate — before/after compare slider + output swatches
   (2026-07-22 rewrite: the old version auto-cycled through 3 outputs one at
   a time behind a small static "your photo" corner chip — the transformation
   itself was passive to watch, not something a first-time visitor could
   feel. Reuses the exact --sx/clip-path compare mechanic already proven in
   BeautyScreen's .bw-ba, so before/after here is the same drag interaction
   a visitor may already know from Beauty. The 3 outputs become clickable
   swatches instead of a hidden timer, so "we can do many looks" is visible
   at a glance instead of paged through.) */
.rd-sc-plate {
  /* 2026-07-22: fixed in place, no shadow — was translateY(-3px) + box-shadow
     on hover, which read as floaty/unstable rather than a settled product
     frame. Border-color is now the only hover cue. */
  position: relative; width: 100%;
  border-radius: var(--rd-r-card); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--card);
  isolation: isolate;
  display: flex; flex-direction: column;
  transition: border-color 0.35s var(--rd-ease);
}
.rd-sc-plate:hover { border-color: var(--accent-line); }

.rd-sc-ba {
  position: relative; width: 100%; aspect-ratio: 16/9;
  cursor: ew-resize; user-select: none; outline: none; touch-action: none;
}
.rd-sc-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rd-sc-before { z-index: 1; }
.rd-sc-after { z-index: 2; clip-path: inset(0 0 0 var(--sx, 50%)); }
.rd-sc-handle {
  position: absolute; top: 0; bottom: 0; left: var(--sx, 50%); width: 2px;
  transform: translateX(-50%); background: rgba(255,255,255,0.9);
  box-shadow: 0 0 12px rgba(0,0,0,0.4); z-index: 4; pointer-events: none;
}
.rd-sc-knob {
  position: absolute; top: 50%; left: var(--sx, 50%); transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  color: #1a1a22; box-shadow: 0 6px 20px rgba(0,0,0,0.4); z-index: 5; pointer-events: none;
}
.rd-sc-label {
  position: absolute; top: 14px; z-index: 6;
  font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.9);
  background: rgba(8,12,10,0.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 6px 11px;
}
.rd-sc-label-before { left: 14px; }
.rd-sc-label-after { right: 14px; }

.rd-sc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--card); }
.rd-sc-swatches { display: flex; gap: 8px; min-width: 0; }
.rd-sc-swatch {
  flex: 0 0 auto; width: 52px; height: 52px; padding: 0;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 1.5px solid transparent; background: none;
  transition: border-color 0.2s var(--rd-ease);
}
.rd-sc-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-sc-swatch.on { border-color: var(--accent); }
.rd-sc-swatch:hover { border-color: var(--accent-line); }

/* Category toggle (Sản phẩm/Người) + shuffle — bottom-right of the plate,
   next to (not inside) the toggle per the user's own call on where the
   shuffle icon reads clearest. Compact pill, not the full-width Output-card
   variant of .rd-out-seg. */
.rd-sc-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.rd-sc-shuffle {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line); background: transparent; color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.18s var(--rd-ease);
}
.rd-sc-shuffle:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.rd-sc-shuffle:disabled { opacity: 0.35; cursor: default; }
.rd-sc-category-seg { display: inline-flex; width: auto; padding: 2px; gap: 2px; border-radius: 20px; --seg-pad: 2px; --seg-radius: 18px; }
/* Equal-width pills regardless of label length ("Sản phẩm" vs "Người") +
   more horizontal breathing room around the text than the old 14px. */
.rd-sc-category-seg button { flex: 0 0 auto; min-width: 84px; text-align: center; padding: 7px 18px; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .rd-sc-after { transition: none !important; }
}

@media (max-width: 820px) {
  .rd-sc-label { font-size: 9px; padding: 5px 9px; top: 10px; }
  .rd-sc-label-before { left: 10px; }
  .rd-sc-label-after { right: 10px; }
  .rd-sc-knob { width: 34px; height: 34px; font-size: 13px; }
  .rd-sc-swatch { width: 44px; height: 44px; }
  .rd-sc-bottom { flex-wrap: wrap; }
  .rd-sc-category-seg button { min-width: 68px; padding: 6px 14px; font-size: 10px; }
}

/* Gallery */
.rd-home-gallery { padding-top: 36px; border-top: 1px solid var(--line); margin-top: 0; }

/* Horizontal mode pills */
.rd-mode-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.rd-mode-pill {
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13px; font-weight: 500;
  color: var(--ink-dim); padding: 7px 15px; border-radius: 999px;
  transition: all 0.18s var(--rd-ease); white-space: nowrap;
}
.rd-mode-pill:hover { color: var(--ink); border-color: var(--line-2); }
.rd-mode-pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.rd-gallery-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rd-gallery-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.rd-gallery-meta { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rd-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }

/* Template card — image-only with overlay */
.rd-tmpl {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  position: relative; border-radius: var(--rd-r-inset); overflow: hidden;
  display: block;
}
.rd-tmpl-img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  transition: transform 0.35s var(--rd-ease);
}
.rd-tmpl:hover .rd-tmpl-img { transform: scale(1.04); }
.rd-tmpl-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.22s var(--rd-ease);
  pointer-events: none;
}
.rd-tmpl:hover .rd-tmpl-overlay { opacity: 1; }
.rd-tmpl-name {
  font-size: 12px; font-weight: 600; color: #fff; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== CREATE SCREEN ===== */
.rd-create-head { padding: 8px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.rd-back-link {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s;
}
.rd-back-link:hover { color: var(--ink); }
.rd-create-title { font-size: clamp(30px,4vw,48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); margin: 14px 0 0; }
.rd-no-prompt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }
.rd-create-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 36px; align-items: start; }
.rd-create-inputs { display: flex; flex-direction: column; gap: 24px; }
.rd-slot-label {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px;
  display: block;
}
.rd-slot-label .n { color: var(--accent); }
.rd-slot-hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); margin-top: 8px; }
.rd-upload-box {
  position: relative; border: 1px solid var(--line-2); border-radius: var(--rd-r-inset);
  background: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 11px), var(--card);
  cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s var(--rd-ease);
}
.rd-upload-box:hover { border-color: var(--accent-line); }
.rd-upload-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-upload-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; pointer-events: none; }
.rd-upload-icon { color: var(--ink-dim); }
.rd-upload-cta { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.rd-photo-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; }
.rd-result-stage {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--card);
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9;
}
.rd-result-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-faint); }
.rd-result-empty-label { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.rd-result-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Output loading — "Tráng ảnh" (docs/design-handoff-output-loading-animation.md).
   Photo-developing metaphor: soft aura blobs drifting inside a paper plate, a rare
   diagonal sweep (light through a window, not a scan bar), rotating serif caption,
   hairline progress that eases toward ~84% and holds — no assumption about total
   duration. Fills the parent result-stage (border/bg/aspect-ratio already supplied). */
.rd-load-wrap { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; animation: rdLoadIn 220ms ease-out; }
.rd-load-top { position: absolute; top: 14px; left: 18px; right: 18px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.rd-load-status { display: flex; align-items: center; gap: 8px; font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.2em; color: #766f85; }
.rd-load-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: rdLoadDot 2.8s ease-in-out infinite; }
.rd-load-brand { font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.16em; color: #766f85; }
/* Fixed dark charcoal (#1e1914 — same literal as light theme's --ink, already
   reused below for the vignette/blob-3 tint), not a theme token — the darkroom
   "tráng ảnh" metaphor reads as a dark process regardless of which site theme
   (Paper/Dark/aura) is active, so the plate and its on-plate text are hardcoded
   rather than following var(--inset)/var(--ink). The idle stage box underneath
   stays on its normal theme background; rd-load-wrap fades in over it (see
   rdLoadIn) instead of hard-cutting to dark the instant Generate is clicked. */
.rd-load-plate { position: relative; flex: 1; overflow: hidden; background: #1e1914; }
.rd-load-blob { position: absolute; border-radius: 50%; }
.rd-load-blob-1 { left: -20%; top: -25%; width: 90%; height: 80%; filter: blur(34px); background: radial-gradient(circle, var(--accent-soft), transparent 68%); animation: rdLoadDrift1 22s ease-in-out infinite; }
.rd-load-blob-2 { right: -15%; bottom: -20%; width: 80%; height: 75%; filter: blur(40px); background: radial-gradient(circle, var(--accent-soft), transparent 65%); animation: rdLoadDrift2 27s ease-in-out infinite; }
.rd-load-blob-3 { left: 15%; bottom: -10%; width: 70%; height: 55%; filter: blur(44px); background: radial-gradient(circle, rgba(0,0,0,.35), transparent 70%); animation: rdLoadDrift1 31s ease-in-out infinite reverse; }
.rd-load-sweep { position: absolute; top: -20%; bottom: -20%; left: 0; width: 44%; filter: blur(18px); background: linear-gradient(100deg, transparent, var(--accent-soft) 45%, transparent 90%); animation: rdLoadSweep 9.5s ease-in-out infinite; }
.rd-load-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(0,0,0,.35); pointer-events: none; }
.rd-load-grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rd-load-bottom { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 18px; }
.rd-load-caption { font-family: var(--rd-font-serif); font-style: italic; font-size: 15px; min-height: 20px; text-align: center; color: #f3eddf; opacity: 1; transition: opacity 0.4s ease; }
.rd-load-caption.hide { opacity: 0; }
.rd-load-hairline { width: 110px; height: 1px; background: #312e42; position: relative; }
.rd-load-hairline i { position: absolute; left: 0; top: 0; height: 1px; background: var(--accent); animation: rdLoadFill 80s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes rdLoadIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rdLoadDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rdLoadDrift1 { 0%, 100% { transform: translate(-6%,-4%) scale(1); } 50% { transform: translate(7%,6%) scale(1.18); } }
@keyframes rdLoadDrift2 { 0%, 100% { transform: translate(8%,6%) scale(1.1); } 50% { transform: translate(-6%,-8%) scale(1); } }
@keyframes rdLoadSweep { 0%, 70% { transform: translateX(-160%) rotate(10deg); opacity: 0; } 78% { opacity: .4; } 90% { opacity: .35; } 100% { transform: translateX(220%) rotate(10deg); opacity: 0; } }
@keyframes rdLoadFill { 0% { width: 3%; } 15% { width: 34%; } 40% { width: 56%; } 70% { width: 72%; } 100% { width: 84%; } }
@media (prefers-reduced-motion: reduce) {
  .rd-load-sweep, .rd-load-blob-1, .rd-load-blob-2, .rd-load-blob-3 { animation-play-state: paused; }
}

/* ===== COLLECTION SCREEN ===== */
.rd-seg {
  display: inline-flex; gap: 4px; background: var(--inset);
  border: 1px solid var(--line-2); border-radius: 11px; padding: 4px;
  box-shadow: var(--tog-well);
}
.rd-seg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink-dim); padding: 9px 15px; border-radius: 8px;
  transition: all 0.2s var(--rd-ease); white-space: nowrap;
}
.rd-seg-btn:hover { color: var(--ink); }
.rd-seg-btn.on { background: var(--tog-chip); color: var(--accent); box-shadow: var(--tog-pop); }
.rd-seg-count { font-family: var(--rd-font-mono); font-size: 11px; opacity: 0.8; }
.rd-coll-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; margin-top: 28px; }
.rd-new-tile {
  border: 1px dashed var(--line-2); background: transparent;
  border-radius: var(--rd-r-card); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--ink-dim); font-family: var(--rd-font-sans);
  font-size: 13.5px; font-weight: 600; transition: all 0.25s var(--rd-ease);
  min-height: 220px;
}
.rd-new-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rd-sc-tile { display: flex; flex-direction: column; }
.rd-sc-thumb { position: relative; border-radius: 10px; overflow: hidden; }
.rd-sc-thumb img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.rd-sc-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.2s; }
.rd-sc-thumb:hover .rd-sc-actions { opacity: 1; }
.rd-sc-action-btn {
  width: 30px; height: 30px; border: 0; border-radius: 7px;
  background: color-mix(in srgb, #000 55%, transparent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background 0.2s;
}
.rd-sc-action-btn:hover { background: color-mix(in srgb, #000 78%, transparent); }
.rd-sc-info { padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.rd-sc-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.rd-sc-meta { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-faint); }
.rd-gacha-note {
  display: flex; align-items: center; gap: 11px; font-size: 12.5px;
  color: var(--ink-dim); background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 16px; margin-bottom: 22px;
}
.rd-gacha-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.rd-gacha-tile { position: relative; display: flex; flex-direction: column; opacity: 0.92; }
.rd-gacha-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--rd-r-inset); filter: saturate(0.85); }
.rd-rarity {
  position: absolute; left: 9px; top: 9px; font-family: var(--rd-font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; border: 1px solid currentColor;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.rd-rarity.myth { color: #a78bd0; }
.rd-rarity.leg { color: #c9a24b; }
.rd-rarity.rare { color: #4ba6c9; }
.rd-gacha-name { font-weight: 600; font-size: 13.5px; margin-top: 10px; color: var(--ink-dim); }

/* ===== Dialogs & Toast ===== */
.rd-overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, #000 52%, transparent);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  z-index: 80; padding: 24px; animation: rdFadeIn 0.2s var(--rd-ease);
}
@keyframes rdFadeIn { from { opacity: 0; } }
.rd-dialog {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 28px; width: min(440px, 100%); box-shadow: var(--rd-shadow);
  animation: rdPopIn 0.25s var(--rd-ease);
}
@keyframes rdPopIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.rd-dialog-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 12px 0 4px; color: var(--ink); }
.rd-dialog-sub { font-size: 13.5px; color: var(--ink-dim); margin-bottom: 18px; line-height: 1.5; }
.rd-text-input {
  width: 100%; background: var(--inset); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 13px 15px; color: var(--ink);
  font-family: var(--rd-font-sans); font-size: 15px; outline: none; transition: border-color 0.2s;
}
.rd-text-input:focus { border-color: var(--accent); }
.rd-dialog-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.rd-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); border-radius: 999px;
  padding: 12px 20px; display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 18px 50px -20px rgba(0,0,0,0.6);
  z-index: 90; animation: rdToastUp 0.3s var(--rd-ease); white-space: nowrap;
}
@keyframes rdToastUp { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ===== GALLERY SCREEN ===== */
.gl-head {
  padding: 8px 0 24px; margin-bottom: 0;
  /* No border-bottom here — .gl-sticky-bar (directly below) already draws
     one, bled edge-to-edge via negative margin. A second content-width
     border on .gl-head sat right above it, reading as two thin parallel
     lines of different length. */
}
.gl-title { font-size: clamp(28px,4vw,44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin: 14px 0 10px; }
.gl-sub { color: var(--ink-dim); font-size: 15px; max-width: 54ch; line-height: 1.5; }

/* Sticky filter bar */
.gl-sticky-bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  margin-left: -24px; margin-right: -24px;
  padding: 8px 24px 6px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.gl-filterbar { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gl-filterbar::-webkit-scrollbar { display: none; }
.gl-ratio-bar { display: flex; gap: 5px; }
.gl-pill { font-size: 12.5px; font-weight: 500; color: var(--ink-dim); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; cursor: pointer; transition: all 0.18s var(--rd-ease); white-space: nowrap; flex-shrink: 0; }
.gl-pill:hover { color: var(--ink); border-color: var(--line-2); }
.gl-pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.gl-ratio-pill { font-size: 11px; font-weight: 500; color: var(--ink-faint); background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 4px 11px; cursor: pointer; transition: all 0.18s var(--rd-ease); white-space: nowrap; }
.gl-ratio-pill:hover { color: var(--ink-dim); border-color: var(--line-2); }
.gl-ratio-pill.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; }

/* SIUU Picks */
.gl-picks { padding: 20px 0 4px; }
.gl-picks-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.gl-picks-ey { font-family: var(--rd-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); }
.gl-picks-sub { font-size: 12px; color: var(--ink-faint); }
.gl-picks-row { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.gl-picks-row::-webkit-scrollbar { display: none; }
.gl-pick-card {
  flex-shrink: 0; width: 130px; height: 170px;
  border-radius: 11px; overflow: hidden; cursor: pointer; position: relative;
  border: 1px solid var(--line);
  transition: transform 0.22s var(--rd-ease), border-color 0.22s var(--rd-ease), box-shadow 0.22s var(--rd-ease);
}
.gl-pick-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.gl-pick-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--rd-ease); transform: scale(var(--gl-pick-zoom, 1)); }
.gl-pick-card:hover img { transform: scale(calc(var(--gl-pick-zoom, 1) * 1.04)); }
.gl-pick-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,6,18,0.85) 0%, rgba(8,6,18,0.2) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  padding: 10px 8px;
  opacity: 0; transition: opacity 0.22s var(--rd-ease);
}
.gl-pick-card:hover .gl-pick-overlay { opacity: 1; }
.gl-pick-moods { display: flex; flex-wrap: wrap; gap: 4px; }
.gl-pick-chip { font-size: 8.5px; font-weight: 500; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.10); border-radius: 4px; padding: 2px 6px; backdrop-filter: blur(4px); }
.gl-pick-use {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 6px; padding: 5px 9px; cursor: pointer;
  transition: transform .15s var(--rd-ease), box-shadow .2s var(--rd-ease), filter .15s var(--rd-ease);
  align-self: flex-start;
}
.gl-pick-use:hover { filter: brightness(1.04); }
.gl-pick-use:active { transform: translateY(1px); box-shadow: var(--btn-mat-press-soft); filter: brightness(.98); }

/* Section label */
.gl-section-label {
  font-family: var(--rd-font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  padding: 18px 0 10px;
}

/* Masonry grid */
.gl-masonry { display:grid; grid-template-columns:repeat(var(--gl-cols, 4), minmax(0,1fr)); gap:8px; align-items:start; }
.gl-masonry-col { display:grid; gap:8px; align-content:start; min-width:0; }

.gl-card { position: relative; break-inside: avoid; margin-bottom: 0; border-radius: 0; overflow: hidden; border: 1px solid var(--line); cursor: pointer; background: var(--inset); transition: transform 0.25s var(--rd-ease), box-shadow 0.25s var(--rd-ease), border-color 0.25s var(--rd-ease); }
.gl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.gl-card-img { position: relative; width: 100%; overflow: hidden; }
.gl-card-img img { width: 100%; height: auto; display: block; transition: none; }
.gl-card:hover .gl-card-img img { transform: none; }
.gl-card-img::after { content: none; }
.gl-card-meta { position: static; z-index: 3; padding: 10px 11px 12px; transform: none; transition: none; opacity: 1; }
.gl-card:hover .gl-card-meta { transform: none; opacity: 1; }
.gl-card-moods { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.gl-badge-cat { font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 4px; padding: 2px 6px; }
.gl-badge-ratio { font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 4px; padding: 2px 6px; display: inline-block; }
.gl-card-title { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; text-shadow: none; margin-bottom: 4px; }
.gl-card-cta { position: absolute; right: 8px; top: 8px; z-index: 4; opacity: 0; transform: translateY(-3px); transition: all 0.25s var(--rd-ease); }
.gl-card:hover .gl-card-cta { opacity: 1; transform: translateY(0); }
.gl-use-btn { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 7px; padding: 6px 11px; cursor: pointer; transition: transform .15s var(--rd-ease), box-shadow .2s var(--rd-ease), filter .15s var(--rd-ease); }
.gl-use-btn:hover { filter: brightness(1.04); }
.gl-use-btn:active { transform: translateY(1px); box-shadow: var(--btn-mat-press-soft); filter: brightness(.98); }

.gl-empty { text-align: center; padding: 80px 20px; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gl-empty p { font-size: 14px; line-height: 1.6; }

/* Detail view */
.gl-detail-wrap { padding-top: 8px; }
.gl-detail { display: grid; grid-template-columns: 55fr 45fr; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); overflow: hidden; margin-top: 14px; box-shadow: var(--rd-shadow); }
.gl-detail-img { position: relative; min-height: 620px; }
.gl-detail-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-detail-floats { position: absolute; left: 14px; top: 14px; z-index: 3; display: flex; gap: 7px; }
.gl-fbadge { font-family: var(--rd-font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(8,6,18,0.5); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 5px 9px; backdrop-filter: blur(6px); color: rgba(255,255,255,0.78); }
.gl-fbadge.em { color: var(--accent); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gl-detail-info { padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
.gl-detail-title { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); }
.gl-detail-desc { color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
.gl-detail-block { display: flex; flex-direction: column; gap: 9px; }
.gl-blabel { font-family: var(--rd-font-mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.gl-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.gl-chip { font-size: 12px; font-weight: 500; color: var(--ink); background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.gl-ratiosel { display: flex; gap: 7px; flex-wrap: wrap; }
.gl-rbtn { font-size: 12px; font-weight: 600; color: var(--ink-dim); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; cursor: pointer; transition: all 0.18s var(--rd-ease); }
.gl-rbtn small { font-family: var(--rd-font-mono); font-size: 9px; color: var(--ink-faint); letter-spacing: 0.05em; }
.gl-rbtn:hover { border-color: var(--line-2); color: var(--ink); }
.gl-rbtn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gl-detail-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

@media (max-width: 1000px) { .gl-detail { grid-template-columns: 1fr; } .gl-detail-img { min-height: 340px; } }
/* ===== DONE SCREEN ===== */
.rd-done {
  width: 100%; max-width: var(--rd-maxw); margin: 0 auto;
  padding: 28px var(--rd-pad-x) 60px;
  display: flex; flex-direction: column; gap: 24px;
}
.rd-done-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rd-done-credit-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px;
}
.rd-done-layout {
  display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start;
}
/* ── stage col ── */
.rd-done-stage-col { display: flex; flex-direction: column; gap: 14px; }
.rd-done-stage {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--inset); aspect-ratio: 3/4; max-height: 72vh;
  display: flex; align-items: center; justify-content: center;
}
.rd-done-img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; transition: filter 0.22s var(--rd-ease);
}
.rd-done-img--before {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; animation: rdFadeIn 0.15s var(--rd-ease);
}
.rd-done-compare-label {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); color: #fff; backdrop-filter: blur(6px);
  font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  animation: rdFadeIn 0.15s var(--rd-ease);
}
/* group tabs inside stage bottom */
.rd-done-group-tabs {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 4px; padding: 12px 14px;
  background: linear-gradient(to top, color-mix(in srgb, #000 65%, transparent), transparent);
  overflow-x: auto; scrollbar-width: none;
}
.rd-done-group-tabs::-webkit-scrollbar { display: none; }
.rd-done-group-tab {
  flex-shrink: 0; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.42); backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.78); border-radius: 999px;
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 13px; cursor: pointer;
  transition: all 0.2s var(--rd-ease);
}
.rd-done-group-tab:hover { background: rgba(0,0,0,0.65); color: #fff; }
.rd-done-group-tab.on {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
}
/* LUT thumbnail strip */
.rd-done-lut-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rd-done-lut-thumb {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; background: transparent; border: 0; padding: 0;
  transition: transform 0.18s var(--rd-ease);
}
.rd-done-lut-thumb:hover { transform: translateY(-2px); }
.rd-done-lut-preview {
  width: 72px; height: 72px; border-radius: 9px; overflow: hidden;
  border: 2px solid transparent; transition: border-color 0.18s;
}
.rd-done-lut-thumb.on .rd-done-lut-preview { border-color: var(--accent); }
.rd-done-lut-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter 0.2s;
}
.rd-done-lut-label {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--ink-dim); text-transform: uppercase; white-space: nowrap;
  transition: color 0.18s;
}
.rd-done-lut-thumb.on .rd-done-lut-label { color: var(--accent); }
/* ── sidebar ── */
.rd-done-sidebar {
  position: sticky; top: calc(var(--rd-bar-h, 58px) + 24px);
  display: flex; flex-direction: column; gap: 14px;
}
.rd-done-actions { display: flex; flex-direction: column; gap: 8px; }
.rd-done-action-btn { width: 100%; justify-content: center; }
.rd-done-export-error {
  font-size: 12.5px; color: #a5453a; background: color-mix(in srgb, #a5453a 8%, transparent);
  border: 1px solid color-mix(in srgb, #a5453a 25%, transparent);
  border-radius: 9px; padding: 9px 12px; line-height: 1.45;
}
.rd-done-divider { height: 1px; background: var(--line); margin: 4px 0; }
.rd-done-retry { color: var(--ink-dim); }
.rd-done-compare-btn {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  width: 100%; border: 1px solid var(--line-2); background: var(--card);
  border-radius: var(--rd-r-btn); padding: 10px 16px; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13px; color: var(--ink-dim);
  transition: all 0.2s var(--rd-ease); user-select: none;
}
.rd-done-compare-btn:hover, .rd-done-compare-btn.active {
  border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft);
}
.rd-done-active-lut {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 9px; background: var(--card);
  border: 1px solid var(--line);
}
.rd-done-active-lut-label {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rd-done-active-lut-name {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent); font-weight: 600;
}
/* responsive */
@media (max-width: 900px) {
  .rd-done-layout { grid-template-columns: 1fr; }
  .rd-done-sidebar { position: static; }
  .rd-done-stage { aspect-ratio: 1/1; max-height: 80vw; }
  .rd-done-actions { flex-direction: row; flex-wrap: wrap; }
  .rd-done-action-btn { flex: 1 1 calc(50% - 4px); }
}
@media (max-width: 600px) {
  .rd-done { padding: 20px 20px 48px; }
  .rd-done-lut-preview { width: 60px; height: 60px; }
}

/* ===== PROFILE SCREEN ===== */
.rd-profile {
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: 0 var(--rd-pad-x) 72px;
  display: flex; flex-direction: column; gap: 32px;
}
/* hero */
.rd-profile-hero {
  position: relative; border-radius: 0 0 20px 20px;
  overflow: hidden; margin: 0 calc(-1 * var(--rd-pad-x));
}
.rd-profile-hero-bg {
  position: absolute; inset: 0;
  background: var(--grad-soft, linear-gradient(120deg, var(--accent-soft), var(--card-2)));
  z-index: 0;
}
[data-theme="dark"] .rd-profile-hero-bg {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, rgba(111,140,255,0.22) 50%, rgba(176,108,255,0.15) 100%);
}
[data-theme="light"] .rd-profile-hero-bg {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, rgba(42,33,22,0.06) 100%);
}
.rd-profile-hero-inner {
  position: relative; z-index: 1; padding: 24px var(--rd-pad-x) 36px;
}
.rd-profile-back { color: var(--ink-dim) !important; }
.rd-profile-identity {
  display: flex; align-items: flex-start; gap: 22px; margin-top: 22px;
}
.rd-profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); border: 2px solid var(--accent-line);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
}
.rd-profile-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.rd-profile-name-row { display: flex; align-items: center; gap: 10px; }
.rd-profile-name { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.rd-profile-pro-badge {
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--rd-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; padding: 3px 9px; border-radius: 5px;
}
.rd-profile-email { font-size: 13px; color: var(--ink-dim); }
.rd-profile-streak-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent); border-radius: 999px;
  font-family: var(--rd-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; padding: 5px 12px; width: fit-content;
}
/* stats strip */
.rd-profile-stats-strip {
  display: flex; align-items: stretch; gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.rd-profile-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 20px 12px;
}
.rd-profile-stat-value {
  font-size: 26px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--ink); line-height: 1;
}
.rd-profile-stat-label {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}
.rd-profile-stat-divider { width: 1px; background: var(--line); flex-shrink: 0; }
/* section */
.rd-profile-section { display: flex; flex-direction: column; gap: 16px; }
.rd-profile-section-head {
  display: flex; align-items: center; justify-content: space-between;
}
.rd-profile-section-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
/* cards row */
.rd-profile-cards-row {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rd-profile-card-tile { flex-shrink: 0; width: 130px; display: flex; flex-direction: column; gap: 8px; }
.rd-profile-card-thumb {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 3/4; background: var(--inset);
}
.rd-profile-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-profile-card-thumb-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.rd-profile-card-reuse {
  position: absolute; bottom: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 7px; border: 0;
  background: color-mix(in srgb, #000 52%, transparent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); cursor: pointer; opacity: 0;
  transition: opacity 0.18s;
}
.rd-profile-card-thumb:hover .rd-profile-card-reuse { opacity: 1; }
.rd-profile-card-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-profile-card-new {
  flex-shrink: 0; width: 130px; aspect-ratio: 3/4;
  border: 1.5px dashed var(--line-2); border-radius: 10px;
  background: transparent; cursor: pointer; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--rd-ease);
}
.rd-profile-card-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* empty */
.rd-profile-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 24px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; text-align: center; color: var(--ink-faint); font-size: 13.5px;
}
/* quick actions */
.rd-profile-quick-actions { display: flex; flex-direction: column; gap: 6px; }
.rd-profile-quick-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 18px; cursor: pointer; transition: all 0.18s var(--rd-ease);
  font-family: var(--rd-font-sans); font-size: 14px; font-weight: 500; color: var(--ink);
}
.rd-profile-quick-btn span { flex: 1; }
.rd-profile-quick-btn:hover { border-color: var(--line-2); background: var(--card-2); }
.rd-profile-quick-btn--pro {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}
.rd-profile-quick-btn--pro:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
@media (max-width: 600px) {
  .rd-profile { padding: 0 20px 56px; }
  .rd-profile-stat-value { font-size: 20px; }
  .rd-profile-card-tile { width: 110px; }
  .rd-profile-card-new { width: 110px; }
}

/* ===== SETTINGS SCREEN v2 — Aura system ===== */

/* Accent CSS vars (default = Aurora night) — written at runtime by applyAuraAccent() */
:root {
  --accent:      #a87545;
  --accent-soft: rgba(168,117,69,.13);
  --accent-line: rgba(168,117,69,.38);
  --accent-ink:  #fff9ee;
  --aura-grad:   linear-gradient(135deg,#7d5533,#a87545,#c99b6b);
  --aura-grad-text: linear-gradient(135deg,#7d5533,#a87545,#c99b6b);
}

/* Buttons are FLAT + material across all auras (see .rd-btn-primary). The Aurora
   signature gradient survives only on brand surfaces — logo + .rd-st-title text. */

@keyframes rd-flow { to { background-position: 200% center } }

.rd-st-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0 22px; max-width: 900px; margin: 0 auto;
}
.rd-st-title {
  font-size: 30px; font-weight: 800; letter-spacing: -.01em;
  color: var(--accent);
  background: none;
  animation: none;
}
.rd-st-close {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--card-2);
  color: var(--ink-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: color .18s var(--rd-ease);
  flex-shrink: 0;
}
.rd-st-close:hover { color: var(--ink); }

.rd-st-body {
  max-width: 900px; margin: 0 auto; padding: 0 0 80px;
}
/* 2-col at desktop, stacked on mobile */
.rd-st-cols { display: flex; flex-direction: column; gap: 0; }
.rd-st-col-right { order: -1; } /* credits first on mobile */
@media (min-width: 820px) {
  .rd-st-cols {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 32px; align-items: start;
  }
  .rd-st-col-right { order: 0; }
}
.rd-st-grp { margin-bottom: 18px; }
.rd-st-grp-label {
  font-family: var(--rd-font-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.rd-st-ic { color: var(--accent); }

/* Segmented lang control */
.rd-st-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--inset); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px; box-shadow: var(--tog-well);
  --seg-pad: 5px; --seg-radius: 8px;
}
.rd-st-seg button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink-dim); border-radius: 8px;
  padding: 10px 8px; transition: all .2s var(--rd-ease);
}
.rd-st-seg button.on {
  background: var(--tog-chip);
  color: var(--accent);
  box-shadow: var(--tog-pop);
}

/* Aura picker */
.rd-st-auras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.rd-st-aura {
  --aura-pick: var(--accent);
  --aura-pick-soft: var(--accent-soft);
  --aura-pick-line: var(--accent-line);
  --aura-pick-dot: var(--aura-grad);
  min-width: 0;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 97%, white 3%), color-mix(in srgb, var(--card-2) 90%, transparent)),
    var(--card);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px 5px 7px;
  border-radius: 13px;
  font-family: var(--rd-font-sans);
  box-shadow: var(--aura-btn-pop, var(--btn-mat));
  transform: translateY(0);
  transition:
    transform .18s var(--rd-ease),
    box-shadow .18s var(--rd-ease),
    border-color .18s var(--rd-ease),
    background .18s var(--rd-ease);
}
[data-theme="light"] .rd-st-aura {
  --aura-btn-pop: inset 0 1px 0 rgba(255,255,255,.76), 0 1px 3px rgba(42,33,22,.13);
}
[data-theme="dark"] .rd-st-aura {
  --aura-btn-pop: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.28);
}
.rd-st-aura:hover {
  transform: translateY(-.5px);
  border-color: color-mix(in srgb, var(--aura-pick) 35%, var(--line-2));
  box-shadow: var(--aura-btn-hover, var(--btn-mat-hover));
}
[data-theme="light"] .rd-st-aura:hover {
  --aura-btn-hover: inset 0 1px 0 rgba(255,255,255,.84), 0 2px 5px rgba(42,33,22,.16);
}
[data-theme="dark"] .rd-st-aura:hover {
  --aura-btn-hover: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.32);
}
.rd-st-aura.on {
  transform: translateY(.5px);
  border-color: color-mix(in srgb, var(--aura-pick) 44%, var(--line-2));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tog-chip) 82%, var(--aura-pick-soft) 18%), color-mix(in srgb, var(--inset) 78%, var(--aura-pick-soft) 22%)),
    var(--tog-chip);
  box-shadow:
    inset 0 1px 2px rgba(42,33,22,.14),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px color-mix(in srgb, var(--aura-pick) 12%, transparent);
}
[data-theme="dark"] .rd-st-aura.on {
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--aura-pick) 14%, transparent);
}
.rd-st-aura-dot {
  width: 36px; height: 36px; border-radius: 11px; position: relative;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); display: block;
  background: var(--aura-pick-dot);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 3px 8px -7px color-mix(in srgb, var(--aura-pick) 52%, #000);
  transition: all .2s var(--rd-ease);
}
.rd-st-aura.on .rd-st-aura-dot {
  border-color: color-mix(in srgb, var(--ink) 42%, var(--aura-pick));
  transform: translateY(.5px) scale(.985);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.16),
    0 0 0 2px color-mix(in srgb, var(--aura-pick) 12%, transparent);
}
.rd-st-aura-lock {
  position: absolute; right: -3px; top: -3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--aura-pick); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; border: 2px solid var(--card);
}
/* Pro auras a non-Pro account hasn't unlocked yet — swatch reads muted rather
   than fully off, since the button still works (tap shows the upgrade toast). */
.rd-st-aura.locked .rd-st-aura-dot { filter: saturate(.4) brightness(.94); }
.rd-st-aura.locked .rd-st-aura-lock { filter: saturate(.4); }
.rd-st-aura-nm {
  max-width: 100%;
  font-size: 10.5px; color: var(--ink-dim); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-st-aura.on .rd-st-aura-nm { color: var(--ink); }
.rd-st-aura-sub {
  font-family: var(--rd-font-mono); font-size: 8px;
  letter-spacing: .04em; color: var(--ink-faint); text-transform: uppercase;
  white-space: nowrap;
}

/* Day / Night row */
.rd-st-dn {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; gap: 12px;
}
.rd-st-dn-lab { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rd-st-dn-lab span {
  display: block; font-family: var(--rd-font-mono);
  font-size: 9.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .12em; margin-top: 2px;
}
.rd-st-toggle {
  display: inline-flex; border: 1px solid var(--line-2);
  border-radius: 999px; padding: 3px; background: var(--inset); gap: 2px;
  flex-shrink: 0; box-shadow: var(--tog-well); --seg-pad: 3px; --seg-radius: 999px;
}
.rd-st-toggle button {
  font-family: var(--rd-font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); padding: 6px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .25s var(--rd-ease); white-space: nowrap;
}
.rd-st-toggle button.on {
  background: var(--tog-chip);
  color: var(--accent);
  box-shadow: var(--tog-pop);
}

/* List rows */
.rd-st-list { border-top: 1px solid var(--line); margin-bottom: 18px; }
.rd-st-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  color: var(--ink-dim); font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: color .2s;
}
.rd-st-row:hover { color: var(--ink); }
.rd-st-row-ic { color: var(--accent); flex-shrink: 0; }
.rd-st-row-ch { margin-left: auto; color: var(--ink-faint); }

/* ===== SETTINGS SCREEN (legacy 2-col — kept for CSS classes still referenced) ===== */
--rd-danger: #e05555;
.rd-settings-layout {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  align-items: start; margin-top: 4px;
}
.rd-settings-nav {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px; overflow: hidden;
  align-self: start;
}
.rd-settings-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-dim); padding: 10px 13px; border-radius: 9px;
  transition: all 0.18s var(--rd-ease);
}
.rd-settings-nav-item:hover { background: var(--inset); color: var(--ink); }
.rd-settings-nav-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rd-settings-nav-item.danger { color: #e05555; }
.rd-settings-nav-item.danger:hover { background: color-mix(in srgb, #e05555 10%, transparent); }
.rd-settings-nav-badge {
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  font-family: var(--rd-font-mono); font-size: 9px; font-weight: 700;
  padding: 2px 7px; min-width: 20px; text-align: center;
}
.rd-settings-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; min-height: 400px;
}
.rd-settings-panel-inner { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.rd-settings-section-title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 8px;
}
/* rows */
.rd-settings-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.rd-settings-row:last-child { border-bottom: 0; }
.rd-settings-row--action { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.rd-settings-row-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.rd-settings-row-sub { font-size: 12.5px; color: var(--ink-dim); }
.rd-settings-divider { height: 1px; background: var(--line); }
/* account */
.rd-settings-avatar-row { display: flex; align-items: center; gap: 16px; }
.rd-settings-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-soft); border: 1.5px solid var(--accent-line);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
}
/* balance */
.rd-settings-balance-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.rd-settings-balance-label { font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.rd-settings-balance-value { display: flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.04em; }
.rd-settings-balance-unit { font-size: 13px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
/* pro card */
.rd-settings-pro-card {
  background: var(--card); border: 1px solid var(--accent-line);
  border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.rd-settings-pro-header { display: flex; align-items: center; gap: 12px; }
.rd-settings-pro-badge {
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--rd-font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; padding: 4px 10px; border-radius: 5px;
}
.rd-settings-pro-headline { font-size: 16px; font-weight: 700; color: var(--ink); }
.rd-settings-pro-feats { display: flex; flex-direction: column; gap: 8px; }
.rd-settings-pro-feat { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-dim); }
.rd-settings-empty-hist {
  display: flex; align-items: center; gap: 12px; padding: 18px;
  background: var(--inset); border-radius: 10px; color: var(--ink-faint);
  font-size: 13px;
}
/* lang */
.rd-settings-lang-option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  border-radius: 11px; padding: 15px 18px; transition: all 0.18s var(--rd-ease);
  font-family: var(--rd-font-sans);
}
.rd-settings-lang-option:hover { border-color: var(--line-2); background: var(--inset); }
.rd-settings-lang-option.on { border-color: var(--accent-line); background: var(--accent-soft); }
.rd-settings-lang-flag { font-size: 22px; flex-shrink: 0; }
.rd-settings-lang-name { font-size: 14.5px; font-weight: 600; color: var(--ink); flex: 1; }
.rd-settings-lang-active {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 5px; padding: 3px 9px;
}
/* theme */
.rd-settings-theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-settings-theme-card {
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start; transition: all 0.18s var(--rd-ease);
  font-family: var(--rd-font-sans); font-size: 13px; color: var(--ink-dim); font-weight: 500;
}
.rd-settings-theme-card:hover { border-color: var(--line-2); }
.rd-settings-theme-card.on { border-color: var(--accent-line); color: var(--ink); }
.rd-settings-theme-preview {
  width: 100%; height: 56px; border-radius: 8px; border: 1px solid var(--line);
}
.rd-settings-theme-preview.dark  { background: #0b0a18; }
.rd-settings-theme-preview.light { background: #ece4d7; }
/* toggle */
.rd-toggle {
  width: 44px; height: 25px; border-radius: 999px; border: 0;
  background: var(--line-2); cursor: pointer; position: relative;
  transition: background 0.22s var(--rd-ease); flex-shrink: 0;
}
.rd-toggle::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  transition: transform 0.22s var(--rd-ease);
}
.rd-toggle.on { background: var(--accent); }
.rd-toggle.on::after { transform: translateX(19px); }
/* danger */
.rd-settings-danger-label { font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #e05555; }
.rd-settings-danger-note { font-size: 12.5px; color: var(--ink-faint); }
.rd-btn-danger { background: #e05555; color: #fff; border: 1px solid #e05555; border-radius: var(--rd-r-btn); padding: 9px 16px; cursor: pointer; font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.rd-btn-danger:hover { background: #c44; border-color: #c44; }
.rd-btn-danger-ghost { border: 1px solid #e05555; color: #e05555; background: transparent; border-radius: var(--rd-r-btn); padding: 9px 16px; cursor: pointer; font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; }
.rd-btn-danger-ghost:hover { background: color-mix(in srgb, #e05555 10%, transparent); }
/* avatar button */
.rd-avatar-btn { border: 0; background: transparent; cursor: pointer; padding: 0; border-radius: 50%; display: inline-flex; }
/* responsive */
@media (max-width: 860px) {
  .rd-settings-layout { grid-template-columns: 1fr; }
  .rd-settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .rd-settings-nav-item { flex: 1 1 auto; justify-content: center; }
}

/* ===== CATEGORY SECTIONS ===== */
.rd-cats { margin-top: 48px; display: flex; flex-direction: column; }
.rd-cat-section {
  display: flex; flex-direction: column; gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 44px; padding-bottom: 64px;
}
.rd-cat-section:first-child { border-top: none; padding-top: 0; }
/* Rule-line rhythm: fixed 20px above the line, 40px below it, identical across sections. */
.rd-cat-section--thietke { margin-top: -44px; padding-top: 66px; }
.rd-cat-section--bienhinh { margin-top: 27px; }
.rd-cat-section--lamdep { margin-top: -44px; }

/* Banner — editorial section header, no card */
.cat-banner {
  position: relative; min-height: 240px;
  display: flex; align-items: center;
  overflow: visible; isolation: isolate;
}

.cat-banner-title-wrap {
  position: relative; overflow: visible;
}

/* Text block */
.cat-banner-text {
  position: relative; z-index: 4; max-width: 52%;
  padding: 0; display: flex; flex-direction: column;
  gap: 10px; flex-shrink: 0;
}
.cat-banner-eyebrow {
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
}
.cat-banner-title {
  position: relative; z-index: 1;
  font-size: clamp(56px, 6.5vw, 100px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); margin: 0;
}
.cat-banner-desc { font-size: 14px; color: var(--accent); line-height: 1.45; margin: 0; }
.cat-banner-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 500;
  transition: all 0.22s var(--rd-ease); width: fit-content; margin-top: 4px;
}
.cat-banner-cta:hover { background: var(--accent); color: var(--accent-ink); }

/* Left-to-right veil — fades fast so watermark is legible on the right */
.cat-banner-veil {
  position: absolute; left: 0; top: 0; bottom: 0; width: 60%;
  background: linear-gradient(90deg, var(--bg) 22%, transparent 78%);
  pointer-events: none; z-index: 3;
}

/* Image fan — right side */
.cat-banner-fan {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; z-index: 2;
}
.cat-banner-fan img {
  width: auto; height: 168px; aspect-ratio: 3/4;
  object-fit: cover; border-radius: 11px; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--line-2), 0 14px 40px -8px rgba(0,0,0,.6);
}
.cat-banner-fan img:not(:first-child) { margin-left: -24px; }
.cat-banner-fan img:nth-child(1) { transform: rotate(-13deg) translateY(8px);  z-index: 1; }
.cat-banner-fan img:nth-child(2) { transform: rotate(-4deg)  translateY(-8px); z-index: 2; }
.cat-banner-fan img:nth-child(3) { transform: rotate(3deg)   translateY(-6px); z-index: 3; }
.cat-banner-fan img:nth-child(4) { transform: rotate(11deg)  translateY(10px); z-index: 4; }

/* Category card grids */
.rd-cat-grid { display: grid; gap: 10px; }

/* Thiết Kế: big featured left + 2 cols right */
.rd-cat-grid--thietke {
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}
.rd-cat-grid--thietke .card-featured { grid-row: 1 / 3; }
.rd-cat-grid--thietke .card-wide { grid-column: span 2; }

/* Làm Đẹp: masonry-feel alternating */
.rd-cat-grid--lamdep {
  grid-template-columns: 1fr 1fr 1fr 1.4fr 1fr;
}
.rd-cat-grid--lamdep .card-lg { grid-column: span 2; }

/* Biến Hình: wide banner top + row below */
.rd-cat-grid--bienhinh {
  grid-template-columns: repeat(6, 1fr);
}
.rd-cat-grid--bienhinh .card-banner { grid-column: span 3; }
.rd-cat-grid--bienhinh .card-wide2 { grid-column: span 2; }

/* Dịch Vụ: 2 large + 2 medium */
.rd-cat-grid--dichvu {
  grid-template-columns: 1fr 1fr 0.8fr 0.8fr;
}
.rd-cat-grid--dichvu .card-lg { grid-row: span 2; }

/* Base card in category grid */
.rd-cat-card {
  position: relative; border-radius: var(--rd-r-inset); overflow: hidden;
  cursor: pointer; display: block; border: 0; background: transparent; padding: 0;
}
.rd-cat-card img {
  width: 100%; height: 100%; object-fit: cover; display: block; min-height: 140px;
  transition: transform 0.4s var(--rd-ease);
}
.rd-cat-card:hover img { transform: scale(1.04); }
.rd-cat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 45%);
  opacity: 0; transition: opacity 0.25s var(--rd-ease); pointer-events: none;
}
.rd-cat-card:hover .rd-cat-card-overlay { opacity: 1; }
.rd-cat-card-label {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  font-size: 12px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== SELLER SCREEN (sl-*) ===== */
.sl-screen { max-width: min(1440px, calc(100vw - 96px)); margin: 0 auto; }
.sl-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.sl-eyebrow {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.sl-eyebrow-rule { width: 30px; height: 1px; background: var(--line-2); }
.sl-eyebrow-label { color: var(--accent); }
.sl-title {
  font-size: clamp(28px, 4vw, 46px); font-weight: 800;
  letter-spacing: -0.03em; margin-top: 11px; color: var(--ink);
}
.sl-submode {
  display: inline-flex; gap: 3px; background: var(--inset);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 4px; margin-bottom: 28px; box-shadow: var(--tog-well); --seg-pad: 4px; --seg-radius: 9px;
}
.sl-submode button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink-dim); padding: 10px 18px; border-radius: 9px;
  transition: all 0.2s var(--rd-ease); display: inline-flex;
  align-items: center; gap: 8px; white-space: nowrap;
}
.sl-submode button.on { background: var(--tog-chip); color: var(--accent); box-shadow: var(--tog-pop); }
/* Fixed-thumb people picker: 4 equal-width buttons so the hardcoded 25% thumb
   lines up exactly with the first cell (was too narrow for "Một người"). */
.sl-people-seg { width: 100%; }
.sl-people-seg button { flex: 1; justify-content: center; padding-left: 8px; padding-right: 8px; }
.sl-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 36px; align-items: start;
}
/* Grid items default to min-width:auto (= max-content of the widest descendant, e.g. a
   horizontal scroll rail) which blows the 1fr track past the viewport on mobile. */
.sl-grid > div { min-width: 0; }
/* Result column sticks while the (taller) input column scrolls — kills the dead space below the stage.
   top must clear the fixed AppBar height (same value as .sc-result on Create) — 20px used to sit the
   panel partly behind the bar, hiding its header/top border once scrolled. */
.sl-grid > div:last-child { position: sticky; top: 82px; }
.sl-inputs { display: flex; flex-direction: column; gap: 22px; }
.sl-field-label {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px;
}
.sl-field-n { color: var(--accent); }

/* upload slot */
.sl-slot {
  border-radius: 11px; overflow: hidden; border: 1px solid var(--line);
  background: var(--inset); position: relative; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.2s;
}
.sl-slot:hover, .sl-slot.drag { border-color: var(--accent-line); }
.sl-slot.drag { border-style: solid; background: var(--accent-soft, var(--inset)); }
.sl-slot img { width: 100%; height: 100%; object-fit: cover; }
.sl-slot-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-faint); }
.sl-slot-ic { font-size: 24px; color: var(--ink-dim); }
.sl-slot-t {
  font-family: var(--rd-font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.sl-slot-edit {
  position: absolute; right: 9px; top: 9px;
  font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff;
  background: rgba(8,6,18,.55); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 5px 9px; backdrop-filter: blur(6px);
}

/* segmented chips */
.sl-seg {
  display: flex; gap: 7px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; user-select: none; touch-action: pan-x;
  min-width: 0; /* scroll rails default to max-content in a grid/flex track — this lets it clip+scroll instead of blowing out the column */
}
.sl-seg.dragging { cursor: grabbing; }
.sl-seg::-webkit-scrollbar { display: none; }
.sl-seg button {
  flex-shrink: 0;
  font-family: var(--rd-font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink-dim); background: var(--inset); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 15px; cursor: pointer;
  transition: all 0.2s var(--rd-ease);
}
.sl-seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .sl-seg { cursor: grab; }
}

/* concept presets grid */
.sl-presets { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.sl-preset {
  cursor: pointer; background: transparent; border: 0;
  text-align: left; padding: 0;
}
.sl-preset-img {
  position: relative; aspect-ratio: 4/5; border-radius: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--inset);
  transition: transform 0.25s var(--rd-ease), border-color 0.2s;
}
.sl-preset-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-preset:hover .sl-preset-img { transform: translateY(-2px); border-color: var(--accent-line); }
.sl-preset.on .sl-preset-img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sl-preset-check {
  position: absolute; right: 7px; top: 7px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: none; align-items: center; justify-content: center; font-size: 11px;
}
.sl-preset.on .sl-preset-check { display: flex; }
.sl-preset-name { font-size: 13px; font-weight: 700; margin-top: 8px; letter-spacing: -0.01em; color: var(--ink); }
.sl-preset-desc {
  font-family: var(--rd-font-mono); font-size: 9px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}

/* model avatars */
.sl-models { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; align-items: flex-start; }
.sl-model {
  flex-shrink: 0; width: 96px; cursor: pointer;
  background: transparent; border: 0; text-align: center; padding: 0;
}
.sl-model-avatar {
  position: relative;
  width: 96px; height: 120px; border-radius: 11px; overflow: hidden;
  border: 2px solid transparent; background: var(--inset);
  display: flex; align-items: center; justify-content: center; color: var(--ink-dim);
  transition: border-color 0.2s;
}
.sl-model-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-model.on .sl-model-avatar { border-color: var(--accent); }
.sl-model-name { font-size: 11px; font-weight: 600; margin-top: 6px; color: var(--ink-dim); }
.sl-model.on .sl-model-name { color: var(--accent); }

/* visual option cards (scene / pose) */
.sl-mini-label {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em; font-weight: 600;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.sl-visual-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.sl-visual-option {
  cursor: pointer; background: transparent; border: 0;
  text-align: left; padding: 0;
}
.sl-visual-option-img {
  position: relative; aspect-ratio: 1/1; border-radius: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--inset);
  transition: transform 0.25s var(--rd-ease), border-color 0.2s;
}
.sl-visual-option-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-visual-option:hover .sl-visual-option-img { transform: translateY(-1px); border-color: var(--accent-line); }
.sl-visual-option.on .sl-visual-option-img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sl-visual-option-check {
  position: absolute; right: 5px; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: none; align-items: center; justify-content: center; font-size: 9px;
}
.sl-visual-option.on .sl-visual-option-check { display: flex; }
/* Zoom-to-full-size button for scene thumbs — top-left since top-right is
   already taken by the selection checkmark. (Not used on model avatars: that
   preview photo is only a demographic stand-in, not what the render outputs.) */
.sl-thumb-zoom {
  position: absolute; left: 5px; top: 5px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(20,14,8,.5); backdrop-filter: blur(3px);
  color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sl-visual-option-name {
  font-size: 10.5px; font-weight: 600; margin-top: 6px; color: var(--ink-dim);
  line-height: 1.3;
}
.sl-visual-option.on .sl-visual-option-name { color: var(--accent); }

/* compact form row */
.sl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sl-field label {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 6px;
}
.sl-field select {
  width: 100%; font-family: var(--rd-font-sans); font-size: 13.5px; color: var(--ink);
  background: var(--inset); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sl-field select:focus { outline: none; border-color: var(--accent-line); }

/* generate button */
.sl-gen-btn {
  font-weight: 600; font-size: 14.5px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #000);
  padding: 14px; cursor: pointer; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: var(--btn-mat);
  transition: all 0.25s var(--rd-ease); font-family: var(--rd-font-sans); width: 100%;
}
.sl-gen-btn:hover:not(:disabled) { filter: brightness(1.04); }
.sl-gen-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--btn-mat-press); filter: brightness(.98); }
.sl-gen-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.sl-cost {
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}
.sl-cost span { color: var(--accent); }
.sl-error {
  font-size: 12.5px; color: #a5453a; background: color-mix(in srgb, #a5453a 8%, transparent);
  border: 1px solid color-mix(in srgb, #a5453a 25%, transparent);
  border-radius: 9px; padding: 9px 12px; line-height: 1.45;
}

/* extra reference slots (product mode) — progressive disclosure like Studio */
.sl-extra { margin-top: 10px; }
.sl-extra-toggle {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: transparent; border: 1px dashed var(--line-2); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; text-align: left;
  transition: border-color .18s, background .18s;
}
.sl-extra-toggle:hover { border-color: var(--accent); background: var(--inset); }
.sl-extra-toggle-main { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sl-extra-toggle-sub { font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sl-extra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.sl-extra-slot {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; cursor: pointer; transition: border-color .18s;
}
.sl-extra-slot:hover, .sl-extra-slot.drag { border-color: var(--line-2); }
.sl-extra-slot.filled { border-color: var(--accent); }
.sl-extra-slot.drag { border-color: var(--accent); border-style: solid; }
.sl-extra-thumb {
  aspect-ratio: 1/1; border-radius: 7px; overflow: hidden; background: var(--inset);
  display: flex; align-items: center; justify-content: center;
}
.sl-extra-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-extra-plus { font-size: 18px; color: var(--ink-faint); }
.sl-extra-name { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.sl-extra-hint { font-size: 10px; line-height: 1.35; color: var(--ink-faint); }
.sl-extra-remove {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sl-size-field { margin-top: 10px; }
.sl-size-field input {
  width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font-size: 12.5px; color: var(--ink); font-family: var(--rd-font-sans);
}
.sl-size-field input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 820px) {
  .sl-extra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sl-extra-hint { display: none; }
}

/* result label */
.sl-res-label {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px;
}
.sl-res-arrow { color: var(--accent); margin-right: 4px; }

/* stage */
.sl-stage {
  position: relative; aspect-ratio: 4/5;
  border-radius: 13px; overflow: hidden; border: 1px solid var(--line);
  background: var(--card); display: flex; align-items: center;
  justify-content: center; isolation: isolate;
}
.sl-stage-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--ink-faint); font-family: var(--rd-font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 28px;
}
.sl-stage-empty span:last-child { max-width: 220px; line-height: 1.7; }
.sl-stage-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rd-font-sans); font-size: 22px; color: var(--ink-dim);
  background: var(--inset); border: 1px dashed var(--line-2);
}
.sl-result-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-compare-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 3; transition: opacity 0.15s;
}
.sl-stage.comparing .sl-compare-img { opacity: 1; }
/* .sl-foil / .sl-sweep: holographic sheen + light sweep removed per brand rule
   "premium via material, not bling — no glossy screen-sweeps" (Metal sheen rejected Jun 25).
   Elements still rendered by SellerScreen.tsx (Codex is mid-work on that file) — hidden here. */
.sl-foil, .sl-sweep { display: none; }
.sl-badge {
  position: absolute; left: 12px; top: 12px; z-index: 6;
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  background: #fff9ee; border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 6px 11px;
}
.sl-compare-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; background: rgba(8,6,18,.6);
  border-radius: 999px; padding: 6px 10px; opacity: 0; transition: opacity 0.15s;
}
.sl-stage.comparing .sl-compare-tag { opacity: 1; }
.sl-compare-btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  font-family: var(--rd-font-sans); font-weight: 600; font-size: 12px;
  color: #fff; background: rgba(8,6,18,.6); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  backdrop-filter: blur(8px); display: inline-flex; gap: 7px; align-items: center;
  user-select: none;
}

/* action buttons */
.sl-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.sl-btn {
  font-weight: 600; font-size: 14px; border-radius: 10px; padding: 12px;
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px; transition: all 0.25s var(--rd-ease);
  font-family: var(--rd-font-sans); white-space: nowrap;
}
.sl-btn-em { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.sl-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.sl-btn-ghost:hover { background: var(--accent-soft); border-color: var(--ink-dim); }
.sl-act-row { display: flex; gap: 9px; }
.sl-act-row .sl-btn { flex: 1; }
.sl-btn-finish {
  background: var(--inset); color: var(--ink); border: 1px dashed var(--accent);
  white-space: normal; text-align: center; line-height: 1.3;
}
.sl-btn-finish:hover:not(:disabled) { background: var(--accent-soft); }
.sl-btn-finish:disabled { opacity: .6; cursor: progress; }

/* Phase 2 — 4-shot filmstrip under the result stage */
.sl-filmstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sl-film-cell {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 6px; cursor: pointer; transition: border-color .18s;
}
.sl-film-cell:disabled { cursor: default; }
.sl-film-cell.on { border-color: var(--accent); }
.sl-film-cell.filled:not(:disabled):hover { border-color: var(--line-2); }
.sl-film-cell img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; display: block; }
.sl-film-plus, .sl-film-spin, .sl-film-retry {
  width: 100%; aspect-ratio: 1/1; border-radius: 6px; background: var(--inset);
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 16px;
}
.sl-film-spin { position: relative; color: transparent; overflow: hidden; }
.sl-film-spin::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  animation: sl-film-shimmer 1.1s ease-in-out infinite;
}
@keyframes sl-film-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.sl-film-name { font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.sl-film-cell.on .sl-film-name { color: var(--accent); }
.sl-film-cell.failed { border-color: color-mix(in srgb, #a5453a 45%, var(--line)); cursor: pointer; }
.sl-film-cell.failed .sl-film-retry { color: #a5453a; background: color-mix(in srgb, #a5453a 8%, var(--inset)); }
.sl-film-cell.failed .sl-film-name { color: #a5453a; }
.sl-film-cell.failed:hover .sl-film-retry { background: color-mix(in srgb, #a5453a 16%, var(--inset)); }

/* Pending "complete the set" cell — pick this shot's ratio before it fires.
   The whole cell doubles as an on/off toggle (Seller isn't Studio — a listing
   may only need Hero + Detail); ratio chips inside stopPropagation so they
   only ever change the ratio, never toggle the cell. */
.sl-film-cell.pending { cursor: pointer; }
.sl-film-cell.pending.off { opacity: .5; }
.sl-film-cell.pending.off:hover { opacity: .75; }
.sl-film-cell.pending.off .sl-film-plus { background: transparent; border: 1px dashed var(--line-2); }
.sl-film-ratio-picker {
  width: 100%; aspect-ratio: 1/1; border-radius: 6px; background: var(--inset);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 2px; padding: 3px;
}
.sl-film-ratio-chip {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rd-font-mono); font-size: 7.5px; letter-spacing: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-faint); cursor: pointer; padding: 0; transition: border-color .15s, color .15s;
}
.sl-film-ratio-chip:hover { border-color: var(--line-2); color: var(--ink); }
.sl-film-ratio-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

@media (max-width: 820px) {
  .sl-filmstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sl-film-name { font-size: 8px; }
  .sl-film-ratio-chip { font-size: 6.5px; }
}

/* seller responsive */
@media (max-width: 1000px) {
  .sl-grid { grid-template-columns: 1fr; gap: 26px; }
  .sl-grid > div:last-child { position: static; }
}
@media (max-width: 720px) {
  .sl-submode { width: 100%; }
  .sl-submode button { flex: 1; justify-content: center; }
}

/* ===== COLLECTION SCREEN (cx-*) ===== */
.cx-screen { max-width: min(1560px, calc(100vw - 96px)); margin: 0 auto; }
.cx-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.cx-eyebrow { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cx-eyebrow-rule { width: 30px; height: 1px; background: var(--line-2); }
.cx-eyebrow-em { color: var(--accent); }
.cx-title { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; margin-top: 11px; color: var(--ink); }
.cx-seg { display: inline-flex; gap: 3px; background: var(--inset); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 30px; box-shadow: var(--tog-well); --seg-pad: 4px; --seg-radius: 9px; }
.cx-seg button { border: 0; background: transparent; cursor: pointer; font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-dim); padding: 10px 18px; border-radius: 9px; transition: all 0.2s var(--rd-ease); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cx-seg button.on { background: var(--tog-chip); color: var(--accent); box-shadow: var(--tog-pop); }
.cx-seg-ct { font-family: var(--rd-font-mono); font-size: 10px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; padding: 2px 7px; }
.cx-seg button.on .cx-seg-ct { background: rgba(6,18,12,.22); color: var(--accent-ink); }
/* style card grid */
.cx-sc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.cx-newtile { border: 1.5px dashed var(--line-2); border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: var(--ink-dim); height: 100%; aspect-ratio: 4/5; transition: all 0.25s var(--rd-ease); background: var(--card); }
.cx-newtile:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.cx-newtile-pl { font-size: 30px; font-weight: 300; }
.cx-newtile-t { font-size: 13px; font-weight: 600; }
.cx-sc { position: relative; border-radius: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: transform 0.3s var(--rd-ease), border-color 0.3s; }
.cx-sc:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.cx-sc-thumb { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.cx-sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-sc-thumb-ph { width: 100%; height: 100%; background: var(--inset); }
.cx-sc-ovr { position: absolute; right: 9px; top: 9px; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: all 0.25s var(--rd-ease); }
.cx-sc:hover .cx-sc-ovr { opacity: 1; transform: none; }
.cx-sc-ob { width: 30px; height: 30px; border-radius: 8px; background: rgba(8,6,18,.6); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; backdrop-filter: blur(6px); }
.cx-sc-ob:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cx-sc-body { padding: 12px 13px 13px; }
.cx-sc-body b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cx-sc-meta { font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.cx-sc-reuse { margin-top: 11px; width: 100%; font-family: var(--rd-font-sans); font-weight: 600; font-size: 12.5px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 9px; cursor: pointer; transition: all 0.2s var(--rd-ease); }
.cx-sc-reuse:hover { background: var(--accent); color: var(--accent-ink); }
/* outputs */
.cx-filterbar { display: flex; gap: 7px; margin-bottom: 20px; flex-wrap: wrap; }
.cx-fb { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: all 0.2s var(--rd-ease); }
.cx-fb.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Masonry — CSS multi-column so each cell's shape follows its OWN saved
   aspect-ratio (1:1/4:5/9:16 from Try On's picker), not a fixed rhythm. A 4:5
   output renders as a 4:5 box, not stretched/cropped into whatever slot shape
   a rigid grid would assign. 16:9 (landscape) stays inside a single column
   like every other tile — just shrinks to that column's width — so the
   column-fill order never breaks (column-span used to force a row break,
   which read as items "piling down" out of order). */
.cx-out-grid { columns: 4; column-gap: 8px; }
.cx-out { position: relative; break-inside: avoid; margin-bottom: 8px; border-radius: 0; overflow: hidden; border: 1px solid var(--line); cursor: pointer; transition: border-color 0.25s; }
.cx-out:hover { border-color: var(--accent-line); }
.cx-out img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-out-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 11px; background: linear-gradient(transparent, rgba(8,6,18,.82)); opacity: 0; transition: opacity 0.25s; }
.cx-out:hover .cx-out-info { opacity: 1; }
.cx-out-info b { color: #fff; font-size: 12.5px; font-weight: 600; display: block; }
.cx-out-info span { font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.cx-out-dl { position: absolute; right: 9px; top: 9px; width: 30px; height: 30px; border-radius: 8px; background: rgba(8,6,18,.6); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(6px); cursor: pointer; }
.cx-out:hover .cx-out-dl { opacity: 1; }
.cx-out-del { position: absolute; right: 47px; top: 9px; width: 30px; height: 30px; border-radius: 8px; background: rgba(8,6,18,.6); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.25s; backdrop-filter: blur(6px); cursor: pointer; }
.cx-out:hover .cx-out-del { opacity: 1; }
.cx-out-del:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cx-out-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 60px 20px; color: var(--ink-faint); font-size: 13px; line-height: 1.6; }
.cx-out-signin {
  height: 38px; padding: 0 20px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 72%, #000);
  background: var(--accent); color: var(--accent-ink); font-family: var(--rd-font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: var(--btn-mat);
  transition: transform .2s var(--rd-ease), box-shadow .25s var(--rd-ease), filter .15s var(--rd-ease);
}
.cx-out-signin:hover { filter: brightness(1.04); }
.cx-out-signin:active { transform: translateY(1px); box-shadow: var(--btn-mat-press-soft); filter: brightness(.98); }
@media (max-width: 1000px) {
  .cx-sc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cx-out-grid { columns: 2; }
}

/* ===== PROFILE SCREEN (pf-*) ===== */
.pf-screen { padding: 0 !important; }
.pf-layout { max-width: 1180px; margin: 0 auto; padding: 34px var(--rd-pad-x) 80px; display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: start; }
.pf-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.pf-acct-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; position: relative; overflow: hidden; }
.pf-acct-card::before { content: ""; position: absolute; inset: 0; height: 64px; background: var(--aura-grad, var(--accent)); opacity: 0.16; pointer-events: none; }
.pf-acct-id { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
/* Same static radial-gradient sphere as .rd-avatar / .rd-av-pop-avatar (header
   avatars) — was previously an animated drifting aura-grad, which made this
   one avatar read as a different visual language from the other two. */
.pf-avatar { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent) 65%, white 25%), var(--accent) 62%, color-mix(in srgb, var(--accent) 78%, black 22%) 100%); border: 3px solid var(--card); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); margin-bottom: 6px; position: relative; overflow: hidden; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar:empty::after { content: ""; position: absolute; inset: 23%; background: var(--logo-mark-asset) center / contain no-repeat; }
.pf-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.pf-email { font-family: var(--rd-font-mono); font-size: 11px; color: var(--ink-faint); }
.pf-bal { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 12px; }
.pf-bal-label { font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.4; }
.pf-bal-value { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.pf-topup-btn { margin-top: 11px; width: 100%; font-family: var(--rd-font-sans); font-weight: 600; font-size: 14px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px; padding: 13px; cursor: pointer; transition: all 0.25s var(--rd-ease); }
.pf-menu { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pf-mi { display: flex; align-items: center; gap: 13px; padding: 14px 17px; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink-dim); font-size: 14px; font-weight: 500; transition: all 0.2s var(--rd-ease); white-space: nowrap; width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; font-family: var(--rd-font-sans); text-align: left; }
.pf-mi:last-child { border-bottom: 0; }
.pf-mi:hover { color: var(--ink); background: var(--accent-soft); }
.pf-mi.on { color: var(--ink); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.pf-mi-ic { color: var(--accent); width: 18px; text-align: center; flex-shrink: 0; }
.pf-mi-ch { margin-left: auto; color: var(--ink-faint); }
.pf-mi-danger { color: var(--rose, #ff6b8a) !important; }
.pf-mi-danger .pf-mi-ic { color: var(--rose, #ff6b8a) !important; }
/* main */
.pf-main { min-width: 0; }
.pf-sec { margin-bottom: 34px; }
.pf-sec-h { margin-bottom: 16px; }
.pf-sec-h h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.pf-sec-desc { color: var(--ink-dim); font-size: 12.5px; margin-top: 3px; }
.pf-summ { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.pf-scard { border-radius: 13px; padding: 16px 18px; border: 1px solid var(--line); background: var(--card); }
.pf-scard-l { font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.pf-scard-v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink); display: flex; align-items: baseline; gap: 5px; }
.pf-scard-v.pos { color: var(--accent); }
.pf-scard-v.neg { color: var(--spend); }
.pf-scard-u { font-size: 15px; color: var(--accent); font-weight: 600; }
.pf-filterbar { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.pf-fb { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: all 0.2s var(--rd-ease); }
.pf-fb.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pf-ledger { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pf-tx { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pf-tx:last-child { border-bottom: 0; }
.pf-tx:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.pf-tx-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--inset); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.pf-tx-info b { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.pf-tx-info span { font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; display: block; }
.pf-tx-amt { margin-left: auto; font-family: var(--rd-font-mono); font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--ink); }
.pf-tx-amt.pos { color: var(--accent); }
.pf-tx-amt.neg { color: var(--spend); }
/* insight */
.pf-insight { display: grid; grid-template-columns: 300px 1fr; gap: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.pf-radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pf-radar-title { text-align: center; }
.pf-radar-tag { font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
/* alternate (not a plain forward loop) — the aura gradient's first/last stops
   aren't a palindrome, so a hard reset from 200% back to 0% each cycle showed
   a visible seam; reversing direction instead never needs to jump. */
.pf-radar-name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; background: var(--aura-grad-text, var(--accent)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-flow 7s linear infinite alternate; margin-top: 3px; }
@keyframes pf-flow { to { background-position: 200% center; } }
.pf-radar-desc { color: var(--ink-dim); font-size: 12px; margin-top: 5px; max-width: 230px; line-height: 1.5; }
.pf-bars { display: flex; flex-direction: column; gap: 13px; }
.pf-brow { display: flex; align-items: center; gap: 12px; }
.pf-bn { font-size: 13px; font-weight: 600; width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; color: var(--ink); }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pf-track { flex: 1; height: 8px; border-radius: 999px; background: var(--inset); overflow: hidden; }
.pf-fill { height: 100%; border-radius: 999px; display: block; opacity: 0.5; transition: opacity 0.2s var(--rd-ease); }
.pf-brow.lead .pf-fill { opacity: 1; }
.pf-brow.lead .pf-bn { color: var(--accent); }
.pf-pct { font-family: var(--rd-font-mono); font-size: 11px; color: var(--ink-dim); width: 34px; text-align: right; }
.pf-preset-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.pf-ptag { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; }
.pf-ptag-more { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pf-insight-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 24px; }
.pf-istat-v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.pf-istat-l { font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
@media (max-width: 1000px) { .pf-layout { grid-template-columns: 1fr; } .pf-aside { position: static; } .pf-insight { grid-template-columns: 1fr; } .pf-summ { grid-template-columns: 1fr; } }

/* ===== PRICING SCREEN (px-*) — handoff v14 ===== */
.px-screen { max-width: 1180px; margin: 0 auto; }
/* hero */
.px-head { position: relative; text-align: center; max-width: 760px; margin: 0 auto 12px; }
.px-wm { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); font-family: var(--rd-font-sans); font-weight: 800; font-size: 300px; line-height: .7; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.4px var(--line); opacity: .5; pointer-events: none; z-index: 0; white-space: nowrap; }
.px-head > *:not(.px-wm) { position: relative; z-index: 1; }
.px-eyebrow { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 10px; }
.px-eyebrow-em { color: var(--gold-deep); }
.px-title { font-size: clamp(40px, 5.4vw, 62px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: 16px 0 16px; color: var(--ink); }
.px-title em { font-family: var(--rd-font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); }
.px-sub { color: var(--ink-dim); font-size: 16px; line-height: 1.55; max-width: 560px; margin: 0 auto; }
.px-binfo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 38px; font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); flex-wrap: wrap; }
.px-binfo-sep { opacity: .5; }
.px-pill { color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 13%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent); border-radius: 999px; padding: 6px 13px; }
/* tiers */
.px-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.px-tier { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; transition: transform 0.3s var(--rd-ease), border-color 0.3s var(--rd-ease); }
.px-tier:hover { transform: translateY(-3px); border-color: var(--line-2); }
.px-tier.feat { background: var(--card-2); border-color: var(--accent-line); box-shadow: var(--shadow-3); }
.px-tier.feat::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--aura-grad, var(--aurora)); border-radius: 0 0 3px 3px; z-index: 1; }
.px-ribbon { position: absolute; right: 22px; top: -11px; z-index: 3; font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: var(--bg); border: 1px solid var(--accent-line); border-radius: 999px; padding: 5px 12px; font-weight: 600; }
.px-tier-name { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.px-tier-name.em { color: var(--accent); }
.px-price { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 6px; line-height: 1; }
.px-price-amt { font-family: var(--rd-font-sans); font-size: 62px; font-weight: 800; letter-spacing: -0.02em; line-height: 0.82; color: var(--ink); }
.px-price-cur { font-family: var(--rd-font-sans); font-size: 26px; font-weight: 700; color: var(--ink-dim); letter-spacing: -0.01em; }
.px-price-per { font-family: var(--rd-font-mono); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.px-tier-sub { color: var(--ink-dim); font-size: 13px; line-height: 1.5; min-height: 38px; }
.px-grant { display: flex; align-items: center; gap: 11px; margin: 18px 0; padding: 13px 15px; background: var(--inset); border: 1px solid var(--line); border-radius: 12px; }
.px-tier.feat .px-grant { border-color: var(--accent-line); }
.px-grant-e { font-family: var(--rd-font-sans); font-size: 34px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; line-height: 0.8; }
.px-grant-lbl { font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.4; }
.px-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 6px 0 24px; }
.px-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.4; }
.px-ck { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.px-feats li.off { color: var(--ink-faint); }
.px-feats li.off .px-ck { color: var(--ink-faint); opacity: 0.5; }
.px-feats li b { color: var(--ink); font-weight: 600; }
.px-tbtn { margin-top: auto; font-weight: 600; font-size: 14px; border-radius: 11px; padding: 14px; cursor: pointer; border: 1px solid var(--line-2); background: var(--inset); color: var(--ink); font-family: var(--rd-font-sans); transition: all 0.25s var(--rd-ease); }
.px-tbtn.ghost { background: transparent; }
.px-tbtn:hover { background: var(--accent-soft); border-color: var(--ink-dim); }
.px-tbtn.em { background: var(--accent); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 72%, #000); box-shadow: var(--btn-mat); }
.px-tbtn.em:hover { filter: brightness(1.04); }
.px-tbtn.em:active { transform: translateY(1px); box-shadow: var(--btn-mat-press); filter: brightness(.98); }
/* top-up note */
.px-topup { margin: 30px auto 0; max-width: max-content; font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 13%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent); border-radius: 999px; padding: 8px 16px; text-align: center; }
/* comparison */
.px-cmp-wrap { margin-top: 60px; }
.px-cmp-h { text-align: center; margin-bottom: 24px; }
.px-cmp-wl { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.px-cmp-h h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin-top: 8px; color: var(--ink); }
.px-cmp-h h2 em { font-family: var(--rd-font-serif); font-style: italic; font-weight: 500; }
.px-cmp-h p { color: var(--ink-dim); font-size: 13.5px; margin-top: 6px; }
.px-tscroll { }
.px-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.px-table th, .px-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.px-table th:first-child, .px-table td:first-child { width: 34%; }
.px-table th.px-cmp-c, .px-table td.px-cmp-c { width: 22%; }
.px-table thead th { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); background: var(--inset); font-weight: 600; }
.px-table thead th.px-col-hi { color: var(--accent); }
.px-feat-label { color: var(--ink-dim); font-weight: 500; }
.px-cmp-c { text-align: center !important; }
.px-col-hi { background: color-mix(in srgb, var(--accent-soft) 40%, transparent) !important; }
.px-table .ck { color: var(--accent); font-weight: 700; }
.px-table .no { color: var(--ink-faint); opacity: 0.5; }
.px-table tbody tr:last-child td { border-bottom: 0; }
.px-table tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.px-grp td { background: var(--inset) !important; font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 9px 18px; }
.px-thint { display: none; text-align: center; font-family: var(--rd-font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 9px; }
/* faq */
.px-faqt { display: none; }
.px-faq { margin: 50px auto 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: 760px; }
.px-fq { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 20px; }
.px-fq h4 { font-size: 14px; font-weight: 700; display: flex; align-items: flex-start; gap: 9px; color: var(--ink); line-height: 1.35; }
.px-fq-q { color: var(--gold-deep); font-family: var(--rd-font-mono); flex-shrink: 0; }
.px-fq p { color: var(--ink-dim); font-size: 12.5px; line-height: 1.6; margin-top: 9px; }

/* tablet */
@media (max-width: 1000px) { .px-wm { font-size: 200px; top: -20px; } }

/* ── Mobile pricing (≤820px) ── */
@media (max-width: 820px) {
  .px-wm { font-size: 150px; top: 2px; }
  .px-head { padding-top: 6px; }
  .px-title { font-size: 42px; }
  .px-sub { font-size: 13.5px; }
  .px-tiers { grid-template-columns: 1fr; }
  .px-price-amt { font-size: 54px; }
  .px-topup { max-width: none; display: block; border-radius: 12px; line-height: 1.5; }
  .px-cmp-h h2 { font-size: 24px; }
  /* table scrolls horizontally with a swipe hint */
  .px-tscroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
  .px-tscroll::-webkit-scrollbar { display: none; }
  .px-table { table-layout: auto; min-width: 520px; }
  .px-table th, .px-table td { white-space: nowrap; font-size: 12.5px; padding: 12px 14px; }
  .px-thint { display: block; }
  .px-faqt { display: block; margin-top: 34px; font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
  .px-faq { grid-template-columns: 1fr; margin-top: 12px; gap: 11px; }
}

/* ===== TRY-ON SCREEN (to-*) ===== */
.to-screen { max-width: min(1440px, calc(100vw - 96px)); margin: 0 auto; }
.to-head { padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.to-eyebrow {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.to-eyebrow-rule { width: 30px; height: 1px; background: var(--line-2); }
.to-eyebrow-em { color: var(--accent); }
.to-title {
  font-size: clamp(28px, 4vw, 46px); font-weight: 800;
  letter-spacing: -0.03em; margin-top: 11px; color: var(--ink);
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.to-title-note {
  font-size: 13px; font-weight: 400; color: var(--ink-faint);
  margin-top: 5px; line-height: 1.45;
}
.to-top { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 36px; align-items: start; }

/* builder */
.to-builder { display: flex; flex-direction: column; gap: 16px; }
.to-bld-h {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
}
.to-bld-n { color: var(--accent); }
/* Slots — vertical horizontal-strip layout */
.to-slots { display: flex; flex-direction: column; gap: 9px; }
.to-slot {
  position: relative; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; transition: border-color 0.2s;
  display: flex; align-items: stretch;
}
.to-slot:hover, .to-slot.drag { border-color: var(--accent-line); }
.to-slot.filled { border-color: var(--line-2); }
.to-slot.drag { border-style: solid; }

.to-slot-thumb {
  width: 78px; min-width: 78px; flex-shrink: 0;
  background: var(--inset); border-right: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.to-slot-thumb img { width: 100%; height: 100%; object-fit: cover; animation: toSlotPop .32s var(--rd-ease) backwards; }
@keyframes toSlotPop { from { opacity: 0; transform: scale(.88); } }
.to-slot-ic { font-size: 20px; color: var(--ink-dim); }

.to-slot-body {
  flex: 1; padding: 11px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 74px;
}
.to-slot-num {
  font-family: var(--rd-font-mono); font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.to-slot-t { font-size: 13px; font-weight: 500; color: var(--ink-dim); }
.to-slot-filled-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.to-slot-body small {
  font-size: 9.5px; color: var(--ink-faint);
  font-family: var(--rd-font-sans); line-height: 1.3;
}
.to-slot-swap {
  padding: 0 14px; display: flex; align-items: center;
  font-size: 14px; color: var(--ink-faint); flex-shrink: 0;
  transition: color .18s;
}
.to-slot:hover .to-slot-swap { color: var(--accent); }
.to-note { color: var(--ink-faint); font-size: 12px; line-height: 1.55; }
.to-res-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px; }
.to-res-label { font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }

/* Output card — frames Ratio + Resolution as one designed panel instead of
   loose pill rows floating on the page background. The quality-test picker
   stays outside this card, unstyled — it's a temp admin control being hidden
   later, not worth the same visual investment. */
.rd-output-card, .sl-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.rd-output-row, .sl-panel-row { display: flex; flex-direction: column; gap: 9px; }
.rd-output-row + .rd-output-row, .sl-panel-row + .sl-panel-row { padding-top: 14px; border-top: 1px solid var(--line); }
.rd-output-label { font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.rd-output-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-output-card .rd-chip { font-size: 11.5px; letter-spacing: 0.04em; padding: 8px 15px; border-color: var(--line-2); }
.rd-output-card .rd-chip.on { box-shadow: 0 6px 16px -8px var(--accent-line, rgba(0,0,0,.3)); }
/* Pro-gated resolution chip (4K) — dashed border reads "unlockable", not
   disabled; clicking it routes to Pricing instead of doing nothing. */
.rd-output-card .rd-chip.locked { border-style: dashed; color: var(--ink-faint); }
.rd-output-card .rd-chip.locked.on { border-style: solid; }
.rd-chip-lockic { margin-left: 5px; font-size: 9px; opacity: 0.75; }

/* Output card — Ratio/Resolution as a recessed sliding toggle instead of loose
   pills (same mechanism + tokens as the language/theme toggle in Settings and
   the mode switches above: .rd-seg-rail + .rd-seg-thumb). Shared by every
   screen's Output card (Seller, Create, TryOn, Beauty) — generic .rd- prefix
   to match .rd-output-card/.rd-output-row/.rd-output-label. */
.rd-out-seg {
  display: flex; width: 100%; gap: 2px; background: var(--inset);
  border: 1px solid var(--line); border-radius: 11px;
  padding: 3px; box-shadow: var(--tog-well); --seg-pad: 3px; --seg-radius: 8px;
}
.rd-out-seg button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--rd-font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-dim); padding: 8px 6px; border-radius: 8px;
  transition: all 0.2s var(--rd-ease); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.rd-out-seg button.on { background: var(--tog-chip); color: var(--accent); box-shadow: var(--tog-pop); }
.rd-out-seg button.locked { color: var(--ink-faint); }
.rd-out-seg button.locked.on { color: var(--accent); }
.to-direction { margin: 4px 0 2px; }
.to-direction-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.to-direction-ta { width: 100%; background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--rd-font-sans); font-size: 12.5px; color: var(--ink); resize: none; box-sizing: border-box; }
.to-direction-ta:focus { outline: none; border-color: var(--accent-line); }
.to-direction-warn { margin-top: 6px; font-size: 10.5px; line-height: 1.5; color: var(--warn, #b5793a); display: grid; gap: 3px; }

/* Gợi ý (AI Suggestion) — the flagship "no prompt needed" moment, styled to
   read as an editorial statement (Fraunces italic, like .stho-heroq) rather
   than a form field. Restraint over bling: no gradients sweeping, no fast
   animation — prominence comes from type scale, space and position only. */
.sl-suggest {
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 18px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.sl-suggest-eyebrow {
  font-family: var(--rd-font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
/* Specificity + !important needed to beat the legacy .theme-arctic/.theme-sunset
   `textarea { background/border/color !important }` rule in index.html, which
   otherwise force-paints every textarea white regardless of context. */
.sl-suggest .sl-suggest-ta {
  width: 100%; resize: none; box-sizing: border-box;
  font-family: var(--rd-font-serif); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.42; padding: 0; min-height: 80px;
  background: transparent !important; border: none !important; color: var(--ink) !important;
}
.sl-suggest .sl-suggest-ta::placeholder { color: var(--ink-faint) !important; font-style: italic; opacity: .85; }
.sl-suggest-ta:focus { outline: none; }
/* Product-mode variant: read-only scene description (no textarea chrome
   needed since there's nothing to type — it's a preview, not a note field). */
.sl-suggest-preview {
  font-family: var(--rd-font-serif); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.42; color: var(--ink);
  min-height: 80px;
}
.sl-suggest-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sl-suggest-btn {
  font-family: var(--rd-font-sans); font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: all .2s var(--rd-ease);
}
.sl-suggest-btn:disabled { opacity: .6; cursor: default; }
.sl-suggest-btn:not(:disabled):hover { transform: translateY(-1px); }
.sl-suggest-apply {
  font-family: var(--rd-font-sans); font-weight: 700; font-size: 13px;
  padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: all .2s var(--rd-ease);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
}
.sl-suggest-apply.done { border: 1px solid var(--line-2); background: transparent; color: var(--ink-dim); }
.sl-suggest-quota {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-dim);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sl-suggest-quota-cta {
  font-family: var(--rd-font-sans); font-weight: 700; font-size: 12px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); cursor: pointer; white-space: nowrap;
}
.sl-suggest-error { font-size: 11.5px; color: var(--rd-danger, #e5484d); }

/* Tinh chỉnh — collapsed override drawer for the chips Gợi ý already covers. */
.sl-refine-toggle {
  width: 100%; text-align: left; background: transparent; border: 1px dashed var(--line-2);
  border-radius: 12px; padding: 12px 16px; cursor: pointer;
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); transition: all .2s var(--rd-ease);
}
.sl-refine-toggle:hover { border-color: var(--accent-line); color: var(--ink); }
.sl-refine-body { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.to-try-btn {
  font-weight: 600; font-size: 14.5px; border-radius: 10px; border: 0;
  padding: 14px; cursor: pointer; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: all 0.25s var(--rd-ease); font-family: var(--rd-font-sans);
}
.to-try-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* One-shot glow pulse when both slots become ready */
.to-try-btn.ready { animation: toTryPulse .7s var(--rd-ease) 1; }
@keyframes toTryPulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-line); }
  50%  { box-shadow: 0 0 0 8px transparent; transform: scale(1.015); }
  100% { box-shadow: none; transform: none; }
}
.to-cost {
  font-family: var(--rd-font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}
.to-cost span { color: var(--accent); }

/* result */
.to-res-h {
  font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px;
}
.to-res-arrow { color: var(--accent); margin-right: 4px; }
.to-stage {
  position: relative; aspect-ratio: 4/5; max-height: 540px;
  border-radius: 13px; overflow: hidden; border: 1px solid var(--line);
  background: var(--inset); display: flex; align-items: center;
  justify-content: center; isolation: isolate;
}
/* result image fills the frame — hide border so warm-theme line doesn't bleed */
.to-stage.has-result { border-color: transparent; }
.to-stage-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-faint); font-family: var(--rd-font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 24px;
}
.to-stage-icon { font-size: 30px; color: var(--ink-dim); }
.to-result-img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.to-compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 3; transition: opacity 0.15s; pointer-events: none; }
.to-stage.comparing .to-compare-img { opacity: 1; }
.to-badge {
  position: absolute; left: 12px; top: 12px; z-index: 6;
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  background: #fff9ee; border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 6px 11px;
}
.to-compare-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; background: rgba(8,6,18,.6);
  border-radius: 999px; padding: 6px 10px; opacity: 0; transition: opacity 0.15s;
}
.to-stage.comparing .to-compare-tag { opacity: 1; }
.to-compare-btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  font-family: var(--rd-font-sans); font-weight: 600; font-size: 12px; color: #fff;
  background: rgba(8,6,18,.6); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  backdrop-filter: blur(8px); display: inline-flex; gap: 7px; align-items: center; user-select: none;
}
.to-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,5,10,.92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out; animation: to-lightbox-in .18s var(--rd-ease);
}
@keyframes to-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.to-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.to-lightbox-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,6,18,.6); color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.sc-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,5,10,.92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out; animation: to-lightbox-in .18s var(--rd-ease);
}
.sc-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.sc-lightbox-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,6,18,.6); color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.sl-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,5,10,.92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out; animation: to-lightbox-in .18s var(--rd-ease);
}
.sl-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.sl-lightbox-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,6,18,.6); color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.to-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.to-btn {
  font-weight: 600; font-size: 14px; border-radius: 10px; padding: 12px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; transition: all 0.25s var(--rd-ease); font-family: var(--rd-font-sans); white-space: nowrap;
}
.to-btn-em  { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.to-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.to-btn-ghost:hover { background: var(--accent-soft); border-color: var(--ink-dim); }
.to-act-row { display: flex; gap: 9px; }
.to-act-row .to-btn { flex: 1; }
.to-export-error {
  font-size: 12.5px; color: #a5453a; background: color-mix(in srgb, #a5453a 8%, transparent);
  border: 1px solid color-mix(in srgb, #a5453a 25%, transparent);
  border-radius: 9px; padding: 9px 12px; line-height: 1.45;
}

/* wardrobe */
.to-ward { margin-top: 48px; }
.to-ward-mode-tabs {
  display: flex; gap: 28px; border-top: 1px solid var(--line);
  padding-top: 28px; margin-bottom: 22px;
}
.to-ward-mode-tab {
  font-family: var(--rd-font-sans); font-size: 14px; font-weight: 700;
  color: var(--ink-dim); background: none; border: none; cursor: pointer;
  padding: 0 0 14px; position: relative; letter-spacing: -0.01em;
  transition: color 0.2s var(--rd-ease);
}
.to-ward-mode-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--rd-ease);
}
.to-ward-mode-tab.on { color: var(--ink); }
.to-ward-mode-tab.on::after { transform: scaleX(1); }
.to-ward-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.to-ward-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.to-ward-desc { color: var(--ink-dim); font-size: 13px; margin-top: 10px; }
.to-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.to-cat {
  font-family: var(--rd-font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink-dim); background: var(--inset); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: all 0.2s var(--rd-ease);
}
.to-cat.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* gender toggle */
.to-ward-title-row { display: flex; align-items: center; gap: 10px; }
.to-gender-toggle {
  display: inline-flex; background: var(--inset); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px; gap: 2px; flex-shrink: 0;
  box-shadow: var(--tog-well); --seg-pad: 2px; --seg-radius: 18px;
}
.to-gender-btn {
  font-family: var(--rd-font-sans); font-size: 12px; font-weight: 700;
  color: var(--ink-dim); background: transparent;
  border: none; border-radius: 18px; padding: 4px 16px;
  cursor: pointer; transition: all 0.18s var(--rd-ease); letter-spacing: 0.02em;
}
.to-gender-btn.on {
  background: var(--tog-chip); color: var(--accent); box-shadow: var(--tog-pop);
}

/* empty state */
.to-empty-state {
  padding: 72px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.to-empty-state .to-empty-icon { font-size: 36px; opacity: 0.15; margin-bottom: 4px; }
.to-empty-state b { font-size: 15px; font-weight: 700; color: var(--ink); }
.to-empty-state p { font-size: 13px; color: var(--ink-dim); line-height: 1.7; }

.to-rack { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.to-outfit { cursor: pointer; }
.to-outfit-img {
  position: relative; aspect-ratio: 3/4; border-radius: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--inset);
  transition: transform 0.3s var(--rd-ease), border-color 0.3s;
}
.to-outfit-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.to-outfit:hover .to-outfit-img { transform: translateY(-3px); border-color: var(--accent-line); }
.to-outfit.on .to-outfit-img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.to-outfit-check {
  position: absolute; right: 8px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: none; align-items: center; justify-content: center;
  font-size: 12px; box-shadow: 0 4px 12px -3px rgba(0,0,0,.5);
}
.to-outfit.on .to-outfit-check { display: flex; }
.to-outfit-info {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 9px; gap: 8px;
}
.to-outfit-info b { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; color: var(--ink); }
.to-outfit-info span { font-family: var(--rd-font-mono); font-size: 9px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }

/* try-on responsive */
@media (max-width: 1000px) {
  .to-top { grid-template-columns: 1fr; gap: 26px; }
  .to-rack { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .to-rack { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .to-ward-head { flex-direction: column; align-items: flex-start; }
}

/* ===== DONE SCREEN — Fusion badge ===== */
.rd-done-fusion-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: color-mix(in srgb, var(--violet) 42%, rgba(0,0,0,.55));
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--violet) 55%, transparent);
  color: #fff; font-family: var(--rd-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; padding: 5px 9px; border-radius: 6px;
  max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== COLLECTION — Mix entry ===== */
.cx-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cx-mix-btn {
  font-family: var(--rd-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: 8px; padding: 8px 14px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.cx-mix-btn:hover {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}

/* ===== CREATE SCREEN — Fusion mode (cr-*) ===== */
.cr-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--rd-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim);
  margin: 18px 0 14px;
}
.cr-eyebrow-rule { display: inline-block; width: 28px; height: 1px; background: var(--accent); opacity: .5; }
.cr-eyebrow-em { color: var(--accent); }
.cr-eyebrow-fz {
  background: var(--aurora); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cr-x { color: var(--violet); opacity: .65; font-weight: 400; }

.cr-slot-empty {
  display: flex; align-items: center; gap: 10px;
  background: var(--inset); border: 1.5px dashed var(--line-2); border-radius: 10px;
  padding: 14px 16px; width: 100%; cursor: pointer; color: var(--ink-dim);
  font-family: var(--rd-font-sans); font-size: 13.5px; font-weight: 600;
  transition: border-color .2s, color .2s;
}
.cr-slot-empty:hover { border-color: var(--accent); color: var(--accent); }
.cr-slot-empty > span { flex: 1; text-align: left; }

.cr-picker-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cr-picker-tab {
  font-family: var(--rd-font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; color: var(--ink-dim); transition: all .15s;
}
.cr-picker-tab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cr-picker-empty { text-align: center; padding: 20px 0; font-size: 12.5px; color: var(--ink-faint); }

.cr-btn-gen { width: 100%; justify-content: center; margin-top: 12px; }
.cr-btn-gen-fz { background: var(--aurora) !important; color: #fff !important; }

.cr-fusion-mode .cr-slot-empty:hover { border-color: var(--violet); color: var(--violet); }
.cr-fusion-mode .cr-picker-tab.on { background: var(--violet); color: #fff; border-color: var(--violet); }

/* ===== FUSION SCREEN (fz-*) ===== */
.fz-screen { max-width: 1200px; margin: 0 auto; padding: 40px 48px 80px; }

.fz-head { margin-bottom: 40px; }
.fz-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--rd-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 14px;
}
.fz-eyebrow-rule { display: inline-block; width: 28px; height: 1px; background: var(--accent); opacity: .5; }
.fz-n { color: var(--accent); }
.fz-title {
  font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; color: var(--ink); display: flex; flex-direction: column; gap: 4px;
}
.fz-title-note {
  font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-dim);
  font-family: var(--rd-font-sans);
}

.fz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.fz-inputs { display: flex; flex-direction: column; gap: 28px; }

/* Photo row */
.fz-photo-row { display: flex; gap: 20px; align-items: flex-start; }
.fz-photo-row > div { flex-shrink: 0; }
.fz-hint { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; padding-top: 6px; }
.fz-slot-h {
  font-family: var(--rd-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.fz-slot {
  width: 100px; border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid var(--line);
}
.fz-slot img { width: 100%; display: block; object-fit: cover; }
.fz-ed {
  position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.55);
  color: #fff; font-size: 11px; padding: 2px 5px; border-radius: 5px;
  backdrop-filter: blur(4px); cursor: pointer;
}

/* Preset chips */
.fz-preset-stack { display: flex; flex-direction: column; gap: 10px; }
.fz-chip-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; position: relative;
}
.fz-chip-p2 { border-color: var(--line); background: var(--card); }
.fz-ch-th { width: 40px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fz-ch-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fz-ch-idx { font-family: var(--rd-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.fz-ch-idx-v { color: var(--violet); }
.fz-ch-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-ch-rm {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 13px; line-height: 1; padding: 4px 6px;
  border-radius: 6px; transition: color .15s, background .15s;
}
.fz-ch-rm:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.fz-mix-add {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 1.5px dashed var(--line-2); border-radius: 10px;
  padding: 12px 16px; width: 100%; cursor: pointer; color: var(--ink-dim);
  font-family: var(--rd-font-sans); font-size: 13px; font-weight: 600;
  transition: border-color .2s, color .2s, background .2s;
}
.fz-mix-add:hover { border-color: var(--violet); color: var(--violet); background: color-mix(in srgb, var(--violet) 5%, transparent); }
.fz-mix-plus { font-size: 18px; line-height: 1; }

/* Picker dropdown */
.fz-picker {
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 14px; animation: fzFadeIn .18s var(--rd-ease) both;
}
.fz-picker-h {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--ink-dim);
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.fz-picker-x { cursor: pointer; opacity: .6; font-size: 13px; }
.fz-picker-x:hover { opacity: 1; }
.fz-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.fz-pk {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; overflow: hidden; text-align: left; padding: 0;
  transition: border-color .15s, transform .15s;
}
.fz-pk:hover { border-color: var(--violet); transform: translateY(-1px); }
.fz-pk-dim { opacity: .4; cursor: default; }
.fz-pk-dim:hover { border-color: var(--line); transform: none; }
.fz-pk-img { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.fz-pk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-pk-used {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--rd-font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em;
  color: var(--ink); background: rgba(0,0,0,.5); text-transform: uppercase;
}
.fz-pk-name { font-size: 10px; font-weight: 600; color: var(--ink); padding: 5px 6px 6px; line-height: 1.3; }

/* Ready indicator */
.fz-ready {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid var(--accent-line);
  border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.fz-ready-badge {
  font-family: var(--rd-font-mono); font-size: 9.5px; font-weight: 700;
  color: var(--accent); letter-spacing: .1em; white-space: nowrap; padding-top: 1px;
}
.fz-ready-text { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }

/* Generate CTA */
.fz-gen-row { display: flex; flex-direction: column; gap: 10px; }
.fz-btn-gen {
  width: 100%; padding: 16px; font-family: var(--rd-font-sans); font-size: 14px;
  font-weight: 800; letter-spacing: .04em; border-radius: 11px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: none;
  transition: opacity .2s, transform .15s;
}
.fz-btn-gen:hover { opacity: .9; transform: translateY(-1px); }
.fz-gen-fusion .fz-btn-gen {
  background: var(--aurora); color: #fff;
}
.fz-badge-chip {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--violet) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--violet) 20%, transparent);
  border-radius: 8px; padding: 8px 12px;
}
.fz-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
.fz-badge-label { font-family: var(--rd-font-mono); font-size: 9px; font-weight: 700; color: var(--violet); letter-spacing: .14em; white-space: nowrap; }
.fz-badge-tip { font-size: 11.5px; color: var(--ink-dim); line-height: 1.4; }

/* Result panel */
.fz-res-h { font-family: var(--rd-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.fz-stage {
  position: relative; background: var(--inset); border-radius: 14px;
  overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--line);
  transition: all .3s var(--rd-ease);
}
.fz-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-faint); font-size: 13px; font-family: var(--rd-font-mono); }

/* Scanning state */
.fz-scan { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: var(--inset); }
.fz-scan-g { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--accent) 12%, transparent)); pointer-events: none; }
.fz-scan-fz .fz-scan-g { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--violet) 16%, transparent)); }
.fz-scan-ln {
  position: absolute; left: 0; right: 0; height: 2px; top: 30%;
  background: var(--accent); opacity: .7; filter: blur(1px);
  animation: fzScanLine 1.6s ease-in-out infinite;
}
.fz-scan-fz .fz-scan-ln { background: var(--violet); }
.fz-proc {
  font-family: var(--rd-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px; position: relative;
}
.fz-proc-fz {
  background: var(--aurora); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fz-scan-steps { display: flex; flex-direction: column; gap: 5px; position: relative; }
.fz-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); transition: color .25s; }
.fz-step-on { color: var(--ink); }
.fz-step-done { color: var(--accent); }
.fz-step-d { width: 14px; font-size: 10px; font-family: var(--rd-font-mono); color: var(--accent); text-align: center; }

/* Result image + compare */
.fz-rimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fz-cmp-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 50% 0 0); opacity: 0; transition: opacity .3s;
}
.fz-comparing .fz-cmp-img { opacity: 1; clip-path: inset(0 0 0 0); animation: none; }
.fz-comparing .fz-rimg { clip-path: inset(0 0 0 50%); }

.fz-foil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  animation: fzFoilShift 4s ease-in-out infinite;
  opacity: 0; transition: opacity .5s .2s;
}
.fz-reveal .fz-foil { opacity: 1; }
.fz-sweep {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.15) 0%, transparent 40%);
  animation: fzSweep .6s var(--rd-ease) both;
}
.fz-result-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--rd-font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .1em; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
}
.fz-result-badge-fz {
  background: color-mix(in srgb, var(--violet) 40%, rgba(0,0,0,.5));
  border-color: color-mix(in srgb, var(--violet) 60%, transparent);
}
.fz-cmp-tag {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 9px; font-family: var(--rd-font-mono);
  font-weight: 600; letter-spacing: .08em; padding: 3px 7px; border-radius: 5px;
  opacity: 0; transition: opacity .2s;
}
.fz-comparing .fz-cmp-tag { opacity: 1; }
.fz-cmp-btn {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  color: #fff; font-family: var(--rd-font-sans); font-size: 11px; font-weight: 700;
  padding: 7px 11px; cursor: pointer; transition: background .15s;
}
.fz-cmp-btn:hover { background: rgba(0,0,0,.7); }

/* LUT strip */
.fz-lut { margin-top: 14px; }
.fz-lut-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.fz-lut-tab {
  font-family: var(--rd-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; color: var(--ink-dim);
  transition: all .15s;
}
.fz-lut-tab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fz-lut-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fz-lut-strip::-webkit-scrollbar { display: none; }
.fz-lut-card {
  flex-shrink: 0; cursor: pointer; border-radius: 8px; overflow: hidden;
  border: 1.5px solid var(--line); transition: border-color .15s, transform .15s;
}
.fz-lut-card.on { border-color: var(--accent); }
.fz-lut-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.fz-lut-thumb { width: 58px; height: 78px; overflow: hidden; }
.fz-lut-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-lut-name { font-size: 9.5px; font-family: var(--rd-font-mono); color: var(--ink-dim); text-align: center; padding: 4px 4px 5px; font-weight: 600; }

/* Actions */
.fz-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.fz-btn-dl {
  width: 100%; padding: 14px; font-family: var(--rd-font-sans); font-size: 13.5px;
  font-weight: 800; letter-spacing: .03em; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: none;
  transition: opacity .2s;
}
.fz-btn-dl:hover { opacity: .9; }
.fz-act-row { display: flex; gap: 8px; }
.fz-btn-ghost {
  flex: 1; padding: 11px 8px; font-family: var(--rd-font-sans); font-size: 12px;
  font-weight: 700; border-radius: 9px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-dim);
  transition: border-color .15s, color .15s;
}
.fz-btn-ghost:hover { border-color: var(--line-2); color: var(--ink); }
.fz-meta {
  margin-top: 10px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--rd-font-mono); font-size: 9.5px; color: var(--ink-faint); letter-spacing: .06em;
}
.fz-meta-em { color: var(--violet); }

/* ── Fusion Loading Overlay ── */
.fz-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,7,25,0.88); backdrop-filter: blur(18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 36px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--rd-ease), visibility .35s;
}
.fz-overlay.show { opacity: 1; visibility: visible; pointer-events: all; }

.fz-ov-stage {
  position: relative; width: 320px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}

.fz-aura {
  position: absolute; inset: -20px; border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%);
  animation: fzPulse 2.4s ease-in-out infinite;
}

.fz-pair { position: relative; display: flex; align-items: center; justify-content: center; }

.fz-ov-card {
  position: absolute; width: 96px; height: 128px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.16); overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 20px color-mix(in srgb, var(--violet) 30%, transparent);
  transition: transform .65s var(--rd-ease), opacity .5s var(--rd-ease);
}
.fz-ov-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-ov-ring {
  position: absolute; inset: -1px; border-radius: 14px;
  background: var(--aurora); opacity: .22; mix-blend-mode: overlay; pointer-events: none;
}
.fz-ov-cap {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 6px 7px;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  color: #fff; font-family: var(--rd-font-sans); font-size: 9px; font-weight: 700;
  text-align: center; line-height: 1.2;
}

.fz-ov-c1 { transform: translateX(-210px) rotate(-16deg); opacity: 0; }
.fz-ov-c2 { transform: translateX(210px) rotate(16deg); opacity: 0; }
.fz-overlay.show .fz-ov-c1 { transform: translateX(-72px) rotate(-7deg); opacity: 1; }
.fz-overlay.show .fz-ov-c2 { transform: translateX(72px) rotate(7deg); opacity: 1; }
.fz-overlay.converge .fz-ov-c1 { transform: translateX(-17px) rotate(-5deg) scale(1.05); }
.fz-overlay.converge .fz-ov-c2 { transform: translateX(17px) rotate(5deg) scale(1.05); }

.fz-spark {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(164,139,255,.18) 0%, transparent 55%);
  animation: fzPulse 1.8s ease-in-out infinite .4s;
  pointer-events: none;
}
.fz-overlay.show .fz-spark { display: block; }

.fz-copy { text-align: center; }
.fz-ov-eyebrow {
  font-family: var(--rd-font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--aurora); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 10px;
}
.fz-ov-headline {
  font-family: var(--rd-font-sans); font-size: 18px; font-weight: 800;
  color: #ece9f6; letter-spacing: -.02em;
  transition: opacity .3s var(--rd-ease);
}
.fz-ov-names {
  margin-top: 6px; font-family: var(--rd-font-mono); font-size: 11px;
  color: rgba(180,170,225,.55); letter-spacing: .05em;
}
.fz-ov-x { font-style: normal; color: var(--violet); }

.fz-bar-wrap {
  margin: 14px auto 0; width: 200px; height: 2px;
  background: rgba(180,170,225,.15); border-radius: 2px; overflow: hidden;
}
.fz-bar-fill { height: 100%; width: 0; background: var(--aurora); border-radius: 2px; }

/* Keyframes */
@keyframes fzFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fzScanLine {
  0%   { top: 10%; opacity: 0.5; }
  50%  { top: 80%; opacity: 0.9; }
  100% { top: 10%; opacity: 0.5; }
}
@keyframes fzFoilShift {
  0%,100% { background-position: -100% 0; }
  50%     { background-position: 200% 0; }
}
@keyframes fzSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fzPulse {
  0%,100% { transform: scale(.85); opacity: .35; }
  50%     { transform: scale(1.06); opacity: .6; }
}

/* ===== Responsive ===== */
@media (max-width: 1280px) {
  :root { --rd-pad-x: 32px; }
  .rd-screen { padding: 40px var(--rd-pad-x) 80px; }
  .rd-home-hero { max-width: 100%; }
  .rd-hero-display { font-size: clamp(38px, 4vw, 50px); }
}
@media (max-width: 1180px) {
  .rd-home-hero { grid-template-columns: 1fr; gap: 34px; max-width: 100%; }
  .rd-hero-left { max-width: 720px; }
  /* Single column here — hero-left gets the full 720px measure instead of a
     0.92fr split, so this tier can safely run bigger than the two-column
     tiers above without repeating the overflow-onto-the-plate bug. */
  .rd-hero-display { font-size: clamp(38px, 5vw, 56px); }
  .rd-sc-plate { max-width: 760px; justify-self: center; }
}
@media (max-width: 1000px) {
  :root { --rd-pad-x: 28px; }
  .rd-screen { padding: 32px var(--rd-pad-x) 72px; }
  .rd-home-hero { grid-template-columns: 1fr; max-width: 100%; }
  .rd-create-grid { grid-template-columns: 1fr; }
  .rd-gallery-grid { grid-template-columns: repeat(4,1fr); }
  .rd-coll-grid, .rd-gacha-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cat-banner-text { max-width: 64%; }
  .cat-banner-wm { display: none; }
  .rd-cat-grid--thietke,
  .rd-cat-grid--lamdep,
  .rd-cat-grid--bienhinh,
  .rd-cat-grid--dichvu { grid-template-columns: repeat(3, 1fr); }
  .rd-cat-grid--thietke .card-featured,
  .rd-cat-grid--lamdep .card-lg,
  .rd-cat-grid--bienhinh .card-banner,
  .rd-cat-grid--bienhinh .card-wide2,
  .rd-cat-grid--dichvu .card-lg,
  .rd-cat-grid--thietke .card-wide { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 720px) {
  :root { --rd-pad-x: 18px; }
  .rd-screen { padding: 22px var(--rd-pad-x) 40px; } /* tab bar is now a flex sibling, no overlap */
  .rd-hero-display { font-size: clamp(36px, 10.5vw, 52px); }
  .rd-nav { display: none; }
  .rd-gallery-grid { grid-template-columns: repeat(3,1fr); }
  .rd-photo-row { grid-template-columns: 110px 1fr; }
  .cat-banner { min-height: 120px; }
  .cat-banner-text { max-width: 100%; padding: 0; }
  .cat-banner-fan, .cat-banner-veil { display: none; }
  .rd-cat-grid--thietke,
  .rd-cat-grid--lamdep,
  .rd-cat-grid--bienhinh,
  .rd-cat-grid--dichvu { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobile bottom tab bar ===== */
.rd-tab-bar { display: none; }
@media (max-width: 720px) {
  /* ── App-shell scroll model ──────────────────────────────────────────────
     iOS Safari lags position:fixed elements during scroll, leaking page content
     below a fixed bottom bar (no pure-CSS cover survives the lag). Fix it
     structurally: lock the document, scroll ONLY .rd-main, and make the header
     + tab bar normal flex items (not fixed) so they're rock-solid pinned.
     DOM order is header → tab-bar → main, so use `order` to lay out
     header → main → tab-bar. */
  .rd-app { height: 100dvh; overflow: hidden; }
  .rd-bar { order: 0; position: static; padding-top: 10px; }
  .rd-main { order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Full-viewport screens' internal-scroll overrides live AFTER their base
     rules (search "stph-root { height:100dvh" below) so they actually win. */

  .rd-tab-bar {
    display: flex; order: 2; flex-shrink: 0; position: static;
    height: 60px; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg);
    border-top: 1px solid var(--line);
    justify-content: space-around; align-items: center;
  }
  .rd-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; flex: 1; height: 100%;
    border: 0; background: transparent; cursor: pointer;
    color: var(--ink-faint); font-family: var(--rd-font-sans);
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.01em;
    padding: 8px 2px 6px; transition: color 0.15s var(--rd-ease);
    -webkit-tap-highlight-color: transparent;
  }
  .rd-tab:hover { color: var(--ink-dim); }
  .rd-tab.on { color: var(--accent, var(--accent)); }
}

/* ================================================================
   DESIGN FLOW — Job Cards, Category, Reference Analysis, Builder, Family
   Prefix: djc- (job cards on home) | dsgn- (category/shared) |
           dref- (reference analysis) | dbldr- (builder) | dfam- (family)
   Token mapping: --em → --accent, --em-soft → --accent-soft,
                  --em-line → --accent-line, --em-ink → --accent-ink,
                  --aurora → --aura-grad
   ================================================================ */

/* ===== HOME: Design Job Cards (djc-*) ===== */
.djc-layout {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}
.djc-hero {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.3s var(--rd-ease), border-color 0.3s var(--rd-ease), box-shadow 0.3s var(--rd-ease);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px 26px 22px;
  text-align: left;
}
.djc-hero:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-3); }
.djc-primary { border-color: var(--accent-line); }
.djc-primary::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 55% at 82% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%); pointer-events:none; }
.djc-tag { position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:5px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:4px 10px; border-radius:999px; }
.djc-tag--em { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.djc-studio-hero { border-color:var(--accent-line); }
.djc-studio-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(70% 55% at 82% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%); pointer-events:none; }
.djc-studio-hero .djc-go { color:var(--accent); }
.djc-frames--strip { gap:11px; }
.djc-frames--strip .djc-frame { width:88px; height:110px; }
.djc-kind { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.djc-name { font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:7px; color:var(--ink); }
.djc-desc { color:var(--ink-dim); font-size:13px; line-height:1.5; margin-top:7px; }
.djc-go { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:16px; display:inline-flex; align-items:center; gap:6px; }
.djc-hero-top { margin-bottom:16px; }
.djc-hero-bot { transform: translateY(-22px); }
.djc-frames { display:flex; align-items:flex-end; gap:12px; margin-bottom:12px; position:relative; }
.djc-frame { position:relative; border:1px solid var(--line-2); border-radius:8px; background:var(--inset); overflow:hidden; flex-shrink:0; }
.djc-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.djc-frame--lit { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.djc-f45  { width:118px; height:148px; }
.djc-f11  { width:118px; height:118px; }
.djc-f916 { width:84px;  height:148px; }
.djc-f169 { width:148px; height:84px; }
.djc-rl { position:absolute; left:5px; bottom:4px; font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.05em; color:#fff; background:rgba(0,0,0,.5); padding:1px 5px; border-radius:4px; z-index:2; }
.djc-hcap { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.djc-hcap::before { content:""; width:16px; height:1px; background:var(--accent-line); }

.djc-col3 { display:flex; flex-direction:column; gap:16px; }
.djc-rcard {
  display:flex; align-items:stretch; gap:18px; padding:20px 22px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  cursor:pointer; text-align:left; transition:transform 0.3s var(--rd-ease), border-color 0.3s var(--rd-ease), box-shadow 0.3s var(--rd-ease);
  overflow:hidden; flex:1; min-height:118px;
}
.djc-rcard:hover { transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow-2); }
.djc-rcard-txt { flex:1; }
.djc-rcard-txt .djc-name { font-size:17px; margin-top:5px; }
.djc-rcard-txt .djc-desc { font-size:12.5px; max-width:280px; }
.djc-rcard-txt .djc-go { margin-top:12px; }
/* Full-bleed diagonal image block — replaces stacked-frame preview */
.djc-rcard-bleed {
  position:relative; flex-shrink:0; margin:-20px -22px -20px 0;
  overflow:hidden; clip-path:polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}
.djc-bleed-slice { position:absolute; top:0; height:100%; }
.djc-bleed-slice img { width:100%; height:100%; object-fit:cover; display:block; }
.djc-rcard-bleed:not(.djc-rcard-bleed--multi) .djc-bleed-slice { left:0; width:100%; }
.djc-rcard-bleed--multi .djc-bleed-slice { clip-path:polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
/* Editorial carousel source frames put text left / product right — zoom + anchor right so only the product shows, not the caption */
.djc-rcard-bleed--multi .djc-bleed-slice { overflow:hidden; }
.djc-rcard-bleed--multi .djc-bleed-slice img { object-position:82% center; transform:scale(2); transform-origin:100% 50%; }
.djc-rcard--launch   .djc-rcard-bleed { width:200px; }
.djc-rcard--covers   .djc-rcard-bleed { width:220px; }
.djc-rcard--carousel .djc-rcard-bleed { width:246px; }

/* Clickable story-cycle affordance (Carousel card only) */
.djc-rcard-bleed--multi:hover .djc-bleed-slice img { filter:brightness(1.06); }
.djc-story-dots { position:absolute; left:26px; bottom:10px; z-index:3; display:flex; gap:5px; }
.djc-story-dots i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .3s var(--rd-ease); }
.djc-story-dots i.on { width:14px; border-radius:3px; background:#fff; }

/* ─── Fan-out reveal system (Design section) ─── */
@keyframes rd-riseIn  { from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;} }
@keyframes rd-fanOut  { 0%{opacity:0;transform:translateX(-92px) translateY(8px) scale(.84) rotate(-5deg);}55%{opacity:1;}100%{opacity:1;transform:none;} }
@keyframes rd-traceIn { from{transform:scaleX(0);opacity:.4;}to{transform:scaleX(1);opacity:1;} }
@keyframes rd-sweep   { 0%{background-position:130% 0;opacity:0;}18%{opacity:1;}82%{opacity:1;}100%{background-position:-50% 0;opacity:0;} }

.djc-reveal { opacity:1; }
.djc-fmt-line { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.djc-fmt-line .od { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; display:flex; align-items:center; gap:5px; }
.djc-fmt-line .dm { color:var(--accent); font-size:8px; }
.djc-fmt-line .trace { flex:1; height:1px; background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px); transform-origin:left center; }
.djc-frames::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:8px; mix-blend-mode:screen; opacity:0; background:linear-gradient(110deg,transparent 34%,rgba(95,210,192,.16) 46%,rgba(160,139,255,.22) 52%,rgba(240,205,134,.16) 60%,transparent 72%); background-size:280% 100%; background-position:130% 0; }

@media (prefers-reduced-motion:no-preference) {
  html.js .djc-seg:not([data-anim="on"]) .djc-reveal { opacity:0; }
  html.js .djc-seg:not([data-anim="on"]) .djc-frames .djc-frame { opacity:0; }
  html.js .djc-seg:not([data-anim="on"]) .djc-fmt-line .trace { transform:scaleX(0); }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-reveal { animation:rd-riseIn .7s var(--rd-ease) both; animation-delay:calc(var(--i,0)*.09s); }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-frames .djc-frame { animation:rd-fanOut .8s var(--rd-ease) both; }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-frames .djc-frame:nth-child(1) { animation-delay:.30s; }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-frames .djc-frame:nth-child(2) { animation-delay:.42s; }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-frames .djc-frame:nth-child(3) { animation-delay:.54s; }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-frames .djc-frame:nth-child(4) { animation-delay:.66s; }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-fmt-line .trace { animation:rd-traceIn .9s var(--rd-ease) .22s both; }
  .djc-seg[data-anim="on"]:not(.anim-done) .djc-frames::after { animation:rd-sweep 1.15s var(--rd-ease) .95s both; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .djc-hero-bot { transform: translateY(-14px); }
  .djc-frames { gap:10px; }
  .djc-f45  { width:104px; height:130px; }
  .djc-f11  { width:104px; height:104px; }
  .djc-f916 { width:74px;  height:130px; }
  .djc-f169 { width:130px; height:74px; }
}

@media (max-width: 900px) {
  .djc-layout { grid-template-columns: 1fr; }
  .djc-col3 { gap:12px; }
  .djc-rcard .djc-rcard-bleed { display:none; }
  .djc-hero-bot { transform:none; }
  .djc-frames { gap:9px; }
  .djc-f45 { width:70px; height:87px; }
  .djc-f11 { width:70px; height:70px; }
  .djc-f916 { width:49px; height:87px; }
  .djc-f169 { width:87px; height:49px; }
}

/* ===== SHARED design flow (dsgn-*) ===== */
.dsgn-cat-screen { max-width: 1540px; margin: 0 auto; }
.dsgn-back { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); display:inline-flex; gap:7px; align-items:center; margin-bottom:24px; background:none; border:0; cursor:pointer; padding:0; }
.dsgn-back:hover { color:var(--ink); }
.dsgn-eyebrow { font-family:var(--rd-font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.dsgn-cat-head { border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:32px; }
.dsgn-cat-h1 { font-size:42px; font-weight:800; letter-spacing:-.03em; line-height:1; margin-top:10px; }
.dsgn-cat-desc { color:var(--ink-dim); font-size:15px; margin-top:11px; max-width:520px; line-height:1.5; }
.dsgn-tabs { display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; }
.dsgn-tab { font-family:var(--rd-font-sans); font-size:13.5px; font-weight:500; color:var(--ink-dim); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; transition:all .2s var(--rd-ease); white-space:nowrap; }
.dsgn-tab:hover { color:var(--ink); border-color:var(--line-2); }
.dsgn-tab.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600; }

/* Start section */
.dsgn-startwrap { margin-bottom:50px; }
.dsgn-start-lbl { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.dsgn-start-lbl::after { content:""; flex:1; height:1px; background:var(--line); }
.dsgn-start { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dsgn-scard { position:relative; border-radius:18px; border:1px solid var(--line); background:var(--card); padding:22px; overflow:hidden; transition:border-color .25s var(--rd-ease); display:flex; flex-direction:column; }
.dsgn-scard:hover { border-color:var(--line-2); }
.dsgn-tag { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.dsgn-scard-h2 { font-size:18px; font-weight:800; letter-spacing:-.02em; margin-top:7px; }
.dsgn-scard-p { color:var(--ink-dim); font-size:13.5px; line-height:1.55; margin-top:8px; }
.dsgn-scard--ref::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 5%,transparent),color-mix(in srgb,var(--violet) 6%,transparent)); pointer-events:none; }
.dsgn-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; margin-top:14px; border:1.5px dashed var(--line-2); border-radius:12px; padding:18px 22px; text-align:center; cursor:pointer; transition:all .2s var(--rd-ease); background:var(--inset); }
.dsgn-drop:hover { border-color:var(--violet); background:color-mix(in srgb,var(--violet) 6%,transparent); }
.dsgn-drop-ic { font-size:26px; color:var(--violet); }
.dsgn-drop-t { font-weight:600; font-size:13.5px; margin-top:6px; color:var(--ink); }
.dsgn-drop-s { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
.dsgn-reads-hint { margin-top:10px; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.dsgn-reads { margin-top:14px; }
.dsgn-reads-lbl { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.dsgn-chips { display:flex; flex-wrap:wrap; gap:6px; }
.dsgn-chip { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:5px 10px; }
.dsgn-dna-mini { display:flex; gap:7px; margin-top:14px; flex:1; }
.dsgn-dna-mini-m { position:relative; flex:1; aspect-ratio:3/4; border-radius:9px; overflow:hidden; border:1px solid var(--line); cursor:pointer; background:none; padding:0; transition:border-color .2s var(--rd-ease), transform .2s var(--rd-ease); }
.dsgn-dna-mini-m:hover { border-color:var(--accent); transform:translateY(-2px); }
.dsgn-dna-mini-m img { width:100%; height:100%; object-fit:cover; display:block; }
.dsgn-dna-mini-name { position:absolute; bottom:0; left:0; right:0; padding:14px 5px 6px; background:linear-gradient(transparent,rgba(0,0,0,.62)); color:#fff; font-size:8.5px; font-weight:700; letter-spacing:.02em; text-align:center; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsgn-dna-mini-m:hover .dsgn-dna-mini-name { opacity:1; }
.dsgn-dna-seeall { display:flex; align-items:center; gap:6px; margin-top:10px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); transition:color .2s; }
.dsgn-dna-seeall:hover { color:var(--accent); }
.dsgn-dna-seeall span { transition:transform .2s; display:inline-block; }
.dsgn-dna-seeall:hover span { transform:translateY(2px); }
.dsgn-dna-arrow { display:flex; justify-content:center; margin-top:auto; padding-top:16px; color:var(--ink-faint); text-decoration:none; transition:color .25s, transform .25s cubic-bezier(.22,1,.36,1); }
.dsgn-dna-arrow:hover { color:var(--ink-dim); transform:translateY(4px); }

/* DNA gallery */
.dsgn-gal-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
.dsgn-gal-title { font-size:26px; font-weight:800; letter-spacing:-.02em; }
.dsgn-gal-sub { color:var(--ink-dim); font-size:13.5px; margin-top:6px; line-height:1.5; }
.dsgn-dna-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.dsgn-dna-card { position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; border:1px solid var(--line); cursor:pointer; transition:transform .3s var(--rd-ease), box-shadow .3s var(--rd-ease); padding:0; }
.dsgn-dna-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-3); }
.dsgn-dna-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--rd-ease); }
.dsgn-dna-card:hover img { transform:scale(1.06); }
.dsgn-dna-grad { position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(8,7,16,.9)); }
.dsgn-dna-use { position:absolute; top:12px; right:12px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:5px 10px; opacity:0; transform:translateY(-4px); transition:all .25s var(--rd-ease); }
.dsgn-dna-card:hover .dsgn-dna-use { opacity:1; transform:translateY(0); }
.dsgn-dna-meta { position:absolute; left:0; right:0; bottom:0; padding:16px 14px 14px; }
.dsgn-dna-name { font-size:18px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.dsgn-dna-sub { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(236,233,246,.65); margin-top:4px; }

/* The poster art already bakes in the brand wordmark + headline, so the
   gradient + meta overlay is redundant chrome. On hover-capable devices keep
   the image clean and reveal name/tagline/gradient only on hover. Touch
   devices (no hover) keep them visible since there's no hover affordance. */
@media (hover: hover) {
  .dsgn-dna-grad { opacity:0; transition:opacity .3s var(--rd-ease); }
  .dsgn-dna-meta { opacity:0; transform:translateY(8px); transition:opacity .3s var(--rd-ease), transform .3s var(--rd-ease); }
  .dsgn-dna-card:hover .dsgn-dna-grad { opacity:1; }
  .dsgn-dna-card:hover .dsgn-dna-meta { opacity:1; transform:translateY(0); }
}

@media (max-width: 900px) {
  .dsgn-start { grid-template-columns:1fr; }
  .dsgn-dna-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dsgn-cat-h1 { font-size:30px; }
}

/* ===== Design Dashboard (dsgn-dash-*) — 2026-07-29 =====
   Single landing view replacing the always-visible 4 tabs. Brand kit summary
   up top (never a gate — see designBrandKit.ts), then 4 task-oriented cards. */
.dsgn-dash { max-width: 1280px; margin: 0 auto; padding-top: 6px; }
.dsgn-dash-lbl { font-family:var(--rd-font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:34px 0 16px; }
.dsgn-dash-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.dsgn-dash-card {
  text-align:left; position:relative; min-height:190px; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,270px); align-items:stretch; gap:18px;
  border-radius:16px; border:1px solid var(--line); background:var(--card);
  padding:20px 18px 18px 20px; cursor:pointer;
  transition:border-color .2s var(--rd-ease), transform .2s var(--rd-ease), box-shadow .2s var(--rd-ease);
  font-family:var(--rd-font-sans);
}
.dsgn-dash-card:hover,
.dsgn-dash-card:focus-visible { border-color:var(--accent-line, var(--line-2)); transform:translateY(-3px); box-shadow:0 18px 42px -34px rgba(37,25,13,.48); }
.dsgn-dash-card:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 55%,white); outline-offset:3px; }
.dsgn-dash-card-copy { position:relative; z-index:2; align-self:center; min-width:0; }
.dsgn-dash-card-ic {
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:14px;
}
.dsgn-dash-card-t { font-size:16.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.dsgn-dash-card-s { font-size:13px; color:var(--ink-dim); line-height:1.5; margin-top:7px; }
.dsgn-dash-card-go { display:inline-block; margin-top:14px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.dsgn-dash-preview { position:relative; min-height:146px; align-self:center; opacity:.72; transform:translateX(14px) scale(.965); transform-origin:center right; transition:opacity .28s var(--rd-ease),transform .38s var(--rd-ease); pointer-events:none; }
.dsgn-dash-card:hover .dsgn-dash-preview,
.dsgn-dash-card:focus-visible .dsgn-dash-preview { opacity:1; transform:translateX(0) scale(1); }
.dsgn-dash-preview::after { content:""; position:absolute; inset:22% 5% 4%; border-radius:50%; background:color-mix(in srgb,var(--accent) 13%,transparent); filter:blur(22px); z-index:-1; opacity:.5; }
.dsgn-dash-preview-frame { position:absolute; display:block; overflow:hidden; border-radius:9px; border:1px solid rgba(255,255,255,.34); background:var(--inset); box-shadow:0 13px 24px -18px rgba(24,16,9,.7); transition:transform .38s var(--rd-ease),filter .28s var(--rd-ease); }
.dsgn-dash-preview-frame img { width:100%; height:100%; display:block; object-fit:cover; }
.dsgn-dash-preview-frame i { position:absolute; top:5px; left:6px; padding:2px 5px; border-radius:999px; background:rgba(12,9,6,.64); color:#fff; font:7px/1 var(--rd-font-mono); font-style:normal; letter-spacing:.08em; }
/* Social: one multi-format campaign rather than three generic thumbnails. */
.dsgn-dash-preview--social .dsgn-dash-preview-frame--1 { width:60px; left:8px; top:27px; transform:rotate(-4deg); }
.dsgn-dash-preview--social .dsgn-dash-preview-frame--2 { width:88px; left:56px; top:7px; z-index:3; transform:rotate(-1deg); }
.dsgn-dash-preview--social .dsgn-dash-preview-frame--3 { width:70px; right:18px; top:13px; z-index:2; transform:rotate(2deg); }
.dsgn-dash-preview--social .dsgn-dash-preview-frame--4 { width:128px; right:3px; bottom:3px; z-index:4; transform:rotate(-1deg); }
/* Launch: four beats in one authored campaign sequence. */
.dsgn-dash-preview--launch .dsgn-dash-preview-frame { bottom:12px; }
.dsgn-dash-preview--launch .dsgn-dash-preview-frame--1 { width:104px; left:0; bottom:25px; transform:rotate(-4deg); }
.dsgn-dash-preview--launch .dsgn-dash-preview-frame--2 { width:76px; left:68px; z-index:3; transform:rotate(-1deg); }
.dsgn-dash-preview--launch .dsgn-dash-preview-frame--3 { width:54px; left:137px; bottom:17px; z-index:2; transform:rotate(2deg); }
.dsgn-dash-preview--launch .dsgn-dash-preview-frame--4 { width:76px; right:0; bottom:25px; z-index:4; transform:rotate(4deg); }
/* Covers: a balanced stack of four real 16:9 thumbnails. */
.dsgn-dash-preview--covers .dsgn-dash-preview-frame { width:188px; right:4px; }
.dsgn-dash-preview--covers .dsgn-dash-preview-frame--1 { top:3px; right:48px; transform:rotate(-3deg) translateY(0); }
.dsgn-dash-preview--covers .dsgn-dash-preview-frame--2 { top:17px; right:33px; z-index:2; transform:rotate(-1.5deg); }
.dsgn-dash-preview--covers .dsgn-dash-preview-frame--3 { top:31px; right:18px; z-index:3; transform:rotate(.8deg); }
.dsgn-dash-preview--covers .dsgn-dash-preview-frame--4 { top:45px; right:3px; z-index:4; transform:rotate(1.5deg); }
/* Carousel: a numbered reading sequence, not a poster gallery. */
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame { width:63px; top:18px; }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--1 { left:4px; transform:rotate(-5deg); }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--2 { left:61px; top:8px; z-index:2; transform:rotate(-2deg); }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--3 { left:119px; top:8px; z-index:3; transform:rotate(2deg); }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--4 { left:177px; transform:rotate(5deg); }
.dsgn-dash-card:hover .dsgn-dash-preview-frame,
.dsgn-dash-card:focus-visible .dsgn-dash-preview-frame { filter:saturate(1.04) brightness(1.02); }
@media (max-width: 920px) {
  .dsgn-dash-cards { grid-template-columns:1fr; }
  .dsgn-dash-card { grid-template-columns:minmax(0,1fr) minmax(230px,290px); }
}
@media (max-width: 640px) {
  .dsgn-dash-cards { grid-template-columns:1fr; }
  .dsgn-dash-card { min-height:268px; grid-template-columns:1fr; gap:8px; padding:18px; }
  .dsgn-dash-card-copy { align-self:start; }
  .dsgn-dash-preview { width:100%; min-height:122px; opacity:1; transform:none; align-self:end; }
  .dsgn-dash-preview--social,
  .dsgn-dash-preview--launch,
  .dsgn-dash-preview--covers,
  .dsgn-dash-preview--carousel { max-width:290px; justify-self:end; }
}

/* Brand kit summary card (empty / filled states) */
.dsgn-brand-card {
  display:flex; align-items:center; gap:14px; border-radius:14px; border:1px solid var(--line);
  background:var(--inset); padding:14px 16px;
}
.dsgn-brand-empty-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--card); color:var(--ink-faint); flex-shrink:0; }
.dsgn-brand-empty-body { flex:1; min-width:0; }
.dsgn-brand-empty-t { font-size:13.5px; font-weight:700; color:var(--ink); }
.dsgn-brand-empty-s { font-size:12.5px; color:var(--ink-dim); margin-top:3px; line-height:1.45; }
.dsgn-brand-setup-btn, .dsgn-brand-edit-btn {
  font-family:var(--rd-font-sans); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:9px;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); cursor:pointer; flex-shrink:0;
  transition:filter .2s;
}
.dsgn-brand-setup-btn:hover, .dsgn-brand-edit-btn:hover { filter:brightness(1.05); }
.dsgn-brand-edit-btn { background:var(--card); color:var(--ink); border-color:var(--line-2); }
.dsgn-brand-logo { width:40px; height:40px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--card); }
.dsgn-brand-mono { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; flex-shrink:0; }
.dsgn-brand-filled-body { flex:1; min-width:0; }
.dsgn-brand-filled-name { font-size:14px; font-weight:700; color:var(--ink); }
.dsgn-brand-swatches { display:flex; gap:6px; margin-top:6px; }
.dsgn-brand-swatch { width:14px; height:14px; border-radius:50%; border:1px solid var(--line-2); display:inline-block; }

/* Brand kit edit sheet (bkit-*) — reuses .ep-veil/.ep-card modal chrome */
.bkit-card { width:min(480px, 100%); max-height:86vh; overflow-y:auto; }
.bkit-fields { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.bkit-label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-dim); font-family:var(--rd-font-sans); }
.bkit-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Color swatches — fixed small box, never stretched to the field width
   (2026-07-29 fix: input[type=color] was inheriting the 100%-width text
   field style and rendering as a huge full-column rectangle). */
.bkit-swatch {
  -webkit-appearance:none; appearance:none; width:52px; height:36px; padding:3px;
  border-radius:9px; border:1px solid var(--line-2); background:var(--card);
  cursor:pointer; align-self:flex-start;
}
.bkit-swatch::-webkit-color-swatch-wrapper { padding:2px; }
.bkit-swatch::-webkit-color-swatch { border-radius:6px; border:none; }
.bkit-swatch-sm { width:36px; height:32px; }

/* Color chain — base swatch + up to 3 chained extras, "+" always at the
   tail. Wraps inside its own grid column (.bkit-row2) so 4 small boxes fit
   without stretching the column. */
.bkit-chain { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.bkit-chain-extra { position:relative; }
.bkit-extra-remove {
  position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--ink); color:var(--bg); border:1px solid var(--card); font-size:8.5px;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.bkit-chain-add {
  width:36px; height:32px; border-radius:9px; border:1px dashed var(--line-2); background:var(--inset);
  color:var(--ink-faint); font-size:16px; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.bkit-chain-add:hover { color:var(--accent); border-color:var(--accent-line, var(--line-2)); }

/* Logo — preview + trigger fused into one compact button, confined to its
   own hit area rather than a separate full-width preview + button row. */
.bkit-logo-ctrl {
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  padding:6px 14px 6px 6px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--card); color:var(--ink); font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:var(--rd-font-sans);
}
.bkit-logo-ctrl:hover { border-color:var(--accent-line, var(--line-2)); color:var(--accent); }
.bkit-logo-thumb { width:28px; height:28px; border-radius:7px; object-fit:cover; }
.bkit-logo-ic { width:28px; height:28px; border-radius:7px; background:var(--inset); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bkit-expand-btn {
  text-align:left; background:none; border:0; color:var(--accent); font-size:12.5px; font-weight:600;
  cursor:pointer; padding:2px 0; font-family:var(--rd-font-sans);
}
.bkit-save { margin-top:2px; }

/* ===== REFERENCE ANALYSIS (dref-*) ===== */
.dref-screen { max-width: 1180px; margin: 0 auto; }
.dref-layout { display:grid; grid-template-columns:360px 1fr; gap:40px; align-items:start; }
.dref-img-col { }
.dref-eyebrow { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.dref-img-wrap { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); aspect-ratio:3/4; }
.dref-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.dref-img-badge { position:absolute; top:12px; left:12px; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); padding:5px 10px; border-radius:999px; }
.dref-change-btn { margin-top:12px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; width:100%; }
.dref-change-btn:hover { color:var(--ink); border-color:var(--line-2); }
.dref-right { }
.dref-section-title { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }
.dref-section-sub { color:var(--ink-dim); font-size:14px; line-height:1.5; margin-bottom:22px; }
.dref-keeps { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.dref-keep { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-dim); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .2s var(--rd-ease); }
.dref-keep:hover { border-color:var(--line-2); color:var(--ink); }
.dref-keep.on { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.dref-keep-check { width:18px; height:18px; border-radius:5px; border:1.5px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.dref-dist-lbl { font-size:14px; font-weight:700; color:var(--ink-dim); margin-bottom:12px; }
.dref-dists { display:flex; gap:10px; margin-bottom:32px; }
.dref-dist { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:all .2s var(--rd-ease); text-align:left; }
.dref-dist:hover { border-color:var(--line-2); }
.dref-dist.on { border-color:var(--accent-line); background:var(--accent-soft); }
.dref-dist b { font-size:14px; font-weight:700; color:var(--ink); }
.dref-dist span { font-size:12px; color:var(--ink-dim); }
.dref-cta { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--rd-font-sans); font-weight:700; font-size:14.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:12px; padding:15px; cursor:pointer; transition:transform .2s var(--rd-ease); }
.dref-cta:hover { transform:translateY(-2px); }

@media (max-width: 900px) {
  .dref-layout { grid-template-columns:1fr; }
  .dref-img-wrap { max-width:280px; }
}

/* ===== DESIGN BUILDER (dbldr-*) ===== */
.dbldr-root { --dbldr-sidebar:460px; display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg); }
.dbldr-nav { display:flex; align-items:center; justify-content:space-between; height:58px; padding:0 22px; border-bottom:1px solid var(--line); background:var(--bg); flex-shrink:0; z-index:20; }
.dbldr-back-logo { display:flex; align-items:center; gap:7px; font-weight:800; font-size:16px; letter-spacing:-.02em; background:none; border:0; cursor:pointer; color:var(--ink); font-family:var(--rd-font-sans); }
.dbldr-bolt { color:var(--accent); }
.dbldr-mg { background:var(--aura-grad,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:2px; }
.dbldr-crumb { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin-left:10px; }
.dbldr-crumb b { color:var(--accent); }
.dbldr-dash-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-left:10px; border-radius:9px;
  background:transparent; border:1px solid var(--line); color:var(--ink-dim);
  cursor:pointer; transition:background .18s, border-color .18s, color .18s; flex-shrink:0;
}
.dbldr-dash-link:hover { background:var(--inset); border-color:var(--line-2); color:var(--accent); }
.rd-logo-bolt + .dbldr-dash-link { position:absolute; left:calc(var(--dbldr-sidebar) - 15px); margin-left:0; }
.rd-logo-bolt + .dbldr-dash-link + .dbldr-dash-link { display:none; }
.dbldr-nav-right { display:flex; align-items:center; gap:12px; }
.dbldr-gen-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--rd-font-sans); font-weight:600; font-size:13.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:10px; padding:10px 18px; cursor:pointer; transition:transform .2s var(--rd-ease); white-space:nowrap; }
.dbldr-gen-btn:hover { transform:translateY(-2px); }
.dbldr-btn-em { display:inline-flex; align-items:center; gap:8px; font-family:var(--rd-font-sans); font-weight:600; font-size:13.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:11px; padding:12px 22px; cursor:pointer; transition:transform .2s var(--rd-ease); white-space:nowrap; }
.dbldr-btn-em:hover { transform:translateY(-2px); }
.dbldr-btn-ghost { font-family:var(--rd-font-sans); font-weight:600; font-size:13.5px; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:11px; padding:12px 20px; cursor:pointer; white-space:nowrap; }
/* 300px -> 360px 2026-07-29: user feedback — the Output card's ratio row (8
   chips: 4:5/9:16/1:1/16:9/2:3/3:2/3:4/4:3) truncated at 300px ("3:2" showing
   only "3"), and the canvas column had plenty of spare width to give up.
   360px matches .dref-layout's sidebar elsewhere in this file. */
.dbldr-body { display:grid; grid-template-columns:var(--dbldr-sidebar) 1fr; flex:1; overflow:hidden; }
.dbldr-rail { overflow-y:auto; padding:20px 18px; scrollbar-width:thin; scrollbar-color:var(--accent-line) var(--bg); }
.dbldr-rail--left { border-right:1px solid var(--line); }
.dbldr-rail--right { border-left:1px solid var(--line); }

/* ── New 2-col form panel ── */
.dbldr-form { overflow-y:auto; padding:16px 16px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; scrollbar-color:var(--accent-line) var(--bg); }
.dbldr-form-block { display:flex; flex-direction:column; gap:8px; }
.dbldr-form-block--colors { gap:6px; }
.dbldr-form-lbl { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dbldr-form-lbl::after { content:""; flex:1; height:1px; background:var(--line); min-width:8px; }
.dbldr-form-hint { font-size:10.5px; line-height:1.5; color:var(--ink-faint); }
.dbldr-slot-row { display:flex; gap:8px; align-items:flex-start; }
.dbldr-slot-row.off .dbldr-slot-body { opacity:.38; }
.dbldr-slot-toggle { flex-shrink:0; margin-top:2px; display:flex; align-items:center; }
.dbldr-slot-toggle input[type="checkbox"] { display:none; }
.dbldr-slot-check { display:inline-block; width:15px; height:15px; border:1.5px solid var(--line-2); border-radius:4px; cursor:pointer; position:relative; transition:all .15s; }
.dbldr-slot-toggle input:checked + .dbldr-slot-check { background:var(--accent); border-color:var(--accent); }
.dbldr-slot-toggle input:checked + .dbldr-slot-check::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; }
.dbldr-slot-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.dbldr-slot-role { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.dbldr-slot-input { width:100%; font-family:var(--rd-font-sans); font-size:12.5px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:6px; padding:6px 8px; resize:none; line-height:1.4; transition:border-color .15s; box-sizing:border-box; }
.dbldr-slot-input:focus { outline:none; border-color:var(--accent); }
.dbldr-slot-input:disabled { cursor:default; }
/* 2026-07-29 (round 5): .dbldr-logoslot* below was dead CSS — the JSX had
   already been renamed to .dbldr-logo-inline* at some point but the CSS
   never followed, so the logo upload row rendered completely unstyled
   (reported as "should show as a logo frame"). These are the live rules. */
.dbldr-logo-inline { display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line-2); border-radius:10px; padding:9px 11px; cursor:pointer; background:var(--card); transition:border-color .2s; }
.dbldr-logo-inline:hover { border-color:var(--accent-line); }
.dbldr-logo-inline-img { width:38px; height:38px; border-radius:8px; object-fit:contain; background:var(--inset); border:1px solid var(--line); flex-shrink:0; padding:5px; box-sizing:border-box; }
.dbldr-logo-inline-ic { width:38px; height:38px; border-radius:8px; border:1.5px dashed var(--line-2); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--ink-faint); flex-shrink:0; }
.dbldr-logo-inline-t { flex:1; font-size:12px; font-weight:600; color:var(--ink-dim); }
.dbldr-logo-inline-x { width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:var(--inset); color:var(--ink-faint); font-size:11px; line-height:1; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s; }
.dbldr-logo-inline-x:hover { color:var(--accent); border-color:var(--accent-line); }

/* Logo position picker — always-visible 3x2 grid, replaces a hidden text
   input + dropdown-toggle (round 5, see LOGO_POSITION_OPTIONS comment). */
.dbldr-logopos { margin-top:8px; }
.dbldr-logopos-auto { margin-bottom:6px; }
.dbldr-logopos-autobtn { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); background:transparent; border:0; padding:0; cursor:pointer; transition:color .15s; }
.dbldr-logopos-autobtn:hover { color:var(--ink-dim); }
.dbldr-logopos-autobtn.on { color:var(--accent); font-weight:700; }
.dbldr-logopos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dbldr-logopos-cell { font-family:var(--rd-font-sans); font-size:10.5px; font-weight:600; line-height:1.3; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:8px; padding:8px 4px; cursor:pointer; text-align:center; transition:background .15s, border-color .15s, color .15s; }
.dbldr-logopos-cell:hover { border-color:var(--accent-line); color:var(--ink); }
.dbldr-logopos-cell.on { background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent); color:var(--accent); }
.dbldr-generate { margin-top:4px; width:100%; font-family:var(--rd-font-sans); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--accent-ink); background:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 72%, #000); border-radius:10px; padding:14px 20px; cursor:pointer; box-shadow:var(--btn-mat); transition:box-shadow .2s, transform .15s, filter .15s; }
.dbldr-generate:hover { filter:brightness(1.04); }
.dbldr-generate:active { transform:translateY(1px); box-shadow:var(--btn-mat-press); filter:brightness(.98); }

.dbldr-rlbl { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:13px; display:flex; align-items:center; gap:8px; }
.dbldr-rlbl::after { content:""; flex:1; height:1px; background:var(--line); }
.dbldr-dnapill { display:flex; align-items:center; gap:10px; padding:11px; background:var(--card); border:1px solid var(--accent-line); border-radius:12px; margin-bottom:22px; }
.dbldr-dna-thumb { width:40px; height:50px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.dbldr-dna-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-dna-info { flex:1; }
.dbldr-dna-info b { font-size:14px; font-weight:800; display:block; }
.dbldr-dna-info span { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.dbldr-dna-swap { margin-left:auto; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); cursor:pointer; background:none; border:0; padding:0; }
.dbldr-field { margin-bottom:12px; }
.dbldr-fl { font-size:11.5px; font-weight:600; color:var(--ink-dim); margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; }
.dbldr-opt { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:400; }
.dbldr-imgslot { position:relative; border:1.5px dashed var(--line-2); border-radius:10px; overflow:hidden; cursor:pointer; aspect-ratio:4/3; background:var(--inset); }
.dbldr-imgslot img { width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-imgslot-rep { position:absolute; inset:0; background:rgba(8,7,16,.4); opacity:0; display:flex; align-items:center; justify-content:center; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; transition:opacity .2s; }
.dbldr-imgslot:hover .dbldr-imgslot-rep { opacity:1; }
/* ── User subject upload (their product / self) ── */
.dbldr-req { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.dbldr-subjtype { display:flex; gap:4px; padding:3px; background:var(--inset); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.dbldr-subjseg { flex:1; font-family:var(--rd-font-sans); font-size:12px; font-weight:600; color:var(--ink-dim); background:transparent; border:0; border-radius:7px; padding:7px 8px; cursor:pointer; transition:all .18s var(--rd-ease); }
.dbldr-subjseg.on { background:var(--accent); color:var(--accent-ink); }
.dbldr-subjdrop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; border:1.5px dashed var(--line-2); border-radius:10px; background:var(--inset); aspect-ratio:4/3; cursor:pointer; padding:14px; transition:border-color .18s, background .18s; }
.dbldr-subjdrop:hover, .dbldr-subjdrop.over { border-color:var(--accent); background:var(--accent-line); }
.dbldr-subjdrop-ic { font-size:26px; line-height:1; color:var(--accent); }
.dbldr-subjdrop-t { font-size:12.5px; font-weight:600; color:var(--ink); }
.dbldr-subjdrop-s { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.dbldr-imgslot--filled { cursor:default; }
.dbldr-imgslot-actions { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(8,7,16,.46); opacity:0; transition:opacity .2s; }
.dbldr-imgslot--filled:hover .dbldr-imgslot-actions { opacity:1; }
.dbldr-imgslot-actions button { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:7px; padding:7px 11px; cursor:pointer; transition:background .15s; }
.dbldr-imgslot-actions button:hover { background:rgba(255,255,255,.26); }
.dbldr-subjnote { font-size:10.5px; line-height:1.5; color:var(--ink-faint); margin-top:7px; }
.dbldr-subjnote b { color:var(--ink-dim); font-weight:700; }
.dbldr-inp, .dbldr-ta { width:100%; font-family:var(--rd-font-sans); font-size:13px; color:var(--ink); background:var(--inset); border:1px solid var(--line); border-radius:9px; padding:9px 11px; resize:none; transition:border-color .2s; -webkit-appearance:none; appearance:none; box-sizing:border-box; }
[data-theme="light"] .dbldr-inp,
[data-theme="light"] .dbldr-ta { background:#e2d8c6; }
.dbldr-inp:focus, .dbldr-ta:focus { outline:none; border-color:var(--accent-line); }
.dbldr-inp::placeholder, .dbldr-ta::placeholder { color:var(--ink-faint); }
.dbldr-swatches { display:flex; gap:7px; align-items:center; }
.dbldr-sw { width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.12); cursor:pointer; flex-shrink:0; }
.dbldr-sw--add { border:1.5px dashed var(--line-2); background:var(--inset); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:14px; }
/* Canvas */
.dbldr-canvas { background:radial-gradient(120% 80% at 50% 0%, var(--inset), var(--bg)); display:flex; flex-direction:column; align-items:center; overflow-y:auto; padding:18px 22px; }
.dbldr-formatbar { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; justify-content:center; }
.dbldr-fmt { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-dim); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer; transition:all .2s var(--rd-ease); white-space:nowrap; }
.dbldr-fmt:hover { color:var(--ink); border-color:var(--line-2); }
.dbldr-fmt.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600; }
.dbldr-fmt small { opacity:.6; margin-left:3px; }
.dbldr-fmt-wrap { position:relative; display:flex; }
.dbldr-fmt-badge { position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:8px; line-height:1; }
.dbldr-fmt-badge--live { background:var(--accent); animation:dbldr-pillpulse 1.1s ease-in-out infinite; }
.dbldr-fmt-badge--done { background:var(--accent); color:var(--accent-ink); font-weight:800; }
@keyframes dbldr-pillpulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(1.15); } }
.dbldr-fmt-caption { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px; font-size:9.5px; color:var(--ink-faint); white-space:nowrap; }
.dbldr-fmt-compare-toggle { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-dim); background:transparent; border:1px dashed var(--line-2); border-radius:999px; padding:7px 13px; cursor:pointer; white-space:nowrap; }
.dbldr-fmt-compare-toggle:hover { color:var(--ink); border-color:var(--accent-line); }
.dbldr-compare-strip { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:-8px 0 18px; }
.dbldr-compare-card { display:flex; flex-direction:column; gap:6px; align-items:center; background:transparent; border:0; cursor:pointer; padding:0; width:96px; }
.dbldr-compare-img { width:100%; border-radius:10px; overflow:hidden; border:2px solid var(--line); transition:border-color .2s; }
.dbldr-compare-card.on .dbldr-compare-img { border-color:var(--accent); }
.dbldr-compare-img img { width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-compare-label { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.03em; color:var(--ink-faint); }
.dbldr-compare-card.on .dbldr-compare-label { color:var(--ink); }
/* min-height was 0 (explicit flex-shrink-to-fit). That's the classic flexbox
   trap: a flex:1 box with min-height:0 CAN shrink below its content's natural
   size — but .dbldr-poster's height comes from a fixed width + aspect-ratio,
   not from flex sizing, so it never actually shrinks with the box. Result:
   for any ratio taller than the leftover space (Story 9:16, especially with
   the compare-strip also eating vertical room), the box collapsed to fit
   while the poster inside it kept its full height and visually spilled out
   over the button row below (reported 2026-07-29, screenshot showed "Tải
   ảnh"/"Đổi application" half-hidden under the poster). Dropping min-height
   back to its flex default (auto) means the box won't shrink past its
   content, so it grows instead — .dbldr-canvas's existing overflow-y:auto
   then scrolls the extra height instead of overlapping it. */
.dbldr-stage-area { display:flex; flex-direction:row; align-items:center; gap:20px; flex:1; width:100%; }
.dbldr-stage { flex:1; display:flex; align-items:center; justify-content:center; min-height:200px; min-width:0; }
.dbldr-family-col { display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0; }
.dbldr-canvas-hint--vert { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0; }
.dbldr-family--vert { flex-direction:column !important; margin-top:0 !important; gap:10px; }
.dbldr-family--vert .dbf-f45  { width:50px; height:62px; }
.dbldr-family--vert .dbf-f11  { width:56px; height:56px; }
.dbldr-family--vert .dbf-f916 { width:38px; height:68px; }
.dbldr-family--vert .dbf-f169 { width:68px; height:38px; }
.dbldr-poster { position:relative; border-radius:16px; border:1px solid var(--line); overflow:hidden; background:var(--inset); transition:width .3s var(--rd-ease); cursor:default; }
/* Desktop poster widths — sized to fill the centre column */
.dbldr-poster[data-fmt="post"]   { width: 480px; }
.dbldr-poster[data-fmt="story"]  { width: 320px; }
.dbldr-poster[data-fmt="square"] { width: 520px; }
.dbldr-poster[data-fmt="banner"] { width: 700px; }

/* Per-format typography — font sizes only; width is controlled by the free-unit container */
/* Post 4:5 */
.dbldr-poster[data-fmt="post"] .dbldr-hl  { font-size: 23px; }
.dbldr-poster[data-fmt="post"] .dbldr-sub { font-size: 10.5px; }

/* Story 9:16 */
.dbldr-poster[data-fmt="story"] .dbldr-hl  { font-size: 20px; line-height: 1.12; }
.dbldr-poster[data-fmt="story"] .dbldr-sub { font-size: 10px; }
.dbldr-poster[data-fmt="story"] .dbldr-price { font-size: 16px; }

/* Square 1:1 */
.dbldr-poster[data-fmt="square"] .dbldr-hl  { font-size: 26px; }
.dbldr-poster[data-fmt="square"] .dbldr-sub { font-size: 11px; }

/* Banner 16:9 */
.dbldr-poster[data-fmt="banner"] .dbldr-hl  { font-size: 34px; line-height: 1.12; }
.dbldr-poster[data-fmt="banner"] .dbldr-sub { font-size: 11px; margin-top: 8px; }
.dbldr-poster[data-fmt="banner"] .dbldr-price { font-size: 16px; }
.dbldr-poster[data-fmt="banner"] .dbldr-price-lbl { font-size: 8px; }
.dbldr-poster[data-fmt="banner"] .dbldr-cta { font-size: 9.5px; padding: 8px 14px; }

/* Idle / scanning states — shown in place of the composited poster before a
   real result exists. No demo photo, no ghost-box skeleton (v7). */
.dbldr-stage-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:28px; color:var(--ink-faint); }
.dbldr-stage-empty-ic { font-size:40px; line-height:1; color:var(--ink-faint); opacity:.6; }
.dbldr-stage-empty-t { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.dbldr-stage-empty-s { font-size:12.5px; max-width:28ch; line-height:1.5; }
.dbldr-stage-scan { position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.dbldr-stage-scan-g { position:absolute; inset:0; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:28px 28px; opacity:.5; }
.dbldr-stage-scan-ln { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 16px 3px var(--accent-soft, rgba(0,0,0,.15)); animation:dbldr-scanmove 2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes dbldr-scanmove { 0% { top:6%; } 50% { top:92%; } 100% { top:6%; } }
.dbldr-stage-scan-mid { position:relative; z-index:1; width:min(78%, 320px); display:grid; gap:12px; text-align:center; color:var(--ink); }
.dbldr-stage-scan-ic { font-size:30px; line-height:1; color:var(--ink-faint); opacity:.6; }
.dbldr-stage-scan-tag { font-family:var(--rd-font-mono); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.dbldr-stage-scan-t { font-size:19px; font-weight:800; letter-spacing:-.02em; }
.dbldr-stage-scan-step { font-size:11.5px; color:var(--ink-dim); }
.dbldr-stage-scan-bar { height:4px; border-radius:999px; background:var(--line-2); overflow:hidden; }
.dbldr-stage-scan-bar span { display:block; height:100%; background:var(--accent); transition:width .55s ease; }
.dbldr-poster-bg { position:absolute; inset:0; }
.dbldr-poster-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-poster-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,12,8,0) 30%,rgba(20,12,8,.42) 100%); }
/* Story 9:16: text sits at bottom — heavier gradient there for legibility */
.dbldr-poster[data-fmt="story"] .dbldr-poster-scrim { background:linear-gradient(180deg,rgba(20,12,8,0) 40%,rgba(20,12,8,.68) 100%); }
.dbldr-poster-content { position:absolute; inset:0; }
.dbldr-poster-topbar { display:flex; justify-content:space-between; align-items:center; }
/* draggable poster elements (each snaps to a 3×3 region) */
.dbldr-region { position:absolute; display:flex; flex-direction:column; gap:10px; max-width:84%; }
.dbldr-drag { position:relative; }
.dbldr-drag.dragging { cursor:grabbing; opacity:.92; }
.dbldr-grip { position:absolute; top:-8px; left:-8px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:10px; display:flex; align-items:center; justify-content:center; cursor:grab; opacity:0; transition:opacity .15s var(--rd-ease); touch-action:none; z-index:9; box-shadow:0 2px 8px rgba(0,0,0,.4); }
/* Freeform drag+resize unit — replaces the old region snap system */
.dbldr-free-unit { position:absolute; display:inline-block; cursor:default; }
.dbldr-free-unit .dbldr-grip { position:absolute; top:-14px; left:0; opacity:0; transition:opacity .15s; cursor:grab; background:rgba(0,0,0,.55); color:#fff; border-radius:4px; padding:2px 7px; font-size:12px; line-height:1; user-select:none; }
.dbldr-free-unit:hover .dbldr-grip,
.dbldr-free-unit.active .dbldr-grip,
.dbldr-free-unit:has(.dbldr-sel:focus) .dbldr-grip { opacity:1; }
.dbldr-free-unit.active .dbldr-grip { cursor:grabbing; }
/* Resize pill — small solid button, hidden until text is focused */
.dbldr-resize-h { position:absolute; top:50%; right:4px; transform:translateY(-50%); width:30px; height:16px; cursor:ew-resize; border-radius:999px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:700; letter-spacing:.5px; opacity:0; transition:opacity .15s; user-select:none; z-index:10; pointer-events:auto; }
.dbldr-free-unit:has(.dbldr-sel:focus) .dbldr-resize-h,
.dbldr-resize-h:hover,
.dbldr-free-unit.active .dbldr-resize-h { opacity:1; }
.dbldr-brand { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.dbldr-season { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px 9px; }
/* CUTOUT: tiny vermilion accent on the eyebrow so it reads on the cream collage */
.dbldr-poster[data-dna="cutout"] .dbldr-season { color:#e8462a; border-color:rgba(232,70,42,.55); }
/* MOTION: small amber accent on the eyebrow (golden-hour platform) */
.dbldr-poster[data-dna="motion"] .dbldr-season { color:#e0a04a; border-color:rgba(224,160,74,.5); }
/* MONOTYPE: restrained bronze / oxidized-gold accent on the eyebrow */
.dbldr-poster[data-dna="monotype"] .dbldr-season { color:#b08d57; border-color:rgba(176,141,87,.5); }
/* NEGATIVE: oxblood-red accent — minimal, echoes the burgundy bag in the photography */
.dbldr-poster[data-dna="negative"] .dbldr-season { color:#7a1c1c; border-color:rgba(122,28,28,.5); }

/* ═══════════════════════════════════════════════════════════════════════════════
   PER-DNA TYPOGRAPHY PERSONALITIES
   Each block is a semantic type proxy — font, weight, tracking, color, CTA style.
   Imperative DOM overrides (right-rail Serif/Sans/Mono) win via inline style.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── ÉDITO: Contemporary Editorial — Cormorant Garamond italic, high-contrast fashion ── */
.dbldr-poster[data-dna="edito"] .dbldr-hl { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-style:italic; color:#ffffff; letter-spacing:.015em; line-height:1.1; }
.dbldr-poster[data-dna="edito"] .dbldr-sub { color:rgba(255,255,255,.72); letter-spacing:.04em; }
.dbldr-poster[data-dna="edito"] .dbldr-cta { background:transparent; color:rgba(255,255,255,.88); border-radius:0; padding:0; text-decoration:underline; text-underline-offset:3px; }

/* ── ATELIER: Clean Luxury — Fraunces optical serif 500, warm ivory, restrained ── */
.dbldr-poster[data-dna="atelier"] .dbldr-hl { font-family:'Fraunces',Georgia,serif; font-weight:500; color:#f5f0e8; letter-spacing:.005em; line-height:1.15; }
.dbldr-poster[data-dna="atelier"] .dbldr-sub { color:rgba(245,240,232,.70); }
.dbldr-poster[data-dna="atelier"] .dbldr-brand { color:rgba(245,240,232,.85); }
.dbldr-poster[data-dna="atelier"] .dbldr-season { color:rgba(245,240,232,.62); border-color:rgba(245,240,232,.28); }
.dbldr-poster[data-dna="atelier"] .dbldr-cta { background:rgba(245,240,232,.12); color:#f5f0e8; border-radius:0; padding:0; letter-spacing:.16em; border-bottom:1px solid rgba(245,240,232,.4); }

/* ── AFTER HOURS: Cinematic Urban — Oswald condensed 700, urban compression ── */
.dbldr-poster[data-dna="afterhours"] .dbldr-hl { font-family:'Oswald',system-ui,sans-serif; font-weight:700; color:#e8edf5; letter-spacing:.04em; line-height:.88; text-transform:uppercase; }
.dbldr-poster[data-dna="afterhours"] .dbldr-sub { color:rgba(232,237,245,.75); letter-spacing:.025em; }
.dbldr-poster[data-dna="afterhours"] .dbldr-brand { color:rgba(232,237,245,.85); letter-spacing:.25em; }
.dbldr-poster[data-dna="afterhours"] .dbldr-cta { background:transparent; color:#e8edf5; border-radius:0; padding:0; letter-spacing:.1em; }

/* ── CUTOUT: Tactile Collage — bold grotesk sans, uppercase, cream paper ── */
.dbldr-poster[data-dna="cutout"] .dbldr-hl { font-family:var(--rd-font-sans),system-ui,sans-serif; font-weight:800; text-transform:uppercase; color:#f0ede8; letter-spacing:-.005em; line-height:1.05; }
.dbldr-poster[data-dna="cutout"] .dbldr-sub { color:rgba(240,237,232,.72); }
.dbldr-poster[data-dna="cutout"] .dbldr-brand { color:rgba(240,237,232,.85); }
.dbldr-poster[data-dna="cutout"] .dbldr-season { color:#e8462a; border-color:#e8462a; }
.dbldr-poster[data-dna="cutout"] .dbldr-cta { background:#f0ede8; color:#1a1208; font-family:var(--rd-font-sans); font-weight:800; letter-spacing:.05em; }

/* ── POSTER LAB: Graphic Energy — geometric sans 900, headline as graphic ── */
.dbldr-poster[data-dna="posterlab"] .dbldr-hl { font-family:var(--rd-font-sans),system-ui,sans-serif; font-weight:900; color:#ffffff; letter-spacing:-.04em; line-height:.9; }
.dbldr-poster[data-dna="posterlab"] .dbldr-sub { color:rgba(255,255,255,.88); letter-spacing:.01em; }
.dbldr-poster[data-dna="posterlab"] .dbldr-brand { color:#ffffff; font-weight:700; }
.dbldr-poster[data-dna="posterlab"] .dbldr-price-val { font-family:var(--rd-font-sans); font-weight:900; color:#ffffff; }
.dbldr-poster[data-dna="posterlab"] .dbldr-cta { background:#ffffff; color:#1a1208; font-family:var(--rd-font-sans); font-weight:900; letter-spacing:.04em; }
/* POSTER LAB: larger headline — headline becomes graphic element */
.dbldr-poster[data-dna="posterlab"][data-fmt="post"]   .dbldr-hl { font-size:28px; }
.dbldr-poster[data-dna="posterlab"][data-fmt="story"]  .dbldr-hl { font-size:24px; }
.dbldr-poster[data-dna="posterlab"][data-fmt="square"] .dbldr-hl { font-size:32px; }
.dbldr-poster[data-dna="posterlab"][data-fmt="banner"] .dbldr-hl { font-size:44px; }

/* ── NEGATIVE: Neo-Minimal — Hanken Grotesk 200 ultralight, wide tracking ── */
.dbldr-poster[data-dna="negative"] .dbldr-hl { font-family:var(--rd-font-sans),system-ui,sans-serif; font-weight:200; color:#e0e0de; letter-spacing:.07em; line-height:1.35; }
.dbldr-poster[data-dna="negative"] .dbldr-sub { color:rgba(224,224,222,.60); letter-spacing:.04em; line-height:1.6; }
.dbldr-poster[data-dna="negative"] .dbldr-brand { color:rgba(224,224,222,.75); letter-spacing:.22em; }
.dbldr-poster[data-dna="negative"] .dbldr-season { color:#7a1c1c; border-color:#7a1c1c; }
/* NEGATIVE: smaller, quieter headline — silence is the design */
.dbldr-poster[data-dna="negative"][data-fmt="post"]   .dbldr-hl { font-size:16px; }
.dbldr-poster[data-dna="negative"][data-fmt="story"]  .dbldr-hl { font-size:14px; }
.dbldr-poster[data-dna="negative"][data-fmt="square"] .dbldr-hl { font-size:18px; }
.dbldr-poster[data-dna="negative"][data-fmt="banner"] .dbldr-hl { font-size:22px; }

/* ── MONOTYPE: Experimental Print — Merriweather slab serif 900, heavy letterpress ── */
.dbldr-poster[data-dna="monotype"] .dbldr-hl { font-family:'Merriweather',Georgia,serif; font-weight:900; color:#ede9e0; letter-spacing:.02em; line-height:1.0; }
.dbldr-poster[data-dna="monotype"] .dbldr-sub { color:rgba(237,233,224,.70); letter-spacing:.03em; }
.dbldr-poster[data-dna="monotype"] .dbldr-brand { color:rgba(237,233,224,.85); }
.dbldr-poster[data-dna="monotype"] .dbldr-season { color:#b08d57; border-color:#b08d57; }
.dbldr-poster[data-dna="monotype"] .dbldr-cta { background:rgba(237,233,224,.14); color:#ede9e0; border-radius:0; padding:0 0 1px; letter-spacing:.14em; border-bottom:1px solid rgba(237,233,224,.4); }
/* MONOTYPE: slightly larger headline — letterpress display energy */
.dbldr-poster[data-dna="monotype"][data-fmt="post"]   .dbldr-hl { font-size:26px; }
.dbldr-poster[data-dna="monotype"][data-fmt="story"]  .dbldr-hl { font-size:23px; }
.dbldr-poster[data-dna="monotype"][data-fmt="square"] .dbldr-hl { font-size:30px; }
.dbldr-poster[data-dna="monotype"][data-fmt="banner"] .dbldr-hl { font-size:40px; }

/* ── MOTION: Cinematic Transit — Be Vietnam Pro italic 800, humanist forward lean ── */
.dbldr-poster[data-dna="motion"] .dbldr-hl { font-family:'Be Vietnam Pro',system-ui,sans-serif; font-weight:800; font-style:italic; color:#ffffff; letter-spacing:.01em; line-height:.93; }
.dbldr-poster[data-dna="motion"] .dbldr-sub { color:rgba(255,255,255,.82); letter-spacing:.03em; }
.dbldr-poster[data-dna="motion"] .dbldr-brand { color:rgba(255,255,255,.85); }
.dbldr-poster[data-dna="motion"] .dbldr-season { color:#e0a04a; border-color:#e0a04a; }
.dbldr-poster[data-dna="motion"] .dbldr-cta { background:transparent; color:#ffffff; border-radius:0; padding:0; letter-spacing:.1em; font-family:var(--rd-font-sans); font-weight:700; }

/* ═══ Hero Reference Card (right sidebar) ════════════════════════════════════ */
.dbldr-dna-ref { background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:14px; }
.dbldr-dna-ref-lbl { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.dbldr-dna-ref-img { position:relative; border-radius:6px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/5; background:var(--card); }
.dbldr-dna-ref-img img { width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-dna-ref-zoom { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.06em; text-align:center; padding:6px; color:rgba(255,255,255,.75); opacity:0; transition:opacity .18s; }
.dbldr-dna-ref-img:hover .dbldr-dna-ref-zoom { opacity:1; }
.dbldr-dna-ref-note { font-size:10px; color:var(--ink-faint); margin:8px 0 0; line-height:1.55; }
.dbldr-dna-ref-note b { color:var(--ink-dim); font-weight:700; }
.dbldr-reset-copy { margin-top:8px; width:100%; background:var(--inset); border:1px solid var(--line); color:var(--ink-dim); border-radius:6px; padding:5px 8px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.06em; cursor:pointer; text-align:left; transition:background .15s,color .15s; }
.dbldr-reset-copy:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ═══ Hero Lightbox ══════════════════════════════════════════════════════════ */
.dbldr-hero-lb { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9995; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.dbldr-hero-lb img { max-height:88vh; max-width:70vw; border-radius:8px; object-fit:contain; cursor:default; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.dbldr-hero-lb-x { position:absolute; top:20px; right:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50%; width:38px; height:38px; font-size:15px; cursor:pointer; line-height:1; transition:background .15s; }
.dbldr-hero-lb-x:hover { background:rgba(255,255,255,.2); }
.dbldr-hero-lb-caption { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap; }

/* ═══ Typography QA Lightbox (Ctrl+Shift+Q) ═════════════════════════════════ */
.dbldr-qa-lb { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9998; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.dbldr-qa-panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; max-width:min(1100px,96vw); max-height:90vh; overflow:hidden; cursor:default; display:flex; flex-direction:column; }
.dbldr-qa-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.dbldr-qa-title { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.dbldr-qa-close { background:var(--inset); border:1px solid var(--line); color:var(--ink); border-radius:50%; width:28px; height:28px; font-size:13px; cursor:pointer; }
.dbldr-qa-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; padding:14px; flex:1; overflow-y:auto; min-height:0; }
@media (max-width:800px) { .dbldr-qa-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.dbldr-qa-wrap { display:flex; flex-direction:column; gap:5px; min-width:0; }
.dbldr-qa-caption { font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* QA card — 4:5 proxy poster */
.dbldr-qa-card { position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--card); min-width:0; }
.dbldr-qa-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-qa-overlay { position:absolute; inset:0; padding:10px; display:flex; flex-direction:column; gap:3px; background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, transparent 40%, rgba(0,0,0,.55) 75%); }
.dbldr-qa-dnaname { font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:2px; }
/* .dbldr-hl / .dbldr-sub / .dbldr-season / .dbldr-cta inside QA inherit all per-DNA scoped CSS */
.dbldr-qa-overlay .dbldr-hl { white-space:pre-line; margin-top:auto; }
.dbldr-qa-overlay .dbldr-sub { line-height:1.4; opacity:.85; }
.dbldr-qa-overlay .dbldr-season { font-size:7px; padding:2px 5px; }
.dbldr-qa-tip { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.08em; color:var(--ink-faint); text-align:center; padding:10px 14px; border-top:1px solid var(--line); flex-shrink:0; }

.dbldr-headline { margin-top:auto; }
.dbldr-hl { font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:22px; line-height:1.08; color:#fff; letter-spacing:-.01em; max-width:100%; white-space:pre-wrap; }
.dbldr-hl em { font-style:italic; font-weight:600; }
.dbldr-sub { font-size:10.5px; color:rgba(255,255,255,.82); margin-top:9px; max-width:100%; line-height:1.5; }
.dbldr-ctarow { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.dbldr-price { font-family:'Playfair Display',Georgia,serif; font-size:17px; font-weight:800; color:#fff; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; row-gap:1px; }
.dbldr-price-lbl { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.6); text-transform:uppercase; font-weight:400; cursor:text; outline:none; border-radius:3px; transition:box-shadow .15s; }
.dbldr-price-lbl:hover { box-shadow:0 0 0 1.5px rgba(255,255,255,.4); }
.dbldr-price-lbl:focus { box-shadow:0 0 0 2px var(--accent); caret-color:var(--accent); }
.dbldr-cta { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#1a1208; background:#fff; border-radius:999px; padding:9px 14px; }
.dbldr-sel { position:relative; cursor:text; border-radius:4px; transition:box-shadow .15s var(--rd-ease); outline:none; }
.dbldr-sel:hover { box-shadow:0 0 0 1.5px rgba(255,255,255,.5); }
.dbldr-sel.active, .dbldr-sel:focus { box-shadow:0 0 0 2px var(--accent); }
.dbldr-sel[contenteditable]:focus { caret-color:var(--accent); }
.dbldr-price-val { font-family:'Playfair Display',Georgia,serif; font-size:17px; font-weight:800; color:#fff; display:block; }
.dbldr-edithint { font-size:11.5px; line-height:1.55; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:9px; padding:11px 12px; }
.dbldr-edithint b { color:var(--accent); font-weight:700; }
.dbldr-sel.active::after { content:attr(data-tag); position:absolute; top:-9px; left:0; font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:2px 6px; border-radius:4px; white-space:nowrap; z-index:10; }
.dbldr-canvas-hint { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:16px; display:none; }
.dbldr-family { display:flex; gap:8px; margin-top:14px; align-items:center; }
.dbldr-ft { border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--inset); position:relative; cursor:pointer; opacity:.65; transition:opacity .2s; }
.dbldr-ft:hover, .dbldr-ft.on { opacity:1; border-color:var(--accent-line); }
.dbldr-ft img { width:100%; height:100%; object-fit:cover; display:block; }
.dbf-f45  { width:42px; height:52px; }
.dbf-f11  { width:46px; height:46px; }
.dbf-f916 { width:32px; height:56px; }
.dbf-f169 { width:60px; height:34px; }

/* Creative direction rail */
.dbldr-intentgroup { margin-bottom:20px; }
.dbldr-intent-title { font-size:12px; font-weight:700; color:var(--ink-dim); margin-bottom:9px; }
.dbldr-intents { display:flex; flex-wrap:wrap; gap:6px; }
.dbldr-intent { font-family:var(--rd-font-sans); font-size:12px; font-weight:500; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 12px; cursor:pointer; transition:all .18s var(--rd-ease); white-space:nowrap; }
.dbldr-intent:hover { border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }
.dbldr-intent.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600; }
.dbldr-intent.on:hover { color:var(--accent-ink); background:var(--accent); transform:translateY(-1px); }

/* Typography control panel (Nội dung & chữ) */
.dbldr-typo { background:var(--inset); border:1px solid var(--line); border-radius:11px; padding:11px 12px; margin-bottom:10px; display:flex; flex-direction:column; gap:10px; }
.dbldr-typo-target { font-size:11px; color:var(--ink-faint); font-family:var(--rd-font-mono); letter-spacing:.04em; }
.dbldr-typo-target b { color:var(--accent); font-weight:700; }
.dbldr-typo-row { display:flex; align-items:center; gap:10px; }
.dbldr-typo-lbl { font-size:11px; color:var(--ink-dim); font-weight:600; min-width:46px; }
.dbldr-typo-segs { display:flex; gap:4px; flex:1; }
.dbldr-typo-seg { flex:1; font-size:11px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:7px; padding:6px 4px; cursor:pointer; transition:all .15s var(--rd-ease); }
.dbldr-typo-seg:hover { border-color:var(--accent-line); }
.dbldr-typo-seg.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.dbldr-typo-step { display:flex; align-items:center; gap:6px; }
.dbldr-typo-step > button { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:7px; cursor:pointer; transition:all .15s var(--rd-ease); }
.dbldr-typo-step > button:hover { border-color:var(--accent-line); color:var(--accent); }
.dbldr-typo-val { font-size:12px; font-family:var(--rd-font-mono); color:var(--ink); min-width:42px; text-align:center; }
.dbldr-typo-reset { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-dim); background:none; border:1px solid var(--line); border-radius:7px; cursor:pointer; margin-left:auto; }
.dbldr-typo-reset:hover { color:var(--accent); border-color:var(--accent-line); }

/* No persistent ring — the "Đang chỉnh: X" label in the rail already tells the
   user which element the typo panel targets. The transient focus ring
   (.dbldr-sel:focus) appears on click and disappears on blur, which is enough. */
.dbldr-varbox { background:var(--card); border:1px solid var(--line); border-radius:13px; padding:15px; margin-top:4px; }
.dbldr-var-title { font-size:12px; font-weight:700; color:var(--ink-dim); margin-bottom:10px; }
.dbldr-vseg { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:all .2s var(--rd-ease); background:var(--inset); margin-bottom:7px; width:100%; text-align:left; }
.dbldr-vseg:hover { border-color:var(--line-2); }
.dbldr-vseg.on { border-color:var(--accent-line); background:var(--accent-soft); }
.dbldr-vseg b { font-size:13px; font-weight:600; display:block; color:var(--ink); }
.dbldr-vseg span { font-size:11px; color:var(--ink-dim); display:block; margin-top:1px; }
.dbldr-vr { width:15px; height:15px; border-radius:50%; border:1.5px solid var(--line-2); flex-shrink:0; position:relative; }
.dbldr-vseg.on .dbldr-vr { border-color:var(--accent); }
.dbldr-vseg.on .dbldr-vr::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
.dbldr-regen { width:100%; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--rd-font-sans); font-weight:600; font-size:13px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:11px; padding:12px; cursor:pointer; transition:transform .2s var(--rd-ease); }
.dbldr-regen:hover { transform:translateY(-2px); }

/* Aa badge on section title */
.dbldr-itl-ic { font-size:15px; font-weight:900; font-family:'Playfair Display',Georgia,serif; color:var(--accent); margin-left:6px; letter-spacing:-.02em; vertical-align:middle; }

/* Admin toggle button in nav */
.dbldr-adm-toggle { background:none; border:1px solid var(--line); border-radius:7px; color:var(--ink-dim); cursor:pointer; font-size:13px; padding:5px 9px; transition:all .15s; }
.dbldr-adm-toggle:hover { color:var(--ink); border-color:var(--line-2); }

/* Admin Inspector Panel */
.dbldr-admin-panel { position:fixed; right:0; top:0; bottom:0; width:290px; background:#0e0e0e; border-left:1px solid #252525; z-index:999; display:flex; flex-direction:column; font-family:'SFMono-Regular',Consolas,monospace; }
.dbldr-adm-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #1f1f1f; flex-shrink:0; }
.dbldr-adm-title { font-size:9px; letter-spacing:.14em; color:#444; flex:1; }
.dbldr-adm-fmt { font-size:9px; background:#1a1a1a; color:#666; padding:2px 8px; border-radius:3px; letter-spacing:.08em; }
.dbldr-adm-close { background:none; border:none; color:#444; cursor:pointer; font-size:13px; padding:2px 6px; line-height:1; }
.dbldr-adm-close:hover { color:#fff; }
.dbldr-adm-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:6px; }
.dbldr-adm-sec { font-size:8.5px; letter-spacing:.12em; color:#3a3a3a; text-transform:uppercase; border-bottom:1px solid #1a1a1a; padding-bottom:5px; }
.dbldr-adm-table { width:100%; border-collapse:collapse; }
.dbldr-adm-table th { color:#333; font-size:8px; letter-spacing:.08em; text-align:left; padding:3px 4px; font-weight:400; }
.dbldr-adm-table td { padding:2px 3px; }
.dbldr-adm-key { color:#555; font-size:9px; min-width:56px; }
.dbldr-adm-inp { width:52px; background:#141414; border:1px solid #272727; color:#ccc; padding:2px 4px; border-radius:3px; font-family:inherit; font-size:10px; }
.dbldr-adm-inp:focus { outline:none; border-color:#444; }
.dbldr-adm-copy { width:100%; margin-top:6px; background:#0d2b1d; color:#4ade80; border:1px solid #1a4a30; padding:7px 10px; border-radius:5px; cursor:pointer; font-family:inherit; font-size:9px; letter-spacing:.07em; transition:background .15s; }
.dbldr-adm-copy:hover { background:#122d20; }
.dbldr-adm-textrow { display:flex; gap:6px; align-items:flex-start; padding:2px 0; }
.dbldr-adm-val { color:#555; font-size:9px; word-break:break-all; line-height:1.4; }
.dbldr-adm-ta { width:100%; background:#141414; border:1px solid #272727; color:#888; padding:8px; border-radius:5px; font-family:inherit; font-size:9px; resize:vertical; min-height:72px; line-height:1.5; }
.dbldr-adm-ta:focus { outline:none; border-color:#444; }
.dbldr-adm-ta::placeholder { color:#333; }

/* Processing overlay */
.dbldr-proc { position:fixed; inset:0; z-index:100; background:radial-gradient(120% 80% at 50% 0%,var(--inset),var(--bg)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; overflow:hidden; }
.dbldr-proc-grid { position:absolute; inset:0; background-image:linear-gradient(var(--accent-soft) 1px,transparent 1px),linear-gradient(90deg,var(--accent-soft) 1px,transparent 1px); background-size:34px 34px; opacity:.5; pointer-events:none; }
.dbldr-proc-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 28px 5px var(--accent-soft); animation:pscan 2s cubic-bezier(.6,0,.4,1) infinite; z-index:1; }
@keyframes pscan { 0%{top:-1%} 100%{top:101%} }
.dbldr-proc-inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
.dbldr-proc-ey { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.dbldr-proc-h2 { font-size:28px; font-weight:800; letter-spacing:-.02em; margin-top:10px; }
.dbldr-proc-sub { color:var(--ink-dim); font-size:13.5px; margin-top:8px; }
.dbldr-proc-frames { display:flex; gap:13px; align-items:flex-end; margin:34px 0 30px; }
.dbldr-pf { position:relative; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--inset); opacity:.3; filter:grayscale(.7); transition:opacity .5s var(--rd-ease), filter .5s var(--rd-ease), border-color .5s var(--rd-ease), box-shadow .5s var(--rd-ease), transform .5s var(--rd-ease); transform:translateY(6px); }
.dbldr-pf.lit { opacity:1; filter:none; border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line),0 18px 44px -20px rgba(0,0,0,.6); transform:translateY(0); }
.dbldr-pf img { width:100%; height:100%; object-fit:cover; display:block; }
.dbldr-pf-rl { position:absolute; left:5px; bottom:4px; font-family:var(--rd-font-mono); font-size:8.5px; color:#fff; background:rgba(0,0,0,.5); padding:1px 5px; border-radius:4px; z-index:2; }
.pf-r45  { width:120px; height:150px; }
.pf-r11  { width:120px; height:120px; }
.pf-r916 { width:84px;  height:150px; }
.pf-r169 { width:160px; height:90px;  }
.dbldr-proc-steps { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; max-width:600px; }
.dbldr-pstep { display:inline-flex; align-items:center; gap:7px; font-family:var(--rd-font-mono); font-size:11px; color:var(--ink-faint); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 13px; transition:all .3s var(--rd-ease); }
.dbldr-pstep.on { color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-soft); }
.dbldr-pstep.done { color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-soft); }
.dbldr-pstep-d { width:15px; height:15px; border-radius:50%; border:1px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:8px; flex-shrink:0; }
.dbldr-pstep.on .dbldr-pstep-d { border-color:var(--accent); border-width:1.5px; animation:dbldr-spin 1s linear infinite; }
.dbldr-pstep.done .dbldr-pstep-d { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
@keyframes dbldr-spin { to { transform:rotate(360deg); } }
.dbldr-proc-bar { width:280px; height:3px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:22px; }
.dbldr-proc-bar span { display:block; height:100%; width:0; background:var(--accent); transition:width .7s var(--rd-ease); }

/* ===== DESIGN FAMILY (dfam-*) ===== */
.dfam-screen { max-width:1180px; margin:0 auto; }
.dfam-crumb-nav { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.dfam-crumb-nav .dsgn-back { margin-bottom:0; }
.dfam-crumb-sep { color:var(--ink-faint); font-size:11px; }
.dfam-crumb-step {
  font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); background:none; border:0; cursor:pointer; padding:0;
}
.dfam-crumb-step:hover { color:var(--ink); }
.dfam-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:30px; flex-wrap:wrap; }
.dfam-head-text { flex:1; min-width:0; }
.dfam-h1 { font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-top:10px; max-width:560px; }
.dfam-sub { color:var(--ink-dim); font-size:14.5px; margin-top:9px; max-width:480px; line-height:1.5; }
.dfam-acts { display:flex; gap:10px; flex-shrink:0; align-items:center; }
.dfam-lbl { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.dfam-lbl::after { content:""; flex:1; height:1px; background:var(--line); }
.dfam-lbl b { color:var(--accent); font-weight:600; }

/* Contextual brand-kit nudge — first result screen only, dismiss is permanent */
.dfam-bkit-nudge {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-radius:12px; border:1px solid var(--line); background:var(--accent-soft);
  padding:12px 14px; margin-bottom:26px; flex-wrap:wrap;
}
.dfam-bkit-nudge-t { font-size:13px; color:var(--ink); line-height:1.4; }
.dfam-bkit-nudge-acts { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.dfam-bkit-nudge-cta {
  font-family:var(--rd-font-sans); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); cursor:pointer;
}
.dfam-bkit-nudge-cta:hover { filter:brightness(1.05); }
.dfam-bkit-nudge-x { background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:12px; padding:4px; border-radius:6px; }
.dfam-bkit-nudge-x:hover { color:var(--ink); background:var(--inset); }

.dfam-core { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-bottom:44px; align-items:end; }
.dfam-out { position:relative; border-radius:8px; overflow:hidden; background:#241a14; box-shadow:0 22px 50px -26px rgba(0,0,0,.75); transition:transform .3s var(--rd-ease); cursor:pointer; }
.dfam-out:hover { transform:translateY(-4px); }
.dfam-out-bg { position:absolute; inset:0; }
.dfam-out-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.dfam-out-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,12,8,.1) 35%,rgba(20,12,8,.8)); }
.dfam-out-c { position:absolute; inset:0; padding:16px; display:flex; flex-direction:column; }
.dfam-out-brand { font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.dfam-out-hl { margin-top:auto; font-family:'Playfair Display',Georgia,serif; font-weight:800; line-height:.96; color:#fff; }
.dfam-out-badge { position:absolute; top:10px; right:10px; font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); padding:4px 7px; border-radius:999px; }
.dfam-dl { position:absolute; bottom:10px; right:10px; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.9); color:#1a1208; display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:opacity .2s; border:0; cursor:pointer; }
.dfam-out:hover .dfam-dl { opacity:1; }
.dfam-o45  { grid-column:span 3; aspect-ratio:4/5;  } .dfam-o45  .dfam-out-hl { font-size:22px; }
.dfam-o11  { grid-column:span 3; aspect-ratio:1/1;  } .dfam-o11  .dfam-out-hl { font-size:20px; }
.dfam-o916 { grid-column:span 2; aspect-ratio:9/16; } .dfam-o916 .dfam-out-hl { font-size:16px; }
.dfam-o169 { grid-column:span 4; aspect-ratio:16/9; } .dfam-o169 .dfam-out-hl { font-size:24px; }
.dfam-presets { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:11px; margin-bottom:40px; }
.dfam-preset { display:flex; align-items:center; gap:12px; padding:14px 15px; background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:all .2s var(--rd-ease); text-align:left; }
.dfam-preset:hover { border-color:var(--accent-line); transform:translateY(-2px); }
.dfam-preset-pic { width:36px; height:36px; border-radius:9px; background:var(--inset); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dfam-preset-rect { border:1.5px solid var(--ink-dim); border-radius:2px; }
.dfam-preset-txt b { font-size:13px; font-weight:700; display:block; color:var(--ink); }
.dfam-preset-txt span { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }
.dfam-preset--custom { border-style:dashed; justify-content:center; color:var(--ink-dim); }
.dfam-preset--custom .dfam-preset-txt b { color:var(--ink); }

@media (max-width: 900px) {
  .dfam-core { grid-template-columns:1fr 1fr; }
  .dfam-o45, .dfam-o11, .dfam-o916, .dfam-o169 { grid-column:span 1; }
  .dfam-presets { grid-template-columns:1fr 1fr; }
  .dfam-head { flex-direction:column; align-items:flex-start; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE FLOW SCREENS (≤820px) — Design Builder / Family / Photoshoot.
   Stop 3-column desktop layouts from overflowing on phones.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* ── Design Builder: 2-col grid → single scrollable column ── */
  .dbldr-body { display:block; overflow-y:auto; }
  .dbldr-form, .dbldr-rail, .dbldr-canvas { overflow:visible; }
  .dbldr-form { border-right:0; border-bottom:1px solid var(--line); }
  .dbldr-rail--left  { border-right:0; border-bottom:1px solid var(--line); }
  .dbldr-rail--right { border-left:0;  border-top:1px solid var(--line); }
  .dbldr-canvas { padding:16px 14px 28px; }
  .dbldr-nav { padding:0 14px; gap:10px; }
  .rd-logo-bolt + .dbldr-dash-link { position:static; margin-left:10px; }
  .dbldr-crumb { display:none; }          /* long "SOCIAL CAMPAIGN · ATELIER…" overlaps button */
  .dbldr-gen-btn, .dbldr-btn-em { padding:10px 14px; font-size:12.5px; }
  .dbldr-hl { font-size:18px; max-width:55%; }
  .dbldr-poster { max-width:100%; }
  .dbldr-poster[data-fmt="post"]   { width: 340px; }
  .dbldr-poster[data-fmt="story"]  { width: 240px; }
  .dbldr-poster[data-fmt="square"] { width: 340px; }
  .dbldr-poster[data-fmt="banner"] { width: 100%; }
  .dbldr-family-col { display: none; }

  /* ── Processing overlay: shrink + scroll the format frames row ── */
  .dbldr-proc { padding:28px 16px; }
  .dbldr-proc-h2 { font-size:22px; }
  .dbldr-proc-frames { gap:9px; margin:24px 0 22px; max-width:100%; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; align-self:stretch; justify-content:flex-start; }
  .dbldr-proc-frames::-webkit-scrollbar { display:none; }
  .pf-r45  { width:84px;  height:105px; } .pf-r11  { width:84px; height:84px; }
  .pf-r916 { width:60px;  height:105px; } .pf-r169 { width:112px; height:63px; }
  .dbldr-proc-bar { width:min(280px, 80vw); }

  /* ── Design Family: stack to single column ── */
  .dfam-core { grid-template-columns:1fr; }
  .dfam-presets { grid-template-columns:1fr 1fr; }

  /* ── Studio Photoshoot: tidy nav + let the whole thing scroll so the
        contact sheet / monitor aren't clipped under 100vh ── */
  .stph-nav { padding:0 12px; gap:8px; }
  .stph-crumb { display:none; }
  .stph-finish { padding:9px 13px; font-size:12px; }
  .stph-energy { display:none; }
  .stph-contact { position:relative; }
}

/* ============================================================
   STUDIO SECTION — stho-* stup-* stco-* stph-* stps-*
   ============================================================ */

/* ===== Shared Studio utils ===== */
.stho-eyebrow, .stup-eyebrow { font-family:var(--rd-font-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.stup-h1 { font-size:42px; font-weight:800; letter-spacing:-.035em; line-height:1.06; margin-bottom:12px; }
.stup-h1 em { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; }
.stup-sub { color:var(--ink-dim); font-size:14px; line-height:1.55; margin-bottom:28px; max-width:560px; }

/* Step rail */
.stup-steps { display:flex; align-items:center; gap:0; margin-bottom:32px; }
.stup-step { display:flex; align-items:center; gap:9px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:0 18px 0 0; position:relative; }
.stup-step:not(:last-child)::after { content:"\203A"; margin-left:8px; color:var(--line-2); font-size:14px; }
.stup-step.on { color:var(--accent); }
.stup-step.done { color:var(--ink-dim); }
.stup-step-dot { width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.stup-step.on .stup-step-dot { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.stup-step.done .stup-step-dot { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* Shared chips */
.stup-chips { display:flex; flex-wrap:wrap; gap:7px; }
.stup-chip { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; transition:all .18s var(--rd-ease); }
.stup-chip.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }

/* Shared footer */
/* Static, not sticky: bottom:0 sticky pins this to the viewport bottom the moment
   the page is taller than one screen, floating it over content from the very top
   (Setup/Concept/ShootMode all reported this — CTA overlapping the first card). It
   belongs right after the content it acts on. */
.stup-footer { position:static; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); margin-top:40px; border-radius:0 0 14px 14px; }
.stup-footer-sum { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-faint); }
.stup-footer-acts { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.stup-back { background:transparent; border:1px solid var(--line-2); border-radius:10px; padding:10px 17px; font-family:var(--rd-font-sans); font-size:13px; font-weight:600; color:var(--ink-dim); cursor:pointer; transition:border-color .2s; }
.stup-back:hover { border-color:var(--ink-dim); }
.stup-btn-em { background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px; padding:11px 20px; font-family:var(--rd-font-sans); font-size:13px; font-weight:600; cursor:pointer; transition:transform .2s var(--rd-ease); }
.stup-btn-em:hover { transform:translateY(-2px); }

/* ===== STUDIO HOME (stho-*) ===== */
.stho-screen { padding:46px 0 70px; }
.stho-band { display:grid; grid-template-columns:.82fr 1.18fr; gap:52px; align-items:stretch; margin-bottom:52px; }
.stho-intro { display:flex; flex-direction:column; padding-top:46px; }
.stho-num { font-family:var(--rd-font-serif); font-weight:800; font-size:128px; line-height:.78; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.4px var(--line-2); margin-bottom:4px; }
.stho-num--solid { color:color-mix(in srgb,var(--ink) 11%,transparent); -webkit-text-stroke:0; }
.stho-title { font-size:76px; font-weight:800; letter-spacing:-.035em; line-height:1.04; margin-bottom:18px; }
.stho-lead { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:24px; line-height:1.3; color:var(--ink); margin-bottom:12px; }
.stho-sub { color:var(--ink-dim); font-size:14px; line-height:1.55; max-width:370px; }
.stho-points { margin-top:28px; display:flex; flex-direction:column; gap:16px; border-top:1px solid var(--line); padding-top:24px; }
.stho-pt { display:flex; gap:14px; align-items:flex-start; }
.stho-pt-ic { width:30px; height:30px; border-radius:9px; background:transparent; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--accent); flex-shrink:0; margin-top:1px; }
.stho-pt b { font-size:13.5px; font-weight:700; display:block; margin-bottom:2px; }
.stho-pt span { color:var(--ink-dim); font-size:12px; line-height:1.5; display:block; }
/* Fixed margin instead of margin-top:auto — matches .bhs-ctas/.lds-ctas
   (sits right after the content above). .stho-band stretches .stho-intro to
   match the taller lightbox column on the right, so auto was pushing this
   button all the way to the bottom of that stretched height instead of
   following the text — same complaint the other two tabs never had. */
.stho-ctas { display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; }
.stho-btn-em { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:11px; padding:14px 22px; cursor:pointer; transition:transform .2s var(--rd-ease),box-shadow .2s; }
.stho-btn-ghost { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.55); border-radius:11px; padding:14px 20px; cursor:pointer; transition:border-color .2s,color .2s; }
.stho-btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
[data-theme="light"] .stho-btn-ghost { color:var(--ink); border-color:var(--line); }
[data-theme="light"] .stho-btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* Lightbox */
.stho-lightbox { background:var(--film); border:1px solid var(--line-2); border-radius:18px; padding:16px; display:flex; flex-direction:column; box-shadow:0 40px 90px -44px rgba(0,0,0,.85); }
.stho-lb-top { display:flex; align-items:center; justify-content:space-between; padding:2px 6px 12px; }
.stho-roll { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.stho-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 1px var(--accent); flex-shrink:0; }
.stho-lbmeta { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); }
.stho-hero { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:#1b140d; }
.stho-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.stho-grade { display:none; }
.stho-heroq { position:absolute; left:22px; bottom:20px; right:22px; }
.stho-heroq q { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:26px; line-height:1.12; color:#fff; quotes:none; text-shadow:0 1px 4px rgba(0,0,0,.7), 0 4px 20px rgba(0,0,0,.6); }
.stho-qc { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:10px; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.stho-frameno { position:absolute; top:13px; left:14px; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.1em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.42); backdrop-filter:blur(4px); padding:3px 8px; border-radius:6px; }
.stho-corner { position:absolute; width:13px; height:13px; border-color:rgba(255,255,255,.5); }
.stho-c-tr { top:13px; right:13px; border-top:1.5px solid; border-right:1.5px solid; }
.stho-c-br { bottom:13px; right:13px; border-bottom:1.5px solid; border-right:1.5px solid; }
.stho-strip-rail { margin-top:13px; }
.stho-sprocket { display:flex; gap:4px; justify-content:space-between; padding:4px 2px 6px; }
.stho-sprocket i { flex:1; height:7px; border-radius:2px; background:color-mix(in srgb,var(--ink-faint) 22%,transparent); }
.stho-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.stho-shot { cursor:pointer; }
.stho-shot-pic { position:relative; border-radius:7px; overflow:hidden; aspect-ratio:3/4; background:#1b140d; border:1px solid rgba(255,255,255,.07); transition:transform .22s var(--rd-ease),box-shadow .22s var(--rd-ease); }
.stho-shot-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.stho-sn { position:absolute; top:5px; left:5px; font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.05em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.5); padding:1px 5px; border-radius:3px; }
.stho-shot:hover .stho-shot-pic { transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(0,0,0,.7); }
.stho-shot.active .stho-shot-pic { box-shadow:0 0 0 2px var(--accent); }
.stho-slab { font-size:9.5px; color:var(--ink-faint); text-align:center; margin-top:5px; letter-spacing:.01em; }
.stho-lb-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--line-2); margin-top:12px; padding-top:10px; }
.stho-exif { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.stho-contact-badge { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.12em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:4px; padding:3px 8px; }

/* Lookbook */
.stho-lookbook { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.stho-dcard { cursor:pointer; }
/* Lift + shadow matches .bhs-world / .lds-tcard (Biến hình / Làm đẹp) — the
   shared "card" hover language across the 3 home pillar blocks. No border-color
   swap here unlike those two: this card is a deliberate full-bleed photo tile
   with no rest-state border, so there's nothing to transition the color of. */
.stho-dcard-img { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/3.5; transition:transform .35s var(--rd-ease), box-shadow .35s var(--rd-ease); }
.stho-dcard-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--rd-ease); }
.stho-dcard:hover .stho-dcard-img { transform:translateY(-6px); box-shadow:var(--shadow-3); }
.stho-dcard:hover .stho-dcard-img img { transform:scale(1.04); }
/* Hover-cycle stack shared by desktop (.stho-dcard-img) and mobile (.m-dir) direction cards. */
.dcard-frames { position:absolute; inset:0; }
.dcard-frames img { position:absolute; inset:0; opacity:0; transition:opacity .6s ease, transform .3s var(--rd-ease); }
.dcard-frames img.on { opacity:1; }
.stho-dcard-vignette {
  position:absolute; inset:0; display:block; pointer-events:none;
  /* Local contrast only: keep the photo open and luminous through most of the
     card, then build just enough depth behind the title/subtitle. This avoids
     bringing back the old opaque black footer slab. */
  background:
    linear-gradient(180deg, rgba(14,9,6,0) 38%, rgba(14,9,6,.06) 52%, rgba(14,9,6,.32) 72%, rgba(14,9,6,.78) 100%);
  box-shadow:inset 0 -78px 64px -56px rgba(8,5,3,.58);
  z-index:1;
}
.stho-dcard-num { position:absolute; top:14px; left:16px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.7); }
.stho-dcard-arrow { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.28); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; font-size:14px; color:rgba(255,255,255,.85); transition:all .2s; }
.stho-dcard:hover .stho-dcard-arrow { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.stho-dcard-num,.stho-dcard-arrow,.stho-dcard-body { z-index:2; }
.stho-dcard-body { position:absolute; bottom:17px; left:16px; right:16px; display:flex; flex-direction:column; align-items:flex-start; }
.stho-dcard-title { font:700 clamp(18px,1.45vw,24px)/1.05 var(--rd-font-serif); letter-spacing:-.025em; color:#fff; margin-bottom:7px; text-shadow:0 2px 5px rgba(0,0,0,.78),0 8px 24px rgba(0,0,0,.58); }
.stho-dcard-sub { max-width:95%; font-size:11.5px; color:rgba(255,255,255,.91); line-height:1.42; text-shadow:0 1px 4px rgba(0,0,0,.92),0 4px 14px rgba(0,0,0,.72); }
.stho-dcard-cta { display:inline-flex; align-items:center; margin-top:10px; padding:8px 11px; border-radius:999px; background:rgba(247,239,225,.93); color:#5d3a22; border:1px solid rgba(255,255,255,.5); box-shadow:0 8px 18px -13px rgba(0,0,0,.8); font-size:10px; font-weight:800; letter-spacing:.01em; text-shadow:none; transition:transform .2s var(--rd-ease),background .2s var(--rd-ease); }
.stho-dcard:hover .stho-dcard-cta,.stho-dcard:focus-visible .stho-dcard-cta { transform:translateY(-1px); background:#fff7ea; }
.stho-dcard:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 70%,white); outline-offset:4px; border-radius:14px; }

/* ===== STUDIO SETUP (stup-*) ===== */
.stup-screen { padding-bottom:80px; }
.stup-body { display:grid; grid-template-columns:1.15fr .85fr; gap:26px; margin-top:4px; }
.stup-panel-label { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.stup-req { color:var(--accent); }
.stup-subj { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; margin-bottom:16px; }
.stup-main-slot { position:relative; border-radius:13px; overflow:hidden; aspect-ratio:3/4; border:1.5px dashed var(--line-2); background:var(--inset); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s; }
.stup-main-slot:hover { border-color:var(--accent-line); }
.stup-main-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.stup-slot-ph { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-faint); }
.stup-slot-plus { font-size:28px; }
.stup-slot-ph span { font-size:12px; }
.stup-slot-tag { position:absolute; top:10px; left:10px; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.06em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.5); padding:2px 7px; border-radius:4px; }
.stup-remove { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); border:0; color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.stup-side-col { display:flex; flex-direction:column; gap:10px; }
.stup-extra-slot { position:relative; border-radius:10px; overflow:hidden; min-height:0; border:1.5px dashed var(--line-2); background:var(--inset); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ink-faint); flex:1; transition:border-color .2s; }
.stup-extra-slot:hover { border-color:var(--accent-line); }
.stup-extra-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.stup-hint-slot { position:relative; flex:1; min-height:0; overflow:hidden; border:1.5px dashed var(--line-2); border-radius:10px; background:var(--inset); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--ink-faint); padding:0 10px; text-align:center; cursor:pointer; transition:border-color .2s; }
.stup-hint-slot span { font-size:18px; }
.stup-hint-slot small { font-size:9.5px; line-height:1.4; }
.stup-hint-slot:hover { border-color:var(--accent-line); }
.stup-consistency { display:flex; align-items:center; gap:12px; background:var(--inset); border-radius:10px; padding:11px 14px; margin-bottom:8px; }
.stup-con-label { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); flex:1; }
.stup-con-bar { flex:1; height:6px; border-radius:999px; background:var(--line-2); overflow:hidden; }
.stup-con-bar span { display:block; height:100%; background:var(--aurora); border-radius:999px; transition:width .4s var(--rd-ease); }
.stup-con-pct { font-family:var(--rd-font-mono); font-size:11px; font-weight:600; color:var(--accent); }
.stup-con-hint { font-size:11.5px; color:var(--ink-dim); margin-bottom:18px; }
.stup-chips-section { margin-bottom:16px; }
.stup-chip-label { font-size:12px; font-weight:700; color:var(--ink-dim); margin-bottom:8px; }
.stup-right { display:flex; flex-direction:column; gap:14px; }
.stup-brief-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.stup-brief-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.stup-brief-ic { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--inset); color:var(--accent); flex-shrink:0; }
.stup-brief-head b { font-size:13.5px; font-weight:700; display:block; }
.stup-brief-status { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.05em; color:var(--ink-faint); display:block; margin-top:2px; }
.stup-brief-status.on { color:var(--accent); }
.stup-outfit-row { display:flex; gap:9px; align-items:flex-start; }
.stup-outfit-slot { width:48px; height:48px; border-radius:9px; border:1.5px dashed var(--line-2); background:var(--inset); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--ink-faint); flex-shrink:0; cursor:pointer; overflow:hidden; transition:border-color .2s; }
.stup-outfit-slot:hover { border-color:var(--accent-line); }
.stup-outfit-note { flex:1; background:var(--inset); border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-family:var(--rd-font-sans); font-size:12px; color:var(--ink); resize:none; -webkit-appearance:none; }
.stup-ratios { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.stup-ratio { border:1px solid var(--line); border-radius:9px; padding:10px 6px; font-family:var(--rd-font-mono); font-size:11px; color:var(--ink-dim); background:var(--inset); cursor:pointer; transition:all .18s var(--rd-ease); text-align:center; }
.stup-ratio.on { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); font-weight:600; }
.stup-layer-head .stup-quota{margin-left:auto;align-self:center;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);font:700 11px/1 var(--rd-font-mono);white-space:nowrap}.stup-layer-head .stup-quota.full{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.stup-allocation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stup-allocation-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--inset)}.stup-allocation-row>div:nth-child(2){display:grid;gap:2px}.stup-allocation-row b{font:700 11px/1.2 var(--rd-font-mono);color:var(--ink)}.stup-allocation-row small{font-size:10.5px;color:var(--ink-dim)}.stup-ratio-shape{display:block;margin:auto;border:1.5px solid var(--accent);border-radius:2px;opacity:.8}.stup-ratio-shape.ratio-4x5{width:19px;height:24px}.stup-ratio-shape.ratio-1x1{width:22px;height:22px}.stup-ratio-shape.ratio-9x16{width:15px;height:27px}.stup-ratio-shape.ratio-16x9{width:28px;height:16px}.stup-ratio-shape.ratio-3x4{width:19px;height:25px}.stup-ratio-shape.ratio-4x3{width:27px;height:20px}.stup-ratio-shape.ratio-2x3{width:18px;height:27px}.stup-ratio-shape.ratio-3x2{width:27px;height:18px}.stup-counter{display:grid;grid-template-columns:28px 25px 28px;align-items:center}.stup-counter button{width:28px;height:28px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:7px;cursor:pointer;font-size:16px;line-height:1}.stup-counter button:disabled{opacity:.3;cursor:not-allowed}.stup-counter strong{text-align:center;font:700 11px/1 var(--rd-font-mono)}.stup-allocation-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--ink-dim);font-size:11px}.stup-allocation-foot button{border:0;background:none;color:var(--accent);font:650 10px/1 var(--rd-font-mono);cursor:pointer}.stup-quota-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(18,15,12,.46);backdrop-filter:blur(6px)}.stup-quota-card{width:min(460px,94vw);padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 24px 70px rgba(20,15,10,.22)}.stup-quota-card h3{margin:0 0 8px;font-size:18px}.stup-quota-card p{margin:0 0 16px;color:var(--ink-dim);font-size:12px;line-height:1.55}.stup-transfer-list,.stup-upgrades{display:grid;gap:7px}.stup-transfer-list button,.stup-upgrades button{padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--inset);color:var(--ink);text-align:left;cursor:pointer}.stup-upgrades{margin-top:12px}.stup-upgrades button{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:650}.stup-modal-cancel{margin-top:14px;border:0;background:none;color:var(--ink-dim);cursor:pointer}.stup-btn-em:disabled{opacity:.45;cursor:not-allowed}
.stup-ratio-summary-chips{display:flex;flex-wrap:wrap;gap:8px}.stup-ratio-summary-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:var(--inset)}.stup-ratio-summary-chip b{font:700 12px/1 var(--rd-font-mono);color:var(--ink)}.stup-ratio-summary-chip small{color:var(--ink-dim);font-size:11px}
.to-res-row .rd-chip.locked { border-style: dashed; color: var(--ink-faint); }
.to-res-row .rd-chip.locked.on { border-style: solid; }
.stup-quality-note { font-size: 11px; color: var(--ink-faint); margin: 6px 0 0; }

/* ===== STUDIO CONCEPT (stco-*) ===== */
.stco-screen { padding-bottom:32px; }
.stco-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:16px; }
.stco-regen { background:transparent; border:1px solid var(--line-2); border-radius:10px; padding:10px 16px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-dim); cursor:pointer; transition:border-color .2s,color .2s; flex-shrink:0; }
.stco-regen:hover { border-color:var(--accent-line); color:var(--accent); }
.stco-boards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-bottom:32px; align-items:stretch; }
.stco-board { background:var(--card); border:1.5px solid var(--line); border-radius:18px; overflow:hidden; transition:border-color .2s var(--rd-ease); display:flex; flex-direction:column; height:100%; }
.stco-board.on { border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line); }
.stco-cover { position:relative; aspect-ratio:4/3; overflow:hidden; }
.stco-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.stco-cover-vignette { display:none; }
.stco-letter { position:absolute; top:14px; left:16px; font-family:var(--rd-font-serif); font-style:italic; font-weight:600; font-size:32px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.75), 0 4px 18px rgba(0,0,0,.55); }
.stco-best { position:absolute; top:12px; right:12px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); padding:4px 10px; border-radius:999px; }
.stco-cover-body { position:absolute; bottom:14px; left:14px; right:14px; }
.stco-cname { font-family:var(--rd-font-serif); font-weight:800; font-size:22px; color:#fff; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,.75), 0 4px 16px rgba(0,0,0,.55); }
.stco-cessence { font-size:12px; color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.7); }
.stco-body { padding:16px; display:flex; flex-direction:column; gap:14px; flex:1; }
.stco-cstrip { display:flex; gap:5px; margin:-16px -16px 0; padding:5px; }
.stco-cthumb { position:relative; flex:1; border-radius:0; overflow:hidden; aspect-ratio:1/1; background:var(--inset); }
.stco-cthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.stco-cbadge { position:absolute; top:4px; left:4px; font-family:var(--rd-font-mono); font-size:8px; color:rgba(255,255,255,.9); background:rgba(0,0,0,.55); padding:1px 5px; border-radius:3px; }
.stsl-card { appearance:none; width:100%; padding:0; color:inherit; text-align:left; font:inherit; cursor:pointer; position:relative; }
.stsl-card.on { outline:2px solid var(--accent); outline-offset:-2px; border-color:var(--accent); }
.stsl-check { position:absolute; top:9px; right:9px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(12,10,8,.56); border:1px solid rgba(255,255,255,.42); backdrop-filter:blur(8px); font-weight:800; }
.stsl-card.on .stsl-check { background:var(--accent); color:var(--accent-ink); }
.stsl-top-back { margin-bottom:18px; }
.stsl-cta { position:absolute; right:8px; bottom:8px; z-index:5; background:var(--accent); color:var(--accent-ink); border:0; border-radius:9px; padding:9px 15px; font-family:var(--rd-font-sans); font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-2); animation:stsl-cta-in .2s var(--rd-ease); }
.stsl-cta:hover { transform:translateY(-2px); }
@keyframes stsl-cta-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.stco-mood-panel {
  appearance:none; width:100%; min-height:56px; padding:12px 14px; margin:2px 0 0;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"label icon" "name icon";
  align-items:center; gap:3px 12px; text-align:left; cursor:pointer;
  border:1px solid var(--accent-line); border-radius:16px; overflow:hidden;
  background:var(--card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .2s var(--rd-ease), transform .2s var(--rd-ease), background .2s var(--rd-ease);
}
.stco-mood-panel:hover { border-color:var(--accent-line); transform:translateY(-1px); background:var(--accent-soft); }
.stco-mood-panel span { grid-area:label; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.stco-mood-panel b { grid-area:name; font-family:var(--rd-font-serif); font-size:18px; line-height:1.05; color:var(--ink); }
.stco-mood-panel i { grid-area:icon; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-style:normal; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); }
.stco-mood-panel + .stco-shot-chip { display:none !important; }
.stco-mood-modal-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.stco-actions { margin-top:auto; display:flex; flex-direction:column; gap:14px; }
.stco-specs { display:flex; flex-direction:column; gap:6px; }
.stco-spec-row { display:flex; gap:8px; font-size:12px; }
.stco-spec-k { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); width:80px; flex-shrink:0; padding-top:1px; }
.stco-spec-v { color:var(--ink-dim); }
.stco-shots-label { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.stco-shots { display:flex; flex-wrap:wrap; gap:5px; }
.stco-shot-chip { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.03em; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.stco-pick { width:100%; padding:11px; border:1.5px solid var(--line-2); border-radius:10px; background:transparent; font-family:var(--rd-font-sans); font-size:13px; font-weight:600; color:var(--ink-dim); cursor:pointer; transition:all .2s var(--rd-ease); }
.stco-pick:hover { border-color:var(--accent-line); color:var(--accent); }
.stco-pick.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* ===== STUDIO SHOOT MODE (stsm-*) ===== */
.stsm-screen { padding-bottom:80px; }
.stsm-body { display:grid; grid-template-columns:.85fr 1fr 1fr; gap:20px; align-items:start; margin-top:4px; }
.stsm-side { display:flex; flex-direction:column; gap:14px; }
.stsm-concept-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.stsm-concept-top { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.stsm-concept-thumb { width:44px; height:56px; border-radius:9px; overflow:hidden; flex-shrink:0; }
.stsm-concept-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.stsm-concept-label { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px; }
.stsm-concept-name { font-family:var(--rd-font-serif); font-weight:700; font-size:16px; }
.stsm-concept-meta { font-size:11.5px; color:var(--ink-dim); margin-bottom:12px; }
.stsm-concept-chips { display:flex; flex-wrap:wrap; gap:6px; }
.stsm-concept-chip { font-family:var(--rd-font-mono); font-size:10px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:999px; padding:4px 9px; }
.stsm-note { background:var(--inset); border-radius:12px; padding:14px 16px; }
.stsm-note-h { font-size:12.5px; font-weight:700; color:var(--ink-dim); line-height:1.4; margin-bottom:6px; }
.stsm-note-b { font-size:12px; color:var(--ink-faint); line-height:1.5; }
.stsm-coverage { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.stsm-coverage-top p { margin:4px 0 12px; color:var(--ink-faint); font-size:11.5px; line-height:1.45; }
.stsm-pack-list { display:flex; flex-direction:column; gap:8px; }
.stsm-pack { display:flex; flex-direction:column; gap:5px; text-align:left; width:100%; border:1px solid var(--line); background:var(--inset); color:var(--ink); border-radius:12px; padding:11px 12px; cursor:pointer; transition:border-color .2s var(--rd-ease), background .2s var(--rd-ease), transform .2s var(--rd-ease); }
.stsm-pack:hover { border-color:var(--accent-line); transform:translateY(-1px); }
.stsm-pack.on { border-color:var(--accent-line); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-line); }
.stsm-pack-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stsm-pack-head b { font-size:13px; font-weight:750; }
.stsm-pack-head em { font-style:normal; font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.stsm-pack-meta { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }
.stsm-pack-desc { font-size:11.5px; line-height:1.45; color:var(--ink-dim); }
.stsm-pack-fit { font-size:11px; line-height:1.4; color:var(--ink-faint); }
.stsm-mode-card { background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:13px; }
.stsm-mode-card.rec { border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line); }
.stsm-mode-badge { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); }
.stsm-mode-badge.alt { background:var(--inset); color:var(--ink-dim); border-color:var(--line-2); }
.stsm-mode-title { font-family:var(--rd-font-serif); font-weight:800; font-size:26px; }
.stsm-mode-sub { font-size:13px; color:var(--ink-dim); line-height:1.55; }
.stsm-mode-list { display:flex; flex-direction:column; gap:10px; }
.stsm-mode-list li { font-size:12.5px; color:var(--ink-dim); line-height:1.4; padding-left:18px; position:relative; }
.stsm-mode-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.stsm-mode-meta { display:flex; gap:8px; }
.stsm-mode-pill { font-family:var(--rd-font-mono); font-size:11px; font-weight:600; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
.stsm-mode-cta { width:100%; padding:13px; border-radius:11px; font-family:var(--rd-font-sans); font-size:13.5px; font-weight:700; cursor:pointer; transition:transform .2s var(--rd-ease); border:1.5px solid var(--line-2); background:transparent; color:var(--ink); }
.stsm-mode-cta:hover { transform:translateY(-2px); }
.stsm-mode-cta.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* ===== STUDIO PHOTOSHOOT (stph-*) ===== */
.stph-root { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg); }
.stph-nav { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 22px; border-bottom:1px solid var(--line); background:var(--bg); flex-shrink:0; }
.stph-logo { background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; color:var(--ink); }
/* sub-page home button: bolt mark + glowing live dot (kept from old crumb) */
.stph-home { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; background:transparent; border:1px solid var(--line); border-radius:11px; color:var(--logo-primary); cursor:pointer; flex-shrink:0; transition:transform .18s var(--rd-ease), background .18s, border-color .18s; }
.stph-home:hover { transform:translateY(-1px); background:var(--inset); border-color:var(--line-2); }
.stph-home:hover { border-color:var(--accent-line); }
.stph-crumb { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:8px; }
.stph-crumb b { color:var(--accent); }
.stph-nav-right { display:flex; align-items:center; gap:11px; }
.stph-energy { font-family:var(--rd-font-mono); font-size:11.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:999px; padding:6px 11px; }
.stph-finish { background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px; padding:10px 17px; font-weight:600; font-size:13px; cursor:pointer; transition:transform .2s var(--rd-ease); white-space:nowrap; }
.stph-finish:hover { transform:translateY(-2px); }
.stph-body { display:grid; grid-template-columns:244px 1fr 322px; height:calc(100vh - 56px); overflow:hidden; }

/* Locks rail */
.stph-locks { border-right:1px solid var(--line); overflow-y:auto; padding:18px 16px; scrollbar-width:thin; }
.stph-dna { display:flex; align-items:center; gap:10px; padding:11px; background:var(--card); border:1px solid var(--accent-line); border-radius:12px; margin-bottom:20px; }
.stph-dna-th { width:40px; height:50px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.stph-dna-th img { width:100%; height:100%; object-fit:cover; display:block; }
.stph-dna-dt b { font-family:var(--rd-font-serif); font-weight:700; font-size:14px; display:block; line-height:1.1; }
.stph-dna-dt span { font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.stph-swap { margin-left:auto; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:none; border:0; cursor:pointer; }
/* Stage */
.stph-stage { background:var(--stage); display:flex; flex-direction:column; min-height:0; min-width:0; }
.stph-shottabs { display:flex; gap:6px; justify-content:center; padding:14px 16px 6px; flex-wrap:wrap; flex-shrink:0; }
.stph-tab { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--ink-dim); background:color-mix(in srgb,var(--card) 70%,transparent); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; transition:all .18s var(--rd-ease); backdrop-filter:blur(6px); white-space:nowrap; }
.stph-tab:hover { color:var(--ink); border-color:var(--line-2); }
.stph-tab.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600; }
.stph-tabg { font-family:var(--rd-font-mono); font-size:11px; opacity:.7; }
.stph-tab.on .stph-tabg { opacity:.9; }
.stph-monitor { flex:1; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; padding:8px 20px; overflow:hidden; }
.stph-frame { position:relative; height:100%; max-height:100%; max-width:100%; min-width:0; border-radius:10px; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); background:#1b140d; }
.stph-frame img { height:100%; width:auto; max-width:100%; object-fit:cover; display:block; }
/* Top strip: exif left, honesty pill right — one flex row so the two labels can
   never overlap on narrow frames. The exif truncates; the pill stays readable. */
.stph-frame-top { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none; }
.stph-refpill { flex-shrink:0; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); background:rgba(0,0,0,.42); backdrop-filter:blur(4px); padding:4px 9px; border-radius:6px; white-space:nowrap; }
.stph-corner { position:absolute; width:15px; height:15px; border-color:rgba(255,255,255,.55); }
.stph-c-tl { top:11px; left:11px; border-top:1.5px solid; border-left:1.5px solid; }
.stph-c-tr { top:11px; right:11px; border-top:1.5px solid; border-right:1.5px solid; }
.stph-c-bl { bottom:11px; left:11px; border-bottom:1.5px solid; border-left:1.5px solid; }
.stph-c-br { bottom:11px; right:11px; border-bottom:1.5px solid; border-right:1.5px solid; }
.stph-exif { min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.1em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.42); backdrop-filter:blur(4px); padding:4px 11px; border-radius:6px; white-space:nowrap; }
/* Contact strip */
.stph-contact { flex-shrink:0; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 60%,transparent); backdrop-filter:blur(8px); padding:12px 18px 14px; }
.stph-ch { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:9px; gap:12px; }
.stph-cl { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.stph-cl b { color:var(--accent); font-weight:600; }
/* Spells out that this whole sheet is a plan, not delivered photos — pairs with the ref pill on the main frame. */
.stph-planhint { font-size:10.5px; color:var(--ink-faint); line-height:1.4; margin-top:3px; max-width:46ch; }
/* Scene script layer — narrative beat under the monitor + set arc in the
   contact header. Serif italic voice, restrained fade only (no bling). */
.stph-beat { flex-shrink:0; text-align:center; padding:10px 24px 2px; font-family:var(--rd-font-serif); font-style:italic; font-size:13.5px; line-height:1.6; color:var(--ink-dim); max-width:64ch; margin:0 auto; min-height:34px; animation:stph-beat-in .5s ease both; }
@keyframes stph-beat-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.stph-beat-writing { font-family:var(--rd-font-mono); font-style:normal; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); animation:stph-beat-pulse 1.4s ease-in-out infinite; }
@keyframes stph-beat-pulse { 0%,100% { opacity:.9; } 50% { opacity:.4; } }
.stph-arc { font-family:var(--rd-font-serif); font-style:italic; font-size:11.5px; line-height:1.55; color:var(--ink-dim); margin-top:4px; max-width:72ch; }
.stph-cgen { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap; }
/* Static — this is a property of the plan (identity/light stay locked), not a live process. No spin. */
.stph-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.stph-roll { display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; cursor:grab; }
.stph-roll::-webkit-scrollbar { display:none; }
.stph-roll.dragging { cursor:grabbing; }
.stph-roll.dragging .stph-cell { transition:none; }
.stph-roll.dragging .stph-cell:hover { transform:none; }
/* Section breaks in the contact roll: mark the core/extra boundary and the upgrade-cell boundary, so neither reads as "just another photo". */
.stph-divider { position:relative; flex-shrink:0; width:16px; align-self:stretch; display:flex; align-items:center; justify-content:center; }
.stph-divider::before { content:""; position:absolute; top:8px; bottom:8px; left:50%; width:1px; background:var(--line-2); }
.stph-divider span { writing-mode:vertical-rl; font-family:var(--rd-font-mono); font-size:7.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.stph-divider-plain::before { background:var(--accent-line); }
.stph-cell { position:relative; width:74px; border-radius:7px; overflow:hidden; background:#1b140d; border:1px solid rgba(255,255,255,.07); cursor:pointer; flex-shrink:0; aspect-ratio:3/4; transition:transform .2s var(--rd-ease),box-shadow .2s var(--rd-ease); }
.stph-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.stph-cn { position:absolute; top:4px; left:4px; font-family:var(--rd-font-mono); font-size:8px; color:rgba(255,255,255,.9); background:rgba(0,0,0,.55); padding:0 5px; border-radius:3px; }
.stph-cell:hover { transform:translateY(-3px); }
.stph-cell.on { box-shadow:0 0 0 2px var(--accent); }
.stph-clab { position:absolute; bottom:0; left:0; right:0; font-size:8.5px; font-weight:600; text-align:center; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9); padding:8px 2px 3px; }
.stph-addpl { font-size:18px; }
/* Plan slots beyond the 6-shot core: dashed accent border marks them as SIUU suggestions the user can swap. */
.stph-cell.sug { border:1.5px dashed var(--accent-line); }
.stph-swap-sug { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; padding:0; }
.stph-swap-sug:hover { background:var(--accent); }
.stph-testflag { position:absolute; top:4px; right:4px; font-family:var(--rd-font-mono); font-size:7.5px; letter-spacing:.06em; background:var(--accent); color:var(--accent-ink); padding:1px 5px; border-radius:3px; z-index:2; }
/* In-place pack upgrade cell — the only place "more frames" is offered, and it must never navigate away. */
.stph-upcell { width:74px; flex-shrink:0; border:1.5px solid var(--accent-line); background:var(--accent-soft); border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; color:var(--accent); aspect-ratio:3/4; text-align:center; transition:border-color .2s var(--rd-ease); }
.stph-upcell:hover { border-color:var(--accent); }
.stph-upcell small { font-size:8px; line-height:1.3; padding:0 4px; }
/* Test-shot ritual button in the director rail */
.stph-testbtn { width:100%; margin-bottom:8px; padding:11px; border-radius:10px; font-size:12.5px; font-weight:700; cursor:pointer; border:1.5px solid var(--accent-line); background:var(--accent-soft); color:var(--accent); transition:transform .2s var(--rd-ease); font-family:var(--rd-font-sans); }
.stph-testbtn:hover:not(:disabled) { transform:translateY(-1px); }
.stph-testbtn:disabled { opacity:.75; cursor:default; }
.stph-testnote { font-size:10.5px; color:var(--ink-faint); line-height:1.45; margin-bottom:12px; }

/* F01-approval gate (real-generation wedding concepts) — replaces the generic
   test-shot ritual above for the 5 concepts with a real prompt pack. */
.stph-f01-gate { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; padding:12px; border-radius:12px; border:1px solid var(--accent-line); background:var(--accent-soft); }
.stph-f01-gate-title { font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.stph-f01-gate-sub { font-size:10.5px; color:var(--ink-faint); line-height:1.45; }
.stph-f01-preview { position:relative; border-radius:9px; overflow:hidden; aspect-ratio:4/5; background:#1b140d; }
.stph-f01-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.stph-f01-preview.approved { box-shadow:0 0 0 2px var(--accent); }
.stph-f01-approved-badge { position:absolute; top:6px; right:6px; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.06em; background:var(--accent); color:var(--accent-ink); padding:3px 7px; border-radius:5px; }
.stph-f01-error { font-size:10.5px; color:#e0665a; line-height:1.4; }
.stph-f01-approve-btn { width:100%; padding:10px; border-radius:10px; font-size:12.5px; font-weight:700; cursor:pointer; border:0; background:var(--accent); color:var(--accent-ink); transition:transform .2s var(--rd-ease); font-family:var(--rd-font-sans); }
.stph-f01-approve-btn:hover { transform:translateY(-1px); }

/* Director rail */
.stph-director { border-left:1px solid var(--line); overflow-y:auto; padding:18px 16px; scrollbar-width:thin; display:flex; flex-direction:column; gap:16px; }
.stph-dir-title { font-family:var(--rd-font-serif); font-style:italic; font-weight:600; font-size:18px; line-height:1.1; }
.stph-dir-sub { font-size:12px; color:var(--ink-dim); margin-top:-10px; }
.stph-tell { display:flex; gap:8px; align-items:flex-end; }
.stph-tell-ta { flex:1; background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-family:var(--rd-font-sans); font-size:12px; color:var(--ink); resize:none; -webkit-appearance:none; box-sizing:border-box; }
.stph-tell-ta:focus { outline:none; border-color:var(--accent-line); }
.stph-tell-send { width:32px; height:32px; border-radius:50%; background:var(--accent); border:0; color:var(--accent-ink); font-size:14px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.stph-tell-send:disabled { opacity:.4; cursor:default; }
.stph-tell-applied { margin-top:8px; }
.stph-tell-applied-label { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
.stph-tell-chips { display:flex; flex-wrap:wrap; gap:6px; }
.stph-tell-chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:999px; padding:5px 6px 5px 11px; max-width:100%; }
.stph-tell-chip.conflict { border-color:var(--warn, #b5793a); color:var(--warn, #b5793a); }
.stph-tell-chip button { background:var(--inset); border:0; border-radius:50%; width:16px; height:16px; font-size:9px; line-height:1; color:var(--ink-faint); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.stph-tell-chip button:hover { color:var(--ink); }
.stph-igroup { }
.stph-igtitle { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.stph-intents { display:flex; flex-wrap:wrap; gap:5px; }
.stph-intent { font-size:11.5px; font-weight:500; color:var(--ink-dim); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 10px; cursor:pointer; transition:all .16s var(--rd-ease); }
.stph-intent:hover { border-color:var(--accent-line); color:var(--accent); }
.stph-intent.on { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }

/* ===== STUDIO PHOTO SET (stps-*) ===== */
.stps-screen { padding-bottom:60px; }
.stps-back { background:none; border:0; color:var(--ink-dim); font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; margin-bottom:24px; display:block; padding:0; transition:color .2s; }
.stps-back:hover { color:var(--accent); }
.stps-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.stps-eyebrow { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.stps-h1 { font-size:38px; font-weight:800; letter-spacing:-.03em; margin-bottom:10px; }
.stps-h1 em { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; }
.stps-sub { color:var(--ink-dim); font-size:14px; line-height:1.5; margin-bottom:10px; }
.stps-meta { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-faint); }
.stps-warranty { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--accent); margin-top:4px; }
.stps-head-acts { display:flex; gap:10px; align-items:center; flex-shrink:0; padding-top:6px; }
.stps-ghost { background:transparent; border:1px solid var(--line-2); border-radius:10px; padding:10px 17px; font-size:13px; font-weight:600; color:var(--ink-dim); cursor:pointer; white-space:nowrap; transition:border-color .2s; }
.stps-ghost:hover { border-color:var(--ink-dim); }
.stps-btn-em { background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px; padding:11px 18px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:transform .2s var(--rd-ease); }
.stps-btn-em:hover { transform:translateY(-2px); }

/* Masonry */
.stps-masonry { columns:4; column-gap:8px; margin-bottom:32px; }
.stps-photo { break-inside:avoid; margin-bottom:8px; }
.stps-photo-img { position:relative; border-radius:0; overflow:hidden; cursor:pointer; border:1px solid var(--line); transition:border-color .2s,transform .2s var(--rd-ease); }
.stps-photo:hover .stps-photo-img { transform:translateY(-3px); }
.stps-photo.hero .stps-photo-img { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.stps-photo-img img { width:100%; display:block; object-fit:cover; aspect-ratio:3/4; }
.stps-photo.tall .stps-photo-img img { aspect-ratio:3/5; }
/* Real-gen frames carry their own exact configured ratio (set as an inline
   style on .stps-photo-img itself, computed once per frame) — let the image
   fill that box exactly instead of fighting it with the generic 3/4 or 3/5
   fallback above, which only approximates the mock/reference grid's shape. */
.stps-photo-img.has-ratio img { width:100%; height:100%; aspect-ratio:auto; }
.stps-photo-vignette { display:none; }
.stps-photo-n { position:absolute; top:10px; left:10px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.08em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.45); padding:2px 7px; border-radius:4px; }
.stps-hero-badge { position:absolute; top:10px; right:10px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); padding:3px 9px; border-radius:999px; }
.stps-photo-hover { position:absolute; bottom:10px; right:10px; display:flex; gap:5px; opacity:0; transition:opacity .18s; }
.stps-photo-img:hover .stps-photo-hover { opacity:1; }

/* Real-generation in-flight state (wedding F02-F16) */
.stps-photo.generating .stps-photo-img img { filter:blur(6px) brightness(.7); }
.stps-photo.error .stps-photo-img img { filter:grayscale(.6) brightness(.55); }
.stps-photo-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:7px; flex-direction:column; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.stps-photo-status.err { cursor:pointer; background:rgba(0,0,0,.28); }
.stps-photo-spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:stps-spin .8s linear infinite; }
@keyframes stps-spin { to { transform:rotate(360deg); } }
.stps-f01-wait { max-width:56ch; margin:40px auto 0; text-align:center; font-size:13.5px; color:var(--ink-dim); line-height:1.6; }
.stps-f01-solo { display:flex; justify-content:center; margin:12px 0 24px; }
/* .stps-photo.hero is a flex ITEM here with no intrinsic width of its own — a
   plain <div> child at width:100% can't resolve against an auto/shrink-wrapped
   flex item (unlike an <img>, which sizes fine via the replaced-element
   algorithm). Give the item itself a definite width so the aspect-ratio box
   inside it has something real to compute from, or it collapses to ~2px. */
.stps-f01-solo > .stps-photo.hero { width:100%; max-width:420px; }
.stps-f01-img { width:100%; }
.stps-f01-img img { width:100%; height:100%; object-fit:cover; display:block; }
.stps-f01-actions { display:flex; justify-content:center; gap:12px; }
.stps-action { width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.9); border:0; color:#111; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Make-more */
.stps-make { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:28px; }
.stps-make-label { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.stps-make-chips { display:flex; flex-wrap:wrap; gap:8px; }
.stps-make-chip { font-size:13px; font-weight:500; color:var(--ink-dim); background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:9px 14px; cursor:pointer; transition:all .18s var(--rd-ease); }
.stps-make-chip:hover { border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }

/* Design bridge — monochromatic accent gradient only (was accent+violet; a
   fixed --violet doesn't track the selected aura and read wrong on every
   aura but Dusk, same class of bug as feedback_css_overflow_min_width /
   Beauty's loading spinner — see docs/redesign-design-system.md). */
.stps-bridge { border:1px solid var(--accent-line); border-radius:18px; padding:28px; display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent) 3%,transparent)); }
.stps-bridge-eyebrow { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.stps-bridge-h2 { font-size:28px; font-weight:800; letter-spacing:-.03em; margin-bottom:12px; }
.stps-bridge-h2 em { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; }
.stps-bridge-copy { color:var(--ink-dim); font-size:13.5px; line-height:1.55; margin-bottom:20px; }
.stps-bridge-flows { display:flex; flex-direction:column; gap:9px; }
.stps-bridge-flow { display:flex; align-items:center; gap:12px; padding:11px 14px; background:color-mix(in srgb,var(--card) 70%,transparent); border:1px solid var(--line); border-radius:11px; cursor:pointer; text-align:left; transition:all .2s var(--rd-ease); }
.stps-bridge-flow:hover { border-color:var(--accent-line); background:var(--accent-soft); transform:translateY(-1px); }
.stps-bf-ic { width:34px; height:34px; border-radius:7px; overflow:hidden; flex-shrink:0; }
.stps-bf-ic img { width:100%; height:100%; object-fit:cover; display:block; }
.stps-bridge-flow b { font-size:13px; font-weight:600; display:block; }
.stps-bridge-flow span { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.04em; color:var(--ink-faint); }
.stps-bridge-right { display:flex; justify-content:center; align-items:center; }
.stps-bridge-vis { display:flex; align-items:center; gap:14px; }
.stps-bv-src { width:96px; height:118px; border-radius:10px; overflow:hidden; border:1px solid var(--line-2); flex-shrink:0; }
.stps-bv-src img { width:100%; height:100%; object-fit:cover; display:block; }
.stps-bv-arrow { font-size:22px; color:var(--accent); }
.stps-bv-dst { position:relative; width:142px; height:150px; border-radius:10px; overflow:hidden; border:1px solid var(--accent-line); flex-shrink:0; }
.stps-bv-dst img { width:100%; height:100%; object-fit:cover; display:block; }
.stps-bv-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:10px; }
.stps-bv-hl { font-family:var(--rd-font-serif); font-style:italic; font-size:15px; font-weight:800; color:#fff; line-height:1.1; text-shadow:0 1px 4px rgba(0,0,0,.75), 0 4px 16px rgba(0,0,0,.55); }
.stps-bv-tag { font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:4px; text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* ===== Responsive (Studio) ===== */
@media(max-width:1100px) {
  .stho-band { grid-template-columns:1fr; }
  .stho-intro { padding-top:0; }
  .stho-lightbox { display:none; }
  .stho-lookbook { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stco-boards { grid-template-columns:1fr; }
  .stup-body { grid-template-columns:1fr; }
  .stsm-body { grid-template-columns:1fr; }
  .stph-body { grid-template-columns:200px 1fr 260px; }
  .stps-masonry { columns:3; }
  .stps-bridge { grid-template-columns:1fr; }
}
@media(max-width:800px) {
  .stho-lookbook { grid-template-columns:1fr 1fr; }
  .stph-body { grid-template-columns:1fr; }
  .stph-locks, .stph-director { display:none; }
  .stps-masonry { columns:2; }
}

/* ===== Mobile Studio (≤720px — tab bar present) ===== */
@media(max-width:720px) {
  /* Setup: shrink h1, step rail scrolls */
  .stup-h1 { font-size:26px; }
  .stup-steps { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .stup-steps::-webkit-scrollbar { display:none; }
  .stup-step { flex-shrink:0; }

  /* Photoshoot: scroll internally (these MUST be after the .stph-* base rules
     above so they win the cascade). */
  .stph-root { height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .stph-body { height:auto; overflow:visible; grid-template-columns:1fr; }
  .stph-stage { min-height:0; }
  .stph-monitor { flex:none; aspect-ratio:3/4; max-height:62vh; padding:8px 12px 0; }
  .stph-frame { height:100%; max-width:100%; }
  .stph-shottabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; justify-content:flex-start; }
  .stph-shottabs::-webkit-scrollbar { display:none; }
  .stph-tab { flex-shrink:0; }
  /* Design Builder full-viewport screen fills the locked app shell */
  .dbldr-root { height:100dvh; }

  /* PhotoSet: shrink heading, stack head layout */
  .stps-h1 { font-size:26px; }
  .stps-head { flex-direction:column; align-items:flex-start; gap:12px; }
  .stps-head-acts { padding-top:0; }
  .stps-bridge-right { display:none; }
}

/* ════════════════════════════════════════════════════════════════
   HOME MOBILE SECTIONS (≤820px) — single column, full-bleed.
   Rendered by HomeScreen when useMediaQuery('(max-width:820px)').
   All classes prefixed `m-` to avoid collision with desktop.
   ════════════════════════════════════════════════════════════════ */
.rd-cat-section--mobile { margin: 0 calc(var(--rd-pad-x) * -1); }
.m-sec { --m-pad: 20px; color: var(--ink); }
.m-sec img { display: block; }
.m-sec h1, .m-sec h2, .m-sec h3 { letter-spacing: -.02em; }

/* ── shared intro ── */
.m-pad { padding: 14px var(--m-pad) 0; }
.m-toprule { display:flex; align-items:center; gap:12px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.m-toprule .ln { flex:1; height:1px; background:var(--line); }
.m-titlewrap { margin-top: 22px; }
.m-titlewrap .cat-banner-title { font-size: clamp(46px, 13.5vw, 62px); }
.m-subt { font-size:13.5px; color:var(--ink-dim); margin-top:12px; line-height:1.55; }
.m-lead { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:20px; line-height:1.3; color:var(--ink); margin-top:18px; }
/* Plain ink, matching every other .hl emphasis span site-wide (bhs-lead, lds-lead,
   rd-faq-lead…) — the rainbow --aurora gradient here was a one-off that clashed
   against the warm theme. */
.m-lead .hl { color:var(--ink); }

/* ── shared CTAs ── */
.m-ctas { display:flex; flex-direction:column; gap:10px; padding:0 var(--m-pad); margin-top:22px; }
.m-btn-em { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:13px; padding:15px; cursor:pointer; }
.m-btn-gh { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:13px; padding:15px; cursor:pointer; }

/* ── shared section heads ── */
.m-shead { padding:0 var(--m-pad); margin-top:32px; }
.m-shead .m-wl { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.m-shead h2 { font-size:23px; font-weight:800; margin-top:7px; }
.m-shead h2 em { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; }
.m-shead p { font-size:12px; color:var(--ink-dim); line-height:1.5; margin-top:7px; }

/* ── shared legend ── */
.m-legend { display:flex; flex-wrap:wrap; gap:10px 18px; padding:0 var(--m-pad); margin-top:18px; }
.m-lg { display:flex; align-items:center; gap:7px; font-family:var(--rd-font-mono); font-size:10px; color:var(--ink-dim); }
.m-lg b { color:var(--ink); font-weight:500; }
.m-lg .d { width:7px; height:7px; border-radius:50%; }
.m-lg .n { opacity:.55; }
.m-ld-legend .m-lg-ic { width:24px; height:24px; border-radius:7px; background:var(--inset); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.m-ld .m-ctas { margin-top:28px; }

/* ── shared frame ── */
.m-frame { position:relative; border:1px solid var(--line-2); border-radius:7px; background:var(--inset); overflow:hidden; flex-shrink:0; }
.m-frame.lit { border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line); }
.m-frame img { width:100%; height:100%; object-fit:cover; }
.m-rl { position:absolute; left:5px; bottom:4px; font-family:var(--rd-font-mono); font-size:7.5px; color:#fff; background:rgba(0,0,0,.5); padding:1px 4px; border-radius:4px; z-index:2; }

/* ════ DESIGN ════ */
.m-design .m-cards { display:flex; flex-direction:column; gap:14px; padding:20px var(--m-pad) 0; }
.m-jc { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:block; width:100%; text-align:left; cursor:pointer; color:var(--ink); }
.m-jc .m-kind { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.m-jc h3 { font-size:20px; font-weight:800; margin-top:7px; }
.m-jc p { color:var(--ink-dim); font-size:12.5px; line-height:1.5; margin-top:6px; }
.m-jc .m-go { display:inline-flex; align-items:center; gap:6px; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:12px; }
.m-hero { padding:22px 20px 20px; }
.m-primary { border-color:var(--accent-line); }
.m-tag-main { position:absolute; top:15px; right:15px; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:4px 9px; border-radius:999px; }
.m-cluster-wrap { overflow-x:auto; scrollbar-width:none; margin:16px -20px 12px; padding:0 20px; }
.m-cluster-wrap::-webkit-scrollbar { display:none; }
.m-cluster { display:flex; align-items:flex-end; gap:9px; }
.m-cluster .m-r45 { width:88px; height:110px; } .m-cluster .m-r11 { width:88px; height:88px; }
.m-cluster .m-r916 { width:62px; height:110px; } .m-cluster .m-r169 { width:104px; height:62px; }
.m-hcap { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.m-hcap::before { content:""; width:16px; height:1px; background:var(--accent-line); }
.m-rcard { display:flex; align-items:stretch; gap:16px; padding:18px; min-height:104px; }
.m-rcard .m-txt { flex:1; }
.m-rcard--launch   .m-prev { width:88px; }
.m-rcard--covers   .m-prev { width:108px; }
.m-rcard--carousel .m-prev { width:126px; }
.m-rcard .m-prev { margin:-18px -18px -18px 0; clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.m-rcard .m-prev.djc-rcard-bleed--multi .djc-bleed-slice { clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.m-refcta { margin:18px var(--m-pad) 0; padding:20px; border-radius:16px; border:1px dashed var(--line-2); background:var(--accent-soft); }
.m-refcta-ic { width:48px; height:48px; border-radius:13px; background:var(--inset); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:13px; }
.m-refcta b { font-size:16px; font-weight:800; }
.m-refcta span { display:block; color:var(--ink-dim); font-size:12.5px; margin-top:6px; line-height:1.5; }
.m-refcta-btn { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:12px; padding:14px; cursor:pointer; margin-top:16px; width:100%; }

/* ════ STUDIO ════ */
.m-points { margin:22px var(--m-pad) 0; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--line); padding-top:20px; }
.m-pt { display:flex; gap:12px; }
.m-pt-ic { width:30px; height:30px; border-radius:8px; background:var(--inset); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.m-pt b { font-size:13.5px; font-weight:700; display:block; }
.m-pt span { color:var(--ink-dim); font-size:12px; line-height:1.45; display:block; margin-top:3px; }
.m-lightbox { margin:22px var(--m-pad) 0; background:var(--inset); border:1px solid var(--line-2); border-radius:18px; padding:13px; }
.m-lb-top { display:flex; align-items:center; justify-content:space-between; padding:1px 4px 11px; }
.m-roll { font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.m-roll .m-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px 1px var(--accent); }
.m-lbmeta { font-family:var(--rd-font-mono); font-size:8.5px; color:var(--ink-faint); }
.m-hero-img { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/5; background:#1b140d; }
.m-hero-img img { width:100%; height:100%; object-fit:cover; }
.m-grade { position:absolute; inset:0; background:linear-gradient(105deg,rgba(8,6,16,.04) 28%,rgba(8,6,16,.66)); }
.m-frameno { position:absolute; top:11px; left:12px; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.08em; color:rgba(255,255,255,.82); background:rgba(0,0,0,.42); backdrop-filter:blur(4px); padding:3px 7px; border-radius:6px; }
.m-corner { position:absolute; width:12px; height:12px; border-color:rgba(255,255,255,.5); }
.m-c-tr { top:11px; right:11px; border-top:1.5px solid; border-right:1.5px solid; }
.m-c-br { bottom:11px; right:11px; border-bottom:1.5px solid; border-right:1.5px solid; }
.m-quote { position:absolute; left:18px; bottom:18px; right:18px; }
.m-quote q { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:21px; line-height:1.12; color:#fff; quotes:none; display:block; text-shadow:0 2px 24px rgba(0,0,0,.5); }
.m-qc { font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-top:9px; }
.m-strip { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:11px 0 2px; }
.m-strip::-webkit-scrollbar { display:none; }
.m-shot { flex-shrink:0; width:62px; cursor:pointer; }
.m-shot-pic { position:relative; border-radius:7px; overflow:hidden; aspect-ratio:3/4; background:#1b140d; border:1px solid rgba(255,255,255,.07); transition:box-shadow .2s var(--rd-ease); }
.m-shot-pic img { width:100%; height:100%; object-fit:cover; }
.m-sn { position:absolute; top:5px; left:5px; font-family:var(--rd-font-mono); font-size:7.5px; color:rgba(255,255,255,.85); background:rgba(0,0,0,.5); padding:1px 4px; border-radius:4px; }
.m-shot.active .m-shot-pic { box-shadow:0 0 0 2px var(--accent); }
.m-slab { font-size:9.5px; font-weight:600; color:var(--ink-dim); margin-top:6px; text-align:center; white-space:nowrap; }
.m-shot.active .m-slab { color:var(--accent); }
.m-dirs { display:flex; flex-direction:column; gap:12px; padding:16px var(--m-pad) 0; }
.m-dir { position:relative; min-height:190px; border-radius:15px; overflow:hidden; border:1px solid var(--line); background:#1b140d; cursor:pointer; width:100%; }
.m-dir img { width:100%; height:100%; object-fit:cover; }
.m-dir .m-vig { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,6,4,0) 31%,rgba(8,6,4,.12) 50%,rgba(8,6,4,.76) 100%); }
.m-dir .m-dn { position:absolute; top:13px; left:14px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.7); }
.m-dir .m-arrow { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.22); backdrop-filter:blur(4px); }
.m-dbody { position:absolute; left:16px; right:16px; bottom:15px; text-align:left; }
.m-dir h3 { font-size:18px; font-weight:800; color:#fff; }
.m-dir p { max-width:92%; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.9); margin-top:5px; text-shadow:0 1px 4px rgba(0,0,0,.85); }
.m-dir-cta { color:#5d3a22; background:rgba(247,239,225,.94); border-color:rgba(255,255,255,.5); }

/* ════ BIẾN HÌNH ════ */
.m-bh-hero { position:relative; height:320px; margin:8px 0 0; overflow:hidden; }
.m-bh-field { position:absolute; inset:-30px; pointer-events:none; z-index:0; }
.m-bh-field .g1 { position:absolute; inset:0; background:radial-gradient(40% 46% at 32% 50%,rgba(240,205,134,.18),transparent 70%); }
.m-bh-field .g2 { position:absolute; inset:0; background:radial-gradient(40% 46% at 70% 50%,rgba(224,176,104,.16),transparent 70%); }
.m-bh-field .g3 { position:absolute; inset:0; background:radial-gradient(42% 52% at 50% 48%,rgba(120,116,170,.34),transparent 66%); }
/* cover-fill the hero (figures big, like the beauty hero) + bottom fade */
.m-bh-art { position:absolute; inset:0; z-index:2; }
.m-bh-art img { width:100%; height:100%; object-fit:contain; object-position:50% 48%; display:block; -webkit-mask-image:linear-gradient(180deg,#000 0 66%,rgba(0,0,0,.78) 80%,rgba(0,0,0,.28) 93%,transparent 100%); mask-image:linear-gradient(180deg,#000 0 66%,rgba(0,0,0,.78) 80%,rgba(0,0,0,.28) 93%,transparent 100%); transition:opacity .5s ease; }
.m-bh-art-night { position:absolute; inset:0; opacity:0; }
[data-theme="dark"] .m-bh-art-day { opacity:0; }
[data-theme="dark"] .m-bh-art-night { opacity:1; }
.m-rail { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding:16px var(--m-pad) 4px; touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.m-rail::-webkit-scrollbar { display:none; }
.m-world { position:relative; flex:0 0 178px; height:248px; border-radius:14px; overflow:hidden; background:var(--inset); border:1px solid var(--line); cursor:pointer; }
.m-world:first-child { flex-basis:200px; }
.m-world img { width:100%; height:100%; object-fit:cover; }
.m-world .m-vig { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,6,16,.05) 32%,rgba(8,6,16,.5) 60%,rgba(8,6,16,.9)); }
.m-world .m-edge { display:none; }
.m-world .m-wn { position:absolute; top:11px; left:12px; font-family:var(--rd-font-mono); font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.78); }
.m-world .m-arrow { position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.34); display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.24); }
.m-wbody { position:absolute; left:13px; right:13px; bottom:13px; text-align:left; }
.m-wtype { font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.m-world h3 { font-size:17px; font-weight:800; color:#fff; margin-top:3px; }
.m-world.m-more { background:var(--card); display:flex; align-items:center; justify-content:center; flex-basis:150px; border-style:dashed; }
.m-mc { text-align:center; padding:16px; }
.m-mring { width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; margin:0 auto 11px; color:var(--ink-dim); }
.m-more b { font-size:13.5px; font-weight:700; display:block; }
.m-more span { font-size:10.5px; color:var(--ink-dim); display:block; margin-top:4px; line-height:1.4; }

/* ════ LÀM ĐẸP ════ */
.m-ld-hero { position:relative; height:300px; margin:10px 0 0; overflow:hidden; }
.m-ld-field { position:absolute; inset:-20px; pointer-events:none; z-index:0; }
.m-ld-field .g1 { position:absolute; inset:0; background:radial-gradient(44% 50% at 50% 40%,rgba(240,205,134,.22),transparent 70%); }
.m-ld-field .g2 { position:absolute; inset:0; background:radial-gradient(34% 42% at 64% 48%,rgba(231,166,160,.18),transparent 72%); }
.m-ld-scene { position:absolute; inset:0; z-index:1; }
/* object-position-x higher → pan right → subjects slide LEFT into frame so the
   white-dress subject isn't pinned/clipped at the right edge. */
.m-ld-scene img { width:100%; height:100%; object-fit:cover; object-position:72% 22%; -webkit-mask-image:linear-gradient(180deg,#000 0 68%,rgba(0,0,0,.5) 86%,transparent 100%); mask-image:linear-gradient(180deg,#000 0 68%,rgba(0,0,0,.5) 86%,transparent 100%); }
.m-ba { position:relative; margin:14px var(--m-pad) 0; height:300px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--inset); cursor:ew-resize; user-select:none; touch-action:none; }
.m-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 26%; pointer-events:none; }
.m-ba-after { clip-path:inset(0 0 0 var(--sx,50%)); }
.m-ba-handle { position:absolute; top:0; bottom:0; left:var(--sx,50%); width:2px; transform:translateX(-50%); background:rgba(255,255,255,.85); pointer-events:none; }
.m-ba-knob { position:absolute; top:50%; left:var(--sx,50%); transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; color:#1a1a22; box-shadow:0 6px 18px rgba(0,0,0,.4); pointer-events:none; }
.m-ba-tag { position:absolute; top:13px; font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.4); padding:4px 9px; border-radius:5px; pointer-events:none; }
.m-ba-tag.b { left:13px; }
.m-ba-tag.a { right:13px; background:var(--accent); color:var(--accent-ink); }
.m-ld-cards { display:flex; flex-direction:column; gap:12px; padding:16px var(--m-pad) 0; }
.m-tcard { position:relative; height:128px; border-radius:15px; overflow:hidden; border:1px solid var(--line); background:var(--card); display:flex; cursor:pointer; text-align:left; color:var(--ink); }
.m-tcard img { width:128px; height:100%; object-fit:cover; flex-shrink:0; }
.m-tcard-edge { display:none; }
.m-tcard-info { flex:1; padding:16px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.m-tcard h3 { font-size:21px; font-weight:800; margin-top:4px; }
.m-tcard ul { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px 10px; }
.m-tcard li { font-size:11px; color:var(--ink-dim); position:relative; padding-left:10px; }
.m-tcard li::before { content:"·"; position:absolute; left:2px; color:var(--accent); }
.m-tcard-arrow { position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); }
.m-tn { position:absolute; top:8px; left:8px; font-family:var(--rd-font-mono); font-size:8px; letter-spacing:.1em; color:rgba(255,255,255,.85); background:rgba(0,0,0,.5); padding:1px 6px; border-radius:4px; z-index:2; }

.m-trust { display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; margin:22px var(--m-pad) 0; padding-top:18px; border-top:1px solid var(--line); }
.m-tr { display:flex; align-items:center; gap:10px; min-width:0; }
.m-tr .d { width:8px; height:8px; border-radius:50%; border:1px solid var(--accent-line); background:var(--accent-soft); flex-shrink:0; }
.m-tr b { font-size:12px; font-weight:700; display:block; letter-spacing:-.01em; }
.m-tr span { font-size:11px; color:var(--ink-dim); display:block; margin-top:1px; }

/* ════ MOBILE FAQ (≤820px) ════ */
.m-faq-eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-top:18px; }
.m-faq-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.m-faq-h { font-size:40px; font-weight:800; letter-spacing:-.04em; line-height:1.06; margin-top:14px; }
.m-faq-lead { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:17px; line-height:1.34; color:var(--ink-dim); margin-top:14px; }
.m-faq-lead .hl { color:var(--ink); font-style:normal; font-weight:600; }
.m-faq-list { margin:24px var(--m-pad) 0; border-top:1px solid var(--line); }
.m-fq { border-bottom:1px solid var(--line); }
.m-fq-btn { width:100%; background:none; border:0; cursor:pointer; color:inherit; font-family:inherit; text-align:left; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:14px; padding:19px 2px; }
.m-fq-idx { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); padding-top:5px; transition:color .25s var(--rd-ease); }
.m-fq-q { font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.24; }
.m-fq-sign { position:relative; width:16px; height:16px; margin-top:5px; flex-shrink:0; }
.m-fq-sign::before, .m-fq-sign::after { content:""; position:absolute; background:var(--ink-dim); transition:transform .35s var(--rd-ease),background .25s var(--rd-ease); }
.m-fq-sign::before { top:50%; left:0; width:100%; height:1.6px; transform:translateY(-50%); }
.m-fq-sign::after { left:50%; top:0; height:100%; width:1.6px; transform:translateX(-50%); }
.m-fq[aria-expanded="true"] .m-fq-sign::after { transform:translateX(-50%) scaleY(0); }
.m-fq[aria-expanded="true"] .m-fq-sign::before { background:var(--accent); }
.m-fq[aria-expanded="true"] .m-fq-idx { color:var(--gold-deep); }
.m-fq[aria-expanded="false"] .m-fq-q { color:color-mix(in srgb,var(--ink) 82%,transparent); }
.m-fq-ans { display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--rd-ease); }
.m-fq[aria-expanded="true"] .m-fq-ans { grid-template-rows:1fr; }
.m-fq-ans-in { overflow:hidden; }
.m-fq-ans p { font-size:13.5px; line-height:1.6; color:var(--ink-dim); padding:0 4px 20px 0; margin-left:26px; opacity:0; transform:translateY(6px); transition:opacity .4s var(--rd-ease) .06s,transform .4s var(--rd-ease) .06s; }
.m-fq[aria-expanded="true"] .m-fq-ans p { opacity:1; transform:none; }
.m-fq-ans b { color:var(--ink); font-weight:600; }
.m-faq-contact { margin:20px var(--m-pad) 0; display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); padding-top:18px; }
.m-faq-contact small { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.m-faq-contact a { font-size:15px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.m-faq-contact a .arr { color:var(--accent); }

/* ════ MOBILE FOOTER (≤820px) ════ */
/* margin-bottom -40px cancels .rd-screen's mobile bottom padding so the footer
   sits flush above the tab bar (no black gap). */
.m-foot { margin:34px calc(var(--rd-pad-x) * -1) -40px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--inset) 50%,var(--bg)); position:relative; overflow:hidden; }
.m-foot-pad { padding:30px var(--m-pad) 0; }
.m-foot-h2 { font-size:29px; font-weight:800; letter-spacing:-.03em; line-height:1.04; }
.m-foot-manifesto { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:15px; line-height:1.5; color:var(--ink-dim); margin-top:16px; }
.m-foot-manifesto .hl { color:var(--ink); font-style:normal; }
.m-foot-actions { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.m-foot-btn-em { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:13px; padding:16px; cursor:pointer; }
.m-foot-btn-ghost { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:13px; padding:16px; cursor:pointer; }
.m-foot-grid { margin-top:34px; padding-top:28px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:26px 18px; }
.m-foot-brand { grid-column:1 / -1; }
.m-foot-brand .rd-foot-logo { display:block; background:none; border:0; padding:0; cursor:pointer; color:var(--ink); margin-bottom:12px; }
.m-foot-brand p { font-size:13px; line-height:1.6; color:var(--ink-dim); }
.m-foot-seal { margin-top:16px; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.m-foot-seal .d { width:7px; height:7px; border-radius:50%; background:var(--aurora); }
.m-foot-col h4 { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:13px; }
.m-foot-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.m-foot-col a { font-size:14px; color:var(--ink-dim); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.m-foot-col.social a .ext { font-family:var(--rd-font-mono); font-size:10px; color:var(--ink-faint); }
.m-foot-legal { margin-top:26px; padding:18px var(--m-pad); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:13px; }
.m-foot-legal .lt { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-faint); }
.m-foot-legal .lt a { color:var(--ink-dim); }
.m-foot-legal .lt .sep { opacity:.45; }
.m-foot-mode { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.m-foot-mode .d { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-line); }
/* wordmark reuses .rd-foot-mark (correct colours/animation) */
.m-foot .rd-foot-mark { padding:4px 0 0; }

/* ===== HOME: Design format fan (production decoration) ===== */
.cat-banner--design {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
  align-items: start;
  padding-top: 56px;
}
.cat-banner--design .cat-banner-text {
  max-width: 480px;
}
.cat-banner--design .cat-banner-veil {
  display: none;
}
.dsg-home-fan-copy {
  max-width: 390px;
  margin: 8px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.55;
}
.dsg-home-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.dsg-home-ctas .rd-btn {
  min-height: 50px;
  justify-content: center;
  padding: 14px 22px;
}
.dsg-home-fan {
  position: relative;
  right: auto;
  top: auto;
  width: min(100%, 620px);
  height: 228px;
  transform: none;
  margin-left: auto;
  z-index: 4;
  pointer-events: none;
}
.dsg-home-fan-aura {
  position: absolute;
  left: 12%;
  right: 4%;
  top: 6%;
  bottom: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 48%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 46%),
    radial-gradient(circle at 66% 54%, color-mix(in srgb, #7f67ff 10%, transparent), transparent 58%);
  filter: blur(22px);
  opacity: .74;
}
[data-theme="light"] .dsg-home-fan-aura {
  opacity: .46;
  filter: blur(28px);
}
.dsg-home-fan-line {
  position: absolute;
  left: -44%;
  right: 0;
  bottom: 47px;
  height: 72px;
  overflow: visible;
}
.dsg-fan-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dsg-fan-curve {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 38%, transparent);
  stroke-width: 1.5px;
  stroke-dasharray: 4 9;
  opacity: .58;
}
.dsg-fan-dot {
  fill: var(--accent);
  opacity: .85;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 65%, transparent));
}
.dsg-fan-dot--arrow { opacity: .65; filter: none; }
.dsg-fan-dot--end   { opacity: .45; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)); }
.dsg-fan-el {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--bg) 80%, var(--surface, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line-2, rgba(128,128,128,.12)));
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(0,0,0,.13);
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  user-select: none;
}
.dsg-fan-el svg {
  width: 22px;
  height: 22px;
}
[data-theme="light"] .dsg-fan-el {
  border: 1px solid var(--accent-line);
  color: var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,.09);
}
.dsg-home-fan-cards {
  position: absolute;
  inset: 5px 0 50px 5%;
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(7px, .9vw, 12px);
  perspective: 900px;
}
.dsg-home-fan-card {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--inset);
  border: 1px solid color-mix(in srgb, var(--line-2) 90%, transparent);
  border-radius: 11px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 22px 42px -22px rgba(0,0,0,.72);
  transform-origin: 50% 90%;
  transition: transform .36s var(--rd-ease), box-shadow .36s var(--rd-ease);
}
.dsg-home-fan-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dsg-home-fan-card span {
  position: absolute;
  left: 7px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(5,7,12,.62);
  color: #fff;
  font-family: var(--rd-font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  line-height: 1.2;
  backdrop-filter: blur(5px);
}
.dsg-home-fan-card--1 { width: 155px; height: 190px; transform: rotate(-1.6deg); z-index: 2; }
.dsg-home-fan-card--2 { width: 88px;  height: 88px;  transform: rotate(1.8deg) translateY(-5px); }
.dsg-home-fan-card--3 { width: 60px;  height: 107px; transform: rotate(-.6deg) translateY(-2px); }
.dsg-home-fan-card--4 { width: 108px; height: 61px;  transform: rotate(2.4deg) translateY(-9px); }
.cat-banner--design:hover .dsg-home-fan-card--1 { transform: rotate(-2.2deg) translate(-3px,-2px); }
.cat-banner--design:hover .dsg-home-fan-card--2 { transform: rotate(2.2deg) translateY(-8px); }
.cat-banner--design:hover .dsg-home-fan-card--3 { transform: rotate(-1deg) translateY(-5px); }
.cat-banner--design:hover .dsg-home-fan-card--4 { transform: rotate(3deg) translate(3px,3px); }
.cat-banner--design:hover .dsg-home-fan-card {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 26px 48px -22px rgba(0,0,0,.78);
}
/* Individual card hover — direct selectors, override group-hover with !important */
.dsg-home-fan-card { cursor: pointer; }
.dsg-home-fan-card--1:hover { transform: rotate(-1.6deg) translateY(-14px) scale(1.03) !important; }
.dsg-home-fan-card--2:hover { transform: rotate(1.8deg)  translateY(-15px) scale(1.07) !important; }
.dsg-home-fan-card--3:hover { transform: rotate(-.6deg)  translateY(-14px) scale(1.07) !important; }
.dsg-home-fan-card--4:hover { transform: rotate(2.4deg)  translateY(-11px) scale(1.07) !important; }
.dsg-home-fan-card:hover {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent),
              0 28px 52px -16px rgba(0,0,0,.88) !important;
  z-index: 6;
}
/* Image zoom + fade-in on swap */
@keyframes fan-img-swap { from { opacity: 0; } to { opacity: 1; } }
.dsg-home-fan-card img {
  transition: transform .4s var(--rd-ease);
  animation: fan-img-swap .28s ease both;
}
.dsg-home-fan-card:hover img { transform: scale(1.08); }
.dsg-home-fan-caption {
  position: absolute;
  right: 4px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-faint);
  font-family: var(--rd-font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dsg-home-fan-caption i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.dsg-home-fan-caption b {
  color: var(--accent);
  font-weight: 400;
}

.rd-hero-ctas .rd-btn,
.dsg-home-ctas .rd-btn,
.stho-ctas > button,
.bhs-ctas > button,
.lds-ctas > button {
  min-height: 50px;
  padding: 14px 22px;
  font-size: 14px;
  justify-content: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .cat-banner--design { padding-top: 40px; gap: 28px 32px; }
  .cat-banner--design .cat-banner-text { max-width: 380px; }
  .dsg-home-fan {
    width: min(100%, 560px);
    transform: scale(.94);
    transform-origin: right top;
  }
}

@media (max-width: 820px) {
  .cat-banner--design {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-bottom: 4px;
  }
  .cat-banner--design .cat-banner-text { max-width: 100%; }
  .dsg-home-fan {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 178px;
    transform: none;
    z-index: 4;
  }
  .dsg-home-fan-cards {
    inset: 0 0 36px 0;
    justify-content: flex-start;
    overflow: hidden;
  }
  .dsg-home-fan-card--1 { width: 108px; height: 135px; }
  .dsg-home-fan-card--2 { width: 68px;  height: 68px; }
  .dsg-home-fan-card--3 { width: 48px;  height: 85px; }
  .dsg-home-fan-card--4 { width: 85px;  height: 48px; }
  .dsg-home-fan-line { left: 0; right: 20%; bottom: 37px; height: 48px; }
  .dsg-home-fan-caption { left: 0; right: auto; bottom: 6px; }
  .dsg-fan-el { display: none; }
}

@media (max-width: 520px) {
  .dsg-home-fan-copy { display: none; }
  .dsg-home-fan { height: 150px; }
  .dsg-home-fan-cards { gap: 7px; bottom: 32px; }
  .dsg-home-fan-card--1 { width: 86px; height: 107px; }
  .dsg-home-fan-card--2 { width: 58px; height: 58px; }
  .dsg-home-fan-card--3 { width: 40px; height: 71px; }
  .dsg-home-fan-card--4 { width: 71px; height: 40px; }
  .dsg-home-fan-caption span:last-child { font-size: 0; }
  .dsg-home-fan-caption span:last-child::after { content: "4 formats"; font-size: 9px; }
}

/* ============================================================
   SECTION 03 — BIẾN HÌNH (bhs-)
   ============================================================ */
.bhs-sec { --bhs-halo: color-mix(in srgb, var(--accent) 20%, transparent); position:relative; }
.bhs-stage { position:relative; height:560px; margin-top:6px; }
.bhs-portal { position:absolute; top:38px; left:63%; width:380px; height:380px; transform:translateX(-50%); pointer-events:none; z-index:1; }
.bhs-halo { position:absolute; inset:60px; border-radius:50%; background:radial-gradient(circle,var(--bhs-halo),transparent 70%); }
.bhs-art { position:absolute; right:-1%; bottom:0; width:63.5%; max-width:890px; z-index:2; }
.bhs-art img { width:100%; height:auto; display:block; -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 96%, transparent 100%), linear-gradient(to bottom, black 0 72%, rgba(0,0,0,.8) 84%, rgba(0,0,0,.28) 94%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, black 8%, black 96%, transparent 100%), linear-gradient(to bottom, black 0 72%, rgba(0,0,0,.8) 84%, rgba(0,0,0,.28) 94%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; transition:opacity .5s ease; }
.bhs-art-night { position:absolute; inset:0; opacity:0; }
[data-theme="dark"] .bhs-art-day { opacity:0; }
[data-theme="dark"] .bhs-art-night { opacity:1; }
.bhs-foot { position:absolute; left:-120px; right:-120px; bottom:-8px; height:210px; z-index:3; pointer-events:none; background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg) 44%,transparent) 42%,var(--bg) 92%); }

.bhs-copy { position:absolute; left:0; top:calc(50% + 26px); transform:translateY(-50%); width:46%; max-width:560px; z-index:4; }
.bhs-kicker { display:inline-flex; align-items:center; gap:10px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim); }
.bhs-kicker .sp { width:26px; height:1px; background:var(--line-2); }
.bhs-titlewrap { margin-bottom:12px; }
.bhs-lead { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:24px; line-height:1.3; color:var(--ink); margin-top:20px; max-width:420px; }
.bhs-lead .hl { color: var(--ink); }
.bhs-legend { display:flex; gap:22px; margin-top:28px; }
.bhs-lg { display:flex; align-items:center; gap:9px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim); }
.bhs-lg b { color:var(--ink); font-weight:500; }
.bhs-lg .d { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bhs-lg .n { opacity:.55; }
.bhs-ctas { display:flex; gap:12px; margin-top:32px; }
.bhs-btn-em { display:inline-flex; align-items:center; gap:9px; font-family:var(--rd-font-sans); font-weight:600; font-size:14.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:11px; padding:15px 24px; cursor:pointer; transition:transform .2s var(--rd-ease),box-shadow .2s var(--rd-ease); }
.bhs-btn-ghost { display:inline-flex; align-items:center; gap:9px; font-family:var(--rd-font-sans); font-weight:600; font-size:14.5px; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:11px; padding:15px 22px; cursor:pointer; transition:border-color .2s var(--rd-ease),color .2s var(--rd-ease); }
.bhs-btn-ghost:hover { border-color:var(--accent-line); color:var(--accent); }

.bhs-worlds { position:relative; z-index:5; padding:18px 0 30px; }
.bhs-whead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.bhs-whead .wl { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.bhs-whead h2 { font-size:30px; font-weight:800; letter-spacing:-.025em; margin-top:12px; }
.bhs-whead h2 em { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; }
.bhs-whead .wnote { font-size:13px; color:var(--ink-dim); max-width:280px; line-height:1.5; text-align:right; }
/* Rail aligned with the page content (centred via rd-screen's max-width).
   Generous bottom padding so the hover lift-shadow isn't clipped by overflow. */
.bhs-rail { display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
  padding:8px var(--rd-pad-x) 50px; margin:0 calc(-1 * var(--rd-pad-x));
  scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab; will-change:scroll-position; -webkit-overflow-scrolling:touch; }
.bhs-rail:active { cursor:grabbing; }
/* While dragging/momentum: kill scroll-snap — it fights the JS-driven scrollLeft
   and causes the desktop stutter (native touch on mobile has no such conflict).
   Snap re-enables at rest so cards still settle aligned. */
.bhs-rail.dragging { scroll-snap-type:none; }
/* While dragging: freeze hover transitions so the scroll doesn't stutter */
.bhs-rail.dragging .bhs-world { transition:none; }
.bhs-rail.dragging .bhs-world:hover { transform:none; box-shadow:none; }
.bhs-rail.dragging .bhs-world:hover img { transform:none; }
.bhs-rail.dragging .bhs-world img { transition:none; }
.bhs-rail::-webkit-scrollbar { display:none; }
.bhs-world { position:relative; flex:1 1 0; min-width:230px; height:380px; border-radius:15px; overflow:hidden; cursor:pointer; scroll-snap-align:start; background:var(--inset); border:1px solid var(--line); padding:0; transition:transform .35s var(--rd-ease),box-shadow .35s var(--rd-ease),border-color .35s var(--rd-ease); }
.bhs-world img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--rd-ease); }
.bhs-vig { position:absolute; inset:0; background:linear-gradient(180deg,transparent 68%,rgba(8,6,16,.55) 100%); }
.bhs-edge { display:none; }
.bhs-world:hover { transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-3); }
.bhs-world:hover img { transform:scale(1.06); }
.bhs-world:hover .bhs-edge { opacity:1; }
.bhs-wn { position:absolute; top:14px; left:15px; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.78); }
.bhs-arrow { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.34); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; background:rgba(0,0,0,.24); backdrop-filter:blur(4px); transition:all .25s var(--rd-ease); }
.bhs-world:hover .bhs-arrow { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.bhs-wbody { position:absolute; left:16px; right:16px; bottom:16px; text-align:left; }
.bhs-wtype { font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.bhs-wbody h3 { font-size:20px; font-weight:800; letter-spacing:-.015em; color:#fff; margin-top:4px; }
.bhs-world.bhs-more { flex:0 0 220px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
[data-theme="dark"]  .bhs-world.bhs-more { background:var(--card-2); }
.bhs-world.bhs-more::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 45% at 50% 42%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%); opacity:0; transition:opacity .3s var(--rd-ease); pointer-events:none; }
.bhs-mc { position:relative; z-index:1; text-align:center; padding:20px; }
.bhs-mring { width:52px; height:52px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--ink-dim); transition:all .25s var(--rd-ease); }
.bhs-world.bhs-more:hover { transform:translateY(-6px); border-color:var(--accent-line); background:var(--card); }
.bhs-world.bhs-more:hover::before { opacity:0; }
.bhs-world.bhs-more:hover .bhs-mring { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.bhs-mc b { font-size:15px; font-weight:700; display:block; color:var(--ink); }
.bhs-mc span { font-size:11.5px; color:var(--ink-dim); display:block; margin-top:5px; line-height:1.4; }

@media (max-width:900px) {
  .bhs-stage { height:auto; display:flex; flex-direction:column; }
  .bhs-copy { position:static; width:100%; max-width:none; top:auto; }
  .bhs-portal { display:none; }
  .bhs-art { position:relative; right:auto; bottom:auto; width:100%; max-width:none; margin-top:18px; }
  .bhs-foot { display:none; }
  .bhs-lead { font-size:21px; }
  .bhs-whead { flex-direction:column; align-items:flex-start; gap:8px; }
  .bhs-whead .wnote { text-align:left; }
  .bhs-ctas { flex-wrap:wrap; }
}

/* ============================================================
   SECTION 04 — LÀM ĐẸP (lds-)
   ============================================================ */
.lds-sec { position:relative; }
.lds-stage { position:relative; height:582px; margin-top:6px; }
.lds-scene { position:absolute; left:0; right:0; bottom:0; z-index:0; pointer-events:none; }
.lds-scene img { width:100%; height:auto; display:block; filter:drop-shadow(0 30px 42px rgba(0,0,0,.5)); -webkit-mask-image:linear-gradient(180deg,#000 0 78%,rgba(0,0,0,.55) 90%,transparent 100%); mask-image:linear-gradient(180deg,#000 0 78%,rgba(0,0,0,.55) 90%,transparent 100%); }
[data-theme="light"] .lds-scene img { filter:drop-shadow(0 24px 34px rgba(60,44,22,.2)); }
.lds-contact { position:absolute; left:0; bottom:-8px; width:100%; height:46px; z-index:0; background:radial-gradient(58% 72% at 50% 50%,rgba(38,26,12,.4),transparent 74%); filter:blur(13px); opacity:.4; pointer-events:none; }
[data-theme="light"] .lds-contact { background:radial-gradient(62% 72% at 52% 50%,rgba(96,68,36,.26),transparent 74%); opacity:.5; }

.lds-copy { position:absolute; left:0; top:10px; width:44%; max-width:520px; z-index:4; }
.lds-titlewrap { margin-bottom:12px; }
.lds-lead { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:24px; line-height:1.3; color:var(--ink); margin-top:20px; max-width:400px; }
.lds-lead .hl { color: var(--ink); }
.lds-ctas { display:flex; gap:12px; margin-top:28px; }
.lds-btn-em { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:11px; padding:14px 24px; cursor:pointer; transition:transform .2s var(--rd-ease),box-shadow .2s var(--rd-ease); }
.lds-btn-ghost { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:var(--ink); background:color-mix(in srgb,var(--bg) 58%,transparent); backdrop-filter:blur(7px); border:1px solid var(--line-2); border-radius:11px; padding:14px 22px; cursor:pointer; transition:border-color .2s var(--rd-ease),color .2s var(--rd-ease),background .2s var(--rd-ease); }
.lds-btn-ghost:hover { border-color:var(--accent-line); color:var(--accent); background:color-mix(in srgb,var(--bg) 72%,transparent); }
.lds-legend { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:24px; }
.lds-lg { display:flex; align-items:center; gap:10px; }
.lds-lg .ic { width:30px; height:30px; border-radius:9px; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--accent); flex-shrink:0; }
.lds-lg b { font-size:13px; font-weight:700; display:block; letter-spacing:-.01em; }
.lds-lg span { font-size:11px; color:var(--ink-dim); display:block; margin-top:1px; }

.lds-below { display:grid; grid-template-columns:1.32fr 1fr 1fr 1fr; gap:16px; margin-top:-20px; align-items:stretch; position:relative; z-index:1; }
.lds-cardrow { display:contents; }
.lds-ba { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--inset); cursor:ew-resize; user-select:none; min-height:360px; outline:none; }
.lds-ba:focus-visible { box-shadow:0 0 0 2px var(--accent-line); }
.lds-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; pointer-events:none; }
.lds-ba .after { clip-path:inset(0 0 0 var(--sx,50%)); }
.lds-scrim { display:none; }
.lds-handle { position:absolute; top:0; bottom:0; left:var(--sx,50%); width:2px; transform:translateX(-50%); background:rgba(255,255,255,.85); pointer-events:none; }
.lds-knob { position:absolute; top:50%; left:var(--sx,50%); transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; color:#1a1a22; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.4); pointer-events:none; }
.lds-tag { position:absolute; top:16px; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,.8), 0 1px 8px rgba(0,0,0,.6); }
.lds-tag.b { left:18px; } .lds-tag.a { right:18px; }
.lds-info { position:absolute; left:20px; right:20px; bottom:18px; z-index:2; pointer-events:none; }
.lds-info h3 { font-family:var(--rd-font-serif); font-weight:600; font-size:25px; line-height:1.05; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8), 0 4px 18px rgba(0,0,0,.6); }
.lds-info p { font-size:12px; line-height:1.5; color:rgba(255,255,255,.9); margin-top:8px; max-width:230px; text-shadow:0 1px 4px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.55); }
.lds-info .hint { display:inline-flex; align-items:center; gap:7px; font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.95); text-shadow:0 1px 4px rgba(0,0,0,.8), 0 1px 8px rgba(0,0,0,.6); margin-top:14px; }

.lds-tcard { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--card); cursor:pointer; display:flex; flex-direction:column; text-align:left; padding:0; transition:transform .3s var(--rd-ease),box-shadow .3s var(--rd-ease),border-color .3s var(--rd-ease); }
.lds-tcard:hover { transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow-3); }
.lds-pic { position:relative; height:150px; overflow:hidden; }
.lds-pic img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--rd-ease); }
.lds-tcard:hover .lds-pic img { transform:scale(1.06); }
.lds-pic-vig { display:none; }
.lds-num { position:absolute; top:12px; left:13px; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.9); text-shadow:0 1px 4px rgba(0,0,0,.8), 0 1px 8px rgba(0,0,0,.6); }
.lds-bd { padding:16px 17px 17px; display:flex; flex-direction:column; flex:1; }
.lds-bd h3 { font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.04; }
.lds-bd ul { list-style:none; margin:13px 0 0; display:flex; flex-direction:column; gap:8px; }
.lds-bd li { font-size:12.5px; color:var(--ink-dim); display:flex; align-items:center; gap:9px; }
.lds-bd li::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.lds-go { display:inline-flex; align-items:center; gap:7px; font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--accent); margin-top:auto; padding-top:16px; }

.lds-trust { display:flex; gap:14px; margin-top:18px; border-top:1px solid var(--line); padding:18px 2px 10px; }
.lds-t { display:flex; align-items:center; gap:11px; flex:1; }
.lds-t .d { width:9px; height:9px; border-radius:50%; border:1px solid var(--accent-line); background:var(--accent-soft); flex-shrink:0; }
.lds-t b { font-size:12.5px; font-weight:700; display:block; letter-spacing:-.01em; }
.lds-t span { font-size:11.5px; color:var(--ink-dim); display:block; margin-top:1px; }

/* ================================================================
   FAQ + FOOTER  (v1.0)
   ================================================================ */

/* ----- FAQ section ----- */
.rd-faq-sec { display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; padding:80px 0 96px; margin-top:24px; }
.rd-faq-aside { position:sticky; top:96px; align-self:start; }
.rd-faq-eyebrow { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:11px; }
.rd-faq-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.rd-faq-h { font-size:54px; font-weight:800; letter-spacing:-.04em; line-height:1.06; margin-top:22px; }
.rd-faq-lead { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:21px; line-height:1.34; color:var(--ink-dim); margin-top:20px; max-width:330px; }
.rd-faq-lead .hl { color:var(--ink); font-style:normal; font-weight:600; }
.rd-faq-contact { margin-top:34px; display:inline-flex; flex-direction:column; gap:3px; border-top:1px solid var(--line); padding-top:22px; }
.rd-faq-contact small { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.rd-faq-contact a { font-size:15px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px; width:max-content; text-decoration:none; transition:color .2s var(--rd-ease),gap .2s var(--rd-ease); }
.rd-faq-contact a .arr { color:var(--accent); }
.rd-faq-contact a:hover { color:var(--accent); gap:12px; }

.rd-faq-list { border-top:1px solid var(--line); }
.rd-fq { border-bottom:1px solid var(--line); }
.rd-fq-btn { width:100%; background:none; border:0; cursor:pointer; color:inherit; font-family:inherit; text-align:left; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:22px; padding:26px 4px; }
.rd-fq-idx { font-family:var(--rd-font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-faint); padding-top:7px; transition:color .25s var(--rd-ease); }
.rd-fq-q { font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.22; color:color-mix(in srgb,var(--ink) 82%,transparent); transition:color .25s var(--rd-ease); }
.rd-fq:hover .rd-fq-q,
.rd-fq[aria-expanded="true"] .rd-fq-q { color:var(--ink); }
.rd-fq-sign { position:relative; width:18px; height:18px; margin-top:9px; flex-shrink:0; }
.rd-fq-sign::before, .rd-fq-sign::after { content:""; position:absolute; background:var(--ink-dim); transition:transform .35s var(--rd-ease),background .25s var(--rd-ease); }
.rd-fq-sign::before { top:50%; left:0; width:100%; height:1.6px; transform:translateY(-50%); }
.rd-fq-sign::after  { left:50%; top:0; height:100%; width:1.6px; transform:translateX(-50%); }
.rd-fq[aria-expanded="true"] .rd-fq-sign::after  { transform:translateX(-50%) scaleY(0); }
.rd-fq[aria-expanded="true"] .rd-fq-sign::before { background:var(--accent); }
.rd-fq[aria-expanded="true"] .rd-fq-idx { color:var(--gold-deep); }
.rd-fq-ans { display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--rd-ease); }
.rd-fq[aria-expanded="true"] .rd-fq-ans { grid-template-rows:1fr; }
.rd-fq-ans-in { overflow:hidden; }
.rd-fq-ans p { font-size:15.5px; line-height:1.66; color:var(--ink-dim); max-width:560px; padding:0 56px 30px 0; margin-left:34px; opacity:0; transform:translateY(6px); transition:opacity .4s var(--rd-ease) .06s,transform .4s var(--rd-ease) .06s; }
.rd-fq[aria-expanded="true"] .rd-fq-ans p { opacity:1; transform:none; }
.rd-fq-ans b { color:var(--ink); font-weight:600; }

/* ----- Footer ----- */
.rd-foot { position:relative; margin:0 calc(-1 * var(--rd-pad-x)) -80px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--inset) 50%,var(--bg)); overflow:hidden; }
.rd-foot-wrap { padding:0 var(--rd-pad-x); }
.rd-foot-cta { display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:end; padding:78px 0 62px; border-bottom:1px solid var(--line); }
.rd-foot-cta h2 { font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1.0; }
.rd-foot-manifesto { font-family:var(--rd-font-serif); font-style:italic; font-weight:500; font-size:19px; line-height:1.5; color:var(--ink-dim); margin-top:24px; max-width:540px; }
.rd-foot-manifesto .hl { color:var(--ink); font-style:normal; }
.rd-foot-actions { display:flex; flex-direction:column; align-items:flex-start; gap:13px; padding-bottom:6px; }
.rd-foot-btn-em { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:11px; padding:15px 26px; cursor:pointer; transition:transform .2s var(--rd-ease),box-shadow .2s var(--rd-ease); width:max-content; font-family:var(--rd-font-sans); }
.rd-foot-btn-ghost { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:11px; padding:15px 24px; cursor:pointer; transition:border-color .2s var(--rd-ease),color .2s var(--rd-ease); width:max-content; font-family:var(--rd-font-sans); }
.rd-foot-btn-ghost:hover { border-color:var(--accent-line); color:var(--accent); }

.rd-foot-grid { display:grid; grid-template-columns:1.5fr .8fr .8fr 1fr; gap:40px; padding:56px 0 50px; }
.rd-foot-logo { display:block; margin-bottom:18px; background:none; border:none; padding:0; cursor:pointer; color:var(--ink); }
@keyframes rd-flow { to { background-position:220% 0; } }
.rd-foot-brand p { font-size:13.5px; line-height:1.6; color:var(--ink-dim); max-width:300px; }
.rd-foot-seal { margin-top:22px; font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:9px; }
.rd-foot-seal .d { width:7px; height:7px; border-radius:50%; background:var(--aurora); flex-shrink:0; }
.rd-foot-col h4 { font-family:var(--rd-font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
.rd-foot-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.rd-foot-col a { font-size:14.5px; color:var(--ink-dim); width:max-content; text-decoration:none; cursor:pointer; transition:color .2s var(--rd-ease); }
.rd-foot-col a:hover { color:var(--ink); }
.rd-foot-col.social a { display:flex; align-items:center; gap:10px; }
.rd-foot-col.social .ext { font-family:var(--rd-font-mono); font-size:10px; color:var(--ink-faint); opacity:0; transition:opacity .2s var(--rd-ease); }
.rd-foot-col.social a:hover .ext { opacity:1; }

.rd-foot-legal { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 32px; border-top:1px solid var(--line); }
.rd-foot-legal .lt { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); }
.rd-foot-legal .lt a { color:var(--ink-dim); text-decoration:none; cursor:pointer; transition:color .2s var(--rd-ease); }
.rd-foot-legal .lt a:hover { color:var(--ink); }
.rd-foot-legal .lt .sep { opacity:.45; }
.rd-foot-mode { font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.rd-foot-mode .d { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-line); }

.rd-foot-mark { position:relative; padding:8px 0 0; line-height:.8; user-select:none; }
.rd-foot-mark .word { font-weight:800; letter-spacing:-.045em; font-size:clamp(64px,16.4vw,250px); white-space:nowrap; display:block; transform:translateY(14%); }
.rd-foot-mark .siuu { color:transparent; -webkit-text-stroke:1.4px var(--line-2); }
/* Aurora brand gradient — loops seamlessly (ends = starts) so no hard edge when bg-position animates */
.rd-foot-mark .magic { background:linear-gradient(90deg,var(--logo-g1),var(--logo-g2) 25%,var(--logo-g3) 55%,var(--logo-g4) 80%,var(--logo-g1)); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:rd-flow 9s linear infinite; }
.rd-foot-sweep { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.rd-foot-sweep::after { content:""; position:absolute; top:-20%; bottom:-20%; width:18%; left:-30%; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--ink) 24%,transparent),transparent); transform:skewX(-14deg); }
.rd-foot-mark.lit .rd-foot-sweep::after { animation:rd-sweep 1.5s var(--rd-ease) forwards; }
@keyframes rd-sweep { from{left:-30%} to{left:130%} }
@media (prefers-reduced-motion:reduce) {
  .rd-foot-logo .mg,.rd-foot-mark .magic { animation:none; }
  .rd-foot-mark.lit .rd-foot-sweep::after { display:none; }
}

/* ----- FAQ + Footer responsive ----- */
@media (max-width:920px) {
  .rd-faq-sec { grid-template-columns:1fr; gap:34px; padding-bottom:64px; }
  .rd-faq-aside { position:static; }
  .rd-faq-h { font-size:40px; }
  .rd-faq-lead { font-size:19px; max-width:none; }
  .rd-foot-cta { grid-template-columns:1fr; gap:30px; padding:56px 0 46px; }
  .rd-foot-cta h2 { font-size:38px; }
  .rd-foot-grid { grid-template-columns:1fr 1fr; gap:34px 24px; padding:44px 0 38px; }
  .rd-foot-brand { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .rd-faq-h { font-size:34px; }
  .rd-fq-q { font-size:19px; }
  .rd-fq-btn { gap:16px; padding:22px 2px; }
  .rd-fq-ans p { margin-left:30px; padding-right:16px; }
  .rd-foot-cta h2 { font-size:31px; }
  /* 2-col link groups so the footer fills the width instead of dumping left */
  .rd-foot-grid { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .rd-foot-legal { flex-direction:column; align-items:flex-start; gap:14px; }
  .rd-foot-btn-em,.rd-foot-btn-ghost { width:100%; justify-content:center; }
  .rd-foot-actions { align-self:stretch; }
}

@media (max-width:900px) {
  .lds-stage { height:auto; display:flex; flex-direction:column; }
  .lds-copy { position:static; order:1; width:100%; max-width:none; top:auto; left:auto; }
  .lds-scene { position:relative; order:2; width:100%; left:auto; right:auto; bottom:auto; margin-top:16px; }
  .lds-scene img { -webkit-mask-image:none; mask-image:none; border-radius:16px; }
  .lds-contact { display:none; }
  .lds-lead { font-size:20px; max-width:none; }
  .lds-legend { gap:16px 22px; flex-wrap:wrap; }
  .lds-ctas { flex-direction:column; }
  .lds-btn-em, .lds-btn-ghost { justify-content:center; padding:15px 16px; }
  .lds-below { grid-template-columns:1fr; gap:14px; margin-top:20px; }
  .lds-ba { min-height:320px; }
  .lds-cardrow { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin:0 calc(-1 * var(--rd-pad-x)); padding:2px var(--rd-pad-x) 8px; scrollbar-width:none; }
  .lds-cardrow::-webkit-scrollbar { display:none; }
  .lds-tcard { flex:0 0 78%; scroll-snap-align:start; }
  .lds-trust { flex-wrap:wrap; gap:16px 18px; }
  .lds-t { flex:1 1 42%; }
}
@media (max-width:480px) {
  .lds-tcard { flex-basis:86%; }
}

/* ============================================================
   SIUU BEAUTY WORKSPACE (bw-)
   ============================================================ */
.bw-screen { max-width:1320px; }
.bw-subbar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.bw-crumb { display:flex; align-items:center; gap:10px; font-family:var(--rd-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.bw-crumb-back { display:inline-flex; align-items:center; gap:7px; color:var(--ink-dim); background:none; border:0; font-family:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.bw-crumb-back:hover { color:var(--ink); }
.bw-sep { opacity:.5; }
.bw-here { color:var(--accent); }
.bw-rail { display:flex; gap:7px; flex-wrap:wrap; }
.bw-cap { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:12.5px; font-weight:600; color:var(--ink-dim); cursor:pointer; transition:all .2s var(--rd-ease); }
.bw-cap-ic { font-size:13px; }
.bw-cap:hover { border-color:var(--line-2); color:var(--ink); }
.bw-cap.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.bw-cap .bw-cdot { flex:0 0 7px; opacity:0; box-shadow:none; transition:opacity .16s var(--rd-ease), box-shadow .16s var(--rd-ease); }
.bw-cap .bw-cdot.on { opacity:1; box-shadow:0 0 0 3px var(--accent-soft); }

.bw-ws { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(372px,.92fr); gap:22px; align-items:start; }

.bw-canvas { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--inset); box-shadow:var(--rd-shadow); height:min(74vh,690px); }
.bw-grain { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%); opacity:.5; }
.bw-ph { position:absolute; inset:0; cursor:pointer; }
.bw-ph img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.bw-ph-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; text-align:center; padding:0 24px; transition: background .18s var(--rd-ease); }
.bw-ph.drag .bw-ph-empty { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bw-ph-plus { font-size:32px; line-height:1; color:var(--ink-dim); }
.bw-ph-empty-label { font-size:13px; color:var(--ink-faint); }
.bw-capchip { position:absolute; left:16px; top:14px; z-index:6; display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:color-mix(in srgb,var(--bg) 62%,transparent); backdrop-filter:blur(8px); border:1px solid var(--line-2); font-family:var(--rd-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.bw-cdot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.bw-reshoot { position:absolute; right:14px; top:13px; z-index:6; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; background:color-mix(in srgb,var(--bg) 62%,transparent); backdrop-filter:blur(8px); border:1px solid var(--line-2); font-size:11.5px; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .2s var(--rd-ease); }
.bw-reshoot:hover { border-color:var(--accent-line); color:var(--accent); }

.bw-loading { position:absolute; inset:0; z-index:8; display:none; background:color-mix(in srgb,var(--bg) 60%,transparent); backdrop-filter:blur(10px); }

.bw-result { position:absolute; inset:0; z-index:4; display:none; }
.bw-result img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.bw-after { clip-path:inset(0 0 0 var(--sx,50%)); transition:filter .45s var(--rd-ease); }
.bw-handle { position:absolute; top:0; bottom:0; left:var(--sx,50%); width:2px; transform:translateX(-50%); background:rgba(255,255,255,.9); box-shadow:0 0 12px rgba(0,0,0,.4); pointer-events:none; }
.bw-knob { position:absolute; top:50%; left:var(--sx,50%); transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; color:#1a1a22; font-size:15px; box-shadow:0 6px 20px rgba(0,0,0,.4); pointer-events:none; }
/* touch-action:none → drag doesn't fight page scroll on touch (fixes jank).
   imgs/handle are pointer-events:none so the pointer always hits .bw-ba. */
.bw-ba { position:relative; width:100%; height:100%; cursor:ew-resize; user-select:none; outline:none; touch-action:none; }
.bw-ba img { pointer-events:none; }
.bw-tg { position:absolute; top:16px; font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); z-index:2; pointer-events:none; }
.bw-tg.b { left:18px; } .bw-tg.a { right:18px; }

.bw-result-single { position:absolute; inset:0; z-index:4; display:none; }
.bw-result-single img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:filter .45s var(--rd-ease); }
.bw-slab { position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:color-mix(in srgb,var(--bg) 60%,transparent); backdrop-filter:blur(8px); border:1px solid var(--line-2); font-size:12px; font-weight:700; color:var(--ink); }
.bw-slab .bw-sw { width:13px; height:13px; border-radius:4px; }

[data-step="loading"] .bw-loading { display:flex; }
[data-step="result"][data-reveal="face"] .bw-result { display:block; }
[data-step="result"][data-reveal="single"] .bw-result-single { display:block; }
[data-step="result"] .bw-ph { visibility:hidden; }

.bw-panel { position:relative; border-radius:20px; border:1px solid var(--line); background:var(--card); box-shadow:var(--rd-shadow); padding:22px 22px 24px; }
.bw-eyebrow { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.bw-ptitle { font-size:25px; font-weight:800; letter-spacing:-.025em; line-height:1.08; margin-top:9px; }
.bw-psub { font-size:13px; line-height:1.55; color:var(--ink-dim); margin-top:9px; }

.bw-looks { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:18px; }
.bw-look { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--inset); text-align:left; padding:0; cursor:pointer; transition:border-color .2s var(--rd-ease),transform .2s var(--rd-ease); }
.bw-look:hover { transform:translateY(-3px); border-color:var(--line-2); }
.bw-lpic { position:relative; height:118px; overflow:hidden; }
.bw-lpic img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--rd-ease); }
.bw-look:hover .bw-lpic img { transform:scale(1.05); }
.bw-lbd { padding:10px 12px 12px; }
.bw-lbd b { font-size:14px; font-weight:700; letter-spacing:-.01em; display:block; }
.bw-lbd span { font-size:11px; color:var(--ink-dim); display:block; margin-top:2px; line-height:1.4; }
.bw-tick { position:absolute; top:9px; right:9px; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transform:scale(.6); transition:all .2s var(--rd-ease); z-index:2; }
.bw-look.sel { border-color:var(--accent); }
.bw-look.sel .bw-tick { opacity:1; transform:none; }

.bw-outcomes { display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.bw-oc { position:relative; display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:1px solid var(--line); background:var(--inset); border-radius:13px; padding:12px 14px; cursor:pointer; transition:all .18s var(--rd-ease); }
.bw-oc:hover { border-color:var(--line-2); transform:translateX(2px); }
.bw-oi { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--card-2); color:var(--accent); flex-shrink:0; }
[data-theme="light"] .bw-oi { background:#fff; }
.bw-ot { flex:1; }
.bw-ot b { font-size:13.5px; font-weight:700; display:block; }
.bw-ot span { font-size:11px; color:var(--ink-dim); display:block; margin-top:1px; }
.bw-ock { width:21px; height:21px; border-radius:50%; border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent; flex-shrink:0; }
.bw-oc.sel { border-color:var(--accent); background:var(--accent-soft); }
.bw-oc.sel .bw-ock { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.bw-oc.sel .bw-oi { color:var(--accent); }

.bw-reflead { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:18px; }
.bw-reflevel { display:flex; gap:8px; margin-top:9px; }
.bw-rl { flex:1; }
.bw-rim { height:66px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.bw-rim img { width:100%; height:100%; object-fit:cover; }
.bw-rl span { font-family:var(--rd-font-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-top:5px; text-align:center; }

.bw-intents { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.bw-it { position:relative; text-align:left; border:1px solid var(--line); background:var(--inset); border-radius:13px; padding:13px 14px; cursor:pointer; transition:all .18s var(--rd-ease); }
.bw-it:hover { border-color:var(--line-2); transform:translateY(-2px); }
.bw-it b { font-size:13px; font-weight:700; display:block; }
.bw-it span { font-size:10.5px; color:var(--ink-dim); display:block; margin-top:3px; line-height:1.4; }
.bw-it.sel { border-color:var(--accent); background:var(--accent-soft); }
.bw-it.sel b { color:var(--accent); }
.bw-ick { position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:10px; opacity:0; transform:scale(.5); transition:all .18s var(--rd-ease); }
.bw-it.sel .bw-ick { opacity:1; transform:none; }
.bw-intent-note { display:flex; gap:8px; align-items:flex-start; font-size:11px; line-height:1.5; color:var(--ink-faint); margin-top:14px; }
.bw-intent-note .bw-i { color:var(--accent); flex-shrink:0; }

.bw-tune { margin-top:20px; border-top:1px solid var(--line); padding-top:18px; }
.bw-tune-h { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bw-tune-t { font-size:13px; font-weight:700; }
.bw-reset { font-family:var(--rd-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); background:none; border:0; cursor:pointer; }
.bw-reset:hover { color:var(--accent); }
.bw-ctrl { margin-top:16px; }
.bw-ctrl > label { font-size:11.5px; font-weight:600; color:var(--ink-dim); display:block; margin-bottom:8px; letter-spacing:.01em; }
.bw-seg { display:flex; gap:5px; background:var(--inset); border:1px solid var(--line); border-radius:11px; padding:4px; box-shadow:var(--tog-well); }
.bw-seg button { flex:1; border:0; background:transparent; color:var(--ink-dim); font-size:12.5px; font-weight:600; padding:8px 4px; border-radius:8px; cursor:pointer; transition:all .18s var(--rd-ease); }
.bw-seg button.on { background:var(--tog-chip); color:var(--accent); box-shadow:var(--tog-pop); }
[data-theme="light"] .bw-seg button.on { background:var(--tog-chip); }
.bw-spectrum { padding:2px; }
.bw-spectrum input { width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:4px; background:linear-gradient(90deg,var(--aqua),var(--accent)); outline:none; }
.bw-spectrum input::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--card); border:2px solid var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.35); cursor:pointer; }
.bw-spectrum input::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--card); border:2px solid var(--accent); cursor:pointer; }
.bw-spec-lab { display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-faint); margin-top:7px; font-weight:500; }
.bw-chips { display:flex; flex-wrap:wrap; gap:7px; }
.bw-chip { border:1px solid var(--line-2); background:transparent; color:var(--ink-dim); font-size:12px; font-weight:600; padding:7px 13px; border-radius:999px; cursor:pointer; transition:all .18s var(--rd-ease); }
.bw-chip:hover { border-color:var(--accent-line); color:var(--ink); }
.bw-chip.on { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.bw-chip.on::before { content:"✓ "; }
.bw-surprise { display:inline-flex; align-items:center; gap:6px; margin-top:14px; }
.bw-look-strip { margin-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.bw-look-strip .bw-chip { white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }

.bw-gen { display:flex; width:100%; align-items:center; justify-content:center; gap:9px; margin-top:22px; font-weight:700; font-size:15px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:13px; padding:16px; cursor:pointer; transition:transform .2s var(--rd-ease),box-shadow .2s var(--rd-ease); }
.bw-gen[disabled] { opacity:.4; pointer-events:none; }

.bw-rhead .bw-applied { display:inline-flex; align-items:center; gap:9px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:700; margin-top:10px; }
.bw-rhead .bw-applied .bw-sw { width:14px; height:14px; border-radius:4px; }

.bw-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.bw-a { flex:1; min-width:120px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:13px 12px; font-size:13px; font-weight:700; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; transition:all .2s var(--rd-ease); }
.bw-a:hover { border-color:var(--accent-line); color:var(--accent); }
.bw-a.save { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.bw-a.save.done { background:var(--accent-soft); color:var(--accent); }
.bw-export-error {
  width:100%; margin-top:10px; font-size:12.5px; color:#a5453a;
  background: color-mix(in srgb, #a5453a 8%, transparent);
  border: 1px solid color-mix(in srgb, #a5453a 25%, transparent);
  border-radius: 9px; padding: 9px 12px; line-height: 1.45;
}

.bw-note { margin-top:16px; display:flex; gap:9px; align-items:flex-start; font-size:11.5px; line-height:1.5; color:var(--ink-faint); }
.bw-note .bw-i { flex-shrink:0; color:var(--accent); }

.bw-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:60; background:var(--card-2); border:1px solid var(--accent-line); color:var(--ink); border-radius:12px; padding:13px 20px; font-size:13px; font-weight:600; box-shadow:var(--rd-shadow); opacity:0; pointer-events:none; transition:all .3s var(--rd-ease); display:flex; align-items:center; gap:9px; }
.bw-tc { color:var(--accent); }
.bw-toast.show { opacity:1; transform:translate(-50%,0); }

.bw-sheet-handle { display:none; }

@media (max-width:880px) {
  .bw-rail { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .bw-rail::-webkit-scrollbar { display:none; }
  .bw-cap { flex-shrink:0; }
  .bw-ws { grid-template-columns:1fr; gap:14px; }
  .bw-canvas { height:min(56vh,440px); border-radius:18px; }
  /* portrait canvas crops sides — keep the face centred */
  .bw-ph img, .bw-result img, .bw-result-single img { object-position:50% 16%; }
  .bw-panel { border-radius:18px; padding:18px; }
  /* narrow cards (44%) so the row always overflows → reliable horizontal swipe */
  .bw-looks { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:44%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .bw-looks::-webkit-scrollbar { display:none; }
  .bw-look { scroll-snap-align:start; }
  .bw-lpic { height:104px; }
  .bw-ptitle { font-size:21px; }
  .bw-a { min-width:90px; font-size:12px; }
}

/* ===================================================
   STYLE CARD CREATE SCREEN  (prefix: sc-)
   Handoff v15  —  desktop 2-col + mobile single-col
   =================================================== */

.sc-wrap, .sc-mobile {
  --sc-card:      var(--card, #15132c);
  --sc-inset:     var(--inset, #100e22);
  --sc-line:      var(--line, rgba(180,170,225,.13));
  --sc-line2:     var(--line-2, rgba(180,170,225,.24));
  --sc-em:        var(--accent, #3ec695);
  --sc-em-soft:   var(--accent-soft, rgba(62,198,149,.13));
  --sc-em-line:   var(--accent-line, rgba(62,198,149,.36));
  --sc-em-ink:    var(--accent-ink, #06120c);
  --sc-ink:       var(--ink, #ece9f6);
  --sc-ink-dim:   var(--ink-dim, #9b94bc);
  --sc-ink-faint: var(--ink-faint, #6a638c);
  --sc-mono:      var(--rd-font-mono, "IBM Plex Mono", monospace);
  --sc-serif:     var(--rd-font-serif, "Playfair Display", serif);
}
.sc-wrap { max-width:min(1440px, calc(100vw - 96px)); margin:0 auto; padding:28px 40px 80px; }
.sc-head { padding-bottom:16px; border-bottom:1px solid var(--sc-line); margin-bottom:22px; }
.sc-back { background:none; border:0; cursor:pointer; font-family:var(--sc-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sc-ink-faint); }
.sc-back:hover { color:var(--sc-ink); }
.sc-eyebrow { font-family:var(--sc-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sc-ink-faint); display:flex; align-items:center; gap:12px; }
.sc-eyebrow-line { width:30px; height:1px; background:var(--sc-line2); }
.sc-eyebrow-em { color:var(--sc-em); }
.sc-h1 { font-size:clamp(30px,3.8vw,48px); font-weight:800; letter-spacing:-.035em; margin-top:10px; line-height:1.08; }
.sc-h1 em { font-family:var(--sc-serif); font-style:italic; font-weight:500; color:var(--sc-em); }
.sc-lede { color:var(--sc-ink-dim); font-size:14px; margin-top:11px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-lock { font-family:var(--sc-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sc-ink-faint); border:1px solid var(--sc-line); border-radius:999px; padding:5px 11px; }
.sc-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:32px; align-items:start; }
.sc-steps { display:flex; flex-direction:column; gap:24px; }
.sc-step { display:flex; flex-direction:column; }
.sc-step-h { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.sc-step-num { font-family:var(--rd-font-sans); font-weight:800; font-size:42px; line-height:.7; color:transparent; -webkit-text-stroke:1.3px var(--sc-line2); letter-spacing:-.02em; }
.sc-step-num.done { -webkit-text-stroke-color:var(--sc-em-line); color:var(--sc-em-soft); }
.sc-step-tt { font-size:16px; font-weight:800; letter-spacing:-.02em; }
.sc-step-hint { font-family:var(--sc-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sc-ink-faint); margin-left:auto; }
.sc-sec-label { font-family:var(--sc-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--sc-ink-faint); margin-bottom:10px; }
.sc-src { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.sc-src button { display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--sc-ink-dim); background:var(--sc-inset); border:1px solid var(--sc-line); border-radius:9px; padding:11px 6px; cursor:pointer; transition:all .18s cubic-bezier(.22,1,.36,1); font-family:inherit; }
.sc-src button:hover { color:var(--sc-ink); border-color:var(--sc-line2); }
.sc-src button.on { color:var(--sc-em); border-color:var(--sc-em-line); background:var(--sc-em-soft); }
.sc-src-icon { font-size:14px; }
.sc-zone { border:1.5px dashed rgba(180,170,225,.2); border-radius:12px; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:24px; cursor:pointer; transition:all .2s cubic-bezier(.22,1,.36,1); }
[data-theme="light"] .sc-zone { border-color:rgba(42,33,22,.22); }
.sc-zone:hover, .sc-zone.drag { border-color:var(--sc-em-line); background:var(--sc-em-soft); }
.sc-zone.drag { border-style:solid; }
.sc-zone-paste { cursor:text; }
.sc-zone-lib { border-style:solid; border-color:var(--sc-line); background:linear-gradient(180deg,var(--sc-em-soft),transparent); }
.sc-zi { font-size:28px; opacity:.4; }
.sc-zt { font-size:14px; font-weight:700; }
.sc-zs { font-size:11.5px; color:var(--sc-ink-faint); line-height:1.5; max-width:32ch; }
.sc-kbd { font-family:var(--sc-mono); font-size:11px; color:var(--sc-ink); background:var(--sc-inset); border:1px solid var(--sc-line2); border-radius:6px; padding:2px 7px; margin:0 2px; }
.sc-lib-btn { font-size:13px; font-weight:700; color:var(--sc-em-ink); background:var(--sc-em); border:0; border-radius:9px; padding:11px 18px; cursor:pointer; margin-top:4px; font-family:inherit; }
.sc-lib-btn:hover { opacity:.9; }
.sc-lib-peek { display:flex; gap:6px; margin-top:6px; }
.sc-lib-peek img { width:34px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--sc-line2); opacity:.85; }
.sc-filled { border:1px solid var(--sc-em-line); border-radius:12px; overflow:hidden; background:var(--sc-card); }
.sc-filled-img { position:relative; }
/* Full-width frame (flush both sides), taller than the old 220px band so
   portrait references breathe instead of being squeezed to a thin strip. */
.sc-filled-img img { width:100%; max-height:460px; object-fit:cover; display:block; }
.sc-badge { position:absolute; left:9px; top:9px; font-family:var(--sc-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sc-em); background:#fff9ee; border:1px solid var(--sc-em-line); border-radius:7px; padding:5px 9px; }
.sc-chg { position:absolute; right:9px; top:9px; font-family:var(--sc-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(8,6,18,.6); border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:5px 9px; cursor:pointer; backdrop-filter:blur(6px); }
.sc-filled-meta { padding:12px 14px; }
.sc-filled-name { font-size:14px; font-weight:700; }
.sc-chip { display:inline-block; font-size:11px; color:var(--sc-ink-dim); background:var(--sc-inset); border:1px solid var(--sc-line); border-radius:999px; padding:4px 10px; margin-top:8px; }
.sc-you { display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center; }
.sc-you-up { aspect-ratio:4/5; border:1.5px dashed rgba(180,170,225,.2); border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:all .2s cubic-bezier(.22,1,.36,1); overflow:hidden; position:relative; }
[data-theme="light"] .sc-you-up { border-color:rgba(42,33,22,.22); }
.sc-you-up:hover { border-color:var(--sc-em-line); background:var(--sc-em-soft); }
.sc-you-up.filled { border-style:solid; border-color:var(--sc-em-line); }
.sc-you-up.filled img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sc-you-icon { font-size:22px; opacity:.4; }
.sc-you-label { font-size:10.5px; color:var(--sc-ink-faint); text-align:center; padding:0 4px; line-height:1.3; }
.sc-you-chg { position:absolute; right:6px; top:6px; z-index:2; font-family:var(--sc-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(8,6,18,.6); border-radius:6px; padding:4px 7px; }
.sc-you-tip { font-size:12.5px; color:var(--sc-ink-dim); line-height:1.55; }
.sc-you-tip strong { color:var(--sc-ink); font-weight:600; }
.sc-step-adh { margin-top:4px; }
.sc-step-genopts { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.sc-seg { display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--sc-line2); border-radius:9px; overflow:hidden; }
.sc-seg button { border:0; border-right:1px solid var(--sc-line); background:transparent; color:var(--sc-ink-dim); font-size:12px; font-weight:600; padding:11px 4px; cursor:pointer; transition:all .18s; font-family:inherit; }
.sc-seg button:last-child { border-right:0; }
.sc-seg button:hover { color:var(--sc-ink); }
.sc-seg button.on { background:var(--sc-card); color:var(--sc-ink); }
.sc-seg-desc { font-family:var(--sc-serif); font-style:italic; font-size:13px; color:var(--sc-ink-faint); margin-top:9px; line-height:1.4; }
.sc-gen { width:100%; background:var(--sc-em); color:var(--sc-em-ink); border:0; border-radius:11px; padding:15px; font-size:14.5px; font-weight:800; cursor:pointer; transition:all .22s cubic-bezier(.22,1,.36,1); display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; }
.sc-gen:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 14px 36px -16px var(--sc-em-line); }
.sc-gen:disabled { opacity:.4; cursor:not-allowed; }
.sc-genhint { text-align:center; font-family:var(--sc-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sc-ink-faint); margin-top:10px; }
.sc-result { position:sticky; top:82px; }
.sc-res-h { font-family:var(--sc-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sc-ink-dim); margin-bottom:11px; display:flex; align-items:center; gap:10px; }
.sc-res-arrow { color:var(--sc-em); }
.sc-stage { position:relative; aspect-ratio:4/5; max-height:560px; border-radius:15px; overflow:hidden; border:1px solid var(--sc-line); background:var(--sc-inset); display:flex; align-items:center; justify-content:center; isolation:isolate; }
[data-theme="light"] .sc-stage { background:var(--sc-card); }
.sc-empty { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--sc-ink-faint); text-align:center; padding:28px; }
.sc-ei { font-family:var(--rd-font-sans); font-weight:800; font-size:60px; line-height:.7; color:transparent; -webkit-text-stroke:1.4px var(--sc-line2); letter-spacing:-.02em; }
.sc-et { font-family:var(--sc-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.sc-es { font-size:12.5px; max-width:28ch; line-height:1.5; }
.sc-scan { position:absolute; inset:0; overflow:hidden; }
.sc-scan-g { position:absolute; inset:0; background-image:linear-gradient(var(--sc-em-soft) 1px,transparent 1px),linear-gradient(90deg,var(--sc-em-soft) 1px,transparent 1px); background-size:30px 30px; opacity:.6; }
.sc-scan-ln { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--sc-em),transparent); box-shadow:0 0 16px 3px var(--sc-em-soft); animation:sc-scanmove 2s cubic-bezier(.6,0,.4,1) infinite; }
/* Start at 0% so the line is always inside the card — box-shadow never leaks above as ghost border */
@keyframes sc-scanmove { 0%{top:0%} 100%{top:100%} }
.sc-scan-steps { position:absolute; left:18px; bottom:16px; display:flex; flex-direction:column; gap:8px; }
.sc-scan-step { display:flex; align-items:center; gap:9px; font-family:var(--sc-mono); font-size:11px; color:var(--sc-ink-faint); transition:color .3s; }
.sc-scan-step.on { color:var(--sc-ink); }
.sc-scan-step.done { color:var(--sc-em); }
.sc-scan-d { width:16px; height:16px; border-radius:50%; border:1px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; }
.sc-scan-step.done .sc-scan-d { background:var(--sc-em); color:var(--sc-em-ink); border-color:var(--sc-em); }
.sc-rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:filter .35s cubic-bezier(.22,1,.36,1); }
.sc-cmp { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .15s; z-index:3; pointer-events:none; }
.sc-cmp.show { opacity:1; }
.sc-cardbadge { position:absolute; left:12px; top:12px; z-index:6; font-family:var(--sc-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold,#f0cd86); background:rgba(8,6,18,.5); border:1px solid rgba(240,205,134,.4); border-radius:999px; padding:5px 11px; backdrop-filter:blur(6px); }
.sc-cmp-tag { position:absolute; left:12px; bottom:12px; z-index:6; font-family:var(--sc-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(8,6,18,.6); border-radius:999px; padding:5px 10px; }
.sc-cmp-btn { position:absolute; right:12px; bottom:12px; z-index:6; font-weight:600; font-size:12px; color:#fff; background:rgba(8,6,18,.6); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 14px; cursor:pointer; backdrop-filter:blur(8px); display:inline-flex; gap:7px; align-items:center; user-select:none; font-family:inherit; }
.sc-actions { margin-top:14px; }
.sc-lut { margin-bottom:13px; }
.sc-lut-tabs { display:flex; gap:4px; border-bottom:1px solid var(--sc-line); margin-bottom:11px; overflow-x:auto; scrollbar-width:none; }
.sc-lut-tabs::-webkit-scrollbar { display:none; }
.sc-lut-tab { border:0; background:transparent; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--sc-ink-dim); padding:0 4px 10px; margin-right:14px; border-bottom:2px solid transparent; white-space:nowrap; font-family:inherit; transition:color .18s; }
.sc-lut-tab:hover { color:var(--sc-ink); }
.sc-lut-tab.on { color:var(--sc-ink); border-bottom-color:var(--sc-em); }
.sc-lut-strip { display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.sc-lut-strip::-webkit-scrollbar { display:none; }
.sc-lut-card { flex-shrink:0; width:64px; cursor:pointer; background:none; border:0; padding:0; }
.sc-lut-thumb { width:64px; height:80px; border-radius:8px; overflow:hidden; border:2px solid transparent; transition:border-color .2s; }
.sc-lut-card.on .sc-lut-thumb { border-color:var(--sc-em); }
.sc-lut-thumb img { width:100%; height:100%; object-fit:cover; }
.sc-lut-name { font-family:var(--sc-mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase; color:var(--sc-ink-faint); margin-top:5px; text-align:center; }
.sc-lut-card.on .sc-lut-name { color:var(--sc-em); }
.sc-btn-save { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--sc-em); color:var(--sc-em-ink); border:0; border-radius:10px; padding:14px; font-size:13.5px; font-weight:800; cursor:pointer; transition:all .22s cubic-bezier(.22,1,.36,1); font-family:inherit; }
.sc-btn-save:hover { transform:translateY(-1px); box-shadow:0 12px 32px -14px var(--sc-em-line); }
.sc-act-row { display:flex; gap:8px; margin-top:8px; }
.sc-btn-ghost { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:transparent; color:var(--sc-ink); border:1px solid var(--sc-line2); border-radius:10px; padding:12px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s cubic-bezier(.22,1,.36,1); font-family:inherit; }
.sc-btn-ghost:hover { background:var(--sc-em-soft); border-color:var(--sc-ink-dim); }
.sc-meta { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-family:var(--sc-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--sc-ink-faint); }
.sc-meta-em { color:var(--sc-em); }
.sc-sheet { position:fixed; inset:0; z-index:80; display:none; pointer-events:none; }
.sc-sheet.open { display:block; pointer-events:auto; }
.sc-scrim { position:absolute; inset:0; background:rgba(5,4,12,.66); backdrop-filter:blur(4px); animation:sc-fade .25s cubic-bezier(.22,1,.36,1); }
@keyframes sc-fade { from{opacity:0} to{opacity:1} }
.sc-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(960px,92vw); max-height:86vh; background:var(--bg,#0b0a18); border:1px solid var(--sc-line2); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 50px 120px -50px rgba(0,0,0,.9); animation:sc-pop .3s cubic-bezier(.22,1,.36,1); }
@keyframes sc-pop { from{opacity:0;transform:translate(-50%,-46%)} to{opacity:1;transform:translate(-50%,-50%)} }
.sc-sh-head { padding:20px 24px 16px; border-bottom:1px solid var(--sc-line); }
.sc-sh-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.sc-sh-h2 { font-size:22px; font-weight:800; letter-spacing:-.025em; margin-top:8px; }
.sc-sh-h2 em { font-family:var(--sc-serif); font-style:italic; font-weight:500; }
.sc-sh-x { width:34px; height:34px; border-radius:9px; border:1px solid var(--sc-line); background:transparent; color:var(--sc-ink-dim); font-size:14px; cursor:pointer; flex-shrink:0; font-family:inherit; }
.sc-sh-x:hover { color:var(--sc-ink); background:var(--sc-em-soft); }
.sc-sh-body { flex:1; overflow-y:auto; padding:18px 24px 24px; }
.sc-lgal { columns:4; gap:10px; }
.sc-lgc { break-inside:avoid; width:100%; display:block; position:relative; border-radius:10px; overflow:hidden; cursor:pointer; background:none; border:0; padding:0; margin-bottom:10px; }
.sc-lgc img { width:100%; display:block; border-radius:10px; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.sc-lgc:hover img { transform:scale(1.03); }
.sc-lgc-cap { position:absolute; inset:auto 0 0; background:linear-gradient(transparent,rgba(8,6,18,.8)); padding:24px 10px 10px; border-radius:0 0 10px 10px; }
.sc-lgc-title { font-size:12px; font-weight:700; color:#fff; }
.sc-lgc-pick { position:absolute; top:9px; right:9px; font-size:11px; font-weight:700; color:var(--sc-em-ink); background:var(--sc-em); border-radius:7px; padding:5px 9px; opacity:0; transition:opacity .2s; }
.sc-lgc:hover .sc-lgc-pick { opacity:1; }
.sc-mobile { display:flex; flex-direction:column; min-height:100%; }
.sc-mob-head { padding:16px 16px 14px; border-bottom:1px solid var(--sc-line); }
.sc-mob-head .sc-back { margin-bottom:10px; display:block; }
.sc-mob-head .sc-h1 { font-size:28px; margin-top:8px; }
.sc-mob-head .sc-lede { font-size:13px; }
.sc-mobile .sc-stage { aspect-ratio:4/5; max-height:55vw; border-radius:0; border-left:0; border-right:0; }
.sc-mob-actions { padding:14px 16px 0; }
.sc-mob-actions .sc-btn-save { margin-top:10px; }
.sc-mob-actions .sc-act-row { margin-top:6px; }
.sc-mobile .sc-step { padding:16px 16px 0; }
.sc-mobile .sc-step-adh { padding:16px; }
.sc-mobile .sc-step-genopts { padding:0 16px; }
.sc-mobile .sc-you { grid-template-columns:90px 1fr; gap:12px; }
.sc-genbar { position:fixed; bottom:0; left:0; right:0; z-index:30; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg,#0b0a18) 88%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--sc-line); }
.sc-genbar .sc-gen { margin-bottom:6px; }
.sc-panel-bottom { left:0; right:0; top:auto; bottom:0; transform:none; width:100%; max-height:80vh; border-radius:18px 18px 0 0; animation:sc-slidup .3s cubic-bezier(.22,1,.36,1); }
@keyframes sc-slidup { from{transform:translateY(100%)} to{transform:translateY(0)} }
.sc-grab { width:36px; height:4px; border-radius:99px; background:var(--sc-line2); margin:12px auto 0; }
.sc-mobile .sc-lgal { columns:2; }

/* ===== AUTH MODAL — reuses the .sc-sheet/.sc-scrim/.sc-panel shell,
   narrower + its own content classes ===== */
.auth-panel { width: min(420px, 92vw); max-height: none; }
.auth-x {
  position: absolute; top: 16px; right: 16px; z-index: 2;
}
.auth-body {
  padding: 40px 32px 32px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.auth-mark {
  width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  box-shadow: var(--btn-mat);
}
.auth-eyebrow {
  font-family: var(--rd-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
}
.auth-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-top: 10px; }
.auth-sub { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; margin-top: 8px; max-width: 32ch; }
.auth-google {
  margin-top: 26px; width: 100%; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--rd-font-sans); font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer;
  box-shadow: var(--btn-mat);
  transition: transform .2s var(--rd-ease), box-shadow .25s var(--rd-ease), filter .15s var(--rd-ease);
}
.auth-google:hover { filter: brightness(1.04); }
.auth-google:active { transform: translateY(1px); box-shadow: var(--btn-mat-press-soft); filter: brightness(.98); }
.auth-legal { font-size: 11px; color: var(--ink-faint); line-height: 1.6; margin-top: 20px; max-width: 34ch; }
.auth-legal a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--accent); }
@media (max-width: 820px) {
  .auth-panel.sc-panel-bottom { width: 100%; }
  .auth-body { padding: 8px 24px 32px; }
}

/* ===== CREATE LIBRARY SHEET — remove header/filter gap ===== */
.sc-sh-body { padding: 0 24px 24px; }
.gl-embedded { margin: 0; }
.gl-embedded .gl-sticky-bar {
  margin-left: -24px;
  margin-right: -24px;
  padding: 12px 24px 8px;
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== TRY-ON / WARDROBE — editorial dual-state look cards ===== */
.to-flow-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--rd-font-mono); font-size: 8.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: -5px;
}
.to-flow-note i { color: var(--accent); font-style: normal; }
.to-flow-cta { color: var(--accent); }
.to-slot.filled { border-color: var(--line-2); }
.to-slot-empty small {
  font-family: var(--rd-font-sans); font-size: 9px; letter-spacing: 0;
  text-transform: none; color: var(--ink-faint); margin-top: 2px;
}
.to-slot-name {
  position: absolute; left: 7px; right: 34px; bottom: 7px;
  color: #fff; font-size: 10px; font-weight: 700;
  background: linear-gradient(90deg, rgba(8,6,18,.72), rgba(8,6,18,.18));
  border-radius: 6px; padding: 5px 7px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.to-missing {
  margin-top: -8px; text-align: center; color: var(--ink-faint);
  font-size: 11px;
}
.to-ward { scroll-margin-top: 20px; }
.to-ward-kicker {
  font-family: var(--rd-font-mono); color: var(--accent); font-size: 8.5px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
.to-rack { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.to-outfit { min-width: 0; }
.to-outfit-img { aspect-ratio: 4/5; }
.to-outfit-index {
  position: absolute; left: 9px; top: 9px; z-index: 3;
  font-family: var(--rd-font-mono); font-size: 8px; letter-spacing: .12em;
  color: rgba(255,255,255,.78); background: rgba(8,6,18,.44);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 4px 7px; backdrop-filter: blur(7px);
}
.to-outfit-overlay {
  position: absolute; inset: auto 0 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 34px 10px 10px;
  background: linear-gradient(transparent, rgba(8,6,18,.82));
  opacity: 0; transform: translateY(4px); transition: .24s var(--rd-ease);
}
.to-outfit:hover .to-outfit-overlay,
.to-outfit:focus-within .to-outfit-overlay { opacity: 1; transform: translateY(0); }
.to-outfit-overlay span {
  color: rgba(255,255,255,.76); font-size: 10px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.to-outfit-overlay button {
  border: 0; border-radius: 7px; padding: 7px 9px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  font-family: var(--rd-font-sans); font-size: 10px; white-space: nowrap;
}
.to-outfit-info { align-items: center; }
.to-outfit-info > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.to-outfit-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-outfit-info small { font-family: var(--rd-font-mono); color: var(--ink-faint); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-outfit-pick {
  flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-dim); padding: 6px 10px;
  font-family: var(--rd-font-sans); font-size: 10.5px; font-weight: 700;
  cursor: pointer; transition: .18s var(--rd-ease);
}
.to-outfit-pick:hover { color: var(--accent); border-color: var(--accent-line); }
.to-outfit-pick.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* Shared try-on sheets */
.to-sheet { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.to-sheet-scrim { position: absolute; inset: 0; border: 0; background: rgba(5,4,12,.68); backdrop-filter: blur(8px); cursor: default; }
.to-look-panel,
.to-scene-panel {
  position: relative; z-index: 1; width: min(980px, 94vw); max-height: 88vh;
  overflow: auto; scrollbar-gutter: stable; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 18px; box-shadow: 0 50px 120px -45px rgba(0,0,0,.92);
  animation: rdPopIn .25s var(--rd-ease);
}
.to-look-panel { display: grid; grid-template-columns: minmax(300px, .92fr) 1.08fr; overflow: hidden; }
.to-sheet-close {
  position: absolute; right: 14px; top: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  color: var(--ink-dim); background: color-mix(in srgb, var(--card) 76%, transparent);
  backdrop-filter: blur(10px); cursor: pointer; font-family: inherit;
}
.to-sheet-close.static { position: static; flex-shrink: 0; }
.to-look-preview { min-height: 590px; position: relative; background: var(--inset); }
.to-look-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.to-look-preview::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8,6,18,.72)); }
.to-look-preview-cap { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.to-look-preview-cap span { font-family: var(--rd-font-mono); font-size: 8px; letter-spacing: .16em; opacity: .62; }
.to-look-preview-cap b { font-size: 17px; }
.to-look-info { padding: 38px 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.to-look-ey { font-family: var(--rd-font-mono); color: var(--accent); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.to-look-info h2,
.to-scene-head h2 { color: var(--ink); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; margin: 0; }
.to-look-info > p,
.to-scene-head p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.62; margin: 0; }
.to-look-block { display: flex; flex-direction: column; gap: 9px; }
.to-look-label { font-family: var(--rd-font-mono); color: var(--ink-faint); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; }
.to-look-swatches { display: flex; gap: 8px; }
.to-look-swatches i { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 14%, transparent); }
.to-look-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.to-look-piece {
  min-height: 58px; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; background: var(--inset); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink);
}
.to-look-piece span { font-family: var(--rd-font-mono); color: var(--accent); font-size: 8px; }
.to-look-piece b { font-size: 12px; font-weight: 600; }
.to-look-piece.accessory { background: color-mix(in srgb, var(--accent-soft) 34%, var(--inset)); }
.to-look-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; }

/* Background library */
.to-scene-panel { padding: 28px; }
.to-scene-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.to-scene-head > div { display: flex; flex-direction: column; gap: 8px; }
.to-scene-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 18px; }
.to-scene-modes > button {
  min-height: 96px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; text-align: left; padding: 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--inset); color: var(--ink);
  cursor: pointer; font-family: var(--rd-font-sans); transition: .18s var(--rd-ease);
}
.to-scene-modes > button:hover { border-color: var(--line-2); }
.to-scene-modes > button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.to-scene-modes > button:disabled { opacity: .45; cursor: not-allowed; }
.to-scene-modes > button:disabled:hover { border-color: var(--line); }
.to-scene-modes span { grid-row: 1/3; font-family: var(--rd-font-mono); color: var(--accent); font-size: 9px; }
.to-scene-modes b { font-size: 13px; }
.to-scene-modes small { color: var(--ink-faint); font-size: 10.5px; }
.to-scene-grid { columns: 3; column-gap: 10px; }
/* Stagger fade-in when sheet opens — nth-child delays via CSS custom prop trick */
.to-scene-grid > button {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 11px; border: 1px solid var(--line); background: var(--inset);
  padding: 0; cursor: pointer; text-align: left; font-family: var(--rd-font-sans);
  transition: .2s var(--rd-ease); break-inside: avoid; width: 100%; margin-bottom: 10px;
  animation: toSceneFadeIn .38s var(--rd-ease) backwards;
}
@keyframes toSceneFadeIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.to-scene-grid > button:nth-child(1)  { animation-delay: .02s; }
.to-scene-grid > button:nth-child(2)  { animation-delay: .06s; }
.to-scene-grid > button:nth-child(3)  { animation-delay: .10s; }
.to-scene-grid > button:nth-child(4)  { animation-delay: .14s; }
.to-scene-grid > button:nth-child(5)  { animation-delay: .18s; }
.to-scene-grid > button:nth-child(6)  { animation-delay: .22s; }
.to-scene-grid > button:nth-child(7)  { animation-delay: .26s; }
.to-scene-grid > button:nth-child(8)  { animation-delay: .30s; }
.to-scene-grid > button:nth-child(9)  { animation-delay: .34s; }
.to-scene-grid > button:nth-child(10) { animation-delay: .38s; }
.to-scene-grid > button:hover { box-shadow: 0 0 0 2px var(--accent-line), 0 4px 16px rgba(0,0,0,.18); border-color: var(--accent-line); }
.to-scene-grid > button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.to-scene-grid img { width: 100%; height: auto; display: block; }
.to-scene-grid span { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 2px; }
.to-scene-grid b { color: var(--ink); font-size: 12px; }
.to-scene-grid small { color: var(--ink-faint); font-size: 10px; }
.to-scene-grid i {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: none; place-items: center; font-size: 10px; font-style: normal;
}
.to-scene-grid > button.on i { display: grid; }

@media (max-width: 1000px) {
  .to-rack { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .to-look-panel { grid-template-columns: 1fr 1fr; }
  .to-look-preview { min-height: 520px; }
}
@media (max-width: 720px) {
  .sc-sh-body { padding-left: 16px; padding-right: 16px; }
  .gl-embedded .gl-sticky-bar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .to-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .to-outfit-overlay { opacity: 1; transform: none; padding-top: 38px; }
  .to-outfit-overlay span { display: none; }
  .to-outfit-overlay button { margin-left: auto; }
  /* sticky genbar: float try button + cost note to bottom on mobile */
  .to-try-btn, .to-cost, .to-missing {
    position: sticky; bottom: 0; z-index: 8;
    background: var(--bg); box-shadow: 0 -1px 0 var(--line);
    margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
  }
  .to-try-btn { padding-top: 14px; padding-bottom: 14px; border-radius: 0; }
  .to-cost, .to-missing { box-shadow: none; padding-bottom: 12px; margin-top: -4px; }
  .to-sheet { padding: 0; align-items: end; }
  .to-look-panel,
  .to-scene-panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .to-look-panel { display: block; overflow: auto; }
  .to-look-preview { min-height: 46vh; }
  .to-look-info { padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
  .to-look-pieces { grid-template-columns: 1fr; }
  .to-look-actions { position: sticky; bottom: 0; background: var(--card); padding-top: 10px; }
  .to-scene-panel { padding: 24px 16px calc(22px + env(safe-area-inset-bottom)); }
  .to-scene-modes { grid-template-columns: 1fr; }
  .to-scene-grid { columns: 2; }
}

/* ===== SPLIT EDITORIAL PREVIEW (Option C) — full-bleed hero + frosted rail ===== */
.to-preview-col { display: flex; flex-direction: column; gap: 0; }

/* Dark-theme tokens (default) */
.to-editorial {
  --to-rail-glass: rgba(20,24,42,.62);
  --to-over: rgba(8,9,18,.62);
  --to-gold-soft: rgba(227,191,120,.12);
  --to-seam: var(--accent-line);
}
/* Light-theme overrides */
.rd-app[data-theme="arctic"] .to-editorial,
.rd-app[data-theme="sunset"] .to-editorial {
  --to-rail-glass: rgba(228,216,193,.78);
  --to-over: rgba(20,14,6,.42);
  --to-gold-soft: rgba(156,120,51,.12);
  --to-seam: rgba(177,92,52,.34);
}

/* Card container */
.to-editorial {
  position: relative;
  border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden;
  background: var(--card); aspect-ratio: 16/14;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.55); isolation: isolate;
}

/* Hero — full-bleed background image covering entire card */
.to-hero { position: absolute; inset: 0; }
.to-hero-img {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  transition: opacity .22s var(--rd-ease), background-position .4s var(--rd-ease);
  animation: toKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
/* Slow drift + zoom — keeps min scale ~1 so cover never reveals a gap */
@keyframes toKenBurns {
  from { transform: scale(1.001) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.2%, -1.4%); }
}
.to-hero-floor {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--to-over), transparent 42%);
  pointer-events: none;
}

/* Caption — bottom-left over the hero */
.to-ed-cap {
  position: absolute; z-index: 4; left: 26px; bottom: 24px;
  max-width: 54%; display: flex; flex-direction: column;
  pointer-events: none;
}
.to-ed-cap-ey {
  font-family: var(--rd-font-mono); font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.74);
}
.to-ed-cap-nm {
  font-family: var(--rd-font-serif); font-weight: 600; font-size: 34px;
  line-height: 1.02; color: #fff; margin-top: 5px; letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.4); display: block;
}
.to-ed-cap-ds {
  font-size: 12.5px; color: rgba(255,255,255,.8);
  margin-top: 6px; line-height: 1.45; max-width: 300px;
}

/* Rail — frosted glass right 30%, fold via clip-path ON THE RAIL */
.to-ed-rail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 30%; z-index: 3;
  background: var(--to-rail-glass);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 3% 100%);
  display: flex; flex-direction: column; padding: 18px 16px 20px 26px; gap: 14px;
}
/* Shadow wedge that deepens the fold */
.to-ed-rail::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 64%;
  background: linear-gradient(115deg, transparent, rgba(0,0,0,.14));
  clip-path: polygon(13% 0, 30% 0, 20% 100%, 3% 100%); pointer-events: none;
}
/* Terracotta/gold hairline seam along the fold */
.to-ed-rail::after {
  content: ''; position: absolute; top: -6%; bottom: -6%; left: 3%; width: 1.5px;
  background: linear-gradient(to bottom,
    transparent, var(--to-gold-soft) 18%, var(--to-seam) 50%,
    var(--to-gold-soft) 82%, transparent);
  transform: rotate(3.1deg); transform-origin: top; opacity: .9; pointer-events: none;
}

/* "Chi tiết trang phục ↗" pill CTA — top-right of rail */
.to-ed-cta {
  align-self: stretch; justify-content: center;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--rd-font-sans); font-weight: 600; font-size: 11.5px; color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 11px 14px; cursor: pointer; white-space: nowrap;
  transition: all .2s var(--rd-ease);
  position: relative; z-index: 1;
}
.to-ed-cta-arr { color: var(--accent); transition: transform .2s var(--rd-ease); }
.to-ed-cta:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.to-ed-cta:hover .to-ed-cta-arr { transform: translate(2px, -2px); }

/* "CHI TIẾT" section label with trailing hairline */
.to-ed-lbl {
  font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
}
.to-ed-lbl::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Detail windows — two different sizes */
.to-ed-wins { display: flex; flex-direction: column; gap: 13px; flex: 1; min-height: 0; position: relative; z-index: 1; }
.to-win {
  position: relative; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--line); background: var(--inset);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  animation: toWinReveal .52s var(--rd-ease) backwards;
}
/* Stagger replays on outfit swap via key={chosen.id} remount of .to-ed-wins */
.to-win-1 { flex: 1.35; animation-delay: .04s; }
.to-win-2 { flex: 1; animation-delay: .13s; }
@keyframes toWinReveal { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.to-win-crop {
  position: absolute; inset: 0; background-repeat: no-repeat;
  transition: opacity .22s, background-position .4s var(--rd-ease);
}
.to-win-l {
  position: absolute; left: 9px; bottom: 8px; right: 9px; z-index: 2;
  font-family: var(--rd-font-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.to-win-l::before {
  content: ''; position: absolute; inset: -9px -9px -8px -9px; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.to-win-n {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rd-font-mono); font-size: 8.5px; color: var(--ink);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border: 1px solid var(--line-2);
}

/* Loading — dim while switching looks */
.to-editorial.loading .to-hero-img,
.to-editorial.loading .to-win-crop { opacity: .4; }

/* Respect reduced-motion — kill all TryOn ambient animations */
@media (prefers-reduced-motion: reduce) {
  .to-hero-img { animation: none; transform: none; }
  .to-win, .to-scene-grid > button, .to-slot-thumb img { animation: none; }
  .to-try-btn.ready { animation: none; }
}

/* Responsive — mobile gets its own layout */
@media (max-width: 980px) {
  .to-preview-col { order: -1; }
  .to-editorial { aspect-ratio: auto; }
  .to-hero { position: relative; aspect-ratio: 4/5; }
  .to-hero-img, .to-hero-floor { position: absolute; }
  .to-ed-cap { max-width: 72%; left: 18px; bottom: 16px; }
  .to-ed-cap-nm { font-size: 26px; }
  /* Rail becomes a horizontal strip under the hero */
  .to-ed-rail {
    position: relative; width: auto; clip-path: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--card); border-top: 1px solid var(--line);
    flex-direction: column; padding: 14px 16px 16px; gap: 11px;
  }
  .to-ed-rail::before, .to-ed-rail::after { display: none; }
  .to-ed-cta { align-self: stretch; justify-content: center; font-size: 13px; padding: 11px; }
  .to-ed-wins { flex-direction: row; }
  .to-win-1, .to-win-2 { flex: 1; aspect-ratio: 1/1; }
}
@media (max-width: 720px) {
  .to-ed-cap-nm { font-size: 22px; }
  .to-ed-cap-ds { display: none; }
}

/* ===== LOOK BREAKDOWN — warm stone plate ===== */
.to-look-plate {
  position: relative;
  background: #E8DFD2;   /* warm stone — same light/dark, intent: plate stays warm */
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px; min-height: 590px; overflow: hidden;
}
/* subtle inner vignette so PNG floats naturally */
.to-look-plate::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, transparent 60%, rgba(140,120,100,.18) 100%);
}
.to-look-ghost {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  position: relative; z-index: 1;
  /* preserve alpha — browser renders PNG transparency over plate */
}
/* dark mode: warm taupe instead of cold navy */
.rd-app[data-theme="aurora"] .to-look-plate,
.rd-app[data-theme="dark"] .to-look-plate { background: #CEC4BA; }

/* reuse .to-look-preview-cap on the plate */
.to-look-plate .to-look-preview-cap { z-index: 2; }

@media (max-width: 720px) {
  .to-look-plate { min-height: 46vh; padding: 20px 16px; }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  MONUMENT collection card + sheet + lightbox                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Collection card — clean full-bleed, no fan-stack at rest ─────────── */
.mon-card-wrap { display: flex; flex-direction: column; gap: 8px; }

.mon-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  /* Very subtle double-ring: hints "collection" without visual noise */
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 0 4px var(--bg),
    0 0 0 5.5px color-mix(in srgb, var(--accent-line) 35%, transparent);
}
.mon-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Hero: full-bleed image */
.mon-hero { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }

/* Cross-fade frames */
.mon-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.022);
  filter: saturate(.96) contrast(.985);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.22,1,.36,1),
    filter 1.15s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.mon-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.002);
  transition: transform 1.15s cubic-bezier(.22,1,.36,1);
}
.mon-frame.on {
  opacity: 1;
  transform: scale(1);
  filter: none;
  z-index: 1;
}
.mon-frame.on img { transform: scale(1.012); }
.mon-frame.entry-base {
  z-index: 0;
  pointer-events: none;
}
.mon-frame.swap-in {
  z-index: 2;
  animation: monFrameSwapIn .82s cubic-bezier(.22,1,.36,1) both;
}
.mon-frame.swap-out {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  filter: none;
  animation: monFrameSwapOut .82s cubic-bezier(.22,1,.36,1) both;
}
/* Opacity-led dissolve. The container morph already owns all geometric motion,
   so the swap keeps scale near-flat (1.008) to avoid a competing zoom that read
   as a "fake resize" while the block was still morphing. */
@keyframes monFrameSwapIn {
  from {
    opacity: 0;
    transform: scale(1.008);
    filter: saturate(.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
@keyframes monFrameSwapOut {
  from {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  to {
    opacity: 0;
    transform: scale(1.004);
    filter: saturate(.95);
  }
}

/* 3 dots: bottom-center, hidden at rest → fade in on hover */
.mon-card-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s cubic-bezier(.22,1,.36,1);
}
.mon-card-dots.on { opacity: 1; }
.mon-card-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  display: inline-block;
  font-style: normal;
  transition: background .3s, transform .3s;
}
.mon-card-dots i.on { background: #fff; transform: scale(1.3); }

/* Caption below card */
.mon-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 2px;
  white-space: nowrap;
}
.mon-cap-sep { opacity: .35; }
.mon-cap-cat { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  .mon-frame, .mon-frame img, .mon-card-dots, .mon-card-dots i { transition: none; animation: none; }
}

/* ── Side / bottom sheet ──────────────────────────────────────────────── */
.mon-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.25,1,.5,1);
  z-index: 60;
}
.mon-scrim.open { opacity: 1; pointer-events: auto; }

.mon-sheet {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  max-width: 760px;
  min-width: 560px;
  background: var(--bg);
  border-left: 1px solid var(--line);
  /* Shadow hidden at rest so it doesn't bleed into viewport edge */
  box-shadow: none;
  transform: translateX(110%);
  transition: transform .64s cubic-bezier(.2,1,.4,1), box-shadow .64s cubic-bezier(.2,1,.4,1);
  z-index: 61;
  display: flex;
  flex-direction: column;
}
.mon-sheet.open {
  transform: translateX(0);
  box-shadow: -40px 0 80px -40px rgba(0,0,0,.7);
}

.mon-sheet-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Sheet header block */
.mon-sheet-hero {
  position: relative;
  padding: 30px 38px 24px;
  border-bottom: 1px solid var(--line);
}
.mon-close {
  position: absolute;
  top: 22px;
  right: 30px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .25s cubic-bezier(.22,1,.36,1);
}
.mon-close:hover { color: var(--ink); border-color: var(--accent-line); transform: rotate(90deg); }

.mon-sheet-ey {
  font-family: var(--rd-font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0;
}
.mon-sheet-ey .ct { color: var(--ink-faint); }
.mon-sheet-name {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 12px;
  color: var(--ink);
}
.mon-sheet-tag {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink-dim);
  margin-top: 10px;
  line-height: 1.3;
}
.mon-sheet-desc {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-dim);
  margin-top: 16px;
}
.mon-sheet-desc b { color: var(--ink); font-weight: 600; }

/* Gallery */
.mon-sheet-body { padding: 26px 38px 40px; }
.mon-body-lbl {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mon-body-lbl::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mon-body-lbl b { color: var(--ink-dim); font-weight: 600; }

/* Two columns, natural ratios for top images, last image stretches to equalize column heights */
.mon-gallery { display: flex; gap: 14px; /* align-items: stretch (default) — forces equal column heights */ }
.mon-gal-col { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.mon-gcell {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.mon-gcell img { width: 100%; height: auto; display: block; }
/* Last cell in each column stretches to equalize column bottoms (6-slot galleries) */
.mon-gal-col .mon-gcell:last-child { flex: 1; min-height: 0; }
.mon-gal-col .mon-gcell:last-child img { height: 100%; object-fit: cover; }
/* 5-slot galleries: natural ratios, no forced stretch */
.mon-gallery--5 .mon-gal-col .mon-gcell:last-child { flex: unset; min-height: unset; }
.mon-gallery--5 .mon-gal-col .mon-gcell:last-child img { height: auto; object-fit: unset; }
.mon-gcell:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mon-gcell-zoom {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(20,14,8,.44);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.mon-gcell:hover .mon-gcell-zoom { opacity: 1; }

/* Sticky CTA */
.mon-sheet-cta {
  flex-shrink: 0;
  padding: 16px 38px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.mon-cta-note {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}
.mon-cta-note b { color: var(--ink); font-weight: 600; }
.mon-btn-use {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  color: var(--em-ink);
  background: var(--em);
  border: 0;
  border-radius: 12px;
  padding: 13px 24px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1);
}
.mon-btn-use:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -14px var(--em-line); }

/* Mobile sheet */
@media (max-width: 760px) {
  .mon-sheet {
    width: 100%;
    min-width: 0;
    max-width: none;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 94%;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    transform: translateY(105%);
  }
  .mon-sheet::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
    margin: 12px auto 0;
  }
  .mon-sheet.open { transform: translateY(0); }
  .mon-sheet-hero { padding: 24px 22px 20px; }
  .mon-close { top: 18px; right: 18px; }
  .mon-sheet-name { font-size: 36px; }
  .mon-sheet-tag { font-size: 18px; }
  .mon-sheet-body { padding: 20px 22px 30px; }
  .mon-sheet-cta { padding: 14px 22px; }
  .mon-cta-note { display: none; }
  .mon-btn-use { width: 100%; justify-content: center; }
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.mon-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6,5,12,.86);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.22,1,.36,1);
}
.mon-lb.open { opacity: 1; pointer-events: auto; }

.mon-lb-stage {
  position: relative;
  /* No forced aspect-ratio — image determines shape */
  max-width: min(500px, 88vw);
  max-height: 88vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 50px 110px -40px #000;
  transform: scale(.94);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.mon-lb.open .mon-lb-stage { transform: scale(1); }
.mon-lb-stage img {
  width: auto;
  height: auto;
  max-width: min(500px, 88vw);
  max-height: 88vh;
  display: block;
}

.mon-lb-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  text-align: center;
  font-family: var(--rd-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.mon-lb-close {
  position: absolute;
  top: max(20px, 3vh);
  right: max(20px, 4vw);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  z-index: 82;
}
.mon-lb-close:hover { background: rgba(255,255,255,.22); }

.mon-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  z-index: 82;
}
.mon-lb-nav:hover { background: rgba(255,255,255,.22); }
.mon-lb-prev { left: max(16px, 3vw); }
.mon-lb-next { right: max(16px, 3vw); }

/* ── Unified primary-CTA material effect (Jun 30, revised Jul 18) ────────────
   Every accent-filled action button shares ONE shadow/press language, matching
   .rd-btn-primary / .sl-gen-btn / .px-tbtn.em / .dbldr-generate. Shape (radius,
   padding, size) stays per-button — only the EFFECT is centralized here. Placed
   at EOF so it wins by source order; :not(:disabled) keeps hover/active specific.
   Hover is a plain brightness tick — no lift, no shadow-grow (site-wide
   decision, Jul 18). Press stays the material "lõm" dent: translateY + the
   embossed --btn-mat-press inset shadow, same on every button here.
   Scope: 21 main CTAs, including .sc-gen / .sc-btn-save (Create tab) to match
   the Seller tab's embossed look — both used to have their own lighter,
   no-dent :active override that made them brighten instead of press; removed
   so they match everyone else. .dref-cta had the same stray override, also
   removed. Small inline utility buttons (gl-use-btn / gl-pick-use / sc-lib-btn)
   intentionally keep their own lighter shape (no border/resting shadow) but
   now share the same hover/press language below. */
.sl-btn-em, .pf-topup-btn, .to-btn-em, .dref-cta, .dbldr-gen-btn,
.dbldr-btn-em, .dbldr-regen, .stup-btn-em, .stho-btn-em, .stph-finish,
.stps-btn-em, .m-btn-em, .m-foot-btn-em, .bhs-btn-em, .lds-btn-em,
.rd-foot-btn-em, .bw-gen, .to-try-btn, .bw-a.save, .sc-gen, .sc-btn-save {
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #000);
  box-shadow: var(--btn-mat);
  transition: transform .2s var(--rd-ease), box-shadow .25s var(--rd-ease), filter .15s var(--rd-ease);
}
.sl-btn-em:hover:not(:disabled), .pf-topup-btn:hover:not(:disabled),
.to-btn-em:hover:not(:disabled), .dref-cta:hover:not(:disabled),
.dbldr-gen-btn:hover:not(:disabled), .dbldr-btn-em:hover:not(:disabled),
.dbldr-regen:hover:not(:disabled), .stup-btn-em:hover:not(:disabled),
.stho-btn-em:hover:not(:disabled), .stph-finish:hover:not(:disabled),
.stps-btn-em:hover:not(:disabled), .m-btn-em:hover:not(:disabled),
.m-foot-btn-em:hover:not(:disabled), .bhs-btn-em:hover:not(:disabled),
.lds-btn-em:hover:not(:disabled), .rd-foot-btn-em:hover:not(:disabled),
.bw-gen:hover:not(:disabled), .to-try-btn:hover:not(:disabled),
.bw-a.save:hover:not(:disabled), .sc-gen:hover:not(:disabled), .sc-btn-save:hover:not(:disabled) {
  filter: brightness(1.04);
}
.sl-btn-em:active:not(:disabled), .pf-topup-btn:active:not(:disabled),
.to-btn-em:active:not(:disabled), .dref-cta:active:not(:disabled),
.dbldr-gen-btn:active:not(:disabled), .dbldr-btn-em:active:not(:disabled),
.dbldr-regen:active:not(:disabled), .stup-btn-em:active:not(:disabled),
.stho-btn-em:active:not(:disabled), .stph-finish:active:not(:disabled),
.stps-btn-em:active:not(:disabled), .m-btn-em:active:not(:disabled),
.m-foot-btn-em:active:not(:disabled), .bhs-btn-em:active:not(:disabled),
.lds-btn-em:active:not(:disabled), .rd-foot-btn-em:active:not(:disabled),
.bw-gen:active:not(:disabled), .to-try-btn:active:not(:disabled),
.bw-a.save:active:not(:disabled), .sc-gen:active:not(:disabled), .sc-btn-save:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--btn-mat-press);
  filter: brightness(.98);
}
.sl-btn-em:disabled, .pf-topup-btn:disabled, .to-btn-em:disabled,
.dref-cta:disabled, .dbldr-gen-btn:disabled, .dbldr-btn-em:disabled,
.dbldr-regen:disabled, .stup-btn-em:disabled, .stho-btn-em:disabled,
.stph-finish:disabled, .stps-btn-em:disabled, .m-btn-em:disabled,
.m-foot-btn-em:disabled, .bhs-btn-em:disabled, .lds-btn-em:disabled,
.rd-foot-btn-em:disabled, .bw-gen:disabled, .to-try-btn:disabled, .bw-a.save:disabled,
.sc-gen:disabled, .sc-btn-save:disabled {
  box-shadow: none;
  transform: none;
}
/* Home CTA color consistency — match "Bắt đầu biến hình" instead of the darker
   aura press treatment. Keep the same raised material language. */
.rd-hero-ctas .rd-btn-primary.rd-btn-aura,
.dsg-home-ctas .rd-btn-primary.rd-btn-aura,
.rd-sc-hint {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #000);
  box-shadow: var(--btn-mat);
  filter: none;
}
.rd-hero-ctas .rd-btn-primary.rd-btn-aura:hover:not(:disabled),
.dsg-home-ctas .rd-btn-primary.rd-btn-aura:hover:not(:disabled),
.rd-sc-plate:hover .rd-sc-hint {
  background: var(--accent);
  color: var(--accent-ink);
  filter: brightness(1.04);
}
.rd-hero-ctas .rd-btn-primary.rd-btn-aura:active:not(:disabled),
.dsg-home-ctas .rd-btn-primary.rd-btn-aura:active:not(:disabled),
.rd-sc-plate:active .rd-sc-hint {
  background: var(--accent);
  box-shadow: var(--btn-mat-press);
  filter: brightness(.98);
  transform: translateY(1px);
}
.rd-sc-hint-t {
  color: var(--accent-ink);
}

/* Unified sliding segmented controls */
.rd-seg-rail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.rd-seg-rail button {
  position: relative;
  z-index: 1;
}
.rd-seg-thumb {
  position: absolute;
  top: var(--seg-pad, 3px);
  bottom: var(--seg-pad, 3px);
  left: 0;
  width: 0;
  border-radius: var(--seg-radius, 999px);
  background: var(--tog-chip);
  box-shadow: var(--tog-pop);
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform .28s var(--rd-ease),
    width .28s var(--rd-ease),
    opacity .18s ease,
    background .28s var(--rd-ease),
    box-shadow .28s var(--rd-ease);
}
.rd-seg-rail.dragging .rd-seg-thumb {
  transition: none;
}
.rd-seg-rail.dragging,
.rd-seg-rail.dragging button {
  cursor: grabbing;
}
.rd-seg-rail button.on {
  background: transparent;
  box-shadow: none;
  color: var(--accent);
}
.rd-seg-rail button.on .cx-seg-ct {
  background: rgba(6,18,12,.22);
  color: var(--accent-ink);
}
/* Studio Step 1 purpose router + dynamic casting form.
   Reuses established tokens/patterns from .stco-board (card), .stup-main-slot
   (dashed upload), .stup-ratio/.stup-chip (selected state) — no shadows,
   no gradients, no hover-lift; flat paper cards with thin borders only. */
.stup-purpose-router, .stup-layer { margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.stup-purpose-router { border-color: var(--accent-line); }
.stup-layer-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.stup-layer-head > span { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 10px/1 var(--rd-font-mono); letter-spacing: .08em; flex-shrink: 0; }
.stup-layer-head h2 { margin: 1px 0 3px; font-size: 17px; line-height: 1.2; }
.stup-layer-head p { margin: 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.45; }

.stup-purpose-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.stup-purpose-option { position: relative; display: flex; min-height: 132px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .18s var(--rd-ease), background .18s var(--rd-ease); }
.stup-purpose-option:hover { border-color: var(--accent-line); }
.stup-purpose-option.on { border-color: var(--accent); background: var(--accent-soft); }
.stup-purpose-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--inset); color: var(--accent); flex-shrink: 0; }
.stup-purpose-option.on .stup-purpose-icon { background: var(--accent); color: var(--accent-ink); }
.stup-purpose-option b { font-size: 13px; line-height: 1.3; font-weight: 700; }
.stup-purpose-option small { color: var(--ink-dim); font-size: 10.5px; line-height: 1.45; }
.stup-purpose-check { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: transparent; }
.stup-purpose-option.on .stup-purpose-check { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.stup-upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.stup-upload-grid.slots-1 { grid-template-columns: minmax(220px,420px); }
.stup-upload-grid.slots-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stup-upload-grid.slots-5, .stup-upload-grid.slots-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stup-upload-card { position: relative; display: block; min-height: 190px; overflow: hidden; border: 1.5px dashed var(--line-2); border-radius: 13px; background: var(--inset); cursor: pointer; transition: border-color .18s var(--rd-ease); }
.stup-upload-card:hover, .stup-upload-card.drag { border-color: var(--accent-line); }
.stup-upload-card.required { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.stup-upload-card.drag { border-style: solid; background: color-mix(in srgb, var(--accent) 8%, var(--inset)); }
.stup-upload-card > img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.stup-upload-empty { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 18px; text-align: center; color: var(--ink-faint); }
.stup-upload-empty > span { font-size: 22px; color: var(--accent); }
.stup-upload-empty b { font-size: 12px; color: var(--ink); }
.stup-upload-empty small { color: var(--ink-faint); font-size: 10px; }
.stup-upload-status { position: absolute; top: 10px; right: 10px; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink-dim); font: 700 8px/1 var(--rd-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.stup-upload-remove { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; transition: background .15s var(--rd-ease); }
.stup-upload-remove:hover { background: rgba(0,0,0,.75); }

.stup-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.stup-context-grid .stup-brief-card { margin: 0; }
.stup-inline-control { margin-bottom: 14px; padding: 14px; border-radius: 14px; background: var(--inset); }
.stup-inline-control > b { display: block; margin-bottom: 10px; font-size: 12px; }
.stup-official-warning { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); color: var(--ink); font-size: 12px; line-height: 1.55; }
.stup-official-warning .stup-warn-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); }

/* Studio outfit swap (2026-07-22, v3) — collapsed behind a concept/custom
   mode toggle (rd-out-seg, same mechanism as the Chất lượng picker); picking
   "custom" opens a full sheet/banner (scrim + centered panel, same shell
   language as Style Card's "Mở thư viện" library sheet — see .sc-sheet in
   CreateScreen.tsx) instead of a cramped inline rail, so wardrobe cards can
   be much bigger. Uses global tokens directly (not the .sc-wrap-scoped
   --sc-* aliases) since this sheet mounts outside that wrapper. */
.stup-outfit-picker { margin-top: 16px; }
.stup-outfit-picker-head { margin-bottom: 10px; }
.stup-outfit-picker-head > b { display: block; font-size: 13px; margin-bottom: 4px; }
.stup-outfit-picker-head > p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.stup-outfit-panel { margin-top: 12px; }
.stup-outfit-open-btn { font-family: var(--rd-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 11px; padding: 12px 18px; cursor: pointer; transition: all .18s var(--rd-ease); }
.stup-outfit-open-btn:hover { background: var(--accent-line); }
.stup-outfit-picked { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 8px 14px 8px 8px; cursor: pointer; transition: border-color .18s var(--rd-ease); }
.stup-outfit-picked:hover { border-color: var(--accent-line); }
.stup-outfit-picked img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.stup-outfit-picked span { display: flex; flex-direction: column; gap: 2px; }
.stup-outfit-picked b { font-size: 13px; }
.stup-outfit-picked small { font-size: 11px; color: var(--ink-faint); }

.stup-outfit-sheet { position: fixed; inset: 0; z-index: 80; display: none; pointer-events: none; }
.stup-outfit-sheet.open { display: block; pointer-events: auto; }
.stup-outfit-scrim { position: absolute; inset: 0; background: rgba(5,4,12,.66); backdrop-filter: blur(4px); }
.stup-outfit-sheet-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(960px, 92vw); max-height: 86vh; background: var(--bg); border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 50px 120px -50px rgba(0,0,0,.9); }
.stup-outfit-sheet-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.stup-outfit-sheet-eyebrow { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.stup-outfit-sheet-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin-top: 6px; }
.stup-outfit-sheet-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); font-size: 14px; cursor: pointer; flex-shrink: 0; }
.stup-outfit-sheet-x:hover { color: var(--ink); background: var(--accent-soft); }
.stup-outfit-sheet-toolbar { padding: 16px 24px 0; }
.stup-outfit-gender-seg { display: inline-flex; width: auto; padding: 2px; gap: 2px; border-radius: 20px; --seg-pad: 2px; --seg-radius: 18px; }
.stup-outfit-gender-seg button { padding: 6px 18px; }
.stup-outfit-sheet-body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.stup-outfit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.stup-outfit-card { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--inset); cursor: pointer; transition: border-color .18s var(--rd-ease); padding: 0; text-align: left; }
.stup-outfit-card:hover { border-color: var(--accent-line); }
.stup-outfit-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.stup-outfit-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.stup-outfit-card span { display: block; padding: 8px 10px; font-size: 12px; color: var(--ink-dim); }

@media (max-width: 620px) {
  .stup-outfit-sheet-panel { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 85vh; border-radius: 18px 18px 0 0; }
  .stup-outfit-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 900px) {
  .stup-purpose-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stup-upload-grid, .stup-upload-grid.slots-4, .stup-upload-grid.slots-5, .stup-upload-grid.slots-6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .stup-purpose-router, .stup-layer { padding: 16px; border-radius: 16px; }
  .stup-purpose-grid, .stup-context-grid, .stup-upload-grid, .stup-upload-grid.slots-1, .stup-upload-grid.slots-4, .stup-upload-grid.slots-5, .stup-upload-grid.slots-6 { grid-template-columns: 1fr; }
  .stup-purpose-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stup-purpose-option { min-height: auto; }
  .stup-allocation-list{grid-template-columns:1fr}.stup-allocation-row{grid-template-columns:32px minmax(0,1fr) auto;padding:10px}.stup-allocation-foot{align-items:flex-start;flex-direction:column}
  .stup-upload-card, .stup-upload-empty, .stup-upload-card > img { min-height: 150px; }
}

/* ═══════════════════════════════════════════════════════════════
   EARLY PREVIEW — badge, welcome notice, locked-flow gate
   ═══════════════════════════════════════════════════════════════ */
.ep-badge {
  position: fixed; bottom: 14px; left: 14px; z-index: 340;
  font-family: var(--rd-font-mono); font-size: 9px; letter-spacing: .14em;
  color: var(--ink-faint); background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  cursor: pointer; backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 0;
  transition: color .2s, border-color .2s, gap .2s;
}
.ep-badge:hover { color: var(--ink); border-color: var(--line-2); gap: 8px; }
.ep-badge-back { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .25s var(--rd-ease), opacity .2s; }
.ep-badge:hover .ep-badge-back { max-width: 160px; opacity: 1; }

.ep-veil {
  position: fixed; inset: 0; z-index: 360;
  background: color-mix(in srgb, var(--bg) 55%, rgba(10, 8, 5, .45));
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  animation: ep-fade .25s var(--rd-ease);
}
@keyframes ep-fade { from { opacity: 0; } to { opacity: 1; } }
.ep-card {
  position: relative; width: min(430px, 100%);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 28px 26px 24px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5);
  animation: ep-rise .3s var(--rd-ease);
}
@keyframes ep-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ep-close {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  border: none; background: transparent; color: var(--ink-faint);
  font-size: 12px; cursor: pointer; border-radius: 8px;
}
.ep-close:hover { color: var(--ink); background: var(--inset); }
.ep-eyebrow {
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.ep-title { font-family: var(--rd-font-serif, inherit); font-size: 21px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
.ep-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 20px; }
.ep-cta {
  width: 100%; padding: 12px 16px; border-radius: 11px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  font-weight: 600; font-size: 13px; letter-spacing: .04em;
  font-family: var(--rd-font-sans); transition: filter .2s, transform .2s;
}
.ep-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ep-gate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ep-ghost {
  background: transparent; border: none; color: var(--ink-dim); font-size: 12.5px;
  cursor: pointer; padding: 8px 4px; font-family: var(--rd-font-sans);
}
.ep-ghost:hover { color: var(--ink); }
.ep-interest {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-faint); font-size: 11.5px; padding: 7px 13px; cursor: pointer;
  font-family: var(--rd-font-sans); transition: color .2s, border-color .2s;
}
.ep-interest:hover:not(:disabled) { color: var(--ink); border-color: var(--line-2); }
.ep-interest.done { color: var(--accent); border-color: var(--accent); cursor: default; }

/* Locked action affordance — replaces generate/upload CTAs in preview flows */
.ep-lock-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--rd-font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Early Preview — section status chip (THỬ NGAY / XEM TRƯỚC) */
.ep-chip {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-family: var(--rd-font-mono); font-size: 8.5px; letter-spacing: .13em;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; margin-left: 10px; white-space: nowrap; text-transform: uppercase;
}
.ep-chip.live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Seller output options block (ratio / resolution / quality) */
.sl-genopts { display: flex; flex-direction: column; gap: 4px; }
.sl-genopts .to-res-row { flex-wrap: wrap; }
/* Studio purpose router — purpose first, then concept or technical setup. */
.stpr-screen{padding:34px clamp(22px,4vw,64px) 72px;max-width:1540px;margin:0 auto}.stpr-back{margin-bottom:28px}.stpr-header{max-width:760px;margin-bottom:30px}.stpr-eyebrow{font:10px/1.2 var(--rd-font-mono);letter-spacing:.19em;color:var(--accent);margin-bottom:12px}.stpr-header h1{font-size:clamp(36px,5vw,68px);line-height:.96;letter-spacing:-.055em;margin:0 0 16px;color:var(--ink)}.stpr-header p{font-size:15px;line-height:1.65;color:var(--ink-dim);max-width:660px;margin:0}.stpr-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.stpr-card{position:relative;grid-column:span 2;min-height:390px;padding:0;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:20px;overflow:hidden;background:var(--card);color:#fff;text-align:left;cursor:pointer;box-shadow:0 12px 28px rgba(39,25,14,.08);isolation:isolate}.stpr-card:nth-child(4){grid-column:2/span 2}.stpr-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.75,.2,1)}.stpr-card:hover img,.stpr-card:focus-visible img{transform:scale(1.035)}.stpr-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:3px}.stpr-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,7,.06) 30%,rgba(12,9,7,.86) 100%);z-index:1}.stpr-number,.stpr-arrow,.stpr-content{position:absolute;z-index:2}.stpr-number{top:18px;left:18px;font:10px var(--rd-font-mono);letter-spacing:.12em}.stpr-arrow{right:16px;top:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(245,237,223,.18);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}.stpr-content{left:22px;right:22px;bottom:21px;display:flex;flex-direction:column;align-items:flex-start}.stpr-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(245,237,223,.16);border:1px solid rgba(255,255,255,.2);margin-bottom:12px}.stpr-content strong{font:700 25px/1.05 var(--rd-font-serif);letter-spacing:-.025em}.stpr-content small{font-size:12px;line-height:1.48;opacity:.82;margin-top:8px;max-width:330px}.stpr-cta{font:700 11px/1 var(--rd-font-sans);margin-top:16px;padding:9px 12px;border-radius:999px;background:#f2e6d3;color:#5a351e}.stho-dcard{appearance:none;padding:0;text-align:left;color:inherit;font:inherit}.stho-dcard-cta,.m-dir-cta{display:inline-flex;align-items:center;margin-top:9px;font-size:10px;font-weight:800;letter-spacing:.01em}.m-dir-cta{padding:7px 10px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(247,239,225,.94);color:#5d3a22}
@media(max-width:900px){.stpr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stpr-card,.stpr-card:nth-child(4){grid-column:span 1}.stpr-card:last-child{grid-column:1/-1;min-height:300px}.stpr-card{min-height:340px}}
@media(max-width:620px){.stpr-screen{padding:22px 14px 48px}.stpr-header{margin-bottom:22px}.stpr-header h1{font-size:39px}.stpr-grid{grid-template-columns:1fr;gap:11px}.stpr-card,.stpr-card:nth-child(4),.stpr-card:last-child{grid-column:1;min-height:270px}.stpr-content strong{font-size:22px}.stpr-content small{max-width:90%}}

/* Studio typography roles: UI = Bricolage, concepts = Fraunces, metadata = IBM Plex Mono. */
.stpr-header h1,.stup-h1,.stps-h1{font-family:var(--rd-font-sans)}
.stpr-content strong{font-family:var(--rd-font-serif);font-size:26px;font-weight:600;line-height:1.08;letter-spacing:-.035em}
.stpr-content small{font-family:var(--rd-font-sans)}
.rd-amp{font-family:var(--rd-font-sans);font-style:normal;font-weight:500;letter-spacing:0}
.stco-cname{font-weight:650;font-size:23px;line-height:1.06;letter-spacing:-.03em}
.stco-mood-panel b{font-weight:600;font-size:19px;line-height:1.08;letter-spacing:-.025em}
.stco-mood-name{font-family:var(--rd-font-serif);font-size:21px;line-height:1.06;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.stco-modal-concept-name{font-family:var(--rd-font-serif);font-weight:600;line-height:1.05;letter-spacing:-.035em;margin:4px 0 6px;color:var(--ink)}
.dbldr-ai-history {
  width: min(760px, 100%);
  margin: 14px auto 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
}

.dbldr-ai-history-item {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 68px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--inset);
  color: var(--ink);
  cursor: pointer;
}

.dbldr-ai-history-item.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.dbldr-ai-history-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbldr-ai-history-item > span:last-child {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(20, 18, 14, .72);
  color: #fff;
  font-size: 9px;
  line-height: 1;
}

.dbldr-ai-history-item.generating {
  cursor: wait;
}

.dbldr-ai-history-loading {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 20px;
  animation: dbldr-ai-pulse 1s ease-in-out infinite alternate;
}

@keyframes dbldr-ai-pulse {
  from { opacity: .35; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}

/* The builder sidebar is a fixed control rail; only this workspace pans and zooms. */
.dbldr-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 18px 22px 0;
}

.dbldr-stage-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.dbldr-stage-area:active { cursor: grabbing; }

.dbldr-stage-area {
  background-image: radial-gradient(color-mix(in srgb, var(--ink-faint) 34%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}

.dbldr-stage {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: transform 120ms ease-out;
  will-change: transform;
}

.dbldr-ai-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: center;
  justify-items: center;
  gap: 36px;
  width: min(1180px, calc(100% - 120px));
  max-height: calc(100% - 40px);
  padding: 42px 28px;
}

.dbldr-ai-board-frame {
  position: relative;
  width: min(100%, 420px);
  max-height: min(68vh, 560px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--inset);
  box-shadow: 0 12px 30px rgba(38, 27, 15, .14);
}

.dbldr-ai-board-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dbldr-ai-board-frame.generating { background: #221d17; }
.dbldr-ai-board-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 5px;
  border-radius: 3px;
  background: rgba(21, 18, 14, .76);
  color: #fff;
  font: 9px/1 var(--rd-font-mono);
}

.dbldr-canvas-zoom {
  position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 3px 14px rgba(40, 28, 15, .12);
}

.dbldr-canvas-zoom button {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 11px var(--rd-font-mono);
}

.dbldr-canvas-zoom button:last-child { border-right: 0; }
.dbldr-canvas-zoom button:hover:not(:disabled) { background: var(--inset); }
.dbldr-canvas-zoom button:disabled { cursor: default; opacity: .4; }

.dbldr-ai-history {
  flex: 0 0 auto;
  flex-direction: row !important;
  align-items: center;
  min-height: 76px;
  max-width: min(760px, calc(100% - 32px));
  margin: 8px auto;
  white-space: nowrap;
}

.dbldr-taskbar {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.dbldr-taskbar .dbldr-btn-ghost { display: none; }

@media (max-width: 760px) {
  .dbldr-canvas { padding: 10px 0 0; }
  .dbldr-canvas-zoom { top: 10px; right: 10px; }
  .dbldr-taskbar { gap: 7px; padding: 10px; }
}

/* ===== Design guided-entry redesign — 2026-07-30 ===== */
.dsgn-dash-hero { max-width:760px; padding:10px 0 4px; }
.dsgn-dash-hero h1 { margin:10px 0 0; color:var(--ink); font-size:clamp(34px,5vw,58px); line-height:.98; letter-spacing:-.045em; }
.dsgn-dash-hero p { max-width:650px; margin:16px 0 0; color:var(--ink-dim); font-size:15px; line-height:1.6; }
.dsgn-dash-brand-wrap { margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }
.dsgn-dash-brand-label { margin-bottom:10px; color:var(--ink-faint); font:10px/1 var(--rd-font-mono); letter-spacing:.12em; text-transform:uppercase; }
.dsgn-dash-brand-wrap .dsgn-brand-card { max-width:680px; padding:12px 14px; box-shadow:none; }
.dsgn-dash-brand-wrap .dsgn-brand-empty-s { max-width:440px; }

.dsgn-paths { margin:0 0 54px; }
.dsgn-path-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.dsgn-path-card { position:relative; min-height:548px; display:flex; flex-direction:column; overflow:hidden; padding:26px; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 16px 48px -38px rgba(37,25,13,.36); }
.dsgn-path-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 40%); }
.dsgn-path-card--guided::before { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 40%); }
.dsgn-path-topline { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dsgn-path-ey { color:var(--accent); font:10px/1 var(--rd-font-mono); letter-spacing:.16em; }
.dsgn-path-badge { padding:6px 9px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--ink-dim); font:9px/1 var(--rd-font-mono); letter-spacing:.04em; white-space:nowrap; }
.dsgn-path-badge--quiet { border-color:var(--line-2); background:var(--inset); }
.dsgn-path-card h2 { position:relative; margin:22px 0 0; color:var(--ink); font-size:clamp(26px,3vw,38px); line-height:1.02; letter-spacing:-.04em; }
.dsgn-path-card > p { position:relative; min-height:44px; max-width:570px; margin:11px 0 0; color:var(--ink-dim); font-size:13.5px; line-height:1.55; }

.dsgn-path-preview { position:relative; flex:1; min-height:248px; margin:18px 0 0; isolation:isolate; }
.dsgn-path-preview-frame { position:absolute; overflow:hidden; border:1px solid color-mix(in srgb,#fff 54%,var(--line)); border-radius:10px; background:var(--inset); box-shadow:0 18px 36px -20px rgba(24,18,12,.52); transition:transform .24s ease,box-shadow .24s ease; }
.dsgn-path-preview-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.dsgn-path-preview-label,.dsgn-path-preview-index { position:absolute; z-index:2; display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border-radius:999px; background:rgba(15,13,11,.74); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font:700 7.5px/1 var(--rd-font-mono); letter-spacing:.06em; }
.dsgn-path-preview-label { left:7px; bottom:7px; }
.dsgn-path-preview-index { left:7px; top:7px; width:22px; justify-content:center; padding:0; }
.dsgn-path-card--collection:hover .dsgn-path-preview-frame { box-shadow:0 22px 42px -20px rgba(24,18,12,.6); }

/* Social: one coherent campaign shown in its real publishing ratios. */
.dsgn-path-preview--social .dsgn-path-preview-frame--1 { left:12%; top:14%; width:20%; z-index:1; transform:rotate(-7deg); }
.dsgn-path-preview--social .dsgn-path-preview-frame--2 { left:30%; top:0; width:36%; z-index:4; transform:rotate(.4deg); }
.dsgn-path-preview--social .dsgn-path-preview-frame--3 { right:12%; top:14%; width:20%; z-index:2; transform:rotate(7deg); }
.dsgn-path-preview--social .dsgn-path-preview-frame--4 { display:none; }
.dsgn-path-preview--social .dsgn-path-preview-label { display:none; }

/* Product launch: a visible sequence, not four arbitrary thumbnails. */
.dsgn-path-preview--launch::before { content:""; position:absolute; left:7%; right:6%; top:48%; height:1px; z-index:0; background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent); }
.dsgn-path-preview--launch .dsgn-path-preview-frame--1 { left:0; top:31%; width:31%; z-index:1; transform:rotate(-1.2deg); }
.dsgn-path-preview--launch .dsgn-path-preview-frame--2 { left:23%; bottom:0; width:27%; z-index:4; transform:rotate(.6deg); }
.dsgn-path-preview--launch .dsgn-path-preview-frame--3 { left:52%; bottom:0; width:18%; z-index:3; transform:rotate(-.5deg); }
.dsgn-path-preview--launch .dsgn-path-preview-frame--4 { right:0; bottom:10%; width:25%; z-index:2; transform:rotate(1.2deg); }

/* Video covers: four true 16:9 layers, strongest cover on top. */
.dsgn-path-preview--covers { overflow:hidden; min-height:262px; }
.dsgn-path-preview--covers .dsgn-path-preview-frame { width:min(64%,400px); }
.dsgn-path-preview--covers .dsgn-path-preview-frame--1 { left:0; top:34px; z-index:1; transform:rotate(-1.35deg); opacity:.88; }
.dsgn-path-preview--covers .dsgn-path-preview-frame--2 { left:6%; top:24px; z-index:2; transform:rotate(-.7deg); opacity:.93; }
.dsgn-path-preview--covers .dsgn-path-preview-frame--3 { left:12%; top:14px; z-index:3; transform:rotate(.15deg); opacity:.97; }
.dsgn-path-preview--covers .dsgn-path-preview-frame--4 { right:0; top:4px; z-index:4; transform:rotate(.65deg); }

/* Carousel: a numbered reading sequence with one shared 4:5 grammar. */
.dsgn-path-preview--carousel::before { content:""; position:absolute; left:8%; right:8%; top:8%; height:24px; border-top:1px dashed color-mix(in srgb,var(--accent) 44%,var(--line)); border-radius:50%; }
.dsgn-path-preview--carousel .dsgn-path-preview-frame { width:23%; }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--1 { left:1%; top:16%; z-index:1; transform:rotate(-3deg); }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--2 { left:25.5%; top:9%; z-index:2; transform:rotate(-1.2deg); }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--3 { left:51%; top:9%; z-index:2; transform:rotate(1.2deg); }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--4 { right:1%; top:16%; z-index:1; transform:rotate(3deg); }

.dsgn-guided-diagram { position:relative; flex:1; min-height:248px; display:grid; align-content:center; margin-top:18px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--inset); }
.dsgn-guided-row { display:grid; grid-template-columns:38px minmax(92px,120px) minmax(0,1fr); align-items:center; gap:10px; min-height:55px; padding:9px 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card) 88%,transparent); }
.dsgn-guided-row:last-child { border-bottom:0; }
.dsgn-guided-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--accent); }
.dsgn-guided-row > b { color:var(--ink); font-size:11.5px; line-height:1.2; }
.dsgn-guided-values { min-width:0; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; }
.dsgn-guided-values i { min-height:27px; display:inline-flex; align-items:center; max-width:100%; padding:0 9px; overflow:hidden; border-radius:7px; background:var(--card); color:var(--ink-dim); font:500 9.5px/1.2 var(--rd-font-sans); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.dsgn-guided-values i:only-child { white-space:normal; }

.dsgn-path-foot { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-top:18px; padding-top:17px; border-top:1px solid var(--line); }
.dsgn-path-foot > span { max-width:330px; color:var(--ink-faint); font-size:11.5px; line-height:1.5; }
.dsgn-path-foot button { flex:0 0 auto; min-height:42px; padding:0 16px; border:0; border-radius:999px; background:var(--accent); color:var(--accent-ink); cursor:pointer; font:700 11px var(--rd-font-sans); transition:transform .16s ease,box-shadow .16s ease; }
.dsgn-path-foot button:hover { transform:translateY(-1px); box-shadow:0 9px 22px -14px rgba(30,20,12,.72); }
.dsgn-path-card--guided .dsgn-path-foot button { background:var(--ink); color:var(--bg); }
.dsgn-method-back { margin:0 0 20px; padding:0; border:0; background:none; color:var(--ink-dim); cursor:pointer; font:10px var(--rd-font-mono); letter-spacing:.06em; text-transform:uppercase; }
.dsgn-method-back:hover { color:var(--ink); }

.dsgn-collection-browser { padding-bottom:30px; }
.dsgn-concept-shelf {
  margin:0 0 30px;
}
.dsgn-concept-filters { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 13px; }
.dsgn-concept-filters button { border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:transparent; color:var(--ink-dim); font:600 11px var(--rd-font-sans); cursor:pointer; }
.dsgn-concept-filters button.on { border-color:var(--accent-line); background:var(--accent-soft); color:var(--ink); }
.dsgn-concept-rail { display:grid; grid-auto-flow:column; grid-auto-columns:120px; grid-template-rows:1fr; gap:12px; overflow-x:auto; padding:1px 34px 4px 1px; scrollbar-width:none; scroll-padding-right:34px; -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain; cursor:grab; user-select:none; }
.dsgn-concept-rail:active { cursor:grabbing; }
.dsgn-concept-rail::-webkit-scrollbar { display:none; }
.dsgn-concept-card { display:grid; gap:8px; overflow:hidden; border:0; padding:0; text-align:left; cursor:pointer; color:var(--ink); background:transparent; }
.dsgn-concept-card img { display:block; width:120px; aspect-ratio:4/5; object-fit:cover; border-radius:10px; background:var(--inset); transition:transform .35s var(--rd-ease),box-shadow .2s var(--rd-ease); }
.dsgn-concept-card:hover img { transform:scale(1.045); }
.dsgn-concept-card:hover img { box-shadow:0 0 0 2px var(--accent); }
.dsgn-concept-card b { overflow:hidden; color:var(--ink); font:650 12px/1.3 var(--rd-font-sans); letter-spacing:-.015em; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 680px) {
  .dsgn-concept-rail { grid-auto-columns:108px; }
  .dsgn-concept-card img { width:108px; }
}

/* Entry-card cleanup: labels should not visually turn into dividers, and both
   recommendation chips use the same status language. */
.dsgn-paths > .dsgn-start-lbl::after { display:none; }
.dsgn-path-foot { margin-top:14px; padding-top:0; border-top:0; }
.dsgn-path-badge--quiet {
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}

/* Start-method choice is a fork, not a sales page. Let the two visual cards
   do the explaining and keep duplicate labels/reference upload inside Brief. */
.dsgn-cat-head--choose { margin-bottom:22px; padding-bottom:0; border-bottom:0; }
.dsgn-cat-head--choose .dsgn-cat-desc,
.dsgn-paths > .dsgn-start-lbl,
.dsgn-paths .dsgn-path-topline,
.dsgn-paths .dsgn-path-card > p,
.dsgn-paths .dsgn-path-foot > span,
.dsgn-reference-shortcut { display:none; }
.dsgn-paths { margin-bottom:36px; }
.dsgn-path-card { min-height:410px; padding:22px; }
.dsgn-path-card h2 { margin:0; font-size:clamp(24px,2.6vw,32px); }
.dsgn-path-preview { min-height:250px; margin-top:14px; }
.dsgn-path-foot { margin-top:12px; }
.dsgn-path-foot button { width:100%; }

/* Collection is a visual browsing state, not a second task-introduction page. */
.dsgn-gal-head--compact { align-items:flex-start; margin:2px 0 18px; }
.dsgn-gal-head--compact .dsgn-eyebrow { font-size:10px; letter-spacing:.17em; }
.dsgn-gal-head--compact .dsgn-gal-title {
  margin-top:10px; font-size:clamp(28px,3.4vw,42px); line-height:1; letter-spacing:-.04em;
}
.dsgn-gal-head--compact .dsgn-gal-sub {
  max-width:720px; margin-top:10px; font-size:13.5px; line-height:1.55;
}

/* Guided brief composer */
.dbrief-shell { margin:-6px 0 60px; }
.dbrief-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 14px; border-bottom:1px solid var(--line); color:var(--ink-faint); font:9.5px var(--rd-font-mono); letter-spacing:.04em; }
.dbrief-back { padding:0; border:0; background:none; color:var(--ink-dim); cursor:pointer; font:10px var(--rd-font-mono); letter-spacing:.06em; text-transform:uppercase; }
.dbrief-back:hover { color:var(--ink); }
.dbrief-header { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:28px 0 24px; }
.dbrief-header h2 { max-width:780px; margin:10px 0 0; color:var(--ink); font-size:clamp(30px,4vw,48px); line-height:1; letter-spacing:-.045em; }
.dbrief-header p { max-width:680px; margin:12px 0 0; color:var(--ink-dim); font-size:14px; line-height:1.55; }
.dbrief-header--minimal { align-items:center; padding:18px 0; }
.dbrief-header--minimal h2 { margin:0; font-size:clamp(28px,3vw,38px); }
.dbrief-flow-steps { display:flex; gap:18px; margin:0 0 18px; border-bottom:1px solid var(--line); }
.dbrief-flow-steps button { display:inline-flex; align-items:center; gap:7px; padding:0 0 10px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-faint); cursor:pointer; font:600 11px var(--rd-font-sans); }
.dbrief-flow-steps button span { color:var(--accent); font:9px var(--rd-font-mono); }
.dbrief-flow-steps button.on { border-bottom-color:var(--accent); color:var(--ink); }
.dbrief-form--step-1 [data-dbrief-step="2"],.dbrief-form--step-1 [data-dbrief-step="3"],.dbrief-form--step-2 [data-dbrief-step="1"],.dbrief-form--step-2 [data-dbrief-step="3"],.dbrief-form--step-3 [data-dbrief-step="1"],.dbrief-form--step-3 [data-dbrief-step="2"] { display:none; }
.dbrief-step-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; }
.dbrief-step-actions button { min-height:42px; padding:0 15px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink-dim); cursor:pointer; font:650 12px var(--rd-font-sans); }
.dbrief-step-actions button.primary { margin-left:auto; border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.dbrief-readiness { width:94px; flex:0 0 auto; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--inset); }
.dbrief-readiness b { color:var(--ink); font:700 14px/1 var(--rd-font-mono); letter-spacing:-.04em; }
.dbrief-readiness > div { height:3px; overflow:hidden; border-radius:99px; background:var(--line); }
.dbrief-readiness > div i { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .22s var(--rd-ease); }
.dbrief-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; }
.dbrief-layout--review { grid-template-columns:minmax(0,1fr) 350px; }
.dbrief-form { display:grid; gap:14px; }
.dbrief-section { padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.dbrief-section-head { display:block; margin-bottom:15px; }
.dbrief-section-head > span { display:none; }
.dbrief-section-head h3 { margin:1px 0 0; color:var(--ink); font-size:17px; letter-spacing:-.02em; }
.dbrief-section-head p { display:none; }
.dbrief-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.dbrief-options--compact { grid-template-columns:repeat(5,minmax(0,1fr)); }
.dbrief-option { min-height:62px; display:grid; align-content:center; gap:4px; padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:11px; background:var(--inset); color:var(--ink); cursor:pointer; font-family:var(--rd-font-sans); transition:border-color .15s,background .15s,transform .15s; }
.dbrief-option:hover { border-color:var(--line-2); transform:translateY(-1px); }
.dbrief-option.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--card)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent) inset; }
.dbrief-option b { font-size:12px; line-height:1.25; }
.dbrief-option span { color:var(--ink-faint); font-size:9.5px; line-height:1.35; }
.dbrief-subject-row { display:grid; grid-template-columns:230px minmax(0,1fr); gap:10px; margin-top:12px; }
.dbrief-upload { min-height:112px; display:grid; grid-template-columns:62px 1fr; align-items:center; gap:12px; padding:12px; overflow:hidden; text-align:left; border:1px dashed var(--line-2); border-radius:12px; background:var(--inset); color:var(--ink); cursor:pointer; }
.dbrief-upload:hover { border-color:var(--accent); }
.dbrief-upload img { width:62px; height:82px; object-fit:cover; border-radius:8px; }
.dbrief-upload-icon { width:62px; height:82px; display:grid; place-items:center; border-radius:8px; background:var(--card); color:var(--accent); font-size:23px; }
.dbrief-upload div { display:grid; gap:4px; }
.dbrief-upload b { font-size:12px; }
.dbrief-upload small { color:var(--ink-faint); font:8.5px var(--rd-font-mono); }
.dbrief-field { display:grid; gap:7px; }
.dbrief-field--grow { min-width:0; }
.dbrief-field > span,.dbrief-mini-label { color:var(--ink-faint); font:9.5px var(--rd-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.dbrief-field input,.dbrief-field textarea { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:var(--inset); color:var(--ink); font:12.5px var(--rd-font-sans); }
.dbrief-field textarea { min-height:112px; resize:vertical; line-height:1.5; }
.dbrief-field input:focus,.dbrief-field textarea:focus { border-color:var(--accent); }
.dbrief-check { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--ink-dim); font-size:12px; }
.dbrief-copy-grid { display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:9px; }
.dbrief-copy-grid.disabled { opacity:.42; }
.dbrief-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dbrief-split > div { min-width:0; }
.dbrief-mini-label { margin-bottom:8px; }
.dbrief-split .dbrief-options,.dbrief-advanced .dbrief-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dbrief-formats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.dbrief-formats button { min-height:104px; display:grid; place-items:center; align-content:center; gap:5px; border:1px solid var(--line); border-radius:12px; background:var(--inset); color:var(--ink); cursor:pointer; }
.dbrief-formats button.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--card)); }
.dbrief-formats b { font-size:11.5px; }
.dbrief-formats small { color:var(--ink-faint); font:9px var(--rd-font-mono); }
.dbrief-ratio { display:block; border:1.5px solid currentColor; border-radius:2px; color:var(--ink-dim); }
.dbrief-ratio--45 { width:24px; height:30px; }
.dbrief-ratio--916 { width:18px; height:32px; }
.dbrief-ratio--11 { width:27px; height:27px; }
.dbrief-ratio--169 { width:34px; height:19px; }
.dbrief-formats button.on .dbrief-ratio { color:var(--accent); }
.dbrief-advanced-toggle { width:100%; display:flex; align-items:center; gap:12px; padding:16px 18px; text-align:left; border:1px solid var(--line); border-radius:15px; background:var(--card); color:var(--ink); cursor:pointer; }
.dbrief-advanced-toggle > span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--inset); color:var(--accent); font-size:18px; }
.dbrief-advanced-toggle div { display:grid; gap:3px; }
.dbrief-advanced-toggle b { font-size:13px; }
.dbrief-advanced-toggle small { color:var(--ink-faint); font-size:10px; }
.dbrief-advanced { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--card); }
.dbrief-summary { position:relative; }
.dbrief-summary-sticky { position:sticky; top:18px; display:grid; gap:12px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 20px 50px -38px rgba(38,26,14,.5); }
.dbrief-summary-ey { color:var(--accent); font:9.5px var(--rd-font-mono); letter-spacing:.14em; }
.dbrief-summary h3 { margin:0; color:var(--ink); font-size:20px; letter-spacing:-.025em; }
.dbrief-summary p { margin:0; color:var(--ink-dim); font-size:11.5px; line-height:1.5; }
.dbrief-summary-preview { position:relative; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line); border-radius:12px; background:var(--inset); }
.dbrief-summary-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.dbrief-summary-preview span { position:absolute; left:8px; bottom:8px; padding:5px 7px; border-radius:6px; background:rgba(14,12,10,.72); color:#fff; font:8px var(--rd-font-mono); }
.dbrief-summary-chips { display:flex; flex-wrap:wrap; gap:5px; }
.dbrief-summary-chips span { padding:5px 7px; border:1px solid var(--line); border-radius:999px; background:var(--inset); color:var(--ink-dim); font:8.5px var(--rd-font-mono); }
.dbrief-summary-warning { padding:9px 10px; border-radius:9px; background:color-mix(in srgb,#d17751 11%,var(--inset)); color:var(--ink-dim); font-size:10px; line-height:1.45; }
.dbrief-submit { min-height:46px; border:0; border-radius:11px; background:var(--accent); color:var(--accent-ink); cursor:pointer; font:700 12px var(--rd-font-sans); }
.dbrief-submit:disabled { opacity:.38; cursor:not-allowed; }
.dbrief-summary-sticky > small { color:var(--ink-faint); font-size:9.5px; line-height:1.45; text-align:center; }

@media (max-width:1100px) {
  .dsgn-guided-row { grid-template-columns:36px minmax(82px,102px) minmax(0,1fr); gap:8px; padding:8px 10px; }
  .dsgn-guided-values { gap:4px; }
  .dsgn-guided-values i { min-height:25px; padding:0 7px; font-size:8.8px; }
  .dbrief-layout { grid-template-columns:1fr; }
  .dbrief-summary { order:-1; }
  .dbrief-summary-sticky { position:static; grid-template-columns:1fr 190px; align-items:center; }
  .dbrief-summary-preview { grid-column:2; grid-row:1 / span 4; }
  .dbrief-submit,.dbrief-summary-sticky > small,.dbrief-summary-warning { grid-column:1 / -1; }
  .dbrief-options--compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .dsgn-path-grid { grid-template-columns:1fr; }
  .dsgn-path-card { min-height:540px; }
  .dsgn-path-card > p { min-height:auto; }
  .dsgn-path-preview,.dsgn-guided-diagram { min-height:250px; }
  .dbrief-header { display:block; }
  .dbrief-readiness { width:auto; max-width:360px; margin-top:16px; }
  .dbrief-topline > span { display:none; }
  .dbrief-copy-grid,.dbrief-split,.dbrief-advanced { grid-template-columns:1fr; }
  .dbrief-options,.dbrief-options--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dbrief-formats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dbrief-summary-sticky { display:grid; grid-template-columns:1fr; }
  .dbrief-summary-preview { grid-column:auto; grid-row:auto; }
}
@media (max-width:560px) {
  .dsgn-path-card,.dbrief-section { padding:17px; }
  .dsgn-path-topline,.dsgn-path-foot { align-items:flex-start; flex-direction:column; }
  .dsgn-path-foot button { width:100%; }
  .dsgn-path-card { min-height:510px; }
  .dsgn-path-preview,.dsgn-guided-diagram { min-height:222px; }
  .dsgn-path-preview-label { display:none; }
  .dsgn-path-preview--social .dsgn-path-preview-frame--2 { width:36%; }
  .dsgn-path-preview--social .dsgn-path-preview-frame--4 { width:46%; }
  .dsgn-path-preview--launch .dsgn-path-preview-frame--1 { top:36%; }
  .dsgn-path-preview--covers .dsgn-path-preview-frame { width:66%; }
  .dsgn-path-preview--carousel .dsgn-path-preview-frame { width:23.5%; }
  .dsgn-guided-row { grid-template-columns:32px minmax(76px,92px) minmax(0,1fr); min-height:50px; padding:7px 8px; }
  .dsgn-guided-icon { width:30px; height:30px; }
  .dsgn-guided-row > b { font-size:10.5px; }
  .dsgn-guided-values i:nth-child(n+3) { display:none; }
  .dbrief-subject-row { grid-template-columns:1fr; }
  .dbrief-upload { min-height:92px; }
  .dbrief-readiness { max-width:none; padding:11px 12px; }
  .dbrief-options,.dbrief-options--compact { grid-template-columns:1fr; }
}

/* Campaign workspace + structured copy — guided Design MVP */
.dbldr-direction-card { display:grid; gap:9px; }
.dbldr-direction-main { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; }
.dbldr-direction-main > img { width:64px; height:64px; display:block; object-fit:cover; border:1px solid var(--line); border-radius:10px; }
.dbldr-direction-main > div { min-width:0; display:grid; gap:3px; }
.dbldr-direction-main b { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.dbldr-direction-main span { color:var(--ink-dim); font-size:10.5px; line-height:1.35; }
.dbldr-direction-main small { color:var(--ink-faint); font-size:9.5px; line-height:1.45; }
.dbldr-direction-chips { display:flex; flex-wrap:wrap; gap:5px; }
.dbldr-direction-chips span { padding:5px 7px; border:1px solid var(--line); border-radius:999px; background:var(--inset); color:var(--ink-dim); font:8px/1 var(--rd-font-mono); text-transform:capitalize; }

.dbldr-structured-copy { display:grid; gap:10px; }
.dbldr-structured-copy > label:not(.dbldr-no-text) { display:grid; gap:6px; }
.dbldr-structured-copy > label:not(.dbldr-no-text) > span { color:var(--ink-faint); font:9px/1 var(--rd-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.dbldr-structured-copy input[type="text"],
.dbldr-structured-copy input:not([type]),
.dbldr-structured-copy textarea { width:100%; box-sizing:border-box; padding:10px 11px; border:1px solid var(--line); border-radius:9px; outline:none; background:var(--inset); color:var(--ink); font:12.5px/1.45 var(--rd-font-sans); }
.dbldr-structured-copy textarea { min-height:84px; resize:vertical; }
.dbldr-structured-copy input:focus,.dbldr-structured-copy textarea:focus { border-color:var(--accent); }
.dbldr-structured-copy input:disabled,.dbldr-structured-copy textarea:disabled { opacity:.42; cursor:not-allowed; }
.dbldr-no-text { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink-dim); font-size:11px; }
.dbldr-no-text input { width:auto; }

.dbldr-campaign-board { width:min(1240px,calc(100% - 70px)); max-height:calc(100% - 32px); display:grid; gap:14px; padding:28px 0; }
.dbldr-campaign-board-head { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:0 2px; }
.dbldr-campaign-board-head > div { display:grid; gap:5px; }
.dbldr-campaign-board-head span { color:var(--accent); font:9px/1 var(--rd-font-mono); letter-spacing:.14em; }
.dbldr-campaign-board-head b { color:var(--ink); font-size:13px; font-weight:650; }
.dbldr-campaign-board-head small { color:var(--ink-faint); font-size:10px; }
.dbldr-campaign-columns { display:grid; grid-template-columns:repeat(var(--campaign-columns),minmax(150px,1fr)); align-items:start; gap:14px; min-width:0; }
.dbldr-campaign-column { min-width:0; display:grid; gap:8px; padding:8px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--card) 88%,transparent); transition:border-color .16s,box-shadow .16s; }
.dbldr-campaign-column.on { border-color:color-mix(in srgb,var(--accent) 72%,var(--line)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent) inset; }
.dbldr-campaign-column-head { width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 8px; padding:3px 2px 8px; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; }
.dbldr-campaign-column-head:disabled { cursor:default; }
.dbldr-campaign-column-head > span { font-size:11px; font-weight:650; }
.dbldr-campaign-column-head > b { color:var(--ink-dim); font:9px var(--rd-font-mono); }
.dbldr-campaign-column-head > small { grid-column:1 / -1; color:var(--accent); font:8px var(--rd-font-mono); letter-spacing:.05em; text-transform:uppercase; }
.dbldr-campaign-stack { display:grid; gap:10px; align-items:start; }
.dbldr-ai-board-item { min-width:0; display:grid; gap:5px; }
.dbldr-ai-board-frame { appearance:none; padding:0; cursor:pointer; }
.dbldr-ai-board-frame:disabled { cursor:default; }
.dbldr-ai-board-frame.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 32%,transparent),0 14px 32px rgba(38,27,15,.15); }
.dbldr-ai-board-frame.failed { min-height:132px; border-style:dashed; }
.dbldr-ai-approve { width:100%; min-height:28px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--ink-faint); cursor:pointer; font:8.5px/1 var(--rd-font-mono); }
.dbldr-ai-approve:hover,.dbldr-ai-approve.on { border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--inset)); color:var(--accent); }
.dbldr-campaign-failed { height:100%; min-height:132px; display:grid; place-content:center; gap:5px; padding:14px; text-align:center; color:var(--ink-dim); }
.dbldr-campaign-failed b { font-size:11px; }
.dbldr-campaign-failed span { color:var(--ink-faint); font-size:9px; line-height:1.4; }
.dbldr-campaign-empty { width:100%; min-height:142px; display:grid; place-content:center; justify-items:center; gap:4px; padding:14px; border:1px dashed var(--line-2); border-radius:8px; background:var(--inset); color:var(--ink-dim); cursor:pointer; }
.dbldr-campaign-empty:hover:not(:disabled) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--inset)); }
.dbldr-campaign-empty > span { color:var(--accent); font-size:18px; }
.dbldr-campaign-empty > b { font-size:10.5px; }
.dbldr-campaign-empty > small { max-width:120px; color:var(--ink-faint); font-size:8.5px; line-height:1.35; }

@media (max-width:980px) {
  .dbldr-campaign-board { width:calc(100% - 34px); }
  .dbldr-campaign-columns { grid-template-columns:repeat(var(--campaign-columns),minmax(136px,1fr)); gap:9px; }
  .dbldr-campaign-column { padding:6px; }
  .dbldr-campaign-board-head small { display:none; }
}
@media (max-width:680px) {
  .dbldr-campaign-board { width:calc(100% - 20px); overflow-x:auto; }
  .dbldr-campaign-columns { min-width:680px; }
  .dbldr-campaign-board-head { min-width:680px; }
}

/* ===== Design hybrid expansion — covers, carousel, references (2026-07-30) ===== */
.dsgn-reference-shortcut {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding:13px 16px;
  border:1px dashed color-mix(in srgb,var(--accent) 44%,var(--line));
  border-radius:15px;
  background:var(--card);
}
.dsgn-reference-shortcut-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--inset); color:var(--accent); }
.dsgn-reference-shortcut-copy { display:grid; gap:3px; }
.dsgn-reference-shortcut-ey { color:var(--accent); font:8.5px/1 var(--rd-font-mono); letter-spacing:.14em; }
.dsgn-reference-shortcut b { color:var(--ink); font-size:13px; }
.dsgn-reference-shortcut small { color:var(--ink-faint); font-size:10.5px; line-height:1.45; }
.dsgn-reference-shortcut > button {
  min-height:40px;
  padding:0 15px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  cursor:pointer;
  font:650 10.5px var(--rd-font-sans);
  white-space:nowrap;
}
.dsgn-reference-shortcut > button:hover { transform:translateY(-1px); }

.dbrief-reference-section { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--card)),var(--card)); }
.dbrief-reference-row { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:14px; align-items:stretch; }
.dbrief-reference-upload { width:100%; min-height:112px; }
.dbrief-reference-focus { display:grid; align-content:start; gap:9px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--inset); }
.dbrief-focus-chips { display:flex; flex-wrap:wrap; gap:7px; }
.dbrief-focus-chips button { min-height:31px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-dim); cursor:pointer; font:9.5px var(--rd-font-sans); }
.dbrief-focus-chips button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.dbrief-focus-chips button:disabled { opacity:.36; cursor:not-allowed; }

.dbrief-source-textarea { min-height:180px !important; }
.dbrief-outline-section { overflow:hidden; }
.dbrief-outline-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 12px; }
.dbrief-outline-toolbar span { color:var(--ink-faint); font:9px var(--rd-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.dbrief-outline-toolbar button { min-height:32px; padding:0 11px; border:1px solid var(--line); border-radius:999px; background:var(--inset); color:var(--ink); cursor:pointer; font:9.5px var(--rd-font-sans); }
.dbrief-outline-list { display:grid; gap:9px; }
.dbrief-outline-card { display:grid; grid-template-columns:38px minmax(110px,.55fr) minmax(160px,1fr) minmax(220px,1.4fr); gap:9px; align-items:start; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--inset); }
.dbrief-outline-index { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--card); color:var(--accent); font:9px var(--rd-font-mono); }
.dbrief-outline-card label { display:grid; gap:5px; }
.dbrief-outline-card label > span { color:var(--ink-faint); font:8px var(--rd-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.dbrief-outline-card input,.dbrief-outline-card textarea { width:100%; box-sizing:border-box; padding:8px 9px; border:1px solid var(--line); border-radius:8px; outline:none; background:var(--card); color:var(--ink); font:10.5px/1.4 var(--rd-font-sans); }
.dbrief-outline-card textarea { min-height:56px; resize:vertical; }
.dbrief-outline-card input:focus,.dbrief-outline-card textarea:focus { border-color:var(--accent); }

.dbrief-shell--covers .dbrief-section-head > span { background:var(--accent-soft); color:var(--accent); }
.dbrief-shell--carousel .dbrief-section-head > span { background:color-mix(in srgb,#b88758 15%,var(--inset)); color:#b88758; }
.dbrief-shell--carousel .dbrief-layout { grid-template-columns:minmax(0,1fr) 330px; }
.dbrief-shell--carousel .dbrief-form { min-width:0; }

@media (max-width:1100px) {
  .dbrief-shell--carousel .dbrief-layout { grid-template-columns:1fr; }
  .dbrief-outline-card { grid-template-columns:38px minmax(120px,.7fr) minmax(170px,1fr); }
  .dbrief-outline-card .wide { grid-column:2 / -1; }
}
@media (max-width:820px) {
  .dsgn-reference-shortcut { grid-template-columns:42px minmax(0,1fr); }
  .dsgn-reference-shortcut > button { grid-column:1 / -1; }
  .dsgn-reference-shortcut > button { width:100%; }
  .dbrief-reference-row { grid-template-columns:1fr; }
  .dbrief-outline-card { grid-template-columns:34px 1fr; }
  .dbrief-outline-card label,.dbrief-outline-card .wide { grid-column:2; }
}
@media (max-width:560px) {
  .dbrief-outline-card { grid-template-columns:1fr; }
  .dbrief-outline-index,.dbrief-outline-card label,.dbrief-outline-card .wide { grid-column:1; }
}
.dbrief-reference-asset { display:grid; gap:7px; align-content:start; }
.dbrief-reference-remove { justify-self:start; min-height:29px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink-faint); cursor:pointer; font:9px var(--rd-font-sans); }
.dbrief-reference-remove:hover { border-color:var(--accent); color:var(--accent); }

/* =====================================================================
   DESIGN VISUAL-BUDGET PASS — 2026-07-31
   Each step now spends imagery according to its job: category screens use
   one recognisable signature; Collection screens hold the visual climax.
   ===================================================================== */

/* Homepage Design: one Social hero proves the system; ratio tokens explain
   the extension without repeating four complete artworks under the hero fan. */
.djc-hero-bot { transform:none; }
.djc-social-signature {
  position:relative;
  display:grid;
  grid-template-columns:minmax(150px,210px) minmax(92px,1fr);
  gap:18px;
  align-items:end;
  min-height:226px;
  margin:4px 0 14px;
}
.djc-social-signature::after {
  content:"";
  position:absolute;
  left:17%; right:3%; bottom:12%; height:42%;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  filter:blur(28px);
  z-index:0;
}
.djc-social-signature-hero {
  position:relative;
  z-index:2;
  width:min(100%,190px);
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--accent-line);
  border-radius:12px;
  box-shadow:0 26px 44px -28px rgba(25,17,10,.78);
}
.djc-social-signature-hero img { width:100%; height:100%; display:block; object-fit:cover; }
.djc-social-signature-formats {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-self:center;
}
.djc-social-signature-formats span {
  min-height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:color-mix(in srgb,var(--card) 86%,transparent);
  color:var(--ink-dim);
  font:10px/1 var(--rd-font-mono);
  letter-spacing:.08em;
}
.djc-social-signature-formats span:nth-child(1) { aspect-ratio:4/5; min-height:62px; }
.djc-social-signature-formats span:nth-child(2) { aspect-ratio:1/1; }
.djc-social-signature-formats span:nth-child(3) { aspect-ratio:9/16; justify-self:center; min-height:64px; }
.djc-social-signature-formats span:nth-child(4) { aspect-ratio:16/9; align-self:center; }
.m-social-signature {
  display:grid;
  grid-template-columns:minmax(110px,145px) 1fr;
  gap:14px;
  align-items:center;
  margin:18px 0 12px;
}
.m-social-signature > img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border:1px solid var(--accent-line); border-radius:11px;
}
.m-social-signature-formats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.m-social-signature-formats span {
  min-height:38px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:8px; background:var(--inset); color:var(--ink-dim);
  font:9px var(--rd-font-mono);
}

/* Task selector: visual signatures, not four mini portfolios. */
.dsgn-dash-card { min-height:178px; }
.dsgn-dash-preview { min-height:136px; opacity:.82; }
.dsgn-dash-preview::after { inset:32% 9% 5%; opacity:.34; }
.dsgn-dash-signature-hero,
.dsgn-dash-cover-frame {
  position:absolute;
  display:block;
  overflow:hidden;
  border:1px solid color-mix(in srgb,#fff 45%,var(--line));
  border-radius:11px;
  background:var(--inset);
  box-shadow:0 18px 32px -22px rgba(24,16,9,.74);
}
.dsgn-dash-signature-hero img,
.dsgn-dash-cover-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.dsgn-dash-preview--social .dsgn-dash-signature-hero { width:94px; right:68px; top:0; }
.dsgn-dash-ratio-rail {
  position:absolute; right:0; top:20px; bottom:14px; width:56px;
  display:grid; grid-template-rows:repeat(4,1fr); gap:5px;
}
.dsgn-dash-ratio-rail i {
  display:grid; place-items:center; border:1px solid var(--line); border-radius:7px;
  background:var(--card); color:var(--ink-faint); font:8px var(--rd-font-mono); font-style:normal;
}
.dsgn-dash-signature-hero--launch { width:104px; right:64px; top:4px; }
.dsgn-dash-launch-steps {
  position:absolute; left:2px; right:0; bottom:3px; display:flex; align-items:center; gap:6px;
}
.dsgn-dash-launch-steps::before {
  content:""; position:absolute; left:12px; right:10px; top:50%; height:1px; background:var(--line-2);
}
.dsgn-dash-launch-steps i {
  position:relative; z-index:1; width:24px; height:24px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; background:var(--card);
  color:var(--accent); font:8px var(--rd-font-mono); font-style:normal;
}
.dsgn-dash-cover-frame { width:224px; right:0; top:27px; }
.dsgn-dash-preview--covers .dsgn-dash-cover-frame img { object-position:center center; transform:scale(1.14); transform-origin:center center; }
.dsgn-dash-cover-frame i {
  position:absolute; left:7px; bottom:7px; padding:3px 6px; border-radius:5px;
  background:rgba(12,9,6,.62); color:#fff; font:8px var(--rd-font-mono); font-style:normal;
}
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame { width:76px; top:20px; }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--1 { left:14px; transform:rotate(-5deg); }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--2 { left:82px; top:8px; z-index:3; transform:rotate(0); }
.dsgn-dash-preview--carousel .dsgn-dash-preview-frame--3 { left:150px; transform:rotate(5deg); }

/* Start-method screen: Collection is one authored promise, not a mini gallery. */
.dsgn-path-preview { min-height:250px; }
.dsgn-path-preview .dsgn-path-preview-frame--4 { display:none; }
/* Lift the complete Social fan slightly while preserving its current scale. */
.dsgn-path-preview--social .dsgn-path-preview-frame--1 {
  left:13%; top:10%; bottom:auto; right:auto; width:19%; z-index:1;
  opacity:.84; transform:rotate(-7deg);
}
.dsgn-path-preview--social .dsgn-path-preview-frame--2 {
  left:50%; top:-8px; bottom:auto; right:auto; width:38%; z-index:4;
  transform:translateX(-50%) rotate(.35deg);
}
.dsgn-path-preview--social .dsgn-path-preview-frame--3 {
  right:13%; left:auto; top:10%; bottom:auto; width:19%; z-index:2;
  opacity:.84; transform:rotate(7deg);
}
/* Product launch mirrors the authored Social fan: MONUMENT left, SIGNAL hero
   in the centre, PROTOCOL right. The complete fan is lifted and scaled down
   slightly so the three 4:5 cards breathe more evenly inside the preview. */
.dsgn-path-preview--launch::before { content:none; }
.dsgn-path-preview--launch .dsgn-path-preview-frame--1 {
  left:12%; top:10%; bottom:auto; right:auto; width:24%; z-index:1;
  opacity:.9; transform:rotate(-6deg);
}
.dsgn-path-preview--launch .dsgn-path-preview-frame--2 {
  left:50%; top:-8px; bottom:auto; right:auto; width:35%; z-index:4;
  opacity:1; transform:translateX(-50%) rotate(.35deg);
}
.dsgn-path-preview--launch .dsgn-path-preview-frame--3 {
  right:12%; left:auto; top:10%; bottom:auto; width:24%; z-index:2;
  opacity:.9; transform:rotate(6deg);
}

/* Lift the complete cover stack and keep the rotated lower-left border/shadow
   visible instead of clipping it at the preview edge. */
.dsgn-path-preview--covers { overflow:visible; min-height:278px; }
.dsgn-path-preview--covers .dsgn-path-preview-frame { width:min(70%,410px); }
.dsgn-path-preview--covers .dsgn-path-preview-frame--1 { right:0; left:auto; top:-6px; z-index:4; opacity:1; transform:rotate(.5deg); }
.dsgn-path-preview--covers .dsgn-path-preview-frame--2 { left:10%; top:20px; z-index:2; opacity:.84; transform:rotate(-1.2deg); }
.dsgn-path-preview--covers .dsgn-path-preview-frame--3 { left:2%; top:46px; z-index:1; opacity:.66; transform:rotate(-2deg); }
/* Editorial Carousel: lift the three-card folio and remove the decorative
   dashed guide so the artwork remains the only visual focus. */
.dsgn-path-preview--carousel::before { content:none; }
.dsgn-path-preview--carousel .dsgn-path-preview-frame { width:29%; top:10%; }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--1 { left:6%; transform:rotate(-4deg); }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--2 { left:35.5%; top:2%; z-index:3; transform:rotate(0); }
.dsgn-path-preview--carousel .dsgn-path-preview-frame--3 { left:auto; right:6%; transform:rotate(4deg); }

/* Collection detail is now a proof system: one hero and three default proofs.
   The complete gallery remains available only after an explicit request. */
.mon-proof-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.mon-proof-cell { min-height:0; aspect-ratio:4/5; }
.mon-proof-cell--hero { grid-column:1 / -1; aspect-ratio:16/10; }
.mon-proof-cell img { width:100%; height:100%; display:block; object-fit:cover; }
.mon-proof-role {
  position:absolute; left:9px; bottom:9px; z-index:4; min-height:24px; display:inline-flex;
  align-items:center; padding:0 8px; border-radius:999px; background:rgba(16,12,9,.72);
  color:#fff; backdrop-filter:blur(7px); font:8px/1 var(--rd-font-mono); letter-spacing:.06em;
  text-transform:uppercase;
}
.mon-proof-gallery.is-expanded { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mon-proof-gallery.is-expanded .mon-proof-cell--hero { grid-column:1 / -1; }
.mon-proof-gallery.is-expanded .mon-proof-cell:not(.mon-proof-cell--hero) { aspect-ratio:4/5; }
.mon-more-examples {
  width:100%; min-height:42px; margin-top:14px; border:1px solid var(--line-2); border-radius:11px;
  background:var(--inset); color:var(--ink-dim); cursor:pointer; font:650 11px var(--rd-font-sans);
}
.mon-more-examples:hover { border-color:var(--accent-line); color:var(--ink); }

@media (max-width:900px) {
  .djc-social-signature { grid-template-columns:minmax(130px,175px) minmax(90px,150px); justify-content:start; }
}
@media (max-width:760px) {
  .mon-proof-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mon-proof-cell--hero { grid-column:1 / -1; }
  .mon-proof-cell:last-child { grid-column:1 / -1; aspect-ratio:16/10; }
}
@media (max-width:640px) {
  .dsgn-dash-preview--social .dsgn-dash-signature-hero { right:74px; }
  .dsgn-dash-cover-frame { width:min(100%,250px); }
  .dsgn-path-preview--social .dsgn-path-preview-frame--1,
  .dsgn-path-preview--social .dsgn-path-preview-frame--3 { width:40%; }
  .dsgn-path-preview--launch .dsgn-path-preview-frame--1 { left:8%; width:26%; }
  .dsgn-path-preview--launch .dsgn-path-preview-frame--2 { width:38%; }
  .dsgn-path-preview--launch .dsgn-path-preview-frame--3 { right:8%; width:26%; }
  .dsgn-path-preview--covers { min-height:238px; }
  .dsgn-path-preview--covers .dsgn-path-preview-frame { width:min(72%,360px); }
  .dsgn-path-preview--covers .dsgn-path-preview-frame--1 { top:-2px; }
  .dsgn-path-preview--covers .dsgn-path-preview-frame--2 { top:20px; }
  .dsgn-path-preview--covers .dsgn-path-preview-frame--3 { top:42px; }
  .stho-dcard-body { width:calc(100% - 32px); }
}
@media (max-width:520px) {
  .djc-social-signature { grid-template-columns:120px 1fr; min-height:176px; }
  .djc-social-signature-formats span { min-height:36px; }
  .mon-proof-gallery,.mon-proof-gallery.is-expanded { grid-template-columns:1fr; }
  .mon-proof-cell--hero,.mon-proof-cell:last-child { grid-column:1; aspect-ratio:4/5; }
  .m-dbody { width:calc(100% - 28px); }
}

/* =====================================================================
   HOMEPAGE DESIGN SYSTEM REBUILD — v20.169
   One coherent hero explains "one direction → multiple formats". The four
   jobs below share one balanced 2×2 rhythm and spend one strong image each.
   ===================================================================== */
.rd-cat-section--thietke .dsg-home-system {
  position:relative;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
}
.rd-cat-section--thietke .dsg-home-system::before { display:none; }
.dsg-home-system .cat-banner--design {
  min-height:360px;
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr);
  align-items:center;
  gap:clamp(34px,4vw,76px);
  padding:8px 4px 30px;
  overflow:visible;
}
.dsg-home-system .cat-banner--design .cat-banner-text {
  max-width:470px;
  gap:11px;
}
.dsg-home-eyebrow {
  font:10px/1.2 var(--rd-font-mono);
  letter-spacing:.24em;
  color:var(--accent);
  text-transform:uppercase;
  margin-bottom:4px;
}
.dsg-home-system .cat-banner-title {
  font-size:clamp(66px,7vw,108px);
  line-height:.92;
  letter-spacing:-.055em;
}
.dsg-home-system .cat-banner-desc {
  max-width:420px;
  color:var(--ink-dim);
  font-size:15px;
  line-height:1.55;
}
.dsg-home-system .dsg-home-fan-copy {
  max-width:430px;
  margin-top:2px;
  font-size:13px;
  line-height:1.55;
}
.dsg-home-system .dsg-home-ctas { margin-top:22px; }
.dsg-home-system .dsg-home-ctas .rd-btn { min-width:176px; }

/* Coherent multi-format diagram: every output comes from the EDITO family. */
.dsg-home-system .dsg-home-fan {
  width:min(100%,720px);
  height:330px;
  margin-left:auto;
  pointer-events:none;
}
.dsg-home-system .dsg-home-fan-aura {
  left:3%; right:0; top:0; bottom:2%;
  opacity:.46;
  background:
    radial-gradient(circle at 33% 48%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 43%),
    radial-gradient(circle at 78% 55%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 54%);
}
.dsg-home-system .dsg-home-fan-line {
  left:29%;
  right:3%;
  top:36%;
  bottom:auto;
  height:126px;
  z-index:1;
}
.dsg-home-system .dsg-fan-curve {
  stroke:color-mix(in srgb,var(--accent) 44%,transparent);
  stroke-dasharray:3 8;
}
.dsg-home-system .dsg-home-fan-cards {
  position:absolute;
  inset:0;
  display:block;
  perspective:none;
  pointer-events:auto;
}
.dsg-home-system .dsg-home-fan-card {
  position:absolute;
  border-radius:13px;
  transform:none;
  transform-origin:center;
  box-shadow:0 24px 48px -25px rgba(26,17,10,.72),0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent);
  z-index:3;
}
.dsg-home-system .dsg-home-fan-card--1 {
  left:2%; top:8%;
  width:186px; height:233px;
  z-index:5;
}
.dsg-home-system .dsg-home-fan-card--4 {
  right:0; top:3%;
  width:248px; height:140px;
  z-index:4;
}
.dsg-home-system .dsg-home-fan-card--3 {
  right:36%; bottom:2%;
  width:92px; height:164px;
  z-index:4;
}
.dsg-home-system .dsg-home-fan-card--2 {
  right:5%; bottom:2%;
  width:150px; height:150px;
  z-index:4;
}
.dsg-home-system .cat-banner--design:hover .dsg-home-fan-card--1,
.dsg-home-system .cat-banner--design:hover .dsg-home-fan-card--2,
.dsg-home-system .cat-banner--design:hover .dsg-home-fan-card--3,
.dsg-home-system .cat-banner--design:hover .dsg-home-fan-card--4 { transform:none; }
.dsg-home-system .dsg-home-fan-card:hover {
  transform:translateY(-7px) scale(1.015) !important;
  z-index:7;
}
.dsg-home-system .dsg-home-fan-caption {
  left:49%;
  top:48%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%);
  display:grid;
  justify-items:center;
  gap:3px;
  padding:11px 14px;
  border:1px solid var(--accent-line);
  border-radius:14px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  box-shadow:0 14px 30px -24px rgba(24,15,8,.7);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--accent);
  line-height:1.25;
  z-index:6;
}
.dsg-home-system .dsg-home-fan-caption i { margin-bottom:2px; }
.dsg-home-system .dsg-home-fan-caption b { display:none; }

/* Four equal destinations; each card gets one visual signature. */
.dsg-home-system .djc-layout--system {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:6px;
  align-items:stretch;
}
.djc-system-card {
  appearance:none;
  position:relative;
  min-height:178px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,43%);
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--card) 96%,transparent);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:transform .28s var(--rd-ease),border-color .28s var(--rd-ease),box-shadow .28s var(--rd-ease);
}
.djc-system-card:hover,
.djc-system-card:focus-visible {
  transform:translateY(-3px);
  border-color:var(--accent-line);
  box-shadow:0 22px 42px -30px rgba(38,24,13,.62);
}
.djc-system-card:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);
  outline-offset:3px;
}
.djc-system-card-copy {
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:24px 18px 23px 28px;
}
.djc-system-card-title {
  margin-top:8px;
  color:var(--ink);
  font:760 clamp(19px,1.5vw,25px)/1.08 var(--rd-font-serif);
  letter-spacing:-.03em;
}
.djc-system-card-desc {
  max-width:310px;
  margin-top:8px;
  color:var(--ink-dim);
  font-size:12.5px;
  line-height:1.48;
}
.djc-system-card-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:17px;
  color:var(--accent);
  font:10px/1 var(--rd-font-mono);
  letter-spacing:.11em;
}
.djc-system-card-visual {
  position:relative;
  display:block;
  min-width:0;
  height:100%;
  overflow:hidden;
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  background:var(--inset);
}
.djc-system-card-visual::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--card) 24%,transparent),transparent 34%);
  pointer-events:none;
}
.djc-system-card-visual img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s var(--rd-ease),filter .35s ease;
}
.djc-system-card:hover .djc-system-card-visual img { transform:scale(1.035); filter:saturate(1.04); }

/* Studio promo cards on the homepage return to image-first typography: title only. */
.stho-dcard-body--title-only {
  left:18px;
  right:18px;
  bottom:17px;
  width:auto !important;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.stho-dcard-body--title-only .stho-dcard-title {
  margin:0;
  max-width:92%;
  color:#f8eddb;
  font-size:clamp(20px,1.6vw,28px);
  line-height:1.02;
  text-shadow:0 2px 16px rgba(0,0,0,.72),0 1px 2px rgba(0,0,0,.9);
}
.stho-dcard .stho-dcard-vignette {
  background:linear-gradient(180deg,rgba(8,6,4,0) 38%,rgba(8,6,4,.08) 60%,rgba(8,6,4,.72) 100%);
}
.m-dbody--title-only { left:15px; right:15px; bottom:14px; }
.m-dbody--title-only h3 {
  color:#f8eddb;
  font-family:var(--rd-font-serif);
  font-size:21px;
  font-weight:650;
  line-height:1.03;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}

/* Mobile Design mirrors the same one-image-per-job hierarchy. */
.m-design-job-grid {
  display:grid;
  gap:11px;
  padding:14px var(--m-pad) 0;
}
.m-design-job-card {
  appearance:none;
  min-height:146px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(118px,42%);
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
  color:var(--ink);
  text-align:left;
}
.m-design-job-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:18px 12px 17px 17px;
  min-width:0;
}
.m-design-job-copy strong {
  margin-top:5px;
  font:750 18px/1.08 var(--rd-font-serif);
  letter-spacing:-.025em;
}
.m-design-job-copy small {
  margin-top:6px;
  color:var(--ink-dim);
  font-size:10.5px;
  line-height:1.38;
}
.m-design-job-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:11px;
  color:var(--accent);
  font:9px var(--rd-font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.m-design-job-visual {
  position:relative;
  height:100%;
  overflow:hidden;
  clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);
}
.m-design-job-visual img { width:100%; height:100%; display:block; object-fit:cover; }

@media (max-width:1180px) {
  .dsg-home-system .cat-banner--design {
    grid-template-columns:minmax(280px,.8fr) minmax(460px,1.2fr);
    gap:28px;
  }
  .dsg-home-system .dsg-home-fan { transform:scale(.9); transform-origin:right center; }
  .djc-system-card { grid-template-columns:minmax(0,1fr) minmax(190px,40%); }
}

@media (max-width:900px) {
  .dsg-home-system .cat-banner--design {
    grid-template-columns:1fr;
    min-height:auto;
    gap:18px;
  }
  .dsg-home-system .cat-banner--design .cat-banner-text { max-width:620px; }
  .dsg-home-system .dsg-home-fan { width:100%; max-width:720px; transform:none; margin:0 auto; }
  .dsg-home-system .djc-layout--system { grid-template-columns:1fr; }
  .djc-system-card { min-height:166px; grid-template-columns:minmax(0,1fr) minmax(230px,42%); }
}

@media (max-width:620px) {
  .rd-cat-section--thietke .dsg-home-system { padding:0; border-radius:0; }
  .dsg-home-system .cat-banner--design { padding-bottom:16px; }
  .dsg-home-system .dsg-home-fan { height:238px; }
  .dsg-home-system .dsg-home-fan-card--1 { width:128px; height:160px; }
  .dsg-home-system .dsg-home-fan-card--4 { width:164px; height:92px; }
  .dsg-home-system .dsg-home-fan-card--3 { right:37%; width:61px; height:108px; }
  .dsg-home-system .dsg-home-fan-card--2 { width:98px; height:98px; }
  .dsg-home-system .dsg-home-fan-caption { left:48%; padding:8px 10px; font-size:8px; }
  .djc-system-card { grid-template-columns:minmax(0,1fr) 38%; min-height:154px; }
  .djc-system-card-copy { padding:19px 10px 18px 18px; }
  .djc-system-card-desc { display:none; }
}

/* =====================================================================
   HOMEPAGE DESIGN SYSTEM POLISH — v20.171
   A subtle section field restores cohesion without recreating a heavy
   nested card. The hero is tighter and all four destination cards share
   one exact rhythm, including the second row.
   ===================================================================== */
.rd-cat-section--thietke .dsg-home-system {
  padding:clamp(24px,2.6vw,38px);
  border:0;
  border-radius:28px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--card) 76%,transparent),
      color-mix(in srgb,var(--card) 56%,transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent),
    0 24px 64px -54px rgba(38,24,13,.48);
  overflow:hidden;
}
.rd-cat-section--thietke .dsg-home-system::before {
  display:block;
  content:"";
  position:absolute;
  inset:-24% 42% 58% -10%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 7%,transparent),transparent 68%);
  filter:blur(30px);
  pointer-events:none;
}
.dsg-home-system .cat-banner--design {
  min-height:316px;
  grid-template-columns:minmax(280px,.82fr) minmax(480px,1.18fr);
  gap:clamp(26px,3.4vw,54px);
  padding:4px 2px 24px;
}
.dsg-home-system .cat-banner--design .cat-banner-text { max-width:450px; }
.dsg-home-system .cat-banner-title {
  font-size:clamp(60px,6vw,92px);
  line-height:.94;
}
.dsg-home-system .cat-banner-desc { max-width:390px; }
.dsg-home-system .dsg-home-ctas { margin-top:18px; }

/* Pull the format family into one readable visual sentence. */
.dsg-home-system .dsg-home-fan {
  width:min(100%,650px);
  height:286px;
}
.dsg-home-system .dsg-home-fan-line {
  left:26%;
  right:2%;
  top:34%;
  height:116px;
}
.dsg-home-system .dsg-home-fan-card--1 {
  left:5%;
  top:7%;
  width:170px;
  height:213px;
}
.dsg-home-system .dsg-home-fan-card--4 {
  right:1%;
  top:3%;
  width:226px;
  height:127px;
}
.dsg-home-system .dsg-home-fan-card--3 {
  right:35%;
  bottom:2%;
  width:82px;
  height:146px;
}
.dsg-home-system .dsg-home-fan-card--2 {
  right:5%;
  bottom:2%;
  width:132px;
  height:132px;
}
.dsg-home-system .dsg-home-fan-caption {
  left:50%;
  top:49%;
  padding:12px 15px;
  background:color-mix(in srgb,var(--card) 92%,transparent);
}

/* Exact equal-height grid: the second row must never grow independently. */
.dsg-home-system .djc-layout--system {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:164px;
  gap:12px;
  margin-top:4px;
  align-items:stretch;
}
.djc-system-card {
  min-height:0;
  height:164px;
  grid-template-columns:minmax(0,1fr) minmax(220px,42%);
  border-radius:17px;
}
.djc-system-card-copy { padding:22px 16px 21px 26px; }
.djc-system-card-title {
  margin-top:7px;
  font-size:clamp(18px,1.38vw,23px);
}
.djc-system-card-desc {
  max-width:290px;
  margin-top:7px;
  font-size:12px;
  line-height:1.42;
}
.djc-system-card-link { margin-top:14px; }
.djc-system-card-visual {
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
}
.djc-system-card-visual::after {
  background:linear-gradient(90deg,color-mix(in srgb,var(--card) 18%,transparent),transparent 28%);
}

/* A lighter social signature balances the dark commercial cards below. */
.djc-system-card--social .djc-system-card-visual img { object-position:50% 45% !important; }

/* Creator cover follows the same full-bleed image treatment as Social. */
.djc-system-card--covers .djc-system-card-visual {
  background:var(--inset);
}
.djc-system-card--covers .djc-system-card-visual > img {
  object-fit:cover;
  object-position:center !important;
}

/* Carousel communicates sequence, not one isolated poster. */
.djc-system-card-sequence {
  position:absolute;
  inset:10px 8px 10px 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.djc-system-card-sequence-frame {
  position:relative;
  width:74px;
  aspect-ratio:4 / 5;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:9px;
  background:#1a1713;
  box-shadow:0 12px 24px -16px rgba(20,12,7,.82),0 0 0 1px rgba(255,255,255,.2);
  transform-origin:50% 100%;
}
.djc-system-card-sequence-frame + .djc-system-card-sequence-frame { margin-left:-10px; }
.djc-system-card-sequence-frame:nth-child(1) { transform:rotate(-4deg) translateY(4px); z-index:1; }
.djc-system-card-sequence-frame:nth-child(2) { transform:translateY(-2px); z-index:3; }
.djc-system-card-sequence-frame:nth-child(3) { transform:rotate(4deg) translateY(4px); z-index:2; }
.djc-system-card-sequence-frame img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.djc-system-card-sequence-frame em {
  position:absolute;
  left:6px;
  top:6px;
  display:grid;
  place-items:center;
  min-width:22px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:rgba(17,14,11,.76);
  color:#f8eddb;
  font:7px/1 var(--rd-font-mono);
  font-style:normal;
  letter-spacing:.05em;
}
.djc-system-card--carousel:hover .djc-system-card-sequence-frame:nth-child(1) { transform:rotate(-6deg) translate(-2px,1px); }
.djc-system-card--carousel:hover .djc-system-card-sequence-frame:nth-child(2) { transform:translateY(-5px); }
.djc-system-card--carousel:hover .djc-system-card-sequence-frame:nth-child(3) { transform:rotate(6deg) translate(2px,1px); }
.djc-system-card-sequence-frame { transition:transform .35s var(--rd-ease); }

@media (max-width:1180px) {
  .dsg-home-system .cat-banner--design {
    grid-template-columns:minmax(270px,.84fr) minmax(430px,1.16fr);
    gap:24px;
  }
  .dsg-home-system .dsg-home-fan {
    transform:scale(.9);
    transform-origin:right center;
  }
  .djc-system-card { grid-template-columns:minmax(0,1fr) minmax(190px,40%); }
}

@media (max-width:900px) {
  .rd-cat-section--thietke .dsg-home-system { padding:24px; }
  .dsg-home-system .cat-banner--design {
    grid-template-columns:1fr;
    min-height:auto;
    gap:14px;
  }
  .dsg-home-system .dsg-home-fan {
    width:100%;
    max-width:650px;
    transform:none;
    margin:0 auto;
  }
  .dsg-home-system .djc-layout--system {
    grid-template-columns:1fr;
    grid-auto-rows:164px;
  }
  .djc-system-card {
    height:164px;
    grid-template-columns:minmax(0,1fr) minmax(230px,42%);
  }
}

@media (max-width:620px) {
  .rd-cat-section--thietke .dsg-home-system {
    padding:16px;
    border-radius:20px;
  }
  .dsg-home-system .dsg-home-fan { height:238px; }
  .dsg-home-system .dsg-home-fan-card--1 { width:128px; height:160px; }
  .dsg-home-system .dsg-home-fan-card--4 { width:164px; height:92px; }
  .dsg-home-system .dsg-home-fan-card--3 { right:37%; width:61px; height:108px; }
  .dsg-home-system .dsg-home-fan-card--2 { width:98px; height:98px; }
  .dsg-home-system .dsg-home-fan-caption { left:48%; padding:8px 10px; font-size:8px; }
  .dsg-home-system .djc-layout--system { grid-auto-rows:154px; }
  .djc-system-card {
    height:154px;
    grid-template-columns:minmax(0,1fr) 40%;
  }
  .djc-system-card-copy { padding:19px 10px 18px 18px; }
  .djc-system-card-desc { display:none; }
  .djc-system-card-sequence-frame { width:58px; }
}

/* =====================================================================
   HOMEPAGE DESIGN SYSTEM POLISH — v20.172
   Clean branch connector + inset media cards. Decorative process icons
   and diagonal crops are removed so the system reads clearly and ages
   better as imagery changes.
   ===================================================================== */
.dsg-home-system .dsg-home-fan-line {
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.dsg-home-system .dsg-fan-svg {
  inset:0;
  width:100%;
  height:100%;
}
.dsg-home-system .dsg-fan-curve {
  fill:none;
  stroke:color-mix(in srgb,var(--accent) 42%,transparent);
  stroke-width:1.35px;
  stroke-dasharray:3 8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.64;
}
.dsg-home-system .dsg-fan-curve--trunk { opacity:.78; }
.dsg-home-system .dsg-fan-node {
  fill:color-mix(in srgb,var(--accent) 76%,var(--card));
  opacity:.88;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 30%,transparent));
}
.dsg-home-system .dsg-home-fan-caption {
  left:49%;
  top:2%;
  right:auto;
  bottom:auto;
  width:max-content;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--accent);
  font-size:8px;
  line-height:1.25;
  letter-spacing:.13em;
  text-align:center;
  pointer-events:none;
}
.dsg-home-system .dsg-home-fan-caption i,
.dsg-home-system .dsg-home-fan-caption b { display:none; }
.dsg-home-system .dsg-home-fan-caption span { display:block; }

/* Inset visual cards: equal anatomy, no decorative diagonal crop. */
.dsg-home-system .djc-system-card {
  grid-template-columns:minmax(0,1fr) minmax(210px,40%);
  gap:12px;
  padding:10px;
}
.dsg-home-system .djc-system-card-copy {
  padding:13px 8px 13px 16px;
}
.dsg-home-system .djc-system-card-visual {
  height:auto;
  min-height:0;
  margin:0;
  clip-path:none;
  border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
  border-radius:13px;
  background:var(--inset);
  box-shadow:0 12px 28px -24px rgba(28,18,11,.72);
}
.dsg-home-system .djc-system-card-visual::after {
  background:linear-gradient(90deg,color-mix(in srgb,var(--card) 8%,transparent),transparent 22%);
}
.dsg-home-system .djc-system-card:hover .djc-system-card-visual img {
  transform:scale(1.025);
}
.dsg-home-system .djc-system-card-sequence {
  inset:8px;
}
.dsg-home-system .djc-system-card-sequence-frame {
  width:76px;
}
.dsg-home-system .djc-system-card-sequence-frame + .djc-system-card-sequence-frame {
  margin-left:-12px;
}

/* Mobile keeps the same inset-image language instead of reintroducing a slash. */
.m-design-job-card {
  gap:8px;
  padding:8px;
}
.m-design-job-copy { padding:12px 8px 12px 11px; }
.m-design-job-visual {
  height:auto;
  clip-path:none;
  border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
  border-radius:11px;
  background:var(--inset);
}

@media (max-width:1180px) {
  .dsg-home-system .djc-system-card {
    grid-template-columns:minmax(0,1fr) minmax(190px,39%);
  }
}

@media (max-width:900px) {
  .dsg-home-system .dsg-home-fan-caption {
    left:48.5%;
    top:1%;
  }
  .dsg-home-system .djc-system-card {
    grid-template-columns:minmax(0,1fr) minmax(220px,40%);
  }
}

@media (max-width:620px) {
  .dsg-home-system .dsg-home-fan-caption {
    left:48%;
    top:0;
    font-size:7px;
  }
  .dsg-home-system .djc-system-card {
    grid-template-columns:minmax(0,1fr) 39%;
    gap:7px;
    padding:8px;
  }
  .dsg-home-system .djc-system-card-copy {
    padding:10px 4px 10px 10px;
  }
  .dsg-home-system .djc-system-card-sequence-frame { width:58px; }
  .dsg-home-system .djc-system-card-sequence-frame + .djc-system-card-sequence-frame { margin-left:-10px; }
}


/* =====================================================================
   HOMEPAGE DESIGN ASSET + INTERACTION TUNING — v20.173
   Locale-aware Social artwork, larger carousel sequence, and shadows that
   appear only on the format card currently being explored.
   ===================================================================== */
.dsg-home-system .dsg-home-fan-card {
  box-shadow:none !important;
  transition:transform .36s var(--rd-ease), box-shadow .28s ease, border-color .28s ease;
}
.dsg-home-system .dsg-home-fan-card:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent),
    0 16px 30px -20px rgba(31,20,12,.32) !important;
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line-2));
}

/* =====================================================================
   EDITORIAL CAROUSEL — REMOVE 01 / 02 / 03 BADGES
   Homepage Design job card + "Choose how to start" SIUU Collection card.
   Keep the three-image sequence itself unchanged; remove only the badges.
   ===================================================================== */
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame em,
.dsgn-path-preview--carousel .dsgn-path-preview-index {
  display:none;
}

/* =====================================================================
   GUIDED BRIEF PANEL — REMOVE EMPTY HEADER / FOOTER BANDS
   Let the four setup rows fill the panel while keeping a small, same-paper
   breathing edge. The panel now reads as one complete cream module instead
   of a recessed tray with two unexplained darker strips.
   ===================================================================== */
.dsgn-path-card--guided .dsgn-guided-diagram {
  align-content:stretch;
  grid-template-rows:repeat(4,minmax(0,1fr));
  padding:8px 0;
  background:color-mix(in srgb,var(--card) 88%,transparent);
}
.dsgn-path-card--guided .dsgn-guided-row {
  min-height:0;
  background:transparent;
}

/* =====================================================================
   GUIDED BRIEF COMPACT HEADER + EDITORIAL CAROUSEL OUTLINE — v20.183
   1) Make the title cluster denser across all four Guided Brief jobs.
   2) Equalize the three destination controls in Editorial Carousel.
   3) Start the outline at four slides; allow manual add/remove up to twelve.
   ===================================================================== */

/* All Guided Brief jobs: remove the unexplained divider and tighten the
   context-to-title transition without flattening the editorial hierarchy. */
.dbrief-topline {
  padding-bottom:10px;
  border-bottom:0;
}
.dbrief-header {
  align-items:center;
  padding:18px 0 20px;
}
.dbrief-header h2 {
  max-width:920px;
  margin-top:7px;
  font-size:clamp(28px,3.25vw,42px);
  line-height:1.04;
  letter-spacing:-.04em;
}
.dbrief-header p {
  max-width:720px;
  margin-top:8px;
  font-size:13px;
  line-height:1.48;
}

/* Editorial Carousel / Step 02: three primary controls now share one visual
   height. The textarea remains editable but no longer makes the whole row
   disproportionately tall. */
.dbrief-section--carousel-destination .dbrief-section-head {
  margin-bottom:14px;
}
.dbrief-section--carousel-destination .dbrief-section-head h3 {
  font-size:16px;
}
.dbrief-section--carousel-destination .dbrief-section-head p {
  margin-top:4px;
}
.dbrief-copy-grid--carousel-destination {
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(220px,.9fr);
  align-items:start;
  gap:9px;
}
.dbrief-copy-grid--carousel-destination .dbrief-field--destination-primary input,
.dbrief-copy-grid--carousel-destination .dbrief-field--destination-primary textarea {
  height:72px;
  min-height:72px !important;
  padding:12px;
}
.dbrief-copy-grid--carousel-destination .dbrief-field--destination-primary textarea {
  resize:none;
  overflow:auto;
}

/* Editable carousel outline. */
.dbrief-outline-card {
  position:relative;
  padding-right:46px;
}
.dbrief-outline-remove {
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  color:var(--ink-faint);
  cursor:pointer;
  font:600 17px/1 var(--rd-font-sans);
  transition:border-color .16s,color .16s,background .16s;
}
.dbrief-outline-remove:hover:not(:disabled) {
  border-color:color-mix(in srgb,#b85f4c 58%,var(--line));
  background:color-mix(in srgb,#b85f4c 7%,var(--card));
  color:#a44f3f;
}
.dbrief-outline-remove:disabled {
  opacity:.28;
  cursor:not-allowed;
}
.dbrief-outline-actions {
  display:grid;
  justify-items:center;
  gap:8px;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--line);
}
.dbrief-outline-add {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 17px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  font:650 11px var(--rd-font-sans);
  box-shadow:var(--btn-mat);
  transition:border-color .16s,background .16s,color .16s,filter .16s;
}
.dbrief-outline-add > span {
  font:500 19px/1 var(--rd-font-sans);
  color:var(--accent);
}
.dbrief-outline-add:hover:not(:disabled) {
  border-color:var(--accent-line);
  background:color-mix(in srgb,var(--accent) 5%,var(--card));
}
.dbrief-outline-add:disabled {
  opacity:.38;
  cursor:not-allowed;
  box-shadow:none;
}
.dbrief-outline-actions small {
  max-width:480px;
  color:var(--ink-faint);
  font-size:9.5px;
  line-height:1.45;
  text-align:center;
}

@media (max-width:980px) {
  .dbrief-copy-grid--carousel-destination {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px) {
  .dbrief-header {
    padding:15px 0 18px;
  }
  .dbrief-header h2 {
    font-size:clamp(27px,8.5vw,36px);
  }
  .dbrief-copy-grid--carousel-destination {
    grid-template-columns:1fr;
  }
  .dbrief-copy-grid--carousel-destination .dbrief-field--destination-primary input,
  .dbrief-copy-grid--carousel-destination .dbrief-field--destination-primary textarea {
    height:60px;
    min-height:60px !important;
  }
}
@media (max-width:560px) {
  .dbrief-outline-card {
    padding-right:42px;
  }
  .dbrief-outline-remove {
    top:9px;
    right:9px;
  }
}

/* =====================================================================
   GUIDED BRIEF — COMPACT INPUT + SUPPORTING ASSETS + MASTER RATIOS
   Keeps the brief calm and short, while carrying optional source images
   into Design Builder as an asset tray instead of placing them on canvas.
   ===================================================================== */
.dbrief-shell { margin-top:-10px; }
.dbrief-topline { padding-bottom:6px; }
.dbrief-header { padding:12px 0 16px; }
.dbrief-header h2 {
  max-width:760px;
  margin-top:5px;
  font-size:clamp(28px,2.8vw,38px);
  line-height:1.02;
}
.dbrief-header p {
  max-width:620px;
  margin-top:6px;
  font-size:12px;
  line-height:1.42;
}
.dbrief-form { gap:10px; }
.dbrief-section { padding:18px; }
.dbrief-section-head {
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
  margin-bottom:12px;
}
.dbrief-section-head > span { width:28px; height:28px; }
.dbrief-section-head h3 { font-size:15px; }
.dbrief-section-head p {
  max-width:760px;
  margin-top:3px;
  font-size:10.5px;
  line-height:1.38;
}
.dbrief-options { gap:7px; }
.dbrief-option { min-height:52px; padding:10px 11px; }
.dbrief-option b { font-size:11px; }
.dbrief-option span { margin-top:3px; font-size:9.5px; line-height:1.3; }
.dbrief-subject-row { margin-top:10px; }

.dbrief-supporting { margin-top:9px; }
.dbrief-supporting-toggle {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
}
.dbrief-supporting-toggle > span {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:7px;
  background:var(--inset);
  color:var(--accent);
  font:500 16px/1 var(--rd-font-sans);
}
.dbrief-supporting-toggle > div { display:grid; gap:2px; }
.dbrief-supporting-toggle b { font-size:10.5px; }
.dbrief-supporting-toggle small { color:var(--ink-faint); font-size:9px; }
.dbrief-supporting.open .dbrief-supporting-toggle {
  border-color:var(--line-2);
  border-radius:11px 11px 0 0;
  background:color-mix(in srgb,var(--inset) 55%,transparent);
}
.dbrief-supporting-panel {
  padding:11px;
  border:1px solid var(--line-2);
  border-top:0;
  border-radius:0 0 11px 11px;
  background:var(--inset);
}
.dbrief-supporting-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(72px,112px));
  gap:8px;
  align-items:stretch;
}
.dbrief-supporting-item,
.dbrief-supporting-add {
  position:relative;
  min-width:0;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
}
.dbrief-supporting-item > img { width:100%; height:100%; display:block; object-fit:cover; }
.dbrief-supporting-item > div {
  position:absolute;
  inset:auto 5px 5px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  gap:4px;
  opacity:0;
  transition:opacity .16s ease;
}
.dbrief-supporting-item:hover > div { opacity:1; }
.dbrief-supporting-item button {
  min-height:24px;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:6px;
  background:rgba(18,14,11,.76);
  color:#fff;
  cursor:pointer;
  font:8px var(--rd-font-sans);
}
.dbrief-supporting-add {
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  cursor:pointer;
  color:var(--ink-dim);
}
.dbrief-supporting-add > span { color:var(--accent); font:400 22px/1 var(--rd-font-sans); }
.dbrief-supporting-add > b { font-size:9px; }
.dbrief-supporting-panel > p {
  margin:8px 0 0;
  color:var(--ink-faint);
  font-size:9.5px;
  line-height:1.4;
}

.dbrief-section--formats .dbrief-formats button { min-height:92px; }
.dbrief-format-guide { margin-top:9px; }
.dbrief-format-guide > button {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink-dim);
  cursor:pointer;
  font:600 9.5px var(--rd-font-sans);
}
.dbrief-format-guide > button > span { color:var(--accent); font-size:15px; }
.dbrief-format-guide > div {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 0 1px;
}
.dbrief-format-guide > div > span {
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--inset);
  color:var(--ink-faint);
  font:8.5px var(--rd-font-mono);
}

/* Builder: optional images from Guided Brief remain visible and reusable,
   but never appear on canvas until the user explicitly promotes one. */
.dbldr-brief-assets {
  display:grid;
  gap:8px;
  margin-top:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--inset);
}
.dbldr-brief-assets-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.dbldr-brief-assets-head > div { display:grid; gap:2px; }
.dbldr-brief-assets-head b { color:var(--ink); font-size:10px; }
.dbldr-brief-assets-head span { color:var(--ink-faint); font-size:8.5px; line-height:1.35; }
.dbldr-brief-assets-head small { color:var(--ink-faint); font:8px var(--rd-font-mono); }
.dbldr-brief-assets-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.dbldr-brief-asset,
.dbldr-brief-asset-add {
  position:relative;
  min-width:0;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
}
.dbldr-brief-asset-main {
  width:100%;
  height:100%;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.dbldr-brief-asset-main img { width:100%; height:100%; display:block; object-fit:cover; }
.dbldr-brief-asset-main span {
  position:absolute;
  inset:auto 4px 4px;
  min-height:22px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:rgba(18,14,11,.76);
  color:#fff;
  opacity:0;
  font:8px var(--rd-font-sans);
  transition:opacity .16s ease;
}
.dbldr-brief-asset:hover .dbldr-brief-asset-main span { opacity:1; }
.dbldr-brief-asset-remove {
  position:absolute;
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:6px;
  background:rgba(18,14,11,.68);
  color:#fff;
  cursor:pointer;
  font:13px/1 var(--rd-font-sans);
}
.dbldr-brief-asset-add {
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  color:var(--ink-dim);
  cursor:pointer;
}
.dbldr-brief-asset-add span { color:var(--accent); font-size:18px; line-height:1; }
.dbldr-brief-asset-add b { font-size:8.5px; }

@media (max-width:760px) {
  .dbrief-header { padding:10px 0 14px; }
  .dbrief-header h2 { font-size:clamp(26px,8vw,34px); }
  .dbrief-section { padding:15px; }
  .dbrief-supporting-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .dbrief-supporting-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dbrief-formats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* =====================================================================
   DESIGN DASHBOARD — JOB-SPECIFIC PREVIEWS
   Applies only after clicking "Bắt đầu thiết kế". Homepage is untouched.
   ===================================================================== */

/* Collection card polish requested in the same pass: lower the two side
   Product / Brand Launch frames slightly while keeping SIGNAL as the hero. */
.dsgn-path-preview--launch .dsgn-path-preview-frame--1,
.dsgn-path-preview--launch .dsgn-path-preview-frame--3 {
  top:14%;
}

/* Shared stage for the four dashboard task cards. */
.dsgn-dash-card {
  grid-template-columns:minmax(0,1fr) minmax(238px,286px);
}
.dsgn-dash-preview {
  min-height:142px;
  opacity:.9;
  transform:none;
  overflow:visible;
}
.dsgn-dash-card:hover .dsgn-dash-preview,
.dsgn-dash-card:focus-visible .dsgn-dash-preview {
  opacity:1;
  transform:none;
}
.dsgn-dash-preview::after {
  inset:26% 5% 4%;
  opacity:.28;
}
.dsgn-dash-social-frame,
.dsgn-dash-launch-frame,
.dsgn-dash-cover-card,
.dsgn-dash-carousel-frame {
  position:absolute;
  display:block;
  overflow:hidden;
  border:1px solid color-mix(in srgb,#fff 46%,var(--line));
  background:var(--inset);
  box-shadow:0 15px 28px -22px rgba(24,16,9,.72);
  transition:transform .42s var(--rd-ease), box-shadow .32s ease, opacity .28s ease, filter .28s ease;
}
.dsgn-dash-social-frame img,
.dsgn-dash-launch-frame img,
.dsgn-dash-cover-card img,
.dsgn-dash-carousel-frame img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .42s var(--rd-ease), filter .28s ease;
}
.dsgn-dash-card:hover img,
.dsgn-dash-card:focus-visible img {
  filter:saturate(1.035) brightness(1.01);
}

/* SOCIAL — one campaign expands into four native formats. */
.dsgn-dash-preview--social .dsgn-dash-social-frame { border-radius:10px; }
.dsgn-dash-social-frame--1 {
  left:76px;
  top:4px;
  width:94px;
  z-index:4;
  transform:rotate(-.6deg);
}
.dsgn-dash-social-frame--2 {
  left:20px;
  top:31px;
  width:50px;
  z-index:2;
  opacity:.84;
  transform:rotate(-7deg);
}
.dsgn-dash-social-frame--3 {
  right:20px;
  top:29px;
  width:58px;
  z-index:3;
  opacity:.86;
  transform:rotate(6deg);
}
.dsgn-dash-social-frame--4 {
  right:0;
  bottom:4px;
  width:102px;
  z-index:5;
  opacity:.94;
  transform:rotate(1.2deg);
}
.dsgn-dash-social-frame i {
  position:absolute;
  right:5px;
  bottom:5px;
  padding:3px 5px;
  border-radius:5px;
  background:rgba(14,11,8,.68);
  color:#fff7e9;
  font:7px/1 var(--rd-font-mono);
  font-style:normal;
  letter-spacing:.04em;
}
.dsgn-dash-card:hover .dsgn-dash-social-frame--1,
.dsgn-dash-card:focus-visible .dsgn-dash-social-frame--1 {
  transform:rotate(-1.5deg) translateY(-7px) scale(1.02);
  box-shadow:0 24px 36px -24px rgba(24,16,9,.78);
}
.dsgn-dash-card:hover .dsgn-dash-social-frame--2,
.dsgn-dash-card:focus-visible .dsgn-dash-social-frame--2 {
  transform:rotate(-10deg) translate(-8px,4px);
}
.dsgn-dash-card:hover .dsgn-dash-social-frame--3,
.dsgn-dash-card:focus-visible .dsgn-dash-social-frame--3 {
  transform:rotate(9deg) translate(8px,-2px);
}
.dsgn-dash-card:hover .dsgn-dash-social-frame--4,
.dsgn-dash-card:focus-visible .dsgn-dash-social-frame--4 {
  transform:rotate(2deg) translate(5px,5px);
}

/* LAUNCH — MONUMENT / SIGNAL / PROTOCOL fan. No 01–04 markers. */
.dsgn-dash-preview--launch .dsgn-dash-launch-frame {
  top:16px;
  width:82px;
  border-radius:11px;
  transform-origin:50% 100%;
}
.dsgn-dash-launch-frame--1 {
  left:24px;
  z-index:1;
  opacity:.86;
  transform:rotate(-8deg) translateY(18px);
}
.dsgn-dash-launch-frame--2 {
  left:50%;
  z-index:4;
  width:96px !important;
  transform:translateX(-50%) rotate(.3deg);
}
.dsgn-dash-launch-frame--3 {
  right:22px;
  z-index:2;
  opacity:.86;
  transform:rotate(8deg) translateY(18px);
}
.dsgn-dash-card:hover .dsgn-dash-launch-frame--1,
.dsgn-dash-card:focus-visible .dsgn-dash-launch-frame--1 {
  transform:rotate(-13deg) translate(-10px,22px);
}
.dsgn-dash-card:hover .dsgn-dash-launch-frame--2,
.dsgn-dash-card:focus-visible .dsgn-dash-launch-frame--2 {
  transform:translateX(-50%) rotate(.3deg) translateY(-7px) scale(1.025);
  box-shadow:0 25px 38px -24px rgba(24,16,9,.8);
}
.dsgn-dash-card:hover .dsgn-dash-launch-frame--3,
.dsgn-dash-card:focus-visible .dsgn-dash-launch-frame--3 {
  transform:rotate(13deg) translate(10px,22px);
}

/* COVERS — a thumbnail deck that spreads horizontally on hover. */
.dsgn-dash-preview--covers .dsgn-dash-cover-card {
  width:190px;
  right:4px;
  border-radius:10px;
  transform-origin:100% 50%;
}
.dsgn-dash-cover-card--1 {
  top:10px;
  z-index:1;
  opacity:.58;
  transform:translate(-38px,19px) rotate(-3.5deg) scale(.91);
}
.dsgn-dash-cover-card--2 {
  top:22px;
  z-index:2;
  opacity:.78;
  transform:translate(-19px,8px) rotate(-1.6deg) scale(.96);
}
.dsgn-dash-cover-card--3 {
  top:33px;
  z-index:4;
  transform:rotate(.5deg);
}
.dsgn-dash-cover-platforms {
  position:absolute;
  left:8px;
  top:4px;
  z-index:6;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  color:var(--ink-faint);
  font:7.5px/1 var(--rd-font-mono);
  letter-spacing:.08em;
  transition:transform .36s var(--rd-ease), opacity .28s ease;
}
.dsgn-dash-card:hover .dsgn-dash-cover-card--1,
.dsgn-dash-card:focus-visible .dsgn-dash-cover-card--1 {
  opacity:.88;
  transform:translate(-58px,2px) rotate(-6deg) scale(.91);
}
.dsgn-dash-card:hover .dsgn-dash-cover-card--2,
.dsgn-dash-card:focus-visible .dsgn-dash-cover-card--2 {
  opacity:.94;
  transform:translate(-25px,-3px) rotate(-2deg) scale(.96);
}
.dsgn-dash-card:hover .dsgn-dash-cover-card--3,
.dsgn-dash-card:focus-visible .dsgn-dash-cover-card--3 {
  transform:translate(5px,4px) rotate(1deg);
  box-shadow:0 24px 36px -24px rgba(24,16,9,.8);
}
.dsgn-dash-card:hover .dsgn-dash-cover-platforms,
.dsgn-dash-card:focus-visible .dsgn-dash-cover-platforms {
  transform:translateY(-3px);
}

/* CAROUSEL — a reading sequence opens like a small editorial folio. */
.dsgn-dash-preview--carousel .dsgn-dash-carousel-frame {
  top:20px;
  width:64px;
  border-radius:9px;
  transform-origin:50% 100%;
}
.dsgn-dash-carousel-frame--1 { left:8px; z-index:1; transform:rotate(-8deg) translateY(11px); }
.dsgn-dash-carousel-frame--2 { left:68px; z-index:3; transform:rotate(-2.5deg); }
.dsgn-dash-carousel-frame--3 { left:128px; z-index:4; transform:rotate(2.5deg); }
.dsgn-dash-carousel-frame--4 { left:188px; z-index:2; transform:rotate(8deg) translateY(11px); }
.dsgn-dash-carousel-frame i {
  position:absolute;
  top:5px;
  left:5px;
  min-width:18px;
  height:15px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(12,9,6,.67);
  color:#fff7e9;
  font:7px/1 var(--rd-font-mono);
  font-style:normal;
  letter-spacing:.05em;
}
.dsgn-dash-card:hover .dsgn-dash-carousel-frame--1,
.dsgn-dash-card:focus-visible .dsgn-dash-carousel-frame--1 {
  transform:rotate(-13deg) translate(-12px,13px);
}
.dsgn-dash-card:hover .dsgn-dash-carousel-frame--2,
.dsgn-dash-card:focus-visible .dsgn-dash-carousel-frame--2 {
  transform:rotate(-3deg) translate(-4px,-8px);
}
.dsgn-dash-card:hover .dsgn-dash-carousel-frame--3,
.dsgn-dash-card:focus-visible .dsgn-dash-carousel-frame--3 {
  transform:rotate(3deg) translate(4px,-8px);
}
.dsgn-dash-card:hover .dsgn-dash-carousel-frame--4,
.dsgn-dash-card:focus-visible .dsgn-dash-carousel-frame--4 {
  transform:rotate(13deg) translate(12px,13px);
}

@media (max-width:920px) {
  .dsgn-dash-card { grid-template-columns:minmax(0,1fr) minmax(238px,286px); }
}
@media (max-width:640px) {
  .dsgn-dash-card { min-height:290px; }
  .dsgn-dash-preview { max-width:286px; min-height:138px; }
  .dsgn-dash-social-frame--1 { left:78px; }
  .dsgn-dash-launch-frame--1 { left:28px; }
  .dsgn-dash-launch-frame--3 { right:26px; }
  .dsgn-dash-preview--covers .dsgn-dash-cover-card { width:184px; }
}


/* =====================================================================
   v20.188 — SAFE FINAL OVERRIDES
   Repair dashboard preview containment, restore the Product Collection fan,
   remove section-frame shadows, and let selected homepage visuals run full bleed.
   ===================================================================== */

/* 1) DESIGN DASHBOARD: hard containment so preview layers can never enter
      normal document flow or stretch the task cards vertically. */
.dsgn-dash-preview {
  position:relative !important;
  width:286px !important;
  max-width:100% !important;
  height:142px !important;
  min-height:142px !important;
  justify-self:end !important;
  align-self:center !important;
  overflow:visible !important;
  flex:0 0 286px !important;
  /* `paint` containment clips transformed preview frames before they can use
     the card's own padding. Keep the layout boundary but let all four decks
     animate into that safe space. */
  contain:layout style;
}
.dsgn-dash-social-frame,
.dsgn-dash-launch-frame,
.dsgn-dash-cover-card,
.dsgn-dash-carousel-frame {
  position:absolute !important;
  display:block !important;
  margin:0 !important;
  max-width:none !important;
  max-height:none !important;
  box-sizing:border-box !important;
}
.dsgn-dash-social-frame img,
.dsgn-dash-launch-frame img,
.dsgn-dash-cover-card img,
.dsgn-dash-carousel-frame img {
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Two-column dashboard needs enough horizontal room for copy + a 286px visual.
   Below this breakpoint use one wide card per row instead of crushing layers. */
@media (max-width:1120px) {
  .dsgn-dash-cards { grid-template-columns:1fr !important; }
  .dsgn-dash-card {
    min-height:178px !important;
    grid-template-columns:minmax(0,1fr) 286px !important;
  }
}
@media (max-width:640px) {
  .dsgn-dash-card {
    min-height:306px !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto 142px !important;
  }
  .dsgn-dash-preview {
    width:min(286px,100%) !important;
    flex-basis:auto !important;
  }
}

/* 2) PRODUCT / BRAND LAUNCH — SIUU Collection.
      Exact VI/EN hero mapping is supplied by DesignCategoryScreen:
      MONUMENT left, SIGNAL centre, PROTOCOL right. */
.dsgn-path-preview--launch {
  min-height:250px !important;
  overflow:visible !important;
}
.dsgn-path-preview--launch::before { content:none !important; }
.dsgn-path-preview--launch .dsgn-path-preview-frame {
  position:absolute !important;
  bottom:auto !important;
  overflow:hidden !important;
  border-radius:12px !important;
}
.dsgn-path-preview--launch .dsgn-path-preview-frame--1 {
  display:block !important;
  left:12% !important;
  right:auto !important;
  top:14% !important;
  width:24% !important;
  z-index:1 !important;
  opacity:.9 !important;
  transform:rotate(-6deg) !important;
}
.dsgn-path-preview--launch .dsgn-path-preview-frame--2 {
  display:block !important;
  left:50% !important;
  right:auto !important;
  top:-8px !important;
  width:35% !important;
  z-index:4 !important;
  opacity:1 !important;
  transform:translateX(-50%) rotate(.35deg) !important;
}
.dsgn-path-preview--launch .dsgn-path-preview-frame--3 {
  display:block !important;
  right:12% !important;
  left:auto !important;
  top:14% !important;
  width:24% !important;
  z-index:2 !important;
  opacity:.9 !important;
  transform:rotate(6deg) !important;
}
.dsgn-path-preview--launch .dsgn-path-preview-frame--4 { display:none !important; }
.dsgn-path-preview--launch .dsgn-path-preview-index,
.dsgn-path-preview--launch .dsgn-path-preview-label { display:none !important; }

/* 3) HOMEPAGE DESIGN — keep the large cream field, remove elevation. */
.rd-cat-section--thietke .dsg-home-system {
  box-shadow:none !important;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent) !important;
  box-sizing:border-box;
}

/* Social / Launch / Covers use full-bleed artwork against the outer card edge.
   Carousel intentionally keeps its inset folio treatment. */
.dsg-home-system .djc-system-card--social,
.dsg-home-system .djc-system-card--launch,
.dsg-home-system .djc-system-card--covers {
  padding:0 !important;
  gap:0 !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-copy,
.dsg-home-system .djc-system-card--launch .djc-system-card-copy,
.dsg-home-system .djc-system-card--covers .djc-system-card-copy {
  padding:22px 18px 21px 26px !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-visual,
.dsg-home-system .djc-system-card--launch .djc-system-card-visual,
.dsg-home-system .djc-system-card--covers .djc-system-card-visual {
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 16px 16px 0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-visual::after,
.dsg-home-system .djc-system-card--launch .djc-system-card-visual::after,
.dsg-home-system .djc-system-card--covers .djc-system-card-visual::after {
  inset:0 !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-visual > img,
.dsg-home-system .djc-system-card--launch .djc-system-card-visual > img,
.dsg-home-system .djc-system-card--covers .djc-system-card-visual > img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

/* 4) STUDIO contact sheet — brown outer frame stays, shadow goes. */
.stho-lightbox,
.m-lightbox {
  box-shadow:none !important;
}


/* =====================================================================
   v20.189 — PRODUCT FLOW + HOMEPAGE DESIGN PREVIEW CONSISTENCY
   Keep direct Product entries on their job screen and normalize all four
   homepage Design visual frames. The first three use one full-frame image;
   Editorial Carousel keeps a smaller three-card folio inside the same frame.
   ===================================================================== */

/* Undo the earlier full-bleed exception: all four cards now share the exact
   same outer anatomy and visual-frame position/size. */
.dsg-home-system .djc-system-card--social,
.dsg-home-system .djc-system-card--launch,
.dsg-home-system .djc-system-card--covers,
.dsg-home-system .djc-system-card--carousel {
  gap:12px !important;
  padding:10px !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-copy,
.dsg-home-system .djc-system-card--launch .djc-system-card-copy,
.dsg-home-system .djc-system-card--covers .djc-system-card-copy,
.dsg-home-system .djc-system-card--carousel .djc-system-card-copy {
  padding:13px 8px 13px 16px !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-visual,
.dsg-home-system .djc-system-card--launch .djc-system-card-visual,
.dsg-home-system .djc-system-card--covers .djc-system-card-visual,
.dsg-home-system .djc-system-card--carousel .djc-system-card-visual {
  position:relative !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  clip-path:none !important;
  border:1px solid color-mix(in srgb,var(--line) 76%,transparent) !important;
  border-radius:13px !important;
  background:var(--inset) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-visual > img,
.dsg-home-system .djc-system-card--launch .djc-system-card-visual > img,
.dsg-home-system .djc-system-card--covers .djc-system-card-visual > img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:0 !important;
}
.dsg-home-system .djc-system-card--social .djc-system-card-visual > img { object-position:50% 45% !important; }
.dsg-home-system .djc-system-card--launch .djc-system-card-visual > img { object-position:55% 50% !important; }
.dsg-home-system .djc-system-card--covers .djc-system-card-visual > img { object-position:50% 50% !important; }

/* Editorial: preserve the shared frame but pull the three internal slides
   inward so no rotated corner or artwork is clipped. */
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence {
  position:absolute !important;
  inset:16px 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame {
  width:62px !important;
  max-height:116px !important;
  flex:0 0 auto !important;
  border-radius:8px !important;
}
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame + .djc-system-card-sequence-frame {
  margin-left:-8px !important;
}
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame:nth-child(1) {
  transform:rotate(-4deg) translateY(3px) !important;
}
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame:nth-child(2) {
  transform:translateY(-1px) !important;
}
.dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame:nth-child(3) {
  transform:rotate(4deg) translateY(3px) !important;
}
.dsg-home-system .djc-system-card--carousel:hover .djc-system-card-sequence-frame:nth-child(1) {
  transform:rotate(-6deg) translate(-2px,2px) !important;
}
.dsg-home-system .djc-system-card--carousel:hover .djc-system-card-sequence-frame:nth-child(2) {
  transform:translateY(-4px) !important;
}
.dsg-home-system .djc-system-card--carousel:hover .djc-system-card-sequence-frame:nth-child(3) {
  transform:rotate(6deg) translate(2px,2px) !important;
}

@media (max-width:1180px) {
  .dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame { width:56px !important; }
}
@media (max-width:620px) {
  .dsg-home-system .djc-system-card--social,
  .dsg-home-system .djc-system-card--launch,
  .dsg-home-system .djc-system-card--covers,
  .dsg-home-system .djc-system-card--carousel {
    gap:7px !important;
    padding:8px !important;
  }
  .dsg-home-system .djc-system-card--social .djc-system-card-copy,
  .dsg-home-system .djc-system-card--launch .djc-system-card-copy,
  .dsg-home-system .djc-system-card--covers .djc-system-card-copy,
  .dsg-home-system .djc-system-card--carousel .djc-system-card-copy {
    padding:10px 4px 10px 10px !important;
  }
  .dsg-home-system .djc-system-card--carousel .djc-system-card-sequence { inset:18px 8px !important; }
  .dsg-home-system .djc-system-card--carousel .djc-system-card-sequence-frame { width:46px !important; }
}