/* ═══════════════════════════════════════════════════════════════
   SHIPSHOT STUDIO — production desk
   Neutral workbench surfaces keep customer artwork in command.
   Coral marks selection/actions; violet is reserved for AI work.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: Geist; src: url('assets/geist-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('assets/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* Self-hosted OFL fonts. See assets/fonts/LICENSES.md for sources and licenses. */
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-800.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/space-grotesk-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/space-grotesk-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/space-grotesk-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/space-grotesk-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('assets/fonts/sora-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('assets/fonts/sora-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('assets/fonts/sora-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('assets/fonts/sora-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('assets/fonts/sora-800.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('assets/fonts/manrope-800.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-800.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('assets/fonts/archivo-900.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-400-italic.ttf') format('truetype'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-500-italic.ttf') format('truetype'); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('assets/fonts/dm-serif-display-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('assets/fonts/dm-serif-display-400-italic.ttf') format('truetype'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --on: 242 244 247;             /* ink RGB triplet (alpha-composable) */
  --ink: #F2F4F7;
  --ink-soft: rgb(var(--on) / .72);
  --ink-faint: rgb(var(--on) / .5);
  --ink-ghost: rgb(var(--on) / .32);
  /* Semantic control states keep the editor readable in either theme. */
  --control-bg: rgb(var(--on) / .045);
  --control-bg-hover: rgb(var(--on) / .09);
  --control-bg-active: rgb(var(--on) / .12);
  --control-border: var(--line-soft);
  --control-border-hover: var(--line-w);
  --focus-ring: #F4A261;
  --focus-halo: rgb(244 162 97 / .28);
  --disabled-opacity: .42;
  --paper: #14161A;
  --paper-2: #1B1E24;
  --card: #20242B;
  --card-2: #272C34;
  --coral: #F06D4F;
  --coral-deep: #D85A42;
  --coral-action: #C74A34;
  --coral-action-deep: #A93A28;
  --coral-soft: rgba(240, 109, 79, .14);
  --amber: #F4B860;
  --foam: #7ED6C1;
  --foam-soft: rgba(126, 214, 193, .14);
  --lilac: #A78BFA;
  --space: #111318;
  --space-2: #181B20;
  --space-3: #20242B;
  --violet: #9277F4;
  --violet-2: #A78BFA;
  --violet-3: #C4B5FD;
  --indigo: #7C73F4;
  --indigo-deep: #665CE2;
  --indigo-action: #5B51D8;
  --indigo-action-deep: #554BCB;
  --utility-bg: rgba(124, 115, 244, .16);
  --utility-text: #D7D4FF;
  --utility-border: rgba(167, 139, 250, .34);
  --line-w: rgb(var(--on) / .12);
  --line-soft: rgb(var(--on) / .07);
  --glass-bg: rgba(27, 30, 36, .96);
  --toast-bg: rgba(32, 36, 43, .97);
  --modal-1: #20242B;
  --menu-bg: #20242B;
  --scrim: rgba(5, 7, 10, .74);
  --stage-glow-1: transparent;
  --stage-glow-2: transparent;
  --page-outline: rgb(var(--on) / .14);
  --active-text: #fff;
  --radius: 22px;
  --font: Geist, ui-sans-serif, system-ui, sans-serif;
  /* Sora ships with the product already. It is rounder and heavier than Geist
     at the same size, which is what titles need to carry a panel. */
  --display: Sora, Geist, ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, .4);
  --shadow-card: 0 12px 30px rgba(0, 0, 0, .32);
}

/* ═══════════ LIGHT THEME — neutral production desk ═══════════ */
[data-theme="light"] {
  --on: 23 25 29;
  --ink: #17191D;
  --ink-soft: rgb(var(--on) / .74);
  --ink-faint: rgb(var(--on) / .52);
  --ink-ghost: rgb(var(--on) / .36);
  /* Daylight controls need a deliberate surface and boundary, not a faint wash. */
  --control-bg: #FFFFFF;
  --control-bg-hover: #F0F2F4;
  --control-bg-active: #E7E9EC;
  --control-border: #C8CDD4;
  --control-border-hover: #9DA5AF;
  --focus-ring: #7257D9;
  --focus-halo: rgb(114 87 217 / .24);
  --disabled-opacity: .48;
  --paper: #F5F6F7;
  --paper-2: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #F3F5F6;
  --coral: #E75B3F;
  --coral-deep: #C9482F;
  --coral-action: #C74A34;
  --coral-action-deep: #A93A28;
  --coral-soft: rgba(231, 91, 63, .11);
  --amber: #C77A21;
  --foam: #138A77;
  --foam-soft: rgba(19, 138, 119, .11);
  --lilac: #7257D9;
  --space: #E8EAED;
  --space-2: #F7F8F9;
  --space-3: #EFF1F3;
  --violet: #7257D9;
  --violet-2: #836BDE;
  --violet-3: #5E45BE;
  --indigo: #4F46E5;
  --indigo-deep: #4338CA;
  --indigo-action: #4F46E5;
  --indigo-action-deep: #3730A3;
  --utility-bg: #E0E7FF;
  --utility-text: #3730A3;
  --utility-border: #A5B4FC;
  --line-w: rgb(var(--on) / .15);
  --line-soft: rgb(var(--on) / .09);
  --glass-bg: rgba(255, 255, 255, .96);
  --toast-bg: rgba(255, 255, 255, .96);
  --modal-1: #FFFFFF;
  --menu-bg: #FFFFFF;
  --scrim: rgba(17, 19, 24, .36);
  --stage-glow-1: transparent;
  --stage-glow-2: transparent;
  --page-outline: rgb(var(--on) / .18);
  --active-text: #17191D;
  --shadow-pop: 0 18px 44px rgba(24, 28, 34, .16);
  --shadow-card: 0 10px 28px rgba(24, 28, 34, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--space);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  font-size: 14px;
}
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: var(--coral-action); color: #fff; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(var(--on) / .12); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--on) / .22); background-clip: content-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

#app { display: flex; flex-direction: column; height: 100vh; }

.ic { width: 17px; height: 17px; flex: none; }

/* ═══════════ TOP BAR ═══════════ */
#topbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 54px; padding: 0 16px;
  background: rgba(14, 11, 20, 0.95);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  position: relative; z-index: 60;
}
[data-theme="light"] #topbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.tb-left, .tb-center, .tb-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The group shrinks (min-width:0 above) but its chips do not, so in a longer
   language its contents used to spill right and paint over the centre cluster —
   the save-state chip landed on the size picker at 1728px in French. Clip to the
   group's own box: the project name already ellipsises, so what gives way is the
   name, not a control painted on top of another one. */
.tb-left { flex: 0 1 auto; overflow: hidden; }
/* Keep the middle group optically centred by letting the outer two share the
   slack — but the right group must never be squeezed BELOW its content. It was
   `flex: 1 1 0` with `min-width: 0`, so once its contents outgrew its share it
   kept `justify-content: flex-end` and painted leftwards over the centre: the
   store-readiness pill landed exactly on the Light/Dark control and swallowed
   its clicks. `min-width: max-content` is the floor that stops that; the centre
   is the group built to give way, with scroll arrows either side of the size
   picker. */
/* Shrink factor 6, not 1: when the bar is tight the size picker — which has its
   own scroll arrows and is built to be scrolled — should give way well before the
   project name is shaved down to a single letter. */
.tb-center { flex: 1 6 auto; justify-content: center; overflow: hidden; }
.tb-right { flex: 0 0 auto; justify-content: flex-end; }

/* Brand & Breadcrumbs */
.brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; min-width: max-content; min-height: 36px;
  font-weight: 720; font-size: 14.5px; letter-spacing: -.025em;
  padding: 4px 8px; border-radius: 9px; transition: background .15s;
  color: var(--ink); text-decoration: none; border: 0; background: transparent; cursor: pointer;
}
.brand:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="light"] .brand:hover { background: rgba(0, 0, 0, 0.05); }
.brand img {
  width: 26px; height: 26px; flex: none;
  min-width: 26px; min-height: 26px;
  border-radius: 7px; object-fit: cover;
  box-shadow: 0 2px 8px rgba(240, 109, 79, 0.3);
}
.brand-word { flex: none; font-weight: 750; }
.brand-tag {
  flex: none; font-family: var(--mono); font-size: 8px; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase; color: var(--coral);
  background: rgba(240, 109, 79, 0.12); border: 1px solid rgba(240, 109, 79, 0.3);
  padding: 2px 6px; border-radius: 999px;
}
.tb-sep {
  flex: none; color: rgba(255, 255, 255, 0.18);
  font-size: 13px; font-weight: 300; margin: 0 2px;
  user-select: none;
}
[data-theme="light"] .tb-sep { color: rgba(0, 0, 0, 0.18); }

.tb-workspace {
  display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px;
  padding: 2px 3px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .tb-workspace {
  background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.08);
}
.tb-workspace .tbtn {
  min-height: 28px; padding: 0 9px; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  border-radius: 7px; border: 0; background: transparent;
  transition: all .15s;
}
.tb-workspace .tbtn .ic { width: 13px; height: 13px; }
.tb-workspace #projects-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.tb-workspace #new-project-btn {
  color: var(--coral); background: rgba(240, 109, 79, 0.1);
}
.tb-workspace #new-project-btn:hover,
.tb-workspace #new-project-btn:focus-visible {
  color: #fff; background: var(--coral-action);
}

.tb-name {
  display: inline-flex; align-items: center; gap: 7px;
  /* A floor so the name never shrinks to a single letter: the status chip beside
     it gives way first, and the name stays recognisable. */
  flex: 0 1 auto; min-width: 92px; max-width: 220px;
  height: 30px; padding: 0 9px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, 0.03); border: 1px solid transparent;
  transition: all .15s; cursor: pointer;
}
.tb-name:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .tb-name:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}
.tb-name span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-name .ic { width: 12px; height: 12px; opacity: .4; transition: opacity .15s; flex-shrink: 0; }
.tb-name:hover .ic { opacity: .85; }

/* Save State Indicator */
.save-state {
  display: inline-flex; align-items: center; gap: 5px;
  /* Was rigid, which is what pushed this chip out of .tb-left and on top of the
     size picker in longer languages ("Enregistré" against "Saved"). Let it give
     way like the project name beside it. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 9.5px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-ghost);
  transition: color .3s; white-space: nowrap; user-select: none;
}
.save-state::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
.save-state.saving { color: var(--amber); }
.save-state.saving::before { animation: savePulse 1s infinite alternate; }
.save-state.saved { color: #5BE49B; }
.save-state.saved::before { opacity: 1; box-shadow: 0 0 8px rgba(91, 228, 155, 0.7); }
@keyframes savePulse { 0% { opacity: .4; transform: scale(.8); } 100% { opacity: 1; transform: scale(1.2); } }

/* Center Device Target Segmented Control */
.target-nav-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  position: relative; max-width: min(480px, 40vw);
  min-width: 0; flex: 0 1 auto;
}

#target-seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  white-space: nowrap; max-width: 100%; flex: 1 1 auto; min-width: 0;
}
[data-theme="light"] #target-seg {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
}
#target-seg::-webkit-scrollbar { display: none; }

#target-seg button {
  height: 28px; padding: 0 10px; border-radius: 7px;
  font-size: 11.5px; font-weight: 550; color: var(--ink-soft);
  border: 0; background: transparent; cursor: pointer;
  transition: all .15s; white-space: nowrap; flex: none;
}
[data-theme="light"] #target-seg button { color: rgba(23, 25, 29, 0.65); }
#target-seg button:hover {
  color: var(--ink); background: rgba(255, 255, 255, 0.07);
}
[data-theme="light"] #target-seg button:hover {
  color: #000; background: rgba(0, 0, 0, 0.05);
}
#target-seg button.active {
  background: #241c30;
  color: #fff; font-weight: 650;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
[data-theme="light"] #target-seg button.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.target-nav-arrow {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 28px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft); cursor: pointer;
  padding: 0; flex: 0 0 auto; transition: all .15s;
}
[data-theme="light"] .target-nav-arrow {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  color: #333;
}
.target-nav-arrow.visible { display: inline-flex; }
.target-nav-arrow:hover {
  background: rgba(255, 255, 255, 0.1); color: var(--ink);
}
[data-theme="light"] .target-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.07); color: #000;
}
.target-nav-arrow:disabled { opacity: .25; pointer-events: none; }
.target-nav-arrow .ic { width: 12px; height: 12px; }

/* ── Top bar, deduplicated ──
   This section used to exist twice: a redesign written first in source order,
   and an older copy ~300 lines below it that therefore WON the cascade and was
   the only thing users ever saw. The two copies are now merged into this one,
   and the merge keeps the declarations that were winning — so the dedupe is a
   no-op on screen. Where the two disagreed the later copy's value is used;
   properties only the first copy declared (border, cursor, [data-theme="light"]
   overrides) survive because they were surviving before as well. */

/* Locale Chip */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 7px 12px; border-radius: 10px;
  background: rgb(var(--on) / .045); border: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 620; letter-spacing: .03em; color: var(--ink);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.chip:hover {
  background: rgb(var(--on) / .09); border-color: var(--line-w);
}
[data-theme="light"] .chip {
  background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .chip:hover {
  background: rgba(0, 0, 0, 0.07);
}
.chip .ic { width: 12px; height: 12px; opacity: .55; }

/* Right Utility Groups */
.tb-group {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 10px;
  background: rgb(var(--on) / .04); border: 1px solid var(--line-soft);
}
[data-theme="light"] .tb-group {
  background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.08);
}
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* A definite 30px square. The two copies set `width: 28px` and
     `min-width: 30px` respectively, so 30px is what shipped; the floor stays
     so the classes below that opt into `width: auto` cannot collapse. */
  width: 30px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.tbtn:hover { background: rgb(var(--on) / .08); color: var(--ink); }
[data-theme="light"] .tbtn:hover { background: rgba(0, 0, 0, 0.06); color: #111; }
.tbtn:disabled { opacity: .32; pointer-events: none; }
.tbtn-num { font-family: var(--mono); font-size: 11px; font-weight: 600; width: 46px; }
.tbtn-icon-only {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.tbtn-label {
  width: auto; height: 32px; padding: 0 11px; border-radius: 9px;
  font-size: 11.5px; font-weight: 620; letter-spacing: .02em;
  background: rgb(var(--on) / .04); border: 1px solid var(--line-soft);
}
.tbtn-label.on { background: var(--foam-soft); color: var(--foam); border-color: rgba(126,214,193,.35); }

/* Primary Ship Button */
.btn-coral {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 20px; border-radius: 11px;
  font-size: 13.5px; font-weight: 660; letter-spacing: -.01em; color: #fff;
  /* The label is white at 13.5px, which is below the WCAG large-text size, so
     the lightest gradient stop has to clear 4.5:1 on its own. --coral-action
     (#C74A34) measures 4.71:1; the raw --coral (#F06D4F) the other copy of this
     rule started from measures 3.0:1 and fails. Do not swap in --coral here. */
  background: linear-gradient(160deg, var(--coral-action), #BE452F 55%, var(--coral-action-deep));
  border: 0; cursor: pointer;
  box-shadow: inset 0 1px rgb(var(--on) / .35), 0 8px 26px rgba(240, 109, 79, .38);
  transition: transform .22s var(--ease), box-shadow .22s, filter .2s;
}
.btn-coral:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgb(var(--on) / .35), 0 14px 36px rgba(240, 109, 79, .5);
}
.btn-coral:active { transform: translateY(0); }
.btn-coral .ic { width: 15px; height: 15px; }

/* Score Pill */
.score-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent;
  cursor: pointer; transition: background .2s, transform .2s var(--ease);
}
.score-pill:hover { background: rgb(var(--on) / .06); transform: scale(1.06); }
.score-dial { position: relative; flex: none; width: 40px; height: 40px; display: inline-grid; place-items: center; }
.score-ring { width: 36px; height: 36px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgb(var(--on) / .09); stroke-width: 3; }
.ring-fg { fill: none; stroke: var(--foam); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .8s var(--ease), stroke .4s; }
.score-pill b { position: absolute; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: -.02em; }
/* A bare number in a ring reads as a mystery meter. Where the bar has room,
   say what it measures. */
.score-word { display: none; }
@media (min-width: 1660px) {
  .score-pill { width: auto; padding-right: 12px; }
  .score-word { display: inline; font-size: 10.5px; font-weight: 620; color: var(--ink-soft); letter-spacing: .01em; margin-left: 4px; }
}

/* Account Menu & Popover */
.account-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.tbtn-account {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(196, 181, 253, 0.3);
  background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.25), rgba(20, 14, 30, 0.9));
  color: var(--ink-soft); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all .18s;
}
.tbtn-account:hover, .tbtn-account.active {
  background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.45), rgba(20, 14, 30, 0.95));
  border-color: rgba(196, 181, 253, 0.65);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
  color: var(--ink);
  transform: translateY(-1px);
}
.tbtn-account.is-signed-in {
  border-color: rgba(124, 58, 237, 0.55);
}
.account-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.account-avatar .ic { width: 16px; height: 16px; }
.account-avatar .avatar-initial {
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  color: #EDE8FF; line-height: 1;
}
.account-pill-tag {
  position: absolute; bottom: -2px; right: -3px;
  padding: 1px 4px; border-radius: 999px;
  font-family: var(--mono); font-size: 7px; font-weight: 800; letter-spacing: .05em;
  background: linear-gradient(135deg, #F06D4F, #FF8E72); color: #fff;
  border: 1px solid #140E20; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* Account Popover Card */
.account-popover {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 100;
  width: 290px;
  border-radius: 20px;
  border: 1px solid rgba(196, 181, 253, 0.22);
  background: linear-gradient(145deg, rgba(32, 22, 48, 0.96), rgba(16, 12, 24, 0.98));
  backdrop-filter: blur(24px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 16px;
  animation: accountPop .18s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .account-popover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
@keyframes accountPop {
  from { opacity: 0; transform: scale(.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.account-card { display: flex; flex-direction: column; gap: 14px; }
.account-card__user-row {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .account-card__user-row { border-bottom-color: rgba(0, 0, 0, 0.08); }
.account-card__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #7C3AED, #4C1D95);
  color: #fff; font-size: 15px; font-weight: 750;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  flex-shrink: 0;
}
.account-card__user-meta { min-width: 0; flex: 1; }
.account-card__user-meta strong {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-card__user-meta span {
  display: block; font-size: 11px; color: var(--ink-ghost);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-card__badge {
  padding: 3px 7px; border-radius: 999px; font-family: var(--mono);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.account-card__badge.is-pro {
  background: rgba(240, 109, 79, 0.16); color: #FF8E72;
  border: 1px solid rgba(240, 109, 79, 0.35);
}
.account-card__badge.is-free {
  background: rgba(255, 255, 255, 0.06); color: var(--ink-faint);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.account-card__menu { display: flex; flex-direction: column; gap: 3px; }
.account-card__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  text-decoration: none; border: 0; background: transparent; width: 100%;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.account-card__item:hover {
  background: rgba(255, 255, 255, 0.07); color: var(--ink);
  transform: translateX(2px);
}
[data-theme="light"] .account-card__item:hover { background: rgba(0, 0, 0, 0.05); }
.account-card__item .ic { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }
.account-card__item.is-highlight {
  color: #C4B5FD;
}
.account-card__item.is-highlight .ic { color: #F06D4F; }

.account-card__footer {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .account-card__footer { border-top-color: rgba(0, 0, 0, 0.08); }
.account-card__logout-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 10px; border-radius: 10px;
  border: 0; background: transparent; color: var(--ink-faint);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.account-card__logout-btn .ic { width: 15px; height: 15px; }
.account-card__logout-btn:hover {
  background: rgba(240, 109, 79, 0.12); color: #F06D4F;
}

/* Guest State in Card */
.account-card__guest-header { text-align: center; padding: 4px 0 2px; }
.account-card__guest-icon {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
  display: grid; place-items: center;
  background: rgba(240, 109, 79, 0.12); border: 1px solid rgba(240, 109, 79, 0.3);
  color: #F06D4F;
}
.account-card__guest-icon .ic { width: 22px; height: 22px; }
.account-card__guest-header strong {
  display: block; font-size: 14px; font-weight: 750; color: var(--ink);
}
.account-card__guest-header p {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.45;
  color: var(--ink-ghost);
}
.account-card__guest-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.account-card__guest-primary {
  display: flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(135deg, #F06D4F, #FF8E72); color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(240, 109, 79, 0.35);
  transition: transform .15s, box-shadow .15s;
}
.account-card__guest-primary:hover {
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(240, 109, 79, 0.5);
}
.account-card__guest-secondary {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.account-card__guest-secondary:hover {
  background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3);
}
.account-card__guest-footer {
  text-align: center; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-card__guest-footer a {
  color: #C4B5FD; font-size: 11px; font-weight: 650; text-decoration: none;
  transition: color .15s;
}
.account-card__guest-footer a:hover { color: #fff; }
/* ── Template authoring (owner console) ──
   Reuses the coral/amber tokens already in this file — nothing new is invented. */
.template-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--coral);
  background: var(--coral-soft); border: 1px solid rgba(240,109,79,.35);
  padding: 4px 8px; border-radius: 99px; white-space: nowrap;
}
.template-banner {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid var(--line-w);
  background: var(--coral-soft); color: var(--ink-soft); font-size: 12.5px;
}
.template-banner strong {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--coral);
  border: 1px solid rgba(240,109,79,.4); border-radius: 99px; padding: 3px 9px; flex: none;
}
.template-banner span { line-height: 1.45; min-width: 0; }

/* ── Create workflow ──
   A quiet, in-flow release strip: beginners get a next step without turning
   the professional Studio into a modal wizard. */
#create-guide-root {
  flex: none; border-bottom: 1px solid var(--line-w);
  background: rgb(var(--on) / .025);
}
.create-guide { padding: 11px 16px 13px; }
.create-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.create-guide-title { min-width: 0; flex: 1; }
.create-guide-kicker {
  display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 8.5px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
}
.create-guide-title h2 { font-size: 13px; font-weight: 680; letter-spacing: -.015em; }
.create-guide-count { margin-left: 6px; font-family: var(--mono); font-size: 9px; color: var(--ink-ghost); }
.create-guide-actions { display: flex; gap: 5px; flex: none; }
.create-guide-actions button {
  min-width: 34px; min-height: 34px; padding: 0 9px; border-radius: 9px;
  color: var(--ink-faint); font-size: 11px; font-weight: 620;
}
.create-guide-actions button:hover, .create-guide-actions button:focus-visible { background: rgb(var(--on) / .07); color: var(--ink); }
.create-guide ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; list-style: none; }
.create-guide-step {
  display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 7px 9px; border: 1px solid var(--line-soft);
  border-radius: 11px; background: rgb(var(--on) / .025); color: var(--ink-faint); text-align: left;
}
.create-guide-step:hover, .create-guide-step:focus-visible { border-color: var(--line-w); background: rgb(var(--on) / .055); color: var(--ink); }
.create-guide-step.is-current { border-color: rgba(240,109,79,.42); background: var(--coral-soft); color: var(--ink); }
.create-guide-step.is-complete { border-color: rgba(126,214,193,.25); background: var(--foam-soft); color: var(--ink-soft); }
.create-guide-mark {
  width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center;
  background: rgb(var(--on) / .06); font-family: var(--mono); font-size: 9px; font-weight: 700;
}
.create-guide-step.is-current .create-guide-mark { background: var(--coral-action); color: #fff; }
.create-guide-step.is-complete .create-guide-mark { background: var(--foam); color: #0d2722; }
.create-guide-copy { min-width: 0; }
.create-guide-copy b { display: block; font-size: 11px; font-weight: 660; line-height: 1.2; color: inherit; }
.create-guide-copy small { display: block; margin-top: 2px; font-size: 9px; line-height: 1.25; color: var(--ink-ghost); }
.create-guide-step.is-optional .create-guide-copy b::after { content: ' · Optional'; font-size: 8px; font-weight: 560; color: var(--ink-ghost); }
.create-guide-compact { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 7px 16px; text-align: left; }
.create-guide-compact:hover, .create-guide-compact:focus-visible { background: rgb(var(--on) / .045); }
.create-guide-compact strong { font-size: 11.5px; font-weight: 660; }
.create-guide-compact span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-size: 11px; }
.create-guide-compact .create-guide-count { flex: none; }

.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; background: rgb(var(--on) / .045); border: 1px solid var(--line-soft); }
.seg button { padding: 6px 13px; border-radius: 8px; font-size: 12px; font-weight: 580; color: var(--ink-faint); transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: #261d33; color: var(--active-text); box-shadow: inset 0 0 0 1px rgb(var(--on) / .09), 0 4px 14px rgba(0,0,0,.3); }

.appearance-seg { flex: none; }
.appearance-seg.is-paired { box-shadow: inset 0 0 0 1px rgba(126,214,193,.35); }

/* The Recovery pill is absent until a local copy exists, so when it does show
   up it is the one loud thing in a quiet grey toolbar — amber, with the copy
   count as a badge. app.js owns whether it is here at all; the inline
   display:none the markup ships is cleared from there, because a second
   !important on this element is what hid the Recovery centre once already. */
.recovery-trigger {
  /* .tbtn is a definite 30px icon square; this one carries a word and a count
     badge, so it has to be free to grow past it. */
  width: auto; height: 32px; padding: 0 11px; border-radius: 9px;
  font-size: 11.5px; font-weight: 620; letter-spacing: .02em;
  /* Ink, not amber, for the label: daylight's amber is a deep orange that
     reads at about 3:1 on its own tint. The border and the badge carry the
     alarm; the word itself stays legible in both themes. */
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--amber) 46%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.recovery-trigger:hover, .recovery-trigger:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  border-color: color-mix(in srgb, var(--amber) 64%, transparent);
}
.recovery-trigger[hidden] { display: none; }
.recovery-trigger.has-recovery::after {
  content: attr(data-count);
  min-width: 15px; padding: 0 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--amber) 32%, transparent); color: var(--ink);
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 15px;
}
#help-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-w); font-weight: 700; font-size: 13px; color: var(--ink-soft); }
#help-btn:hover { background: rgb(var(--on) / .08); color: var(--ink); }

/* ═══════════ MIDDLE LAYOUT ═══════════ */
#middle { flex: 1; display: flex; min-height: 0; --compact-drawer-height: 0px; }

/* ─── Rail ─── */
#rail {
  flex: none; width: 86px;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 10px 6px 14px;
  background: var(--space-2);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
#rail::-webkit-scrollbar { display: none; }
.rail-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 74px; min-height: 51px; padding: 6px 5px 5px;
  border-radius: 14px;
  color: var(--ink-faint);
  transition: background .22s, color .22s, transform .22s var(--ease);
}
.rail-btn:hover { background: rgb(var(--on) / .05); color: var(--ink); transform: translateY(-1px); }
/* The selected tool reads as one solid coral chip rather than a faint tint:
   at a glance you can tell where you are without hunting for the highlight. */
.rail-btn.active { background: var(--coral-soft); color: var(--coral); box-shadow: inset 0 0 0 1px rgba(240,109,79,.3); }
.rail-btn.active::before { content: ''; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--coral-action); }
.rail-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgb(var(--on) / .045); border: 1px solid rgb(var(--on) / .06); transition: background .2s, border-color .2s, color .2s; }
.rail-btn.active .rail-icon { background: var(--coral-action); border-color: transparent; color: #fff; }
.rail-btn.active .rail-label { font-weight: 750; }
.rail-btn[aria-busy="true"] .rail-icon::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(139,92,246,.22); border-top-color: var(--lilac); border-radius: 50%; animation: ai-orbit .8s linear infinite; }
.rail-btn.has-error::after { content: ''; position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--space-2); }
.rail-btn .ic { width: 17px; height: 17px; }
.rail-btn .rail-label { max-width: 100%; font-size: 9px; line-height: 1.1; font-weight: 650; letter-spacing: -.015em; text-align: center; white-space: normal; overflow-wrap: anywhere; hyphens: none; }
.rail-group-label { flex: none; padding: 5px 5px 2px; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-ghost); }
.rail-group-label:not(:first-child) { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.rail-btn .dot-badge { position: absolute; top: 6px; right: 9px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--coral-action); color: #fff; font-family: var(--mono); font-size: 8.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(240,109,79,.5); }

/* ─── Panel ─── */
#panel {
  flex: none; width: 302px;
  display: flex; flex-direction: column;
  background: var(--space-2);
  border-right: 1px solid var(--line-soft);
  min-height: 0;
  transition: width .22s var(--ease);
}
#panel.templates-panel { width: min(480px, 37vw); }
#panel.production-panel { width: min(520px, 42vw); }
#panel.templates-panel #panel-head { padding-inline: 20px; }
#panel.templates-panel #panel-body { padding-inline: 18px; }
#panel-head {
  flex: none; padding: 18px 18px 15px;
  border-bottom: 1px solid var(--line-soft);
  /* A wash of the tool's hue, so the top of the panel is never plain grey. */
  background: linear-gradient(180deg, var(--tool-soft), transparent);
}
.panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#panel-title { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
#panel-sub { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); max-width: 34ch; }
.panel-compact-close { display: none; }
#panel-body { flex: 1; overflow-y: auto; padding: 14px 14px 24px; min-height: 0; background: var(--paper); }

/* ─── Step tabs and the walk-forward button ───
   The rail carries four numbered steps; these two pieces carry everything
   that used to be a rail stop of its own. Tabs wrap rather than squeeze,
   because "Arrière-plan" and "Hintergrund" do not fit where "Background"
   does, and a tab you cannot read is worse than a tab on a second row. */
#panel-steps { flex: none; padding: 13px 14px 1px; background: var(--paper); }
#panel-steps:empty { display: none; }
#panel.templates-panel #panel-steps { padding-inline: 18px; }

/* ─── Panel sections ───────────────────────────────────────────────
   Each tool owns one hue. It marks the rail, the panel header and every
   section heading inside it, so where you are is legible before you read a
   word — and it is the only colour in the chrome, so it stays meaningful. */
#panel, #inspector { --tool: var(--coral); --tool-soft: var(--coral-soft); }
/* The inspector takes its hue from whatever is selected, so the two sides of
   the app agree: a text layer is indigo on the left and indigo on the right. */
#inspector[data-tool="text"]   { --tool: var(--indigo); --tool-soft: rgb(79 70 229 / .12); }
#inspector[data-tool="device"] { --tool: var(--coral);  --tool-soft: var(--coral-soft); }
#inspector[data-tool="image"]  { --tool: var(--foam);   --tool-soft: var(--foam-soft); }
#inspector[data-tool="shape"]  { --tool: var(--violet); --tool-soft: rgb(146 119 244 / .14); }
#inspector[data-tool="icon"]   { --tool: var(--amber);  --tool-soft: rgb(244 162 97 / .13); }
#inspector[data-tool="loupe"]  { --tool: var(--coral);  --tool-soft: var(--coral-soft); }
#panel[data-tool="screens"]    { --tool: var(--coral);  --tool-soft: var(--coral-soft); }
#panel[data-tool="templates"]  { --tool: var(--amber);  --tool-soft: rgb(244 162 97 / .13); }
#panel[data-tool="text"]       { --tool: var(--indigo); --tool-soft: rgb(79 70 229 / .12); }
#panel[data-tool="uploads"]    { --tool: var(--foam);   --tool-soft: var(--foam-soft); }
#panel[data-tool="elements"]   { --tool: var(--violet); --tool-soft: rgb(146 119 244 / .14); }
#panel[data-tool="background"] { --tool: var(--amber);  --tool-soft: rgb(244 162 97 / .13); }
#panel[data-tool="devices"]    { --tool: var(--coral);  --tool-soft: var(--coral-soft); }
/* 3D view and Motion pose the same device the Devices panel does, so they
   stay in its coral family rather than claiming a hue of their own. */
#panel[data-tool="viewport"]   { --tool: var(--coral);  --tool-soft: var(--coral-soft); }
#panel[data-tool="motion"]     { --tool: var(--coral);  --tool-soft: var(--coral-soft); }
#panel[data-tool="looks"]      { --tool: var(--violet); --tool-soft: rgb(146 119 244 / .14); }
#panel[data-tool="ai"]         { --tool: var(--lilac);  --tool-soft: rgb(167 139 250 / .15); }
#panel[data-tool="localize"]   { --tool: var(--foam);   --tool-soft: var(--foam-soft); }
#panel[data-tool="playgraphic"] { --tool: var(--amber); --tool-soft: rgb(244 162 97 / .13); }
#panel[data-tool="production"] { --tool: var(--indigo); --tool-soft: rgb(79 70 229 / .12); }
#panel[data-tool="campaigns"]  { --tool: var(--lilac);  --tool-soft: rgb(167 139 250 / .15); }
#panel[data-tool="insights"]   { --tool: var(--foam);   --tool-soft: var(--foam-soft); }
#panel[data-tool="guide"]      { --tool: var(--amber);  --tool-soft: rgb(244 162 97 / .13); }

/* A section is a card: one heading, its controls, nothing else competing. */
.p-section {
  margin: 0 0 12px;
  padding: 13px 13px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.p-section > :last-child { margin-bottom: 0; }

/* The heading was 9px mono uppercase grey — technically present, practically
   invisible. It is now the loudest thing in its card. */
.panel-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 11px;
  font-family: var(--display);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.02em;
  text-transform: none; color: var(--ink);
}
.panel-eyebrow::before {
  content: ''; flex: none;
  width: 4px; height: 15px; border-radius: 99px;
  background: var(--tool);
}
.panel-eyebrow::after { content: none; }
.panel-eyebrow .panel-count {
  margin-left: auto;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--tool); background: var(--tool-soft);
}

/* shared panel atoms */
.p-card { border-radius: 15px; background: rgb(var(--on) / .035); border: 1px solid var(--line-soft); transition: border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s; }
.p-card:hover { border-color: var(--line-w); background: rgb(var(--on) / .055); }

.btn-row { display: flex; gap: 8px; }
/* Three actions in a 280px panel: let them share the width evenly and keep
   each label on one line rather than breaking mid-phrase. */
.grad-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.grad-actions .pbtn { min-width: 0; padding-inline: 2px; gap: 3px; font-size: 10px; white-space: nowrap; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 620; background: rgb(var(--on) / .055); border: 1px solid var(--line-soft); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.pbtn:hover { background: rgb(var(--on) / .1); border-color: var(--line-w); transform: translateY(-1px); }
.pbtn.primary { background: var(--coral-soft); border-color: rgba(240,109,79,.35); color: var(--coral); }
.pbtn.primary:hover { background: rgba(240,109,79,.22); }
.pbtn.block { width: 100%; }
.pbtn.sm { padding: 6px 10px; font-size: 11px; border-radius: 8px; }
.pbtn:disabled { opacity: .4; pointer-events: none; }

.dropzone {
  display: grid; place-items: center; gap: 8px; text-align: center;
  width: 100%;
  padding: 26px 16px; border-radius: 16px;
  border: 1.5px dashed rgb(var(--on) / .16);
  background: rgb(var(--on) / .02);
  color: var(--ink-faint); font-size: 12px; line-height: 1.55;
  transition: border-color .25s, background .25s, color .25s;
  cursor: pointer;
}
.dropzone:hover, .dropzone.armed { border-color: var(--coral); background: var(--coral-soft); color: var(--ink-soft); }
.dropzone .ic { width: 22px; height: 22px; opacity: .7; }
.dropzone b { color: var(--ink); font-weight: 640; }
.dropzone .mono { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

/* active-page layers */
.panel-count { padding: 2px 6px; border-radius: 99px; background: rgb(var(--on) / .07); font-size: 8px; letter-spacing: .05em; color: var(--ink-ghost); }
.layers-hint { margin: -3px 3px 9px; font-size: 10.5px; line-height: 1.45; color: var(--ink-faint); }
.layers-empty { margin: 0; padding: 13px 12px; border-radius: 11px; border: 1px solid var(--line-soft); background: rgb(var(--on) / .025); color: var(--ink-faint); font-size: 11px; line-height: 1.5; }
.layer-stack { display: grid; gap: 5px; }
.layer-group-row { min-width:0;border:1px solid rgba(240,109,79,.28);border-radius:13px;background:linear-gradient(145deg,var(--coral-soft),rgb(var(--on) / .025));overflow:hidden; }
.layer-group-head { display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;min-height:44px;border-bottom:1px solid transparent; }
.layer-group-head.is-open { border-bottom-color:var(--line-soft); }
.layer-group-select { min-width:0;min-height:44px;padding:8px 10px;text-align:left;display:flex;align-items:center;gap:9px;color:var(--ink); }
.layer-group-select b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:680; }
.layer-group-select span { margin-left:auto;font:8px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--coral); }
.layer-group-drill { width:44px;height:44px;color:var(--ink-faint);font-size:16px; }
.layer-group-members { display:grid;gap:4px;padding:5px; }
.layer-group-members[hidden] { display:none; }
.layer-group-members .layer-row { border-radius:9px;background:rgb(var(--on) / .035); }
.layer-row { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--line-soft); border-radius: 11px; background: rgb(var(--on) / .025); overflow: hidden; transition: border-color .18s, background .18s, opacity .18s; }
.layer-row:hover { border-color: var(--line-w); background: rgb(var(--on) / .055); }
.layer-row.selected { border-color: rgba(240,109,79,.52); background: var(--coral-soft); box-shadow: inset 3px 0 0 var(--coral); }
.layer-row.is-hidden { opacity: .58; }
.layer-row.is-locked .layer-kind { color: var(--amber); }
.layer-row.dragging { opacity: .34; }
.layer-row.drag-over { border-color: var(--foam); box-shadow: inset 0 0 0 1px var(--foam); }
.layer-grip { flex: none; width: 18px; display: grid; place-items: center; color: var(--ink-ghost); font-size: 14px; cursor: grab; }
.layer-row:active .layer-grip { cursor: grabbing; }
.layer-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 5px 8px 2px; text-align: left; color: var(--ink); }
.layer-kind { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--on) / .08); color: var(--lilac); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.layer-copy { min-width: 0; display: grid; gap: 1px; }
.layer-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 640; letter-spacing: -.01em; }
.layer-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-ghost); font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.layer-quick { flex: none; display: flex; align-items: center; gap: 1px; padding: 0 5px; }
.layer-quick button { width: 24px; height: 28px; border-radius: 7px; color: var(--ink-faint); font-size: 13px; transition: color .16s, background .16s; }
.layer-quick button svg { width: 15px; height: 15px; display: block; margin: 0 auto; }
.layer-quick button[data-layer-act="locked"] { width: 30px; height: 32px; color: var(--ink-soft); }
.layer-quick button[data-layer-act="locked"] .layer-lock-ic { width: 18px; height: 18px; }
.layer-quick button[data-layer-act="locked"][aria-pressed="true"] { color: var(--amber); }
.layer-quick button:hover { background: rgb(var(--on) / .09); color: var(--ink); }
.layer-row.selected .layer-quick button { color: var(--ink-soft); }
.layer-row.selected .layer-quick button[data-layer-act="locked"][aria-pressed="true"] { color: var(--amber); }
.layout-tools { margin: 0 0 10px; padding: 10px; border-radius: 12px; border: 1px solid rgba(240,109,79,.3); background: linear-gradient(145deg, var(--coral-soft), rgb(var(--on) / .03)); }
.layout-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 1px 8px; }
.layout-tools-head b { font-size: 11px; font-weight: 670; color: var(--ink-soft); }
.layout-tools-head button { color: var(--coral); font-size: 10px; font-weight: 620; }
.layout-tools-head button:hover { text-decoration: underline; }
.layout-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.layout-tools-grid .pbtn { min-width: 0; padding-inline: 5px; }
.layout-tools-grid.distribution { grid-template-columns: 1fr 1fr; margin-top: 5px; }
.group-command { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px; }
.group-command .pbtn { min-width:44px;min-height:44px; }
.style-token-shell { margin:0 0 14px;padding:12px;border:1px solid rgba(126,214,193,.24);border-radius:14px;background:linear-gradient(145deg,var(--foam-soft),rgb(var(--on) / .025)); }
.style-token-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px; }
.style-token-head b { font-size:12px; }.style-token-head span { display:block;margin-top:2px;font-size:10px;line-height:1.4;color:var(--ink-faint); }
.style-token-list { display:grid;gap:6px; }.style-token-row { display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px; }
.style-token-swatch { width:28px;height:28px;border-radius:9px;border:1px solid rgb(var(--on) / .18); }.style-token-row b { font-size:11px; }.style-token-row small { display:block;color:var(--ink-faint);font:8px var(--mono); }
.style-token-actions { display:grid;grid-template-columns:minmax(44px,auto) 44px;gap:4px; }.style-token-actions .pbtn { min-width:44px;min-height:44px;padding-inline:8px; }
.style-token-editor { display:grid;gap:9px;padding:10px;border:1px solid rgba(139,92,246,.28);border-radius:12px;background:rgb(var(--on) / .035); }
.style-token-editor>label,.style-token-field-grid>label,.style-token-shadow>label { display:grid;gap:4px;font:9px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint); }
.style-token-field-grid,.style-token-shadow { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.style-token-shadow { grid-column:1/-1; }
.style-token-check { min-height:44px;grid-template-columns:22px 1fr!important;align-items:center;text-transform:none!important;letter-spacing:0!important; }.style-token-check input { width:18px;height:18px; }
.style-token-editor-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.style-token-editor-actions .pbtn { min-height:44px; }
.style-token-link-action { min-height:44px; }
.token-color-input { min-height:44px;padding:4px; }
.style-across-set { margin-top: 15px; padding: 12px; border-radius: 12px; border: 1px solid rgba(240,109,79,.28); background: linear-gradient(145deg, var(--coral-soft), rgb(var(--on) / .025)); }
.style-across-set b { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 670; }
.style-across-set p { margin: 4px 0 10px; color: var(--ink-faint); font-size: 10.5px; line-height: 1.45; }
.style-across-set .pbtn { min-height: 32px; font-size: 10.5px; }
.style-across-set .inspector-ungroup-action { min-height: 44px; }

/* template rows — swipeable page strips */
.tpl-loading { display: grid; gap: 16px; }
.tpl-loading-copy { display: grid; gap: 3px; padding: 2px 1px; }
.tpl-loading-copy b { color: var(--ink-soft); font-size: 12.5px; font-weight: 660; }
.tpl-loading-copy span { color: var(--ink-faint); font-size: 11px; }
.tpl-skeleton { padding: 12px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--card); overflow: hidden; }
.tpl-skeleton-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.tpl-skeleton-head i, .tpl-skeleton-strip i { display: block; background: rgb(var(--on) / .075); }
.tpl-skeleton-head i:first-child { width: 42%; height: 12px; border-radius: 99px; }
.tpl-skeleton-head i:last-child { width: 76px; height: 26px; border-radius: 8px; }
.tpl-skeleton-strip { display: flex; gap: 10px; overflow: hidden; }
.tpl-skeleton-strip i { flex: 0 0 166px; aspect-ratio: 1290 / 2796; border-radius: 11px; }
.tpl-loading[aria-live] .tpl-skeleton i { animation: tpl-pulse 1.4s ease-in-out infinite alternate; }
.tpl-loading[aria-live] .tpl-skeleton:nth-child(3) i { animation-delay: .16s; }
@keyframes tpl-pulse { to { background: rgb(var(--on) / .13); } }
.tpl-pack-warning { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 11px; border: 1px solid rgba(244,184,96,.35); border-radius: 12px; background: rgba(244,184,96,.08); color: var(--ink-faint); font-size: 10.5px; line-height: 1.45; }
.tpl-pack-warning span { min-width: 0; }
.tpl-pack-warning b { display: block; color: var(--ink-soft); font-size: 11px; }
.tpl-pack-warning .pbtn { flex: none; }
.tpl-empty { padding: 30px 10px; text-align: center; }
.tpl-empty b { display: block; margin-bottom: 7px; color: var(--ink); font-size: 15px; }
.tpl-empty p { max-width: 260px; margin: 0 auto 16px; color: var(--ink-dim); font-size: 12.5px; line-height: 1.55; }
.tpl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tpl-search { margin-bottom: 10px; }
.tpl-list { position: relative; min-height: 1px; }
.tpl-row { position: absolute; inset-inline: 0; border-radius: 16px; border: 1px solid var(--line-soft); background: var(--card); padding: 12px; transition: border-color .3s, box-shadow .3s; contain: layout paint; }
.tpl-row:hover { border-color: rgba(240,109,79,.4); box-shadow: var(--shadow-card); }
.tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tpl-head > div { min-width: 0; }
.tpl-head b { display: -webkit-box; overflow: hidden; max-width: 100%; font-size: 13px; font-weight: 680; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tpl-head span { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.tpl-head .tpl-add { flex: none; }
/* Plan flag on a gallery row — the same lilac the language lock and the Pro
   badge already use, so "this is Pro" reads the same everywhere. */
.tpl-flag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgb(var(--on) / .055); color: var(--ink-faint); font: 600 9px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; font-style: normal; white-space: nowrap; }
.tpl-flag.locked { border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.15); color: var(--lilac); }
.tpl-flag svg { width: 10px; height: 10px; }
.tpl-row.locked .tpl-cell canvas { opacity: .82; }
.tpl-row.locked:hover .tpl-cell canvas { opacity: 1; }
.tpl-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 1px 8px; scrollbar-width: thin; cursor: grab; }
.tpl-strip-track { position: relative; flex: none; }
.tpl-strip:active { cursor: grabbing; }
.tpl-strip::-webkit-scrollbar { height: 6px; }
.tpl-strip::-webkit-scrollbar-thumb { background: rgb(var(--on) / .14); border-radius: 99px; }
.tpl-cell { position: absolute; top: 0; width: 166px; scroll-snap-align: start; }
.tpl-cell canvas { display: block; width: 100%; aspect-ratio: 1290 / 2796; border-radius: 11px; border: 1px solid var(--line-soft); background: rgb(var(--on) / .04); image-rendering: -webkit-optimize-contrast; }
@media (max-width: 900px) {
  #panel.templates-panel { width: min(340px, calc(100vw - 40px)); }
  #panel.templates-panel #panel-body { padding-inline: 16px; }
  .tpl-skeleton-strip { gap: 8px; }
  .tpl-skeleton-strip i { flex-basis: 108px; }
  .tpl-row { height: 291px; }
  .tpl-cell { width: 108px; }
  /* A thumb needs 44px even where the chip only needs 28. The target grows
     without the control growing, so the row keeps the height it is laid out
     at and the strip below it is not pushed out of the row. */
  #panel.templates-panel .fchip, .tpl-head .tpl-add { position: relative; }
  #panel.templates-panel .fchip::after, .tpl-head .tpl-add::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); }
  .tpl-flag { padding: 3px 7px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-loading[aria-live] .tpl-skeleton i { animation: none; }
}

.saved-grad { position: relative; min-width: 0; }
.saved-grad .grad-swatch { width: 100%; }
.saved-grad-delete { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid rgb(var(--on) / .22); border-radius: 999px; background: rgb(10 7 17 / .64); color: #fff; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .16s var(--ease), background .16s var(--ease); }
.saved-grad:hover .saved-grad-delete, .saved-grad:focus-within .saved-grad-delete { opacity: 1; }
.saved-grad-delete:hover { background: var(--coral-deep); }

/* Deciding whether a background lands on one screen or all of them is the
   most consequential control on this panel, so it looks like a decision. */
.backdrop-scope { margin: 2px 0 14px; padding: 11px 12px 12px; border: 1.5px solid var(--tool); border-radius: 14px; background: var(--tool-soft); }
.backdrop-scope-label { display: block; margin: 0 2px 8px; font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: -.015em; text-transform: none; color: var(--ink); }
.backdrop-scope-options { margin: 0; width: 100%; }
.backdrop-scope-options button { flex: 1; }

.type-style-card { min-height: 66px; }
.type-preview { display: block; color: var(--ink); line-height: 1.1; }
.type-preview-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: #F06D4F; color: #fff; }
.type-style-meta { display: block; margin-top: 7px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-ghost); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fchip { padding: 6px 11px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--ink-faint); border: 1px solid var(--line-soft); transition: all .22s; }
.fchip:hover { color: var(--ink); background: rgb(var(--on) / .06); }
.fchip.active { background: rgba(240,109,79,.16); border-color: rgba(240,109,79,.4); color: var(--coral); }

/* swatches */
.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.swatch { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid rgb(var(--on) / .14); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.swatch:hover { transform: scale(1.12); box-shadow: var(--shadow-card); z-index: 2; }
.swatch.active { box-shadow: 0 0 0 2px var(--space-2), 0 0 0 4px var(--coral); }
.grad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.grad-swatch { height: 52px; border-radius: 12px; border: 1px solid rgb(var(--on) / .12); cursor: pointer; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.grad-swatch:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-card); }
.grad-swatch.active { box-shadow: 0 0 0 2px var(--space-2), 0 0 0 4px var(--coral); }
/* The label sits on the artwork, not on the theme surface, so it is always
   white on a dark scrim — the ink colour made it vanish on dark gradients. */
.grad-swatch span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 9px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #fff; text-align: left; background: linear-gradient(transparent, rgb(0 0 0 / .55)); }

/* looks */
.look-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 15px; background: rgb(var(--on) / .035); border: 1px solid var(--line-soft); text-align: left; transition: all .25s var(--ease); margin-bottom: 9px; }
.look-card:hover { transform: translateY(-2px); border-color: var(--line-w); background: rgb(var(--on) / .06); box-shadow: var(--shadow-card); }
.look-card .look-thumb { width: 64px; height: 84px; border-radius: 9px; overflow: hidden; box-shadow: var(--shadow-card); }
.look-card .look-thumb canvas { width: 100%; height: 100%; display: block; }
.look-card b { display: block; font-size: 13px; font-weight: 660; letter-spacing: -.015em; }
.look-card span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--ink-faint); }

/* asset grid */
.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.asset-item { position: relative; min-width: 0; }
.asset-cell { position: relative; width: 100%; aspect-ratio: 9/14; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-soft); cursor: pointer; background: var(--card); transition: transform .2s var(--ease), border-color .2s; padding: 0; }
.asset-cell:hover { transform: translateY(-2px); border-color: rgba(240,109,79,.5); }
.asset-cell img, .asset-cell canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-item .asset-del { position: absolute; z-index: 2; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 7px; background: rgba(9,6,16,.8); color: #fff; font-size: 11px; display: grid; place-items: center; opacity: 0; transition: opacity .2s; backdrop-filter: blur(6px); }
.asset-item:hover .asset-del, .asset-item:focus-within .asset-del { opacity: 1; }
.server-asset-item .asset-del { opacity: 1; }
.asset-item .asset-del:disabled { opacity: 1; cursor: progress; }
.asset-cell .asset-kind { position: absolute; left: 5px; bottom: 5px; padding: 2px 6px; border-radius: 99px; background: rgba(9,6,16,.75); font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); backdrop-filter: blur(6px); }
.library-state { margin: 8px 2px 2px; color: var(--ink-faint); font-size: 10.5px; line-height: 1.5; }
.library-error { display: grid; gap: 8px; margin-top: 9px; padding: 10px; border: 1px solid rgba(240,109,79,.3); border-radius: 12px; background: rgba(240,109,79,.08); }
.library-error p { color: var(--ink-soft); font-size: 10.5px; line-height: 1.45; }
.library-error .pbtn { justify-self: start; }
.project-font-list { display: grid; gap: 7px; }
.project-font-row { display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: stretch; gap: 6px; }
.project-font-summary { display: grid; min-width: 0; gap: 3px; padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.project-font-summary .font-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.project-font-summary .font-tag { color: var(--ink-faint); font-family: var(--mono); font-size: 7.5px; letter-spacing: .05em; text-transform: uppercase; }
.project-font-delete { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); color: var(--ink-faint); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.project-font-delete:hover, .project-font-delete:focus-visible { border-color: rgba(240,109,79,.5); background: rgba(240,109,79,.09); color: var(--coral); }
.project-font-delete:disabled { cursor: progress; opacity: .65; }
.sample-browser { position: relative; }
.sample-browser .asset-cell { position: absolute; width: calc(50% - 4px); }

/* font list */
.font-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.font-tab { flex: 1; min-height: 34px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); color: var(--ink-soft); font-size: 11.5px; font-weight: 650; cursor: pointer; }
.font-tab.active { border-color: rgba(240,109,79,.45); background: var(--coral-soft); color: var(--ink); }
.font-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.font-directory { display: grid; gap: 4px; }
.font-upload { width: 100%; margin: 0 0 10px; }
.font-upload span { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 11px; }
.font-browse { width: 100%; margin: 8px 0 12px; }
.project-font-summary { cursor: pointer; text-align: left; }
.font-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 11px; text-align: left; transition: background .2s; }
.font-row:hover { background: rgb(var(--on) / .055); }
.font-row.active { background: var(--coral-soft); box-shadow: inset 0 0 0 1px rgba(240,109,79,.35); }
.font-row .font-name { font-size: 15px; letter-spacing: -.01em; }
.font-row .font-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-ghost); }

/* locale */
.locale-summary { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 13px 14px; border-radius: 14px; background: var(--foam-soft); border: 1px solid rgba(126,214,193,.3); }
.locale-summary.needs-work { background: rgba(244,184,96,.09); border-color: rgba(244,184,96,.28); }
.locale-summary > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.locale-summary .flag { font-size: 20px; }
.locale-summary b { font-size: 13px; font-weight: 660; }
.locale-summary strong { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.locale-summary p { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.5; color: var(--ink-faint); }
.locale-summary .locale-overflow { color: var(--coral); }
.locale-translate { margin-top: 10px; min-height: 38px; }
.locale-error { margin: 8px 4px 0; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(240,109,79,.3); background: var(--coral-soft); color: var(--coral); font-size: 10.5px; line-height: 1.45; }
.locale-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left; border: 1px solid transparent; transition: all .2s; }
.locale-row:hover { background: rgb(var(--on) / .05); }
.locale-row.active { background: var(--foam-soft); border-color: rgba(126,214,193,.3); }
.locale-row .flag { font-size: 19px; flex: none; }
.locale-row .locale-copy { flex: 1; min-width: 0; }
.locale-row b { display: block; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.locale-row span { display: block; font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; }
.locale-row .len-meter { margin-left: auto; flex: none; width: 64px; }
.len-meter .bar { height: 4px; border-radius: 4px; background: rgb(var(--on) / .09); overflow: hidden; }
.len-meter .bar i { display: block; height: 100%; border-radius: 4px; background: var(--foam); }
.len-meter.warn .bar i { background: var(--amber); }
.len-meter.bad .bar i { background: var(--coral); }
.len-meter small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 8px; letter-spacing: .02em; color: var(--ink-ghost); text-align: right; white-space: nowrap; }
.locale-help { margin: 14px 4px 0; font-size: 11px; line-height: 1.6; color: var(--ink-faint); }
.locale-fallback-note { margin: 0 0 7px; padding: 7px 9px; border-radius: 9px; background: rgba(244,184,96,.1); border: 1px solid rgba(244,184,96,.24); font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); }
.ins-textarea[dir="rtl"] { text-align: right; direction: rtl; }
@media (max-width: 900px) {
  .locale-row { align-items: flex-start; flex-wrap: wrap; }
  .locale-row .len-meter { width: calc(100% - 30px); margin-left: 30px; }
}

/* insights */
.score-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: linear-gradient(140deg, rgba(139,92,246,.13), rgba(240,109,79,.08)); border: 1px solid var(--line-w); margin-bottom: 14px; }
.score-hero .big-ring { position: relative; width: 74px; height: 74px; flex: none; }
.score-hero .big-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.score-hero .big-ring .ring-bg { stroke: rgb(var(--on) / .08); stroke-width: 5; }
.score-hero .big-ring .ring-fg { stroke-width: 5; stroke-dasharray: 201; stroke-dashoffset: 201; }
.score-hero .big-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 19px; font-weight: 600; }
.score-hero h3 { font-size: 14.5px; font-weight: 680; letter-spacing: -.02em; }
.score-hero p { margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.check-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: rgb(var(--on) / .03); border: 1px solid var(--line-soft); margin-bottom: 8px; }
.check-row .ci { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.check-row.pass .ci { background: var(--foam-soft); color: var(--foam); }
.check-row.warn .ci { background: rgba(244,184,96,.15); color: var(--amber); }
.check-row.fail .ci { background: var(--coral-soft); color: var(--coral); }
.check-row.waiting .ci { background: rgb(var(--on) / .05); color: var(--ink-ghost); }
.check-row.waiting b { color: var(--ink-soft); }
.check-row.waiting p { color: var(--ink-ghost); }
.check-row b { display: block; font-size: 12.5px; font-weight: 640; letter-spacing: -.01em; }
.check-row p { font-size: 11px; line-height: 1.5; color: var(--ink-faint); margin-top: 2px; }
.check-row .fix { flex: none; margin-left: auto; }

/* ─── GUIDE PANEL ─── */
.guide-group {
  margin-bottom: 18px;
}
.guide-group:first-child {
  margin-top: 4px;
}
.guide-group-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin: 0 4px 8px;
}
.guide-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgb(var(--on) / .032);
  border: 1px solid var(--line-soft);
  margin-bottom: 8px;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  position: relative;
  box-sizing: border-box;
}
.guide-card.is-interactive {
  cursor: pointer;
}
.guide-card.is-interactive:hover {
  background: rgb(var(--on) / .065);
  border-color: rgb(var(--on) / .16);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}
.guide-card.is-interactive:active {
  transform: translateY(0);
}
.guide-card.is-static {
  cursor: default;
}
.guide-card.is-static:hover {
  background: rgb(var(--on) / .045);
  border-color: rgb(var(--on) / .11);
}
.guide-card:focus-visible,
.guide-replay-btn:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
.guide-card .gc-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.guide-card .gc-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  border-width: 1px;
  border-style: solid;
  transition: transform .2s var(--ease);
}
.guide-card.is-interactive:hover .gc-ic {
  transform: scale(1.06);
}
.guide-card .gc-info {
  flex: 1;
  min-width: 0;
}
.guide-card .gc-title {
  display: block;
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: -.015em;
  color: var(--ink);
}
.guide-card .gc-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: .04em;
  flex: none;
  border: 1px solid transparent;
}
.guide-card .gc-badge-coral {
  color: var(--coral);
  background: var(--coral-soft);
  border-color: rgba(241, 115, 89, .22);
}
.guide-card .gc-badge-violet {
  color: var(--violet-2);
  background: rgba(167, 139, 250, .14);
  border-color: rgba(167, 139, 250, .24);
}
.guide-card .gc-badge-foam {
  color: var(--foam);
  background: var(--foam-soft);
  border-color: rgba(98, 199, 179, .22);
}
.guide-card .gc-badge-amber {
  color: var(--amber);
  background: rgba(244, 162, 97, .14);
  border-color: rgba(244, 162, 97, .24);
}
.guide-card .gc-badge-lilac {
  color: #c4b5fd;
  background: rgba(196, 181, 253, .14);
  border-color: rgba(196, 181, 253, .24);
}
.guide-card .gc-badge-blue {
  color: #70c4ff;
  background: rgba(112, 196, 255, .14);
  border-color: rgba(112, 196, 255, .24);
}
.guide-card .gc-chevron {
  color: var(--ink-ghost);
  flex: none;
  margin-left: 2px;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.guide-card.is-interactive:hover .gc-chevron {
  color: var(--ink-soft);
  transform: translateX(2px);
}
.guide-card .gc-desc {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.52;
  color: var(--ink-faint);
}

.guide-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.guide-replay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 580;
  letter-spacing: -.01em;
  color: var(--ink-soft);
  background: rgb(var(--on) / .035);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.guide-replay-btn:hover {
  color: var(--ink);
  background: rgb(var(--on) / .075);
  border-color: var(--line-w);
  transform: translateY(-1px);
}
.guide-replay-btn:active {
  transform: translateY(0);
}
.guide-replay-btn svg {
  flex: none;
  opacity: .75;
}
.guide-replay-btn:hover svg {
  opacity: 1;
}

[data-theme="light"] .guide-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
[data-theme="light"] .guide-card.is-interactive:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
}
[data-theme="light"] .guide-card.is-static:hover {
  background: #fafafa;
  border-color: rgba(0, 0, 0, .12);
}
[data-theme="light"] .guide-replay-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .1);
  color: #333333;
}
[data-theme="light"] .guide-replay-btn:hover {
  background: #f7f7f8;
  border-color: rgba(0, 0, 0, .18);
  color: #111111;
}

/* ═══════════ STAGE ═══════════ */
#stage {
  flex: 1; position: relative; min-width: 0; overflow: hidden;
  background:
    radial-gradient(900px 500px at 82% -10%, var(--stage-glow-1), transparent 62%),
    radial-gradient(700px 500px at 6% 108%, var(--stage-glow-2), transparent 60%),
    var(--space);
}
.workspace-zoom-hidden { display: none !important; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: default; touch-action: none; }
#canvas.corner-rotate {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 12.4A12 12 0 0 1 18.8 12.4' fill='none' stroke='%23111111' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M2.6 14.1 4.4 11.0 6.2 13.5z' fill='%23111111'/%3E%3Cpath d='M21.4 14.1 17.8 13.5 19.6 11.0z' fill='%23111111'/%3E%3Cpath d='M5.2 12.4A12 12 0 0 1 18.8 12.4' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M3.4 13.6 4.7 11.4 5.9 13.1z' fill='%23ffffff'/%3E%3Cpath d='M20.6 13.6 18.1 13.1 19.3 11.4z' fill='%23ffffff'/%3E%3C/svg%3E") 12 12, crosshair;
}
#canvas.dragging { cursor: grabbing !important; }
#canvas.media-framing { cursor: grab; }
#canvas.media-framing.dragging { cursor: grabbing !important; }

.media-edit-bar {
  position: absolute; z-index: 45; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; padding: 6px;
  border-radius: 14px; background: var(--menu-bg); border: 1px solid var(--line-w);
  box-shadow: var(--shadow-pop); backdrop-filter: blur(16px);
}
.media-edit-bar[hidden] { display: none; }
.media-edit-mode { padding: 0 7px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--foam); }
.media-edit-bar button { min-height: 32px; border-radius: 8px; }
.media-edit-compare, .media-edit-step { padding: 0 9px; color: var(--ink-soft); background: rgb(var(--on) / .06); font-size: 11px; font-weight: 650; }
.media-edit-compare.active { color: var(--foam); background: var(--foam-soft); }
.media-edit-step { width: 32px; padding: 0; font-family: var(--mono); font-size: 16px; }
.media-edit-bar output { width: 46px; text-align: center; font: 600 9.5px var(--mono); color: var(--ink-faint); }
.media-edit-cancel { padding-inline: 11px; }
.media-edit-apply { height: 32px; padding-inline: 13px; }

.media-bench { margin-bottom: 12px; padding: 12px; border-radius: 14px; background: rgb(var(--on) / .035); border: 1px solid var(--line-soft); }
.media-bench-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.media-bench-head > span { flex: 1; min-width: 0; }
.media-bench-head strong { display: block; font-size: 12.5px; color: var(--ink); }
.media-bench-head small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.35; color: var(--ink-faint); }
.media-bench-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.media-bench-actions .primary { color: var(--coral); border-color: rgba(240,109,79,.38); background: var(--coral-soft); }
.media-draft-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.media-draft-fields label span { display: block; margin: 0 2px 6px; font: 700 11.5px var(--display); color: var(--ink-soft); letter-spacing: -.01em; text-transform: none; }
.media-draft-hint { margin: 8px 2px 0; font-size: 10px; line-height: 1.45; color: var(--ink-faint); }

#stage-hint { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.hint-card { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 15px; background: var(--glass-bg); border: 1px solid var(--line-w); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); font-size: 12.5px; color: var(--ink-soft); animation: hint-in .7s var(--ease); }
@keyframes hint-in { from { opacity: 0; transform: translateY(14px); } }
.hint-kbd { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); background: var(--coral-soft); border: 1px solid rgba(240,109,79,.35); padding: 5px 9px; border-radius: 8px; }

#text-edit-wrap { position: absolute; z-index: 20; }
#text-edit {
  display: block; width: 100%; height: 100%;
  background: transparent; border: 0; outline: 0; resize: none; overflow: hidden;
  padding: 0; margin: 0;
  caret-color: var(--coral);
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* native selection fully hidden — background AND glyph fill. Without the fill
   override, the UA paints selected glyphs white, hiding their real color. */
#text-edit::selection {
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ─── Floating format bar (rich text selection) ─── */
#fmt-bar {
  position: absolute; z-index: 30;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: 13px;
  background: var(--menu-bg); border: 1px solid var(--line-w);
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, calc(-100% - 12px));
  animation: fmt-in .22s var(--ease);
  white-space: nowrap;
}
@keyframes fmt-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(.94); } }
#fmt-bar.below { transform: translate(-50%, 14px); animation-name: fmt-in-below; }
@keyframes fmt-in-below { from { opacity: 0; transform: translate(-50%, 4px) scale(.94); } }
#fmt-bar.hidden { display: none; }
.fmt-btn {
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 13px; color: var(--ink-soft);
  transition: all .16s var(--ease);
}
.fmt-btn:hover { background: rgb(var(--on) / .08); color: var(--ink); }
.fmt-btn.active { background: var(--coral-soft); color: var(--coral); box-shadow: inset 0 0 0 1px rgba(240,109,79,.4); }
.fmt-btn b { font-weight: 800; }
.fmt-btn i { font-style: italic; font-family: Georgia, serif; }
.fmt-sep { width: 1px; height: 18px; background: var(--line-w); margin: 0 4px; flex: none; }
.fmt-sw {
  position: relative; width: 22px; height: 22px; border-radius: 7px;
  background: var(--c); border: 1px solid rgb(var(--on) / .18);
  cursor: pointer; transition: transform .16s var(--ease); flex: none;
}
.fmt-sw:hover { transform: scale(1.18); }
.fmt-sw.active { box-shadow: 0 0 0 2px var(--menu-bg), 0 0 0 4px var(--coral); transform: scale(1.12); }
.fmt-sw input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.fmt-sw.fmt-custom { background: conic-gradient(#F06D4F, #F4B860, #7ED6C1, #8B5CF6, #F06D4F); }
#fmt-font {
  height: 30px; max-width: 118px; border-radius: 9px;
  background: rgb(var(--on) / .06); border: 1px solid var(--line-soft);
  color: var(--ink-soft); font-family: var(--font); font-size: 11.5px; font-weight: 600;
  padding: 0 4px; outline: none; cursor: pointer;
}
#fmt-font option { background: var(--menu-bg); }

/* ─── Page bar / filmstrip ─── */
#page-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 15;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 60px);
  padding: 9px 10px;
  border-radius: 19px;
  background: var(--glass-bg);
  border: 1px solid var(--line-w);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-pop);
}
#film-pages { display: flex; gap: 8px; width: min(318px, calc(100vw - 520px)); max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 3px; touch-action: pan-x; overscroll-behavior-inline: contain; }
#film-pages::-webkit-scrollbar { display: none; }
.film-page {
  position: relative; flex: none;
  width: 84px; border-radius: 13px; overflow: visible; scroll-snap-align: start;
  cursor: pointer; text-align: center;
  transition: transform .25s var(--ease);
}
.film-page:hover { transform: none; }
.film-page .thumb { position: relative; width: 84px; min-height: 112px; border-radius: 13px; overflow: hidden; border: 1.5px solid rgb(var(--on) / .13); background: var(--card); transition: border-color .25s, box-shadow .25s; }
.film-page.active .thumb { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(240,109,79,.28), 0 10px 24px rgba(240,109,79,.22); }
.film-page .thumb canvas { width: 100%; height: 100%; display: block; }
.film-page .pnum { position: absolute; top: -6px; left: -6px; z-index: 2; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--card-2); border: 1px solid var(--line-w); font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--ink-soft); display: grid; place-items: center; }
.film-page.active .pnum { background: var(--coral-action); border-color: var(--coral-action); color: #fff; }
.film-page .pacts { position: absolute; top: -7px; right: -7px; z-index: 3; display: none; gap: 4px; }
.film-page:hover .pacts, .film-page:focus-within .pacts { display: flex; }
.film-page .pacts button { width: 19px; height: 19px; border-radius: 7px; background: rgba(9,6,16,.9); border: 1px solid var(--line-w); color: var(--ink-soft); font-size: 10px; display: grid; place-items: center; backdrop-filter: blur(6px); }
.film-page .pacts button:hover { color: var(--ink); border-color: var(--coral); }
.film-page .pinsert { position: absolute; z-index: 4; top: 50%; right: -14px; transform: translateY(-50%); width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); background: var(--card-2); border: 1px solid var(--line-w); box-shadow: 0 6px 18px rgba(0,0,0,.3); opacity: .58; transition: opacity .18s, color .18s, border-color .18s, transform .18s var(--ease); }
.film-page:hover .pinsert, .film-page:focus-within .pinsert, .film-page .pinsert:focus-visible { opacity: 1; color: var(--coral); border-color: var(--coral); transform: translateY(-50%) scale(1.08); }
.film-page.dragging { opacity: .35; }
.film-page.drag-over .thumb { border-color: var(--foam); box-shadow: 0 0 0 3px rgba(126,214,193,.3); }
#page-add { flex: none; width: 46px; min-height: 112px; border-radius: 13px; border: 1.5px dashed rgb(var(--on) / .18); color: var(--ink-faint); display: grid; place-items: center; transition: all .25s; }
#page-add:hover { border-color: var(--coral); color: var(--coral); background: var(--coral-soft); }
#page-add .ic { width: 16px; height: 16px; }

/* ═══════════ INSPECTOR (UNIFIED LEFT MENU) ═══════════ */
#inspector {
  flex: none; width: 320px;
  display: flex; flex-direction: column;
  background: var(--space-2);
  border-right: 1px solid var(--line-soft);
  border-left: 0;
  min-height: 0;
  animation: insp-in .2s var(--ease);
}
#inspector.hidden { display: none !important; }
#panel.hidden { display: none !important; }
@keyframes insp-in { from { opacity: 0; transform: translateX(-8px); } }
#inspector-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px; border-bottom: 1px solid var(--line-soft); }
.inspector-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 15px; margin-right: 6px; cursor: pointer; color: var(--ink-soft); }
.inspector-back:hover { background: rgb(var(--on) / .08); color: var(--ink); }
#inspector-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
#inspector-title .kind-tag { font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); background: rgba(215,182,240,.12); padding: 3px 7px; border-radius: 99px; }
#inspector-body { flex: 1; overflow-y: auto; padding: 14px 14px 22px; min-height: 0; }

/* The inspector had the same near-invisible 9px grey labels as the panels. It
   gets the same treatment, so both sides of the app read the same way. */
.ins-label { font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--ink-soft); margin: 15px 2px 7px; }
.ins-label:first-child { margin-top: 0; }
.ins-geometry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.transform-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.transform-rotate-nudge { margin-top: 8px; }
.transform-aspect { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;margin-top:9px; }
.transform-aspect span { color:var(--ink-faint);font-size:10px;line-height:1.35; }
.inspector-align { margin-bottom:6px; }
.transform-state { margin-bottom:8px; }
.transform-actions { grid-template-columns:1fr 1fr; }
.ins-input[aria-invalid="true"] { border-color:#ff8a70;background:rgba(240,109,79,.1); }
.ins-geometry label { min-width: 0; }
.ins-geometry label > span { display: block; margin: 0 2px 5px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.ins-geometry .ins-input { padding-inline: 7px; font-family: var(--mono); font-size: 10.5px; }

.ins-input, .ins-select, .ins-textarea {
  width: 100%; padding: 8px 10px; border-radius: 9px;
  background: rgb(var(--on) / .05); border: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink); outline: 0;
  transition: border-color .2s, background .2s;
}
.ins-input:focus, .ins-select:focus, .ins-textarea:focus { border-color: rgba(240,109,79,.55); background: rgb(var(--on) / .07); }
.ins-textarea { resize: vertical; min-height: 56px; line-height: 1.5; }
.ins-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23a79ebb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; padding-right: 26px; cursor: pointer; }
.ins-select option { background: var(--space-3); }

.ins-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; }
.ins-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgb(var(--on) / .12); }
.ins-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; margin-top: -7px; box-shadow: 0 2px 8px rgba(0,0,0,.5); border: 0; transition: transform .15s; }
.ins-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ins-slider::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(var(--on) / .12); }
.ins-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.5); }

.seg-mini { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: rgb(var(--on) / .05); border: 1px solid var(--line-soft); width: 100%; }
.seg-mini button { flex: 1; padding: 6px 4px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--ink-faint); transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 4px; }
.seg-mini button:hover { color: var(--ink); }
.seg-mini button.active { background: rgb(var(--on) / .12); color: var(--active-text); }
.seg-mini button .ic { width: 13px; height: 13px; }

.pose-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 9px; background: rgb(var(--on) / .05); border: 1px solid var(--line-soft); }
.pose-picker button { min-height: 38px; padding: 6px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; line-height: 1.2; text-align: left; color: var(--ink-faint); transition: background .2s, color .2s; }
.pose-picker button:hover { color: var(--ink); background: rgb(var(--on) / .06); }
.pose-picker button.active { background: rgb(var(--on) / .12); color: var(--active-text); box-shadow: inset 0 0 0 1px rgb(var(--on) / .07); }

.color-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.color-dot { width: 24px; height: 24px; border-radius: 8px; border: 1px solid rgb(var(--on) / .16); cursor: pointer; transition: transform .18s var(--ease); position: relative; }
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { box-shadow: 0 0 0 2px var(--space-2), 0 0 0 4px var(--coral); }
.color-custom { position: relative; width: 24px; height: 24px; border-radius: 8px; border: 1.5px dashed rgb(var(--on) / .25); display: grid; place-items: center; cursor: pointer; overflow: hidden; font-size: 12px; color: var(--ink-faint); }
.color-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; }
.toggle-row span { font-size: 12.5px; font-weight: 560; color: var(--ink-soft); }
.toggle { position: relative; width: 36px; height: 21px; border-radius: 99px; background: rgb(var(--on) / .12); transition: background .25s; flex: none; }
/* The pill paints at 36×21 because that is the rhythm the inspector wants, but
   a 36×21 strip is a mis-tap waiting to happen on the iPad the mobile QA
   drives — and these switches carry the primary on/off decisions. Grow the
   target without moving a pixel: an invisible box centred on the pill, 44px
   wide and exactly one row pitch tall (21px control + 2×8px row padding) so it
   never reaches into the switch above or below. */
.toggle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 37px; transform: translate(-50%, -50%); }
.toggle::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.toggle.on { background: var(--coral); }
.toggle.on::after { transform: translateX(14px); }

.ins-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ins-actions .pbtn.danger { color: #ff9d8a; border-color: rgba(240,109,79,.25); }
.ins-actions .pbtn.danger:hover { background: rgba(240,109,79,.14); border-color: rgba(240,109,79,.5); }

/* ═══════════ OVERLAYS / MODALS ═══════════ */
#overlay-root { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
#overlay-root > * { pointer-events: auto; }

.scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(10px); display: grid; place-items: center; animation: scrim-in .35s ease; }
@keyframes scrim-in { from { opacity: 0; } }

.modal {
  position: relative;
  border-radius: 26px;
  background: linear-gradient(165deg, var(--modal-1) 0%, var(--space-2) 60%);
  border: 1px solid rgb(var(--on) / .12);
  box-shadow: 0 60px 140px rgba(0,0,0,.65), 0 0 120px rgba(139,92,246,.1);
  animation: modal-in .5s var(--ease);
  overflow: hidden;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 10; width: 32px; height: 32px; border-radius: 10px; background: rgb(var(--on) / .06); border: 1px solid var(--line-w); color: var(--ink-soft); font-size: 13px; display: grid; place-items: center; transition: all .2s; }
.modal-x:hover { background: rgb(var(--on) / .12); color: var(--ink); }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--coral); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .6; }

/* ─── Welcome ─── */
/* The card hugs its content. A fixed height left a tall band of empty space
   under the footer, because the three doors never fill 690px on a desktop
   viewport. The cap only engages on short viewports, where the body scrolls
   and the footer stays pinned. */
.welcome { width: 880px; max-height: min(690px, calc(100dvh - 28px)); padding: 0; overflow: hidden; }
.welcome-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.welcome-hero { position: relative; padding: 30px 48px 18px; text-align: center; overflow: hidden; flex: none; }
.welcome-hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 130%; background: radial-gradient(50% 60% at 50% 0%, rgba(139,92,246,.28), transparent 70%); pointer-events: none; }
/* A canvas keeps its intrinsic (attribute) size when width/height are auto, so
   inset alone left it as a small block in the corner. Pin it to the hero. */
.welcome-hero .stars-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.welcome-hero > * { position: relative; }
/* Brand lockup and eyebrow each own a line. As inline-flex they collapsed onto
   one line, so the eyebrow's leading rule ran into the logo. */
.welcome-brand { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 auto 18px; }
.welcome-brand img.logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 10px 30px rgba(240,109,79,.38); }
.welcome-brand span { display: grid; text-align: left; line-height: 1; }
.welcome-brand b { font-size: 17px; letter-spacing: -.035em; }
.welcome-brand small { margin-top: 4px; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.welcome-hero > .eyebrow { display: flex; justify-content: center; }
.welcome-hero h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.28; letter-spacing: -.045em; font-weight: 730; text-wrap: pretty; overflow: visible; }
.welcome-hero h1 .grad { display: inline-block; position: relative; overflow: visible; font-style: italic; color: var(--coral); -webkit-text-fill-color: var(--coral); }
.welcome-hero h1 .grad::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; font: inherit; font-style: inherit; background: linear-gradient(96deg, var(--amber) 0%, var(--coral) 42%, var(--lilac) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; pointer-events: none; }
.welcome-hero p { margin: 14px auto 0; max-width: 480px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.store-ingest { padding: 0 40px 4px; flex: none; }
.store-ingest-label { display: block; font-size: 13px; font-weight: 680; letter-spacing: -.02em; }
.store-ingest-hint { margin: 4px 0 10px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.store-ingest-row { display: flex; gap: 8px; align-items: stretch; }
.store-ingest-input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-w); background: rgb(var(--on) / .05); color: var(--ink); font-size: 13px; }
.store-ingest-input:focus { outline: 2px solid color-mix(in srgb, var(--lilac) 70%, transparent); outline-offset: 1px; }
.store-ingest-go { height: 40px; padding: 0 14px; white-space: nowrap; }
.store-ingest-error { margin: 8px 0 0; font-size: 12px; color: var(--coral); }
.store-ingest-steps { display: flex; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.store-ingest-steps li { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .45; }
.store-ingest-steps li.is-done { opacity: .75; }
.store-ingest-steps li.is-active { color: var(--lilac); opacity: 1; }
.store-drafts-modal { width: min(920px, calc(100% - 24px)); }
.store-drafts-head { display: flex; gap: 16px; align-items: flex-start; padding: 28px 40px 8px; }
.store-drafts-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; box-shadow: 0 10px 24px rgb(0 0 0 / .22); }
.store-drafts-head h2 { margin: 4px 0 8px; font-size: 22px; letter-spacing: -.03em; }
.store-drafts-props { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.store-draft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 40px 20px; }
.store-draft-card { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-soft); background: rgb(var(--on) / .04); }
.store-draft-card header { display: grid; gap: 4px; }
.store-draft-card b { font-size: 15px; }
.store-draft-card small { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.store-draft-card ol { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 22px 40px 16px; flex: none; }
.door { position: relative; padding: 22px 18px 18px; border-radius: 19px; background: rgb(var(--on) / .035); border: 1px solid var(--line-w); text-align: left; transition: all .3s var(--ease); overflow: hidden; }
.door:hover { transform: translateY(-4px); border-color: var(--door-c, var(--coral)); box-shadow: var(--shadow-card); background: rgb(var(--on) / .055); }
.door::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--door-c, var(--coral)); opacity: 0; transition: opacity .3s; }
.door:hover::before { opacity: 1; }
.door .d-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--door-c, var(--coral)); background: color-mix(in srgb, var(--door-c, var(--coral)) 15%, transparent); margin-bottom: 14px; }
.door .d-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.door b { display: block; font-size: 15px; font-weight: 680; letter-spacing: -.02em; }
.door p { margin-top: 6px; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.door .d-go { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--door-c, var(--coral)); }
.door .d-go i { font-style: normal; transition: transform .18s var(--ease); }
.door:hover .d-go i { transform: translateX(3px); }
/* These two are the quiet routes out of the card, but as faint bare text they
   read as captions rather than choices. Give them the same chip treatment the
   rest of the studio uses for secondary actions. */
.welcome-foot { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 14px 40px 16px; flex: none; background: color-mix(in srgb, var(--modal-1) 86%, transparent); border-top: 1px solid var(--line-soft); }
.welcome-foot button { padding: 9px 15px; border-radius: 10px; font-size: 12.5px; font-weight: 620; white-space: nowrap; color: var(--ink-soft); background: rgb(var(--on) / .055); border: 1px solid var(--line-soft); transition: background .2s, border-color .2s, color .2s; }
.welcome-foot button:hover { color: var(--ink); background: rgb(var(--on) / .1); border-color: var(--line-w); }

/* ─── AI studio & Paywall ─── */
.ai-paywall-card {
  display: grid;
  gap: 13px;
  padding: 18px 14px;
  border: 1px solid var(--control-border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}
[data-theme="dark"] .ai-paywall-card, :root:not([data-theme="light"]) .ai-paywall-card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, rgba(241, 115, 89, .06) 0%, transparent 40%), var(--card);
  border-color: rgba(241, 115, 89, .25);
}
[data-theme="light"] .ai-paywall-card {
  background: #FFFFFF;
  border-color: #E2E4E8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.ai-paywall-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(240, 109, 79, .35);
  background: rgba(240, 109, 79, .1);
  color: var(--coral);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ai-paywall-sparkle { font-size: 11px; }

.ai-paywall-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.ai-paywall-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.5;
}

.ai-paywall-features {
  display: grid;
  gap: 7px;
  margin: 2px 0;
}

.ai-paywall-feat {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--control-bg);
  border: 1px solid var(--line-soft);
}
[data-theme="light"] .ai-paywall-feat {
  background: #F7F8FA;
  border-color: #ECEEF2;
}

.ai-paywall-feat .feat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(240, 109, 79, .12);
  display: grid;
  place-items: center;
  font-size: 13px;
}

.ai-paywall-feat strong {
  display: block;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}

.ai-paywall-feat p {
  margin: 2px 0 0;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.35;
}

.ai-paywall-interval-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.ai-interval-btn {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--control-border);
  background: var(--control-bg);
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--ease);
}
[data-theme="light"] .ai-interval-btn {
  background: #FFFFFF;
  border-color: #DDE0E5;
}
.ai-interval-btn:hover {
  border-color: var(--coral);
}
.ai-interval-btn.active {
  border-color: var(--coral);
  background: rgba(240, 109, 79, .08);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--coral);
}

.ai-interval-btn span { font-size: 11px; font-weight: 650; }
.ai-interval-btn strong { font-size: 16px; font-weight: 800; color: var(--ink); }
.ai-interval-btn strong small { font-size: 10px; font-weight: 500; color: var(--ink-faint); }

.ai-save-pill {
  position: absolute;
  top: -8px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(240, 109, 79, .35);
}

.ai-paywall-upgrade-btn {
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 750 !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  background: linear-gradient(160deg, #F58367, var(--coral) 55%, var(--coral-deep)) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(240, 109, 79, .35) !important;
  cursor: pointer;
  transition: transform .2s var(--ease), filter .2s, box-shadow .2s;
}
.ai-paywall-upgrade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(240, 109, 79, .5) !important;
  filter: brightness(1.05);
}

.ai-paywall-guarantee {
  margin: 0;
  color: var(--ink-faint);
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
}

.ai-paywall-auth-footer {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  display: grid;
  gap: 6px;
}
.ai-paywall-auth-footer p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.ai-paywall-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  transition: all .2s var(--ease);
}
[data-theme="light"] .ai-paywall-login-link {
  background: #FFFFFF;
  border-color: #DDE0E5;
}
.ai-paywall-login-link:hover {
  border-color: var(--coral);
  color: var(--coral);
  transform: translateY(-1px);
}

.ai-studio-intro { display: flex; gap: 11px; padding: 13px; border: 1px solid rgba(139,92,246,.24); border-radius: 15px; background: linear-gradient(145deg, rgba(139,92,246,.11), rgba(240,109,79,.07)); }
.ai-studio-mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(139,92,246,.2); color: var(--lilac); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.ai-studio-intro b { display: block; font-size: 12.5px; }
.ai-studio-intro p { margin-top: 4px; color: var(--ink-faint); font-size: 10.5px; line-height: 1.5; }
.ai-usage { display: flex; justify-content: space-between; gap: 12px; margin: 9px 2px 13px; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.ai-usage b { color: var(--foam); }
.ai-tool { margin-bottom: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.ai-tool > header { display: flex; align-items: flex-start; gap: 9px; }
.ai-tool-num { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: rgba(240,109,79,.15); color: var(--coral); font-family: var(--mono); font-size: 9px; font-weight: 800; }
.ai-tool > header b { display: block; font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.ai-tool > header p { margin-top: 3px; color: var(--ink-faint); font-size: 10.5px; line-height: 1.45; }
.ai-tool form { display: grid; gap: 9px; margin-top: 11px; }
.ai-tool label > span { display: block; margin: 0 2px 6px; color: var(--ink-soft); font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.ai-tool .ins-textarea { min-height: 68px; max-height: 150px; }

/* Quick chips & tone selection */
.ai-quick-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 1px 0 5px; }
.ai-quick-presets > span { font-size: 9.5px; font-family: var(--mono); color: var(--ink-faint); margin-right: 2px; }
.ai-chip { padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line-w); background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 9.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.ai-chip:hover { border-color: rgba(240,109,79,.4); background: rgba(240,109,79,.1); color: var(--ink); }
.ai-tone-chips { display: grid; gap: 6px; margin: 2px 0 6px; }
.ai-field-label { font-family: var(--display); font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.ai-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tone-chip { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-w); background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: all .18s; }
.ai-tone-chip:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--ink); }
.ai-tone-chip.active { border-color: rgba(240,109,79,.6); background: rgba(240,109,79,.15); color: var(--coral); font-weight: 700; }

.ai-image-note { padding: 8px 9px; border-radius: 9px; background: rgb(var(--on) / .04); color: var(--ink-faint); font-size: 10px; line-height: 1.45; }
.ai-progress, .ai-error { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 11px; padding: 11px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-w); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.ai-progress b, .ai-error b { display: block; font-size: 11.5px; }
.ai-progress p, .ai-error p { margin-top: 3px; color: var(--ink-faint); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.ai-progress-orbit { width: 27px; height: 27px; border: 2px solid rgba(139,92,246,.22); border-top-color: var(--lilac); border-radius: 50%; animation: ai-orbit .8s linear infinite; }
.ai-server-bounded { color: var(--ink-faint); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@keyframes ai-orbit { to { transform: rotate(1turn); } }
.ai-error { border-color: rgba(240,109,79,.3); background: rgba(240,109,79,.08); }
.ai-error > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: rgba(240,109,79,.18); color: #ff9d8a; font-weight: 800; }
.ai-result { margin-bottom: 12px; padding: 13px; border: 1px solid rgba(126,214,193,.3); border-radius: 16px; background: linear-gradient(145deg, rgba(126,214,193,.09), rgb(var(--on) / .025)); box-shadow: 0 16px 34px rgba(0,0,0,.17); }
.ai-result > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ai-result > header b { min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.ai-result > header span { flex: none; padding: 3px 7px; border-radius: 99px; background: var(--foam-soft); color: var(--foam); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ai-caption-list { display: grid; gap: 7px; }
.ai-caption-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 10px; background: rgb(var(--on) / .04); }
.ai-caption-row p { min-width: 0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.ai-result ol { display: grid; gap: 6px; margin: 0 0 10px 19px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.ai-palette { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.ai-palette i { width: 27px; height: 27px; border-radius: 8px; background: var(--swatch); border: 1px solid rgb(var(--on) / .15); }
.ai-palette b { margin-left: 3px; color: var(--ink-soft); font-size: 10px; }
.ai-rationale, .ai-template-note { margin: 0 0 10px; color: var(--ink-faint); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-result > img { display: block; width: 100%; max-height: 180px; margin-bottom: 9px; border-radius: 11px; object-fit: cover; background: var(--card); }
.ai-review-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.ai-discard-error { margin-top: 9px; padding: 8px 9px; border: 1px solid rgba(240,109,79,.28); border-radius: 9px; background: rgba(240,109,79,.08); color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.project-start-modal { width: min(520px, calc(100vw - 32px)); padding: 30px; }
.project-start-modal h2 { margin-top: 8px; font-size: 27px; letter-spacing: -.035em; }
.project-start-copy { margin: 10px 0 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.project-start-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-start-choices button { min-height: 58px; padding: 14px; text-align: left; font-size: 13px; font-weight: 680; }
.project-load-failure { width: min(520px, calc(100vw - 32px)); padding: 30px; }
.project-load-failure h2 { margin: 8px 0 10px; font-size: 26px; letter-spacing: -.03em; }
.project-load-failure [data-load-detail] { margin: 0 0 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.project-load-actions, .project-recovery-actions { flex-wrap: wrap; }
.project-recovery-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ─── Recovery and conflict center ─── */
.recovery-shell { padding: 24px; }
.recovery-center { width: min(780px, calc(100vw - 32px)); padding: 30px; overflow-y: auto; }
.recovery-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-right: 38px; }
.recovery-heading h2 { margin-top: 8px; font-size: clamp(27px, 4vw, 36px); letter-spacing: -.045em; }
.recovery-local-pill { flex: none; margin-top: 4px; padding: 5px 9px; border-radius: 99px; border: 1px solid rgba(244,184,96,.34); background: rgba(244,184,96,.09); color: var(--amber); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.recovery-local-pill[hidden] { display: none; }
.recovery-intro { max-width: 620px; margin: 10px 0 20px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.recovery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recovery-card { width: 100%; min-height: 132px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-w); background: rgb(var(--on) / .035); text-align: left; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.recovery-card:hover { transform: translateY(-1px); border-color: rgb(var(--on) / .22); background: rgb(var(--on) / .055); }
.recovery-card[aria-pressed="true"] { border-color: rgba(240,109,79,.5); background: linear-gradient(145deg, rgba(240,109,79,.12), rgba(139,92,246,.08)); box-shadow: inset 0 0 0 1px rgba(240,109,79,.08); }
.recovery-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.recovery-card-top strong { min-width: 0; color: var(--ink); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.recovery-slot { flex: none; padding: 3px 7px; border-radius: 99px; background: rgb(var(--on) / .07); color: var(--ink-faint); font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; }
.recovery-comparison { display: block; margin-top: 10px; color: var(--amber); font-size: 11.5px; line-height: 1.45; }
.recovery-meta { display: block; margin-top: 8px; color: var(--ink-ghost); font-family: var(--mono); font-size: 9px; line-height: 1.5; }
.recovery-empty { grid-column: 1 / -1; display: grid; gap: 6px; padding: 24px; border: 1px dashed var(--line-w); border-radius: 16px; color: var(--ink-faint); text-align: center; }
.recovery-empty strong { color: var(--ink-soft); }
.recovery-status { min-height: 20px; margin: 14px 0 2px; color: var(--ink-faint); font-size: 11.5px; line-height: 1.5; }
.recovery-status[role="alert"] { color: #ff9d8a; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.recovery-actions .pbtn { min-height: 38px; }
.recovery-actions .pbtn.danger { color: #ff9d8a; border-color: rgba(240,109,79,.3); }
.recovery-discard-note { margin-top: 10px; color: var(--ink-ghost); font-size: 10.5px; line-height: 1.45; }

/* ─── Tour spotlight ─── */
#tour-root { position: absolute; inset: 0; }
.tour-hole { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(6,4,11,.78); transition: all .5s var(--ease); pointer-events: none; }
.tour-hole::after { content: ''; position: absolute; inset: -3px; border-radius: 16px; border: 1.5px solid rgba(240,109,79,.65); box-shadow: 0 0 30px rgba(240,109,79,.3); animation: tour-glow 2s ease-in-out infinite; }
@keyframes tour-glow { 50% { border-color: rgba(244,184,96,.8); } }
.tour-tip {
  position: absolute; width: 320px; padding: 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--modal-1), var(--space-3));
  border: 1px solid rgb(var(--on) / .14);
  box-shadow: var(--shadow-pop);
  transition: all .5s var(--ease);
  z-index: 5;
}
.tour-tip .t-step { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.tour-tip h3 { margin-top: 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -.025em; }
.tour-tip p { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.tour-tip p b { color: var(--ink); }
.tour-tip .t-kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; background: rgb(var(--on) / .09); border: 1px solid var(--line-w); font-family: var(--mono); font-size: 10px; color: var(--ink); }
.tour-tip .t-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.tour-tip .t-dots { display: flex; gap: 5px; flex: 1; }
.tour-tip .t-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--on) / .18); transition: all .3s; }
.tour-tip .t-dots i.on { background: var(--coral); transform: scale(1.3); }
.tour-skip { font-size: 11px; color: var(--ink-faint); font-weight: 600; }
.tour-skip:hover { color: var(--ink); }
.tour-next { padding: 8px 16px; border-radius: 9px; background: linear-gradient(160deg, var(--coral-action), #BE452F 55%, var(--coral-action-deep)); color: #fff; font-size: 12px; font-weight: 660; box-shadow: 0 6px 20px rgba(240,109,79,.35); transition: transform .2s var(--ease); }
.tour-next:hover { transform: translateY(-1px); }

/* ─── Premiere (export) ─── */
.premiere { width: 1020px; max-width: calc(100vw - 48px); }
.premiere-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); grid-template-rows: minmax(0, 1fr) auto; flex: 1; min-height: 620px; overflow: hidden; }
.premiere-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 54px 28px 28px; border-right: 1px solid var(--line-soft);
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(240,109,79,.22), transparent 70%),
    radial-gradient(80% 55% at 50% 0%, var(--stage-glow-1), transparent 70%),
    var(--space-2);
}
.premiere-stage .stage-tag { position: absolute; top: 16px; left: 18px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.premiere-stage .stage-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: .3; } }

.prem-feature { position: relative; align-self: center; display: grid; place-items: center; width: min(66%, 340px); height: 320px; flex: none; overflow: hidden; }
.prem-feature canvas { display: block; height: 320px; width: auto; max-width: 100%; object-fit: contain; border-radius: 18px; box-shadow: var(--shadow-pop); }
.prem-preview-loading { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: 40px 20px; text-align: center; }

.marquee-viewport { overflow: hidden; width: 100%; flex: none; }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 18px; padding: 10px 0 22px; animation: marquee-x 26s linear infinite; }
.marquee-track:hover, .premiere-stage:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-x { to { transform: translateX(-50%); } }
.marquee-page { flex: none; width: clamp(96px, 12vw, 132px); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid rgb(var(--on) / .12); transform: rotate(-1.2deg); opacity: .86; }
.marquee-page:nth-child(even) { transform: rotate(1.4deg) translateY(8px); }
/* Pages are portrait store shots — display them at their own aspect instead
   of squashing a 220x477 render into a 190px-tall letterbox. */
.marquee-page canvas { display: block; width: 100%; height: auto; }

/* Free-plan watermark demo — DOM overlay only, never used to pick an export. */
.prem-watermark-slot { display: flex; justify-content: center; padding: 0 12px; }

.premiere-side { padding: 30px; overflow-y: auto; min-width: 0; }
.premiere-side h2 { font-size: 26px; font-weight: 730; letter-spacing: -.04em; margin-top: 10px; }
.premiere-side h2 .grad { background: linear-gradient(96deg, var(--amber), var(--coral) 50%, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.premiere-side .lede { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.prem-launch-kit { margin-top: 14px; width: 100%; justify-content: center; }
.launch-kit-feature { display: grid; place-items: center; min-height: 180px; }
.launch-kit-feature canvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
.launch-kit-formats { display: grid; gap: 6px; }
.launch-kit-format { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line-w); border-radius: 12px; background: rgb(var(--on) / .03); cursor: pointer; }
.launch-kit-format.on { border-color: rgba(240,109,79,.38); background: var(--coral-soft); }
.launch-kit-format.is-focus { box-shadow: 0 0 0 1px var(--coral); }
.launch-kit-format input { width: 18px; height: 18px; accent-color: var(--coral-action); }
.launch-kit-format b { display: block; font-size: 12.5px; }
.launch-kit-format small { display: block; margin-top: 2px; font: 600 10px/1.2 var(--mono); color: var(--ink-faint); }
.launch-kit-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 12px; }
.launch-kit-thumb { padding: 4px; border: 1px solid transparent; border-radius: 10px; background: rgb(var(--on) / .04); }
.launch-kit-thumb.is-focus { border-color: var(--coral); }
.launch-kit-thumb canvas { display: block; border-radius: 6px; }

.prem-sec { margin-top: 22px; }
.prem-sec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.prem-sec-head > span { font-family: var(--mono); font-size: 9px; color: var(--coral); }
.prem-sec-head h3 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0; font-weight: 600; }

.prem-readiness-summary, .prem-issue { display: flex; align-items: flex-start; gap: 10px; }
.prem-readiness-summary { padding: 0; font-size: 12.5px; }
.prem-readiness-summary .ci, .prem-issue .ci { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; font-style: normal; }
.prem-readiness-summary.pass .ci { background: var(--foam-soft); color: var(--foam); }
.prem-readiness-summary.warn .ci { background: rgba(244,184,96,.15); color: var(--amber); }
.prem-readiness-summary.fail .ci { background: var(--coral-soft); color: var(--coral); }
.prem-readiness-summary b { color: var(--ink); font-weight: 620; }
.prem-issues { display: grid; gap: 9px; margin-top: 10px; }
.prem-issue { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.prem-issue b { color: var(--ink); font-weight: 620; display: block; }
.prem-issue small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 11px; }
.prem-issue .ci { background: rgba(244,184,96,.15); color: var(--amber); }
.prem-issue.warn .ci { background: rgba(244,184,96,.15); color: var(--amber); }
.prem-issue.fail .ci { background: var(--coral-soft); color: var(--coral); }
.prem-issue .btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }


.prem-form { display: grid; gap: 12px; }
.prem-form .ins-label { margin: 0 0 6px; }
#prem-export-extras { display: grid; gap: 10px; margin-top: 10px; }
.prem-export-extra { display: grid; gap: 6px; }
.prem-export-extra .ins-label { display: flex; justify-content: space-between; align-items: baseline; }
.prem-export-hint { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ink-faint); }
.prem-export-check { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; }
.prem-export-check input { margin-top: 3px; }
.prem-export-check b { display: block; font-size: 12px; }
.prem-export-check small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--ink-faint); }
.prem-feature.is-transparent,
.premiere-stage.is-transparent-export .prem-feature {
  background-color: #d7d2c8;
  background-image:
    linear-gradient(45deg, #eeeae2 25%, transparent 25%),
    linear-gradient(-45deg, #eeeae2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eeeae2 75%),
    linear-gradient(-45deg, transparent 75%, #eeeae2 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  border-radius: 16px;
}
.prod-export-extras { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 8px; }
.prod-export-extra { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-faint); }
.prod-export-extra .ins-slider { width: 120px; height: 28px; }
.prod-export-check { cursor: pointer; }
.prod-export-check span { color: var(--ink); font-weight: 600; }
.prem-ship { height: 50px; border-radius: 13px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

.prem-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 14px 28px 18px; border-top: 1px solid var(--line-soft); background: var(--space-2); }
.prem-foot .prem-note { flex: 1; text-align: left; margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-ghost); }
.prem-foot #prem-go { min-width: 300px; }

/* ─── Premiere In-Modal Plans / Upgrade View ─── */
.prem-main-view.is-hidden { display: none; }
.prem-plans-view { display: none; }
.prem-plans-view.is-visible { display: block; animation: prem-fade-in .22s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes prem-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.prem-plans-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--coral);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  transition: opacity .15s;
}
.prem-plans-back:hover { opacity: .8; }
.prem-plans-back .ci { font-style: normal; font-size: 13px; font-weight: 700; }

.prem-billing-toggle {
  display: inline-flex;
  background: rgb(var(--on) / .06);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 3px;
  gap: 4px;
  margin: 14px 0 18px;
}
.prem-toggle-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s var(--ease);
}
.prem-toggle-btn.active {
  background: var(--surface-float, #ffffff);
  color: var(--ink);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08));
}
.prem-save-pill {
  background: rgba(240, 109, 79, .15);
  color: var(--coral);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  letter-spacing: .02em;
}

.prem-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.prem-plan-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgb(var(--on) / .025);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s var(--ease), border-color .2s;
}
.prem-plan-card:hover {
  border-color: rgba(240, 109, 79, .4);
}
.prem-plan-card.featured {
  border-color: rgba(240, 109, 79, .5);
  background: linear-gradient(180deg, rgba(240, 109, 79, .06), rgb(var(--on) / .02));
  box-shadow: 0 4px 16px rgba(240, 109, 79, .08);
}
.prem-plan-popular {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(240, 109, 79, .3);
}

.prem-plan-name {
  font-size: 16px;
  font-weight: 730;
  color: var(--ink);
  margin: 0 0 6px;
}
.prem-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 2px;
}
.prem-plan-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}
.prem-plan-period {
  font-size: 11px;
  color: var(--ink-faint);
}
.prem-plan-subtext {
  font-size: 10px;
  color: var(--ink-faint);
  min-height: 14px;
  margin: 0 0 12px;
}

.prem-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.prem-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.35;
}
.prem-plan-features li .chk {
  color: var(--foam);
  font-weight: 700;
  flex: none;
}

.prem-plan-buy {
  width: 100%;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.prem-plan-buy:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* PRO Badges and CTAs */
.prem-badge-pro {
  display: inline-block;
  padding: 1px 5px;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .06em;
  border-radius: 4px;
  background: var(--coral);
  color: #fff;
  margin-left: 4px;
  vertical-align: middle;
}

.prem-unlock-badge {
  background: rgba(240, 109, 79, .12);
  border: 1px solid rgba(240, 109, 79, .3);
  color: var(--coral);
  font-size: 10px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .15s;
  margin-left: auto;
  margin-right: 8px;
}
.prem-unlock-badge:hover {
  background: var(--coral);
  color: #fff;
}

.prem-progress { padding: 40px; text-align: center; }
.prem-progress .reel { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; border: 3px solid rgb(var(--on) / .12); border-top-color: var(--coral); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.prem-progress h3 { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.prem-progress .step-line { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); min-height: 16px; }
.prem-bar { margin: 22px auto 0; max-width: 340px; height: 6px; border-radius: 6px; background: rgb(var(--on) / .08); overflow: hidden; }
.prem-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--coral), var(--amber)); transition: width .4s var(--ease); }

.prem-done { padding: 36px 40px; text-align: center; position: relative; overflow: hidden; }
.prem-done h3 { font-size: 26px; font-weight: 730; letter-spacing: -.04em; }
.prem-done h3 .grad { background: linear-gradient(96deg, var(--amber), var(--coral) 50%, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.prem-done p { margin: 10px auto 0; max-width: 400px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.prem-done .btn-row { justify-content: center; margin-top: 24px; }

/* align-self and align-content are load-bearing, not tidying. .premiere-grid
   carries min-height:620px for the export preview stage, and this panel replaces
   the whole grid's contents with one short child. Stretched to fill that row, its
   own auto rows then split the slack, which opened a ~190px hole between the text
   and the buttons — on the paywall, so the one screen asking to be paid for read
   as half-broken. Centre the panel in the row and pack its rows to the top. */
.prem-error { padding: 44px 40px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; align-self: center; align-content: start; text-align: left; max-width: 520px; margin: 0 auto; }
/* The plan wall carries three actions where a generic error carries two, and at
   520px the third wrapped onto its own line inside a mostly empty panel. */
.prem-error[data-plan-wall] { max-width: 620px; }
.prem-error .ci { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--coral-soft); color: var(--coral); flex: none; font-style: normal; }
.prem-error h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.prem-error p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.prem-error .prem-error-code { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-faint); }
.prem-error .btn-row { grid-column: 2; display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

#confetti-canvas { position: absolute; inset: 0; pointer-events: none; }

/* ─── Store preview ─── */
.store-modal { width: 800px; }
.store-wrap { display: grid; grid-template-columns: 1fr 250px; min-height: 540px; }
.store-phone { display: grid; place-items: center; padding: 34px; background: radial-gradient(90% 80% at 60% 10%, rgba(139,92,246,.14), transparent 60%); }
.store-listing { width: 330px; max-width: 100%; border-radius: 26px; background: #F6F6F8; color: #111; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.store-listing .sl-head { display: grid; grid-template-columns: 54px 1fr auto; gap: 11px; align-items: center; padding: 16px 16px 10px; }
.store-listing .sl-icon { width: 54px; height: 54px; border-radius: 13px; background: linear-gradient(140deg, var(--violet), var(--coral)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 21px; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.store-listing h4 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.store-listing .sl-dev { font-size: 10.5px; color: #007AFF; margin-top: 2px; }
.store-listing .sl-get { padding: 6px 16px; border-radius: 99px; background: #007AFF; color: #fff; font-size: 12.5px; font-weight: 700; }
.store-listing .sl-shots { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 14px; scrollbar-width: none; }
.store-listing .sl-shots::-webkit-scrollbar { display: none; }
.store-listing .sl-shots canvas { flex: none; width: 118px; border-radius: 12px; box-shadow: 0 5px 14px rgba(0,0,0,.16); }
.store-listing .sl-desc { padding: 0 16px 18px; }
.store-listing .sl-desc h5 { font-size: 11.5px; margin-bottom: 4px; }
.store-listing .sl-desc p { font-size: 10px; line-height: 1.5; color: #5B6470; }
.store-side { padding: 26px 24px; border-left: 1px solid var(--line-soft); overflow-y: auto; }
.store-side h3 { font-size: 17px; font-weight: 700; letter-spacing: -.025em; margin-top: 8px; }
.store-side p { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }
.store-side .store-tip { margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: var(--foam-soft); border: 1px solid rgba(126,214,193,.25); font-size: 11.5px; line-height: 1.55; color: var(--foam); }
/* The free-plan upgrade hint renders as a calm readiness issue, not a filled
   banner — keep the class for the click handler but strip the card chrome. */
.prem-upsell { margin: 0; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.prem-upsell b { display: block; margin-bottom: 2px; color: var(--ink); }
.prem-upsell small { display: block; color: var(--ink-faint); }
.prem-upsell .btn-row { margin-top: 9px; flex-wrap: wrap; }

/* ─── Premiere responsive + reduced motion ─── */
@media (max-width: 1100px) {
  .premiere-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .prem-feature { width: min(66%, 280px); }
}
@media (max-width: 700px) {
  .premiere { width: calc(100vw - 20px); max-width: none; max-height: calc(100vh - 20px); }
  .premiere-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; max-height: calc(100vh - 20px); overflow: auto; }
  .premiere-stage { min-height: 270px; padding: 48px 18px 18px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .prem-feature { display: none; }
  .marquee-page { width: 96px; }
  .premiere-side { overflow: visible; padding: 24px 20px; }
  .prem-form { grid-template-columns: 1fr; }
  .prem-foot { position: sticky; bottom: 0; flex-direction: column; align-items: stretch; padding: 12px 20px 16px; z-index: 4; }
  .prem-foot .prem-note { text-align: center; }
  .prem-foot #prem-go { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: none; flex-wrap: nowrap; overflow-x: auto; }
  .premiere-stage .stage-tag i { animation: none; }
  .prem-progress .reel { animation-duration: 2s; }
}

/* ─── Command palette ─── */
.palette-wrap { position: absolute; inset: 0; display: grid; justify-items: center; align-items: start; padding-top: 14vh; background: var(--scrim); backdrop-filter: blur(8px); animation: scrim-in .25s ease; }
.palette { width: 520px; border-radius: 19px; background: linear-gradient(165deg, var(--modal-1), var(--space-2)); border: 1px solid rgb(var(--on) / .14); box-shadow: var(--shadow-pop); overflow: hidden; animation: modal-in .35s var(--ease); }
.palette-input { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.palette-input .ic { width: 16px; height: 16px; color: var(--ink-faint); }
.palette-input input { flex: 1; background: none; border: 0; outline: 0; font-size: 15px; color: var(--ink); }
.palette-input input::placeholder { color: var(--ink-ghost); }
.palette-list { max-height: 360px; overflow-y: auto; padding: 8px; }
.palette-group-label { padding: 9px 12px 5px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-ghost); }
.palette-status { padding: 10px 12px; color: var(--ink-faint); font-size: 11px; }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 11px; text-align: left; }
.palette-item.sel { background: var(--coral-soft); box-shadow: inset 0 0 0 1px rgba(240,109,79,.3); }
.palette-item .pi-ic { width: 30px; height: 30px; border-radius: 9px; background: rgb(var(--on) / .06); display: grid; place-items: center; font-size: 13px; flex: none; }
.palette-item b { font-size: 13px; font-weight: 620; display: block; }
.palette-item span { font-size: 10.5px; color: var(--ink-faint); display: block; margin-top: 1px; }
.palette-item kbd { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--ink-ghost); background: rgb(var(--on) / .06); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-soft); }

/* ─── Shortcuts ─── */
.shortcuts-modal { width: 560px; padding: 30px; }
.shortcuts-modal h2 { font-size: 21px; font-weight: 720; letter-spacing: -.03em; margin-top: 8px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-top: 20px; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.shortcut-row .keys { display: flex; gap: 4px; }
.shortcut-row kbd { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 6px; background: rgb(var(--on) / .07); border: 1px solid var(--line-w); color: var(--ink); }

/* ─── Toasts ─── */
#toast-root {
  position: fixed; bottom: 168px; left: 50%; transform: translateX(-50%);
  z-index: 400; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 8px; max-height: 72px; overflow: hidden; pointer-events: none;
}
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 13px; background: var(--toast-bg); border: 1px solid var(--line-w); box-shadow: var(--shadow-pop); font-size: 12.5px; font-weight: 560; backdrop-filter: blur(12px); animation: toast-in .45s var(--ease); pointer-events: auto; }
.toast.leaving { animation: toast-out .3s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.toast .t-ic { color: var(--foam); font-weight: 700; }
.toast.error { border-color: rgba(240,109,79,.32); }
.toast.error .t-ic { color: var(--coral); }
.toast button { color: var(--coral); font-weight: 660; font-size: 12px; }
.toast button:hover { text-decoration: underline; }
/* The Undo affordance for a destructive action lives in a toast, so the toast
   has to be closable by hand rather than only on a timer. Its own control,
   not the coral action link. */
.toast-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: -6px; border-radius: 7px;
  color: var(--ink-faint); font-size: 11px; line-height: 1;
}
.toast-close:hover, .toast-close:focus-visible {
  color: var(--ink); background: rgb(var(--on) / .1); text-decoration: none;
}
/* The band is 72px tall and clips. A long message — a translated error, an
   asset name — has to stay inside it rather than lose its Undo button off the
   bottom edge, and has to survive a 360px phone. */
.toast { max-width: min(560px, calc(100vw - 24px)); }
.toast .toast-message {
  min-width: 0; overflow-wrap: anywhere; overflow: hidden;
  /* Two lines with an ellipsis beats the flat clip the 72px band gave before. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}

/* ─── Locale menu ─── */
.locale-menu { position: absolute; z-index: 300; width: 250px; max-height: 340px; overflow-y: auto; border-radius: 15px; background: var(--menu-bg); border: 1px solid rgb(var(--on) / .14); box-shadow: var(--shadow-pop); padding: 6px; animation: modal-in .3s var(--ease); }
.locale-menu .locale-row { padding: 8px 10px; }

/* ─── Name prompt ─── */
.name-modal { width: 400px; padding: 26px; }
.name-modal h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.name-modal > p:not(.eyebrow) { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.name-modal .ins-input { margin-top: 14px; font-size: 14px; padding: 11px 13px; }
.name-modal .name-error { min-height: 18px; margin: 7px 2px 0; color: #ff9d8a; font-size: 11px; line-height: 1.45; }
.name-modal .btn-row { margin-top: 16px; justify-content: flex-end; }
.name-modal .btn-row a { text-decoration: none; }

/* ─── Output size picker ─── */
.size-picker { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 26px 26px 22px; overflow: auto; }
.size-picker h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.size-picker-sub { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.size-picker-body { margin-top: 16px; display: grid; gap: 12px; }
.size-picker-group { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.size-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.size-pick { display: grid; gap: 2px; padding: 10px 11px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--control-bg); color: var(--ink); text-align: left; cursor: pointer; }
.size-pick b { font-size: 12.5px; font-weight: 680; }
.size-pick small { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.size-pick span { font-size: 11px; color: var(--ink-faint); }
.size-pick:hover { border-color: var(--control-border-hover); background: var(--control-bg-hover); }
.size-pick.active { border-color: var(--indigo-action); background: color-mix(in srgb, var(--indigo-action) 16%, var(--control-bg)); }
.size-picker-custom { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.size-picker-custom h4 { font-size: 13px; font-weight: 680; }
.size-picker-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.size-picker-fields label { display: grid; gap: 4px; font-size: 11px; color: var(--ink-soft); }
.size-picker-fields input { width: 96px; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--control-bg); color: var(--ink); }
.size-picker-fields .btn-coral { height: 36px; padding: 0 14px; }
.size-picker-ratios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.size-picker-ratios button { padding: 5px 9px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--control-bg); color: var(--ink-soft); font-size: 11px; }
.size-picker-ratios button:hover { color: var(--ink); border-color: var(--control-border-hover); }
.size-picker-hint { margin-top: 8px; font-size: 11px; color: var(--ink-faint); }
.size-picker-error { margin-top: 6px; font-size: 11px; color: #ff9d8a; }
#target-seg button.target-more { min-width: 48px; }

/* drag ghost */
#stage.drop-armed::after { content: 'Drop screenshots to add them'; position: absolute; inset: 14px; border: 2px dashed rgba(240,109,79,.6); border-radius: 22px; background: rgba(240,109,79,.06); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); pointer-events: none; z-index: 30; }

/* ─── Top bar fit — symmetrical flex: 1 1 0 wings keep the center size/locale
     cluster centered without absolute-positioning collisions across all widths
     and locales. Tiers trim the least essential pieces as space narrows:
     brand word/tag → project-name → locale code → preview label; below 1180px
     the bar trades one line of height for a centred second row holding the
     size switcher and locale chip. Brand and project-nav stay content-sized. ─── */
@media (max-width: 1659px) {
  #topbar { gap: 12px; padding-right: 12px; }
  .tb-left { flex: 0 1 auto; }
  /* Same shape as the base rule, and for the same reason: the centre gives way,
     and the right group keeps a max-content floor so it cannot overflow leftwards
     over the Light/Dark control. */
  .tb-center { flex: 1 6 auto; }
  .tb-right { flex: 0 0 auto; }
}
@media (max-width: 1559px) {
  #topbar { gap: 8px; }
  .tb-left, .tb-center, .tb-right { gap: 6px; }
  .target-nav-wrap { max-width: min(340px, 28vw); }
  .tb-name { max-width: 130px; }
  .tb-workspace #new-project-btn span { display: none; }
  .tb-workspace #new-project-btn { min-width: 32px; padding-inline: 7px; }
  #topbar #target-seg button { padding-inline: 7px; }
  #topbar #appearance-seg button { padding-inline: 7px; }
}
@media (max-width: 1479px) {
  .brand-word, .brand-tag { display: none; }
  .brand { gap: 0; padding: 6px; min-width: 44px; }
}
@media (max-width: 1419px) {
  #locale-code { display: none; }
  .chip { padding: 7px 10px; }
  .target-nav-wrap { max-width: min(280px, 24vw); }
  .tb-name { max-width: 110px; }
  .tb-workspace #projects-btn { min-width: 44px; }
}
@media (max-width: 1339px) {
  .tb-name { max-width: 80px; }
}
@media (max-width: 1279px) {
  /* #app qualifier: the production-desk restyle later in this file pins
     #topbar to 56px at every width, which kept the bar one row tall while
     the wrapped size-switcher row painted over the release strip below. */
  #app #topbar { flex-wrap: wrap; height: auto; padding-block: 8px; }
  /* The left cluster keeps its content width so the right cluster wraps to
     its own row instead of laying a transparent flex box over the left
     buttons and swallowing their clicks. */
  .tb-left { flex: 0 0 auto; max-width: none; }
  .tb-right { flex: 1 1 auto; min-width: min-content; }
  .tb-center { order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap; row-gap: 8px; margin-top: 8px; }
  #preview-btn { padding: 0 8px; font-size: 0; }
}
@media (max-width: 639px) {
  #topbar { gap: 8px; padding-inline: 8px; }
  .tb-left, .tb-right { gap: 6px; }
  .tb-right { flex-basis: 100%; }
  .btn-coral { padding: 0 12px; }
  .save-state { display: none; }
  .recovery-shell { padding: 10px; }
  .recovery-center { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 22px 18px; border-radius: 20px; }
  .recovery-list { grid-template-columns: 1fr; }
  .recovery-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .recovery-actions .pbtn { width: 100%; padding-inline: 7px; }
  #theme-toggle, #safe-toggle, #preview-btn, #help-btn { display: none; }
  #more-btn { min-width: 54px; height: 44px; padding-inline: 10px; }
  .palette-wrap { padding-top: 7vh; }
  .palette { width: calc(100vw - 20px); }

  /* The welcome card is the first thing a phone visitor sees. Keep its three
     choices comfortably readable rather than forcing desktop columns into a
     narrow modal. */
  .welcome { width: min(100% - 20px, 390px); max-height: calc(100dvh - 20px); }
  .welcome-hero { padding: 20px 20px 12px; }
  .welcome-brand { margin-bottom: 10px; }
  .welcome-hero h1 { margin-top: 4px; font-size: clamp(25px, 8vw, 31px); }
  .welcome-hero p { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .welcome-hero > .eyebrow { font-size: 8px; }
  .store-ingest { padding: 0 12px 2px; }
  .store-ingest-row { flex-direction: column; }
  .store-ingest-go { height: 38px; }
  .store-drafts-head { padding: 18px 16px 6px; }
  .store-draft-grid { grid-template-columns: 1fr; padding: 10px 12px 14px; }
  .doors { grid-template-columns: 1fr; gap: 7px; padding: 10px 12px 12px; }
  .door { min-height: 0; padding: 11px 12px; display: grid; grid-template-columns: 36px 1fr; column-gap: 11px; text-align: left; }
  .door .d-ic { grid-row: span 3; width: 36px; height: 36px; margin: 0; border-radius: 10px; }
  .door .d-ic svg { width: 19px; height: 19px; }
  .door b { align-self: end; font-size: 14px; }
  .door p { grid-column: 2; margin-top: 3px; font-size: 11px; line-height: 1.4; }
  .door .d-go { grid-column: 2; margin-top: 6px; font-size: 10.5px; }
  /* Both chips on one line at 320px and up, without dropping under the touch
     target height. */
  .welcome-foot { min-height: 54px; padding: 10px 14px; gap: 8px; }
  .welcome-foot button { min-height: 40px; padding: 8px 12px; font-size: 11.5px; }
}
/* ─── Compact studio: tools become a drawer over a full-height canvas. ─── */
@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; height: 100%; overflow: hidden; }
  #app { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
  #middle { position: relative; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
  #rail { z-index: 36; flex: none; flex-direction: row; align-items: center; width: 100%; height: 66px; overflow-x: auto; overflow-y: hidden; padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .rail-btn { flex: none; width: 62px; min-height: 52px; padding: 5px 3px 4px; }
  .rail-btn.active::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; }
  .rail-icon { width: 27px; height: 27px; }
  #stage { order: 2; flex: 1; width: 100%; min-height: 0; }
  #panel { position: absolute; z-index: 38; top: 66px; bottom: 0; left: 0; width: min(340px, calc(100vw - 40px)); max-width: calc(100% - 40px); max-height: none; border-right: 1px solid var(--line-soft); border-bottom: 0; box-shadow: var(--shadow-pop); transform: translateX(-102%); transition: transform .25s var(--ease); }
  #panel.compact-open { transform: translateX(0); }
  .panel-compact-close { display: inline-flex; }
  #inspector { position: absolute; z-index: 39; top: 66px; right: 0; bottom: 0; width: min(320px, calc(100vw - 40px)); max-width: calc(100% - 40px); box-shadow: var(--shadow-pop); }
  #page-bar { max-width: calc(100% - 20px); padding: 7px 8px; }
  #film-pages { width: min(318px, calc(100vw - 100px)); }
  .media-edit-bar { top: auto; bottom: 102px; width: max-content; max-width: calc(100% - 16px); padding: 5px; gap: 3px; }
  .media-edit-mode { display: none; }
  .media-edit-bar button { min-height: 36px; }
  .media-edit-bar output { width: 40px; }
  .media-edit-cancel { padding-inline: 9px; }
  .media-edit-apply { height: 36px; padding-inline: 11px; }
  #more-btn { min-width: 54px; height: 44px; padding-inline: 10px; }
  .create-guide { padding: 9px 10px 10px; }
  .create-guide-head { margin-bottom: 7px; }
  .create-guide-actions button { min-width: 38px; min-height: 38px; }
  .create-guide ol { display: flex; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .create-guide li { flex: 0 0 min(164px, 43vw); }
  .create-guide-step { min-height: 54px; }
  .create-guide-compact { min-height: 42px; padding-inline: 11px; }
}

/* Task 10 compact instrument dock. Tools and Inspector reuse their desktop DOM
   but become one mutually-exclusive bottom sheet, leaving a measured 260px
   canvas runway above it. The storyboard is the editor, so it stays in that
   runway instead of hiding while a sheet is open. */
@media (max-width: 900px), (max-height: 700px) {
  #middle { --drawer-rail-offset:0px; --compact-drawer-height:0px; position:relative;overflow:clip; }
  #panel,#inspector {
    position:absolute;z-index:39;inset:auto 0 0 0;width:100%;max-width:none;
    height:min(46dvh,calc(100% - 260px - var(--drawer-rail-offset)));max-height:none;min-height:0;
    border:0;border-top:1px solid var(--line-w);border-radius:18px 18px 0 0;
    box-shadow:0 -20px 48px rgba(7,4,14,.34);transform:translateY(104%);
    transition:transform .24s var(--ease),visibility 0s linear .24s;visibility:hidden;
    background:color-mix(in srgb,var(--space-2) 96%,transparent);backdrop-filter:blur(18px);
  }
  #panel.compact-open,#inspector.compact-open { transform:translateY(0);visibility:visible;transition-delay:0s; }
  #panel.templates-panel { width:100%; }
  #panel-head,#inspector-head { position:sticky;top:0;z-index:2;padding:10px 14px 9px;background:var(--space-2); }
  #panel-head::before,#inspector-head::before { content:'';position:absolute;top:5px;left:50%;width:34px;height:3px;border-radius:9px;background:rgb(var(--on) / .18);transform:translateX(-50%); }
  #panel-sub { margin-top:2px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  #panel-body,#inspector-body { padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .panel-compact-close,.inspector-back { display:inline-flex;min-width:44px;min-height:44px; }
  #inspector-head { display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:7px; }
  #inspector-title { min-width:0;justify-content:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
  #inspector-close { min-width:44px;min-height:44px; }
  #panel :is(button,input,select,textarea),#inspector :is(button,input,select,textarea) { min-height:44px; }
  .media-edit-bar { bottom:calc(var(--compact-drawer-height) + 116px); }
}
@media (max-width:900px) { #middle { --drawer-rail-offset:66px; } }
@media (max-height:700px) {
  /* Keep the instrument bar to one row on short landscape screens. The normal
     <=1279px layout spends a second row on the target switcher, which leaves a
     bottom drawer too shallow to operate. */
  #topbar { height:58px;flex-wrap:nowrap;padding-block:0;overflow:hidden; }
  .tb-left { flex:0 1 auto; }
  .tb-center { order:initial;flex:0 1 auto;flex-basis:auto;margin-top:0;flex-wrap:nowrap; }
  .tb-right { flex:1 1 auto;flex-wrap:nowrap; }
  .tb-name,.save-state,.score-pill,#theme-toggle,#safe-toggle,#preview-btn,#help-btn { display:none; }
  .create-guide { padding:7px 10px; }
  .create-guide ol { display:none; }
  .create-guide-head { margin-bottom:0; }
}

/* ═══════════ CONTEXT MENU ═══════════ */
.ctx-menu {
  position: fixed; z-index: 500; min-width: 218px;
  padding: 6px; border-radius: 14px;
  background: var(--menu-bg);
  border: 1px solid var(--line-w);
  box-shadow: var(--shadow-pop);
  animation: ctx-in .18s var(--ease);
  transform-origin: top left;
}
@keyframes ctx-in { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 9px;
  font-size: 12.5px; font-weight: 560; color: var(--ink-soft);
  text-align: left; transition: background .12s, color .12s;
}
.ctx-item:hover, .ctx-item:focus-visible { background: var(--coral-soft); color: var(--ink); }
.ctx-item.danger { color: #ff8a70; }
.ctx-item.danger:hover { background: rgba(240,109,79,.14); }
.ctx-item.disabled { opacity: .38; pointer-events: none; }
.ctx-item .ci { width: 15px; height: 15px; flex: none; opacity: .8; display: grid; place-items: center; }
.ctx-item .ci svg { width: 15px; height: 15px; }
.ctx-item kbd { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--ink-ghost); background: rgb(var(--on) / .06); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-soft); }
.ctx-sep { height: 1px; margin: 5px 8px; background: var(--line-soft); }
.ctx-label { padding: 7px 10px 5px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-ghost); }

/* ═══════════ ELEMENTS BROWSER ═══════════
   One library, three tabs; browsing is grouped into labelled families so the
   set reads as a catalogue instead of a wall, and every cell names itself. */
.el-loupe-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-bottom: 12px; border-radius: 14px; background: rgb(var(--on) / .05); border: 1px solid var(--line-soft); }
.el-loupe-copy { display: flex; flex-direction: column; gap: 4px; }
.el-loupe-copy b { font-size: 13px; font-weight: 700; color: var(--ink); }
.el-loupe-copy span { font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.el-loupe-actions { display: flex; gap: 6px; }
.el-loupe-actions .pbtn { flex: 1; }
#canvas.loupe-picking { cursor: crosshair !important; }
.el-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgb(var(--on) / .05); border: 1px solid var(--line-soft); margin-bottom: 10px; }
.el-tabs button { flex: 1; padding: 7px 4px; border-radius: 7px; font-size: 11.5px; font-weight: 620; color: var(--ink-faint); transition: all .2s; }
.el-tabs button.active { background: rgb(var(--on) / .12); color: var(--active-text); }
.el-search { display: flex; align-items: stretch; gap: 8px; padding: 0 12px; min-height: 40px; border-radius: 11px; background: rgb(var(--on) / .05); border: 1px solid var(--line-soft); margin-bottom: 12px; transition: border-color .2s; }
.el-search:focus-within { border-color: rgba(240,109,79,.5); }
.el-search .ic { width: 14px; height: 14px; color: var(--ink-ghost); flex: none; align-self: center; }
.el-search input { flex: 1; min-width: 0; align-self: stretch; background: none; border: 0; outline: 0; font-size: 12.5px; color: var(--ink); }
.el-search input::placeholder { color: var(--ink-ghost); }
.el-clear { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; line-height: 1; color: var(--ink-ghost); transition: color .18s, background .18s; }
.el-clear:hover { color: var(--ink); background: rgb(var(--on) / .09); }
.el-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.el-cats .fchip { padding: 5px 9px; font-size: 10px; }

/* family section: a mono eyebrow row with a live count, then its grid */
.el-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 3px 7px; }
.el-group-head:first-of-type { margin-top: 2px; }
.el-group-head span { font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.el-group-head i { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; color: var(--ink-ghost); }
.el-group-head i::before { content: '· '; }

.el-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
/* 950 icons, each previously in its own bordered box: the boxes were louder
   than the icons. The artwork carries itself; the box only appears on hover. */
.el-icon-cell { position: relative; aspect-ratio: .96; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 7px 3px 5px; border-radius: 12px; background: transparent; border: 1px solid transparent; color: var(--ink); transition: background .18s, color .18s, transform .18s var(--ease); }
.el-icon-cell:hover { background: var(--coral-soft); color: var(--coral); transform: translateY(-2px); }
.el-icon-cell svg { width: 23px; height: 23px; flex: none; }
.el-cell-name { display: block; max-width: 100%; font-size: 8.5px; font-weight: 560; line-height: 1.1; letter-spacing: -.01em; color: var(--ink-ghost); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s; }
.el-icon-cell:hover .el-cell-name, .el-shape-cell:hover .el-cell-name { color: inherit; }

.el-shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.el-shape-cell { position: relative; aspect-ratio: 1.04; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px 6px; border-radius: 12px; background: transparent; border: 1px solid transparent; color: var(--violet); transition: background .18s, transform .18s var(--ease); }
.el-shape-cell:hover { background: rgba(139,92,246,.14); transform: translateY(-2px); }
.el-shape-cell svg { width: 27px; height: 27px; flex: none; }

.el-emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.el-emoji-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: 21px; background: rgb(var(--on) / .04); border: 1px solid var(--line-soft); transition: background .18s, border-color .18s, transform .18s var(--ease); }
.el-emoji-cell:hover { transform: translateY(-2px); background: rgb(var(--on) / .09); border-color: var(--line-w); }

/* search flattens sections into one grid; the head margin would read as a gap */
.el-icon-grid.flat, .el-shape-grid.flat, .el-emoji-grid.flat { margin-top: 2px; }

/* families larger than the tray get a quiet "show all" closer instead of an
   endless scroll — the click reveals the rest in place */
.el-more { grid-column: 1 / -1; margin-top: 2px; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgb(var(--on) / .16); background: transparent; color: var(--ink-faint); font-size: 11px; font-weight: 600; transition: color .2s, border-color .2s, background .2s; }
.el-more:hover { color: var(--coral); border-color: rgba(240,109,79,.45); background: var(--coral-soft); }
.pending { display: none !important; }
.el-count { margin-top: 12px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-ghost); text-align: center; }

/* ═══════════ DEVICES PANEL ═══════════ */
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dev-card { position: relative; border-radius: 15px; overflow: hidden; border: 1px solid var(--line-soft); background: linear-gradient(160deg, rgb(var(--on) / .05), rgb(var(--on) / .02)); cursor: pointer; transition: all .25s var(--ease); padding: 0; text-align: center; }
.dev-card:hover { transform: translateY(-3px); border-color: rgba(240,109,79,.45); box-shadow: var(--shadow-card); }
.dev-card canvas { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.dev-card .dev-meta { padding: 7px 8px 9px; }
.dev-card .dev-meta b { display: block; font-size: 11px; font-weight: 660; letter-spacing: -.01em; }
.dev-card .dev-meta span { font-family: var(--mono); font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-ghost); }
.dev-kind { position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 99px; background: rgba(9,6,16,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #EDE8FF; }
.variant-row { display: flex; gap: 7px; flex-wrap: wrap; }
.variant-chip { display: block; width: 100%; height: 100%; border-radius: inherit; position: relative; background: rgb(var(--on) / .12); }
.variant-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(142deg, rgb(255 255 255 / .32), rgb(255 255 255 / .04) 44%, rgb(0 0 0 / .22)); }

/* ─── Light / dark screen pairing (device inspector) ─── */
/* auto-fit rather than two fixed columns: the inspector becomes a full-width
   drawer on a phone, and a 112px floor keeps the two cards side by side there
   while still letting them stack if the rail ever narrows further. */
.appearance-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.appearance-slot {
  display: grid; gap: 6px; align-content: start; min-width: 0; padding: 8px;
  border-radius: 13px; border: 1.5px solid var(--line-soft); background: var(--card);
  transition: border-color .2s, box-shadow .2s;
}
.appearance-slot.is-live { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.appearance-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; }
.appearance-slot-mode { font-size: 11px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-soft); }
.appearance-slot.is-live .appearance-slot-mode { color: var(--coral); }
.appearance-slot-flag {
  flex: none; padding: 2px 6px; border-radius: 99px; background: var(--coral-soft); color: var(--coral);
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase;
}
.appearance-slot-shot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 14; max-height: 150px;
  overflow: hidden; padding: 0; border-radius: 10px; border: 1px solid var(--line-soft);
  background: rgb(var(--on) / .04); cursor: pointer; transition: border-color .2s, background .2s;
}
.appearance-slot-shot:hover { border-color: var(--control-border-hover); background: rgb(var(--on) / .07); }
.appearance-slot-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appearance-slot.is-empty .appearance-slot-shot { border-style: dashed; border-color: var(--line-w); }
.appearance-slot-add { font-size: 10.5px; font-weight: 650; color: var(--ink-faint); }
.appearance-slot-shot:hover .appearance-slot-add { color: var(--ink-soft); }
.appearance-slot-file { min-width: 0; font-size: 10px; line-height: 1.35; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appearance-slot.is-empty .appearance-slot-file { color: var(--ink-ghost); }
.appearance-slot-bezel {
  min-width: 0; font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-ghost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appearance-slot .ins-select { padding: 6px 22px 6px 8px; font-size: 11px; background-position: right 6px center; }
.appearance-pair-copy { margin-top: 8px; }

/* ─── Device type cards ─── */
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-card {
  display: grid; gap: 0; padding: 0; overflow: hidden; text-align: center; cursor: pointer;
  border-radius: 13px; border: 1.5px solid var(--line-soft); background: var(--card);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.mode-card:hover { transform: translateY(-2px); border-color: var(--control-border-hover); box-shadow: var(--shadow-card); }
.mode-card.active { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.mode-shot { display: block; background: linear-gradient(165deg, rgb(var(--on) / .05), rgb(var(--on) / .02)); }
.mode-shot canvas { display: block; width: 100%; aspect-ratio: 170 / 124; }
.mode-name { display: block; padding: 7px 6px 8px; font-size: 10.5px; font-weight: 680; line-height: 1.25; letter-spacing: -.01em; }
.mode-card.active .mode-name { color: var(--coral); }

/* ─── Device picker button + browser ─── */
.device-open {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; cursor: pointer;
  border-radius: 13px; border: 1.5px solid var(--control-border); background: var(--control-bg);
  transition: border-color .2s, background .2s;
}
.device-open:hover { border-color: var(--control-border-hover); background: var(--control-bg-hover); }
.device-open-shot { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: rgb(var(--on) / .05); }
.device-open-shot canvas { display: block; width: 100%; height: 100%; }
.device-open-text { min-width: 0; text-align: left; }
.device-open-text b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-open-text span { display: block; margin-top: 1px; font-size: 10px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-open .ic { width: 16px; height: 16px; color: var(--ink-ghost); }

.device-browser { width: min(880px, 94vw); max-height: 86vh; padding: 22px 22px 20px; display: flex; flex-direction: column; text-align: left; }
.device-browser h3 { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.device-browser-sub { margin: 4px 0 14px; font-size: 12px; color: var(--ink-faint); }
.device-browser-body { overflow-y: auto; min-height: 0; padding-right: 4px; }
.device-brand { display: flex; align-items: center; gap: 9px; margin: 16px 0 9px; font-family: var(--display); font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
.device-brand:first-child { margin-top: 0; }
.device-brand::before { content: ''; width: 4px; height: 16px; border-radius: 99px; background: var(--coral); }
.device-brand em { font-family: var(--mono); font-style: normal; font-size: 9px; font-weight: 700; color: var(--ink-ghost); }
.device-browser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 9px; }
.device-pick {
  display: grid; padding: 0 0 9px; overflow: hidden; cursor: pointer; text-align: center;
  border-radius: 14px; border: 1.5px solid var(--line-soft); background: var(--card);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.device-pick:hover { transform: translateY(-2px); border-color: var(--control-border-hover); box-shadow: var(--shadow-card); }
.device-pick.active { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.device-pick-shot { display: block; background: linear-gradient(165deg, rgb(var(--on) / .05), rgb(var(--on) / .02)); }
.device-pick-shot canvas { display: block; width: 100%; aspect-ratio: 1; }
.device-pick b { display: block; padding: 8px 8px 0; font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.device-pick-kind { display: block; margin-top: 2px; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-ghost); }
.device-pick.active b { color: var(--coral); }
.variant-dot { position: relative; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line-w); cursor: pointer; transition: transform .18s var(--ease); overflow: hidden; padding: 0; }
.variant-dot:hover { transform: scale(1.12); }
.variant-dot.active { box-shadow: 0 0 0 2px var(--space-2), 0 0 0 4px var(--coral); }
.variant-dot canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.variant-dot span { position: absolute; inset: auto 0 0; font-family: var(--mono); font-size: 6.5px; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #fff; background: rgba(9,6,16,.6); padding: 1px 0; }

/* ─── Device drill-in: colour rail, live hero, pose cards ─── */
.dev-back { margin-bottom: 12px; }
.dev-fin-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 7px; margin-bottom: 4px; }
.dev-fin { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 4px 6px; border-radius: 11px; border: 1px solid var(--line-soft); background: rgb(var(--on) / .04); cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.dev-fin:hover { background: rgb(var(--on) / .08); border-color: var(--line-w); transform: translateY(-1px); }
.dev-fin.active { border-color: rgba(240,109,79,.55); background: var(--coral-soft); }
.dev-fin-chip { position: relative; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-soft); flex: none; background: rgb(var(--on) / .12); }
/* A flat fill reads as paint; a light-to-shadow sweep reads as a finish. */
.dev-fin-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(142deg, rgb(255 255 255 / .32), rgb(255 255 255 / .04) 44%, rgb(0 0 0 / .22)); }
.dev-fin-name { font-size: 9px; font-weight: 620; letter-spacing: .02em; color: var(--ink-faint); white-space: nowrap; }
.dev-fin.active .dev-fin-name { color: var(--coral); }
.dev-hero { margin: 14px 0 10px; border-radius: 15px; overflow: hidden; border: 1px solid var(--line-soft); background: linear-gradient(160deg, rgb(var(--on) / .05), rgb(var(--on) / .02)); }
.dev-hero canvas { display: block; width: 100%; aspect-ratio: 560 / 440; }
.dev-hero-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 11px 10px; }
.dev-hero-meta b { font-size: 12px; font-weight: 660; letter-spacing: -.01em; }
.dev-hero-meta span { font-family: var(--mono); font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-ghost); text-align: right; }
.dev-poses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.dev-pose { border-radius: 13px; overflow: hidden; border: 1px solid var(--line-soft); background: linear-gradient(160deg, rgb(var(--on) / .05), rgb(var(--on) / .02)); cursor: pointer; transition: all .25s var(--ease); padding: 0; text-align: center; }
.dev-pose:hover { transform: translateY(-2px); border-color: rgba(240,109,79,.45); box-shadow: var(--shadow-card); }
.dev-pose canvas { display: block; width: 100%; aspect-ratio: 1; }
.dev-pose b { display: block; padding: 6px 6px 1px; font-size: 10.5px; font-weight: 660; letter-spacing: -.01em; }
.dev-pose-sub { display: block; padding: 0 6px 7px; font-family: var(--mono); font-size: 7px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-ghost); }
.dev-pose-sub.approx { color: var(--amber); }

/* ═══════════ BACKDROP STUDIO ═══════════ */
.studio-preview { height: 74px; border-radius: 13px; border: 1px solid var(--line-w); margin-bottom: 11px; overflow: hidden; position: relative; }
.studio-preview canvas { width: 100%; height: 100%; display: block; }
.stop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.stop-row .stop-color { position: relative; width: 34px; height: 30px; border-radius: 9px; border: 1px solid var(--line-w); overflow: hidden; flex: none; cursor: pointer; }
.stop-row .stop-color input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.stop-row .ins-slider { flex: 1; }
.stop-row .stop-del { flex: none; width: 24px; height: 24px; border-radius: 7px; color: var(--ink-ghost); font-size: 12px; display: grid; place-items: center; }
.stop-row .stop-del:hover { color: #ff8a70; background: rgba(240,109,79,.12); }
.stop-row .stop-pos { flex: none; width: 34px; text-align: right; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); }
.mesh-wells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 11px; }
.mesh-well { position: relative; aspect-ratio: 1.1; border-radius: 11px; border: 1px solid var(--line-w); overflow: hidden; cursor: pointer; }
.mesh-well input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.mesh-well span { position: absolute; left: 6px; bottom: 4px; font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-item { position: relative; min-width: 0; aspect-ratio: 4/5; }
.photo-cell { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); cursor: zoom-in; padding: 0; background: var(--card); transition: transform .2s var(--ease), border-color .2s; }
.photo-cell:hover { transform: translateY(-2px); border-color: rgba(240,109,79,.5); }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell .ph-credit { position: absolute; inset: auto 0 0; padding: 12px 7px 5px; background: linear-gradient(transparent, rgba(5,3,10,.8)); font-family: var(--mono); font-size: 7px; letter-spacing: .05em; color: rgba(255,255,255,.8); text-align: left; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.photo-item:hover .ph-credit { opacity: 1; }
.photo-item .ph-add { position: absolute; z-index: 2; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 8px; background: rgba(9,6,16,.78); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 13px; display: grid; place-items: center; opacity: 0; transition: opacity .2s; backdrop-filter: blur(6px); }
.photo-item:hover .ph-add, .photo-item:focus-within .ph-add { opacity: 1; }
.photo-status { padding: 18px 8px; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }
.bg-credit { margin-top: 10px; padding: 8px 11px; border-radius: 10px; background: rgb(var(--on) / .04); border: 1px solid var(--line-soft); font-size: 10px; line-height: 1.5; color: var(--ink-faint); }
.bg-credit b { color: var(--ink-soft); }

/* ═══════════ CONTROL CLARITY & KEYBOARD ACCESS ═══════════
   --on stays a space-separated RGB triplet; every alpha composition uses
   modern rgb(var(--on) / alpha) syntax so the browser keeps the paint rule. */
:where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}
:where(button, input, select, textarea):disabled,
:where(.disabled, [aria-disabled="true"]) {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
:where(button, input, select, textarea):disabled:hover,
:where(.disabled, [aria-disabled="true"]):hover {
  background: revert;
  border-color: revert;
  color: inherit;
  transform: none;
  box-shadow: none;
}

/* The daylight mode uses solid, AA-visible panel controls rather than relying
   on translucent ink washes over white. These declarations intentionally cover
   every recurring control family in the editor, menus and export flow. */
[data-theme="light"] :is(.seg, .chip, .tb-group, .p-card, .pbtn, .layer-row,
  .check-row, .guide-card, .look-card, .dropzone, .fchip,
  .el-emoji-cell, .dev-card, .dev-fin, .bg-credit,
  .seg-mini, .pose-picker, .el-tabs, .el-search, .ins-input, .ins-select,
  .ins-textarea, .fmt-btn, #fmt-font, #page-add, .modal-x, .door,
  .prem-check, .ctx-item, .palette-item, .locale-row,
  .font-row, .tbtn-label) {
  border-color: var(--control-border);
}
[data-theme="light"] :is(.seg, .chip, .tb-group, .p-card, .pbtn, .layer-row,
  .check-row, .guide-card, .look-card, .dropzone, .fchip,
  .el-emoji-cell, .dev-fin, .bg-credit, .seg-mini,
  .pose-picker, .el-tabs, .el-search, .ins-input, .ins-select, .ins-textarea,
  .fmt-btn, #fmt-font, #page-add, .modal-x, .door, .prem-check,
  .ctx-item, .palette-item, .tbtn-label) {
  background-color: var(--control-bg);
}
[data-theme="light"] :is(.seg button.active, .seg-mini button.active,
  .pose-picker button.active, .el-tabs button.active, .font-row.active) {
  background-color: var(--control-bg-active);
  color: var(--active-text);
  box-shadow: inset 0 0 0 1px var(--control-border-hover);
}
[data-theme="light"] :is(.pbtn.primary, .fchip.active, .locale-row.active,
  .layer-row.selected, .palette-item.sel) {
  border-color: var(--coral);
}
[data-theme="light"] :is(.fchip, #page-add) {
  color: var(--ink-soft);
}
[data-theme="light"] :is(.p-card, .pbtn, .layer-row, .check-row, .guide-card,
  .look-card, .dropzone, .fchip,
  .el-emoji-cell, .dev-fin, .seg-mini, .pose-picker, .el-tabs, .el-search, .ins-input,
  .ins-select, .ins-textarea, .fmt-btn, #fmt-font, #page-add, .modal-x, .door,
  .prem-check, .ctx-item, .palette-item, .tbtn-label):hover {
  background-color: var(--control-bg-hover);
  border-color: var(--control-border-hover);
}
[data-theme="light"] :is(.dev-card, .locale-row, .font-row):hover {
  border-color: var(--control-border-hover);
}
[data-theme="light"] .dev-fin.active { border-color: var(--coral); background: var(--coral-soft); }
[data-theme="light"] .dev-fin.active .dev-fin-name { color: var(--coral); }
[data-theme="light"] :is(#topbar, #rail, #panel, #inspector, #page-bar, .ctx-menu,
  .modal, .palette, .locale-menu) {
  border-color: var(--control-border);
}
[data-theme="light"] .dev-kind { background: rgba(255,255,255,.92); border-color: var(--control-border); color: #26183A; }
[data-theme="light"] .welcome-hero::before { opacity: .5; }
[data-theme="light"] :is(.ai-tool, .ai-studio-intro, .ai-result, .ai-progress, .ai-error) { border-color: var(--control-border); }
[data-theme="light"] .ai-tool { background: var(--control-bg); }
[data-theme="light"] .ai-caption-row { background: var(--control-bg-hover); }
[data-theme="light"] .ai-progress { background: var(--control-bg); }
[data-theme="light"] .tour-hole { box-shadow: 0 0 0 9999px rgba(43, 30, 68, .5); }

/* ═══════════════════════════════════════════════════════════════
   PRODUCTION DESK SHELL
   The workspace is a true multi-artboard storyboard: three complete
   screens plus half of the fourth on a wide desktop. iPad and smaller
   windows grow the artboards to fill leftover height instead. Editing
   happens on the live card.
   ═══════════════════════════════════════════════════════════════ */
#topbar {
  height: 54px;
  border-bottom: 1px solid var(--line-soft);
}

#create-guide-root { background: var(--space-2); border-bottom-color: var(--line-soft); }
.create-guide {
  display: grid;
  grid-template-columns: minmax(178px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 7px 12px;
}
.create-guide-head { margin: 0; gap: 7px; }
.create-guide-kicker { margin: 0 0 1px; font-size: 7.5px; letter-spacing: .12em; }
.create-guide-title h2 { font-size: 12px; }
.create-guide-actions button { min-width: 30px; min-height: 30px; padding-inline: 7px; }
.create-guide ol { gap: 4px; }
.create-guide-step {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
  min-height: 40px;
  padding: 4px 7px;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
}
.create-guide-mark { width: 20px; height: 20px; border-radius: 6px; font-size: 8px; }
.create-guide-copy b { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.create-guide-copy small { display: none; }

#rail {
  width: 72px;
  gap: 2px;
  padding: 9px 5px 12px;
  background: var(--space-2);
  border-right-color: var(--line-soft);
}
.rail-btn {
  width: 62px;
  min-height: 49px;
  gap: 3px;
  padding: 5px 3px 4px;
  border-radius: 9px;
  transition: background .16s, color .16s;
}
.rail-btn:hover { background: var(--control-bg-hover); color: var(--ink); transform: none; }
.rail-btn.active {
  background: var(--control-bg-active);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-w);
}
.rail-btn.active::before {
  left: -5px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--coral);
  box-shadow: none;
}
.rail-icon { width: 25px; height: 25px; border: 0; border-radius: 7px; background: transparent; }
.rail-btn.active .rail-icon { color: var(--coral); border: 0; background: var(--coral-soft); }
.rail-btn .rail-label { font-size: 9.75px; font-weight: 640; line-height: 1.08; }

#panel { width: 296px; background: var(--space-2); border-right-color: var(--line-soft); }
#panel-head { padding: 16px 16px 12px; border-bottom-color: var(--line-soft); }
#panel-title { font-size: 16px; letter-spacing: -.02em; }
#panel-sub { margin-top: 3px; font-size: 11px; line-height: 1.4; }
#panel-body { padding: 12px 12px 22px; }
#panel-steps { padding: 11px 12px 1px; }
.panel-eyebrow { margin: 15px 2px 8px; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.panel-eyebrow:first-child { margin-top: 0; }
.p-card { border-radius: 10px; background: var(--card); border-color: var(--line-soft); }
.p-card:hover { transform: none; background: var(--control-bg-hover); border-color: var(--line-w); }
.pbtn { border-radius: 8px; box-shadow: none; }
.pbtn:hover { transform: none; }
.type-style-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 11px 12px !important;
  margin-bottom: 6px !important;
}
.type-style-card .type-style-meta { margin-top: 0; text-align: right; white-space: nowrap; }
.font-row { min-height: 46px; padding: 8px 10px; border-radius: 8px; }
.font-row .font-name { font-size: 14px; }

.screen-page-list {
  display: grid;
  /* Four columns, not three: a full eight-page set then sits in two grid rows,
     which is what keeps the Layers section visible in the panel without
     scrolling — the reason this navigator is compact at all. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}
.screen-page-row {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  text-align: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.screen-page-row .mini-thumb {
  display: block;
  width: 100%;
  aspect-ratio: var(--story-aspect, 9 / 19.5);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--space);
}
.screen-page-row .mini-thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.screen-page-index { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-w); border-radius: 5px; background: var(--paper-2); color: var(--ink-faint); font: 650 8px/1 var(--mono); }
.screen-page-copy { display: none; min-width: 0; }
.screen-page-copy .page-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }
.screen-page-meta { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; color: var(--ink-faint); }
.screen-page-row.is-unfilled .screen-page-meta { color: var(--amber); }
.screen-page-arrow { display: none; }
.screen-page-row.is-selected { border-color: transparent; background: transparent; box-shadow: none; }
.screen-page-row.is-selected .mini-thumb { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.screen-page-row.is-selected .screen-page-index { border-color: var(--coral-action); background: var(--coral-action); color: #fff; }

#stage {
  background: var(--space);
  background-image: none;
}

/* Storyboard overview occupies the workspace; it is not a bottom filmstrip. */
#page-bar {
  position: absolute;
  inset: 0;
  bottom: var(--compact-drawer-height, 0px);
  z-index: 15;
  width: auto;
  max-width: none;
  padding: 14px 16px 16px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: var(--space);
  box-shadow: none;
  backdrop-filter: none;
  transition: opacity .16s var(--ease), visibility 0s linear 0s, bottom .16s var(--ease);
}
.storyboard-head {
  flex: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
}
.storyboard-heading { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.storyboard-heading strong { font-size: 13px; font-weight: 700; letter-spacing: -.015em; }
#storyboard-position { font: 600 9px var(--mono); color: var(--ink-faint); white-space: nowrap; }
.storyboard-hint { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--ink-faint); }
.storyboard-nav { display: flex; align-items: center; gap: 5px; }
.storyboard-nav button {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-w);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-soft);
}
.storyboard-nav button:hover { border-color: var(--control-border-hover); background: var(--control-bg-hover); color: var(--ink); }
.storyboard-watermark-btn {
  height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(240, 109, 79, 0.4);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(240, 109, 79, 0.14) 0%, rgba(167, 139, 250, 0.1) 100%);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 2px 8px -2px rgba(240, 109, 79, 0.25);
}
.storyboard-watermark-btn:hover {
  border-color: #F06D4F;
  background: linear-gradient(135deg, rgba(240, 109, 79, 0.25) 0%, rgba(167, 139, 250, 0.16) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px rgba(240, 109, 79, 0.45);
}
.storyboard-watermark-btn:active {
  transform: translateY(0);
}
.storyboard-watermark-btn .ic {
  width: 13px;
  height: 13px;
  color: #F06D4F;
  flex: none;
}
.storyboard-watermark-btn[hidden] {
  display: none !important;
}
.storyboard-toggle-btn {
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-w);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s var(--ease);
}
.storyboard-toggle-btn:hover {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
  color: var(--ink);
}
.storyboard-toggle-btn.active {
  border-color: rgba(240, 109, 79, 0.45);
  background: rgba(240, 109, 79, 0.12);
  color: #F06D4F;
  font-weight: 600;
}
.storyboard-toggle-btn .ic {
  width: 14px;
  height: 14px;
}
.ins-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 8px;
  background: var(--card-sub);
  border: 1px solid var(--line-w);
  font-size: 11.5px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.ins-toggle-row input[type="checkbox"] {
  accent-color: #F06D4F;
  cursor: pointer;
}
.storyboard-track-row {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.storyboard-track-row #film-pages {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}
.storyboard-track-row .storyboard-more-fade {
  position: absolute;
  top: 0;
  bottom: 10px;
  width: min(88px, 18%);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.storyboard-track-row .storyboard-more-fade.after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--space) 72%, transparent) 42%, var(--space) 100%);
}
.storyboard-track-row .storyboard-more-fade.before {
  left: 0;
  background: linear-gradient(270deg, transparent 0%, color-mix(in srgb, var(--space) 72%, transparent) 42%, var(--space) 100%);
}
.storyboard-track-row.has-more-after .storyboard-more-fade.after,
.storyboard-track-row.has-more-before .storyboard-more-fade.before { opacity: 1; }
.storyboard-edge-nav {
  position: absolute;
  top: 6px;
  bottom: 16px;
  z-index: 8;
  flex: none;
  width: min(72px, 16%);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.storyboard-edge-nav.before { left: 0; }
.storyboard-edge-nav.after { right: 0; }
.storyboard-edge-nav[hidden] { display: none; }
.storyboard-edge-nav span {
  position: absolute;
  top: 46%;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.storyboard-edge-nav.before span {
  left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--coral) 70%, var(--ink-soft));
  border-bottom: 2px solid color-mix(in srgb, var(--coral) 70%, var(--ink-soft));
  transform: translateY(-50%) rotate(45deg);
}
.storyboard-edge-nav.after span {
  right: 10px;
  border-right: 2px solid color-mix(in srgb, var(--coral) 70%, var(--ink-soft));
  border-bottom: 2px solid color-mix(in srgb, var(--coral) 70%, var(--ink-soft));
  transform: translateY(-50%) rotate(-45deg);
}
.storyboard-edge-nav:hover span {
  border-color: var(--coral);
}
.storyboard-edge-nav:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -4px;
}
#film-pages {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  height: 100%;
  display: flex;
  /* Top-aligned, not centered: a bleed device spans neighbouring cards, and
     the seam only lines up when every card's artwork starts at the same y —
     including the active card, whose footer makes it taller. Cards fill the
     track height anyway, so centering bought nothing when heights matched
     and broke the span when they did not. */
  align-items: flex-start;
  gap: 2px;
  padding: 6px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--on) / .2) transparent;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
}
.storyboard-minis-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 52px;
  padding: 2px 2px 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--on) / .18) transparent;
}
.storyboard-minis-row::-webkit-scrollbar { height: 6px; }
.storyboard-minis-row::-webkit-scrollbar-thumb { background: rgb(var(--on) / .16); border-radius: 6px; }
#storyboard-minis {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: none;
  overflow: visible;
}
#storyboard-minis::-webkit-scrollbar { height: 6px; }
#storyboard-minis::-webkit-scrollbar-thumb { background: rgb(var(--on) / .16); border-radius: 6px; }
.storyboard-mini {
  flex: 0 0 auto;
  width: clamp(34px, calc(32px * var(--story-aspect-ratio, 1)), 64px);
  padding: 0;
  border: 1px solid var(--line-w);
  border-radius: 7px;
  background: var(--paper-2);
  overflow: hidden;
  cursor: pointer;
  color: inherit;
}
.storyboard-mini:hover { border-color: rgb(var(--on) / .28); }
.storyboard-mini[aria-selected="true"] {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
}
.storyboard-mini .mini-thumb {
  display: block;
  width: 100%;
  aspect-ratio: var(--story-aspect, 9 / 19.5);
  background: var(--card);
}
.storyboard-mini .mini-thumb canvas { width: 100%; height: 100%; display: block; }
.storyboard-mini .mini-label {
  display: block;
  padding: 3px 2px 4px;
  font: 650 7.5px var(--mono);
  letter-spacing: .02em;
  text-align: center;
  color: var(--ink-faint);
}
.storyboard-mini[aria-selected="true"] .mini-label { color: var(--coral); }
/* Move controls live in the name row rather than a row of their own: a second
   row cost 50px of artboard height on every card. 44px keeps them tappable. */
.film-move {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--ink-faint); transition: background .18s, color .18s;
}
.film-move:hover:not(:disabled) { background: var(--coral-soft); color: var(--coral); }
.film-move:disabled { opacity: var(--disabled-opacity); pointer-events: none; }
.film-move .ic { width: 15px; height: 15px; }

.storyboard-minis-row #page-add {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* A 9px label in coral on a coral tint is the same hue against itself. Solid
     fill, white label: it reads at a glance and passes AA in both themes. */
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--coral-action);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  box-shadow: none;
}
.storyboard-minis-row #page-add .ic { width: 15px; height: 15px; }
.storyboard-minis-row #page-add:hover {
  border-color: transparent;
  background: var(--coral-action-deep);
  color: #fff;
}
#film-pages::-webkit-scrollbar { display: block; height: 8px; }
#film-pages::-webkit-scrollbar-thumb { background: rgb(var(--on) / .18); border: 2px solid transparent; background-clip: content-box; border-radius: 8px; }
.film-page {
  position: relative;
  flex: 0 0 var(--story-card-width, calc((100% - 6px) / 3.5));
  width: auto;
  min-width: 0;
  border: 1px solid var(--line-w);
  border-radius: 11px;
  background: var(--paper-2);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  overflow: visible;
  scroll-snap-align: none;
  text-align: left;
  transform: none;
  transition: border-color .16s;
}
.film-page:hover,
.film-page:focus,
.film-page:focus-visible,
.film-page:focus-within,
.film-page.active {
  transform: none;
}
.film-page:hover { border-color: rgb(var(--on) / .24); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.film-page.active { border-color: var(--coral); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.film-page:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.film-page .thumb {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: var(--story-aspect);
  overflow: hidden;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: var(--card);
  box-shadow: none;
}
.film-page.active .thumb { border: 0; box-shadow: none; }
.film-page .thumb canvas { width: 100%; height: 100%; display: block; }
.film-meta {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 10px;
  border-top: 1px solid var(--line-soft);
}
.film-meta b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 650; }
.film-rename {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-faint);
  background: transparent;
  opacity: .72;
  transition: opacity .14s, color .14s, background .14s, border-color .14s;
}
.film-rename svg { width: 13px; height: 13px; }
.film-page:hover .film-rename,
.film-page:focus-within .film-rename,
.film-page.active .film-rename { opacity: 1; }
.film-rename:hover,
.film-rename:focus-visible {
  color: var(--coral);
  border-color: color-mix(in srgb, var(--coral) 35%, var(--line-soft));
  background: var(--coral-soft);
}
.film-current { flex: none; }
.film-current::before { content: 'Screen'; font: 600 7.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-ghost); }
.film-page.active .film-current::before { content: 'Current'; color: var(--coral); }
.film-page .pnum {
  top: 9px;
  left: 9px;
  z-index: 3;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 7px;
  background: rgba(15,17,21,.82);
  color: #fff;
  font-size: 9px;
  backdrop-filter: blur(8px);
  cursor: grab;
  touch-action: none;
}
.film-page .pnum:active { cursor: grabbing; }
.film-page.active .pnum { border-color: var(--coral-action); background: var(--coral-action); color: #fff; }
.film-page .pacts { display: none !important; }
.film-page .thumb { isolation: isolate; }
.film-page .thumb.live > canvas:not(#canvas) { visibility: hidden; pointer-events: none; }
.film-page .thumb .bleed-sel {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.film-page .thumb.live > canvas.bleed-sel { visibility: hidden; }
.film-page .thumb #canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
/* The canvas is a tab stop, and focusing it is what unlocks Delete, ⌘C/⌘D and
   the arrow nudge — so a keyboard user has to be able to see that focus landed
   there. Suppress the ring only for a pointer click, which is what
   :focus-visible is for; the keyboard case keeps the same ring every other
   control in the studio uses. */
#stage[data-workspace="storyboard"] #canvas:focus {
  outline: none;
  box-shadow: none;
}
#stage[data-workspace="storyboard"] #canvas:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  box-shadow: none;
}
.film-page .thumb #text-edit-wrap,
.film-page .thumb #fmt-bar { z-index: 4; }
#stage[data-workspace="storyboard"] #canvas {
  visibility: visible;
  pointer-events: auto;
}
#stage[data-workspace="storyboard"] #text-edit-wrap.storyboard-live,
#stage[data-workspace="storyboard"] #fmt-bar.storyboard-live {
  visibility: visible;
  pointer-events: auto;
  z-index: 46;
}
#stage[data-workspace="storyboard"] #media-edit-bar:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
  z-index: 45;
}
#stage[data-workspace="storyboard"] #canvas:not(.storyboard-live),
#stage[data-workspace="storyboard"] #text-edit-wrap:not(.storyboard-live),
#stage[data-workspace="storyboard"] #fmt-bar:not(.storyboard-live) {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1399px) {
  /* Before JS measures the track, do not default to 3.5 tiny cards on iPad. */
  .film-page { flex-basis: var(--story-card-width, calc((100% - 2px) / 1.18)); }
}

@media (max-width: 900px) {
  #panel, #inspector { width: 100%; max-width: none; }
  #topbar {
    height: auto;
    min-height: 56px;
    padding: 6px 8px;
    gap: 6px;
    flex-wrap: wrap;
    overflow: hidden;
  }
  .tb-left { flex: 1 1 160px; gap: 5px; }
  .tb-right { flex: 0 0 auto; flex-basis: auto; gap: 5px; flex-wrap: nowrap; }
  .tb-center {
    position: static;
    order: 3;
    flex: 1 0 100%;
    transform: none;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tb-center::-webkit-scrollbar { display: none; }
  .tb-name { max-width: 102px; min-height: 44px; padding-inline: 6px; }
  #target-seg button { min-width: 44px; min-height: 44px; }
  #locale-chip { min-width: 44px; min-height: 44px; }
  #appearance-seg button { min-width: 44px; min-height: 44px; }
  .score-pill, .tb-right .tb-group, #theme-toggle, #safe-toggle, #preview-btn, #help-btn { display: none; }
  /* Everything else in the right-hand group folds into More on a phone. The
     Recovery pill does not: it is only ever present when work is stranded,
     and a phone is exactly where a tab gets closed on it. Label collapses,
     the count badge and the 44px touch target stay. */
  .recovery-trigger { min-width: 44px; height: 44px; padding-inline: 10px; font-size: 0; }
  #more-btn { min-width: 44px; height: 44px; padding-inline: 8px; }
  .btn-coral { min-height: 44px; padding-inline: 11px; }
  .create-guide { display: block; min-height: 44px; padding: 6px 10px; }
  .create-guide-head { margin: 0; }
  .create-guide-actions button { min-width: 44px; min-height: 44px; }
  .create-guide ol { display: none; }
  #rail { width: 100%; height: 62px; padding: 5px 8px; }
  .rail-btn { width: 58px; min-height: 50px; }
  /* Laid on its side, the selected marker is an underline. The daylight theme
     restates the upright version further down the sheet, so it is restated
     here too — otherwise the marker collapses to a 3px dot off the left edge
     of the button. */
  .rail-btn.active::before { left: 10px; right: 10px; top: auto; bottom: -6px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  /* The walk-forward button gives up its breathing room on a phone, where the
     drawer it sits in is only a few hundred pixels tall. */
  #page-bar { max-width: none; padding: 9px 8px 10px; }
  .storyboard-head { min-height: 44px; gap: 8px; }
  .storyboard-hint { display: none; }
  .storyboard-heading { flex: 1; }
  .storyboard-nav button { min-width: 44px; height: 44px; }
  .storyboard-track-row { gap: 8px; }
  #film-pages { width: auto; gap: 2px; padding-bottom: 12px; }
  .film-page { flex-basis: var(--story-card-width, calc((100% - 2px) / 1.18)); }
  .film-rename { width: 44px; height: 44px; }
  .storyboard-minis-row { min-height: 48px; }
  .storyboard-minis-row #page-add { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
}

@media (max-width: 900px) and (max-height: 700px) {
  #topbar { height: 58px; min-height: 58px; flex-wrap: nowrap; padding-block: 0; }
  .tb-left { flex: 0 1 auto; }
  .tb-right { flex: 1 1 auto; flex-basis: auto; }
  .tb-center { order: initial; flex: 0 1 auto; flex-basis: auto; margin: 0; flex-wrap: nowrap; }
  #panel-head, #inspector-head { min-height: 54px; padding: 6px 12px 5px; }
  #panel-sub { display: none; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .create-guide { min-height: 48px; padding-block: 4px; }
  .create-guide-step { min-height: 34px; }
  .film-meta { height: 34px; }
  #page-bar { padding-block: 8px 10px; }
  .storyboard-head { min-height: 34px; }
}

/* Short phones: the publication guide + storyboard chrome ate the runway and
   left a 96px-wide card clipped inside a 200px track. Hide the least essential
   bars so the screenshot can fill what is left. */
@media (max-width: 900px) and (max-height: 740px) {
  #create-guide-root { display: none; }
}

@media (max-height: 500px) {
  #create-guide-root { display: none; }
  .storyboard-head { display: none; }
  #page-bar { padding: 4px 8px 6px; gap: 4px; }
  .storyboard-minis-row { min-height: 36px; padding: 0; }
  .storyboard-mini { width: 26px; }
  .storyboard-mini .mini-label { display: none; }
  .film-meta { height: 32px; }
}

@media (max-width: 900px) and (max-height: 500px) {
  #app #topbar,
  #topbar {
    height: 44px;
    min-height: 44px;
    padding-block: 0;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  #rail { height: 48px; padding: 2px 6px; }
  .rail-btn { width: 46px; min-height: 40px; padding: 3px 2px; }
  .rail-label { display: none; }
  .storyboard-minis-row #page-add {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .storyboard-minis-row #page-add span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee-track { transform: none !important; }
}

/* ═══════════ PRODUCTION CONTACT SHEET ═══════════
   A film-proofing desk, not a generic dashboard: quiet controls surround one
   dense status sheet, and no canvas is mounted until deliberate review. */
.production-view-seg { margin: 0 0 12px; }
/* ── Production panel ───────────────────────────────────────────
   Four surfaces only: a summary that answers "what am I downloading",
   three numbered cards, and a download bar pinned to the bottom of the
   column. Anything a first export does not need lives behind a <details>,
   which is what took this panel from ~2,700px of scroll to about one
   screen. */
.prod-summary { display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid var(--line-w);border-radius:16px;background:linear-gradient(150deg,rgb(var(--on) / .055),rgb(var(--on) / .02)); }
.prod-summary.ready { border-color:rgba(98,199,179,.34);background:linear-gradient(150deg,var(--foam-soft),rgb(var(--on) / .02)); }
.prod-summary.attention { border-color:rgba(244,162,97,.34);background:linear-gradient(150deg,rgba(244,162,97,.12),rgb(var(--on) / .02)); }
.prod-gauge { position:relative;display:grid;place-items:center;width:60px;height:60px; }
.prod-gauge svg { width:100%;height:100%;transform:rotate(-90deg); }
.prod-gauge circle { fill:none;stroke-width:4;stroke-linecap:round; }
.prod-gauge .bg { stroke:rgb(var(--on) / .12); }
.prod-gauge .fg { stroke:var(--amber);stroke-dasharray:119.4;transition:stroke-dashoffset .45s var(--ease); }
.prod-summary.ready .prod-gauge .fg { stroke:var(--foam); }
.prod-gauge b { position:absolute;display:flex;align-items:baseline;font:700 15px/1 var(--mono);letter-spacing:-.04em; }
.prod-gauge b small { font-size:8.5px;font-weight:600;opacity:.6;margin-left:.5px; }
.prod-summary-copy { min-width:0; }
.prod-summary-copy h3 { font-size:19px;font-weight:700;letter-spacing:-.03em; }
.prod-summary-copy p { margin-top:2px;font-size:11.5px;color:var(--ink-faint); }
.prod-pill { display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 9px;border-radius:999px;border:1px solid transparent;font:600 10px/1.2 var(--font);white-space:nowrap; }
.prod-pill::before { content:'';width:6px;height:6px;border-radius:50%;background:currentColor; }
.prod-pill.ok { color:var(--foam);border-color:rgba(98,199,179,.38);background:var(--foam-soft); }
.prod-pill.warn { color:var(--amber);border-color:rgba(244,162,97,.38);background:rgba(244,162,97,.12); }
.prod-pill.bad { color:var(--coral);border-color:rgba(241,115,89,.38);background:var(--coral-soft); }
.prod-pill.idle { color:var(--ink-faint);border-color:var(--line-w);background:rgb(var(--on) / .05); }

.prod-card { margin-top:12px;padding:14px;border:1px solid var(--line-w);border-radius:16px;background:rgb(var(--on) / .028); }
.prod-card-head { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.prod-card-head > div { flex:1;min-width:0; }
.prod-card-head b { display:block;font-size:13.5px;font-weight:670;letter-spacing:-.01em; }
.prod-card-head small { display:block;margin-top:2px;font-size:10.5px;line-height:1.4;color:var(--ink-faint); }
.prod-card-head .prod-pill { margin-top:0;flex:none; }
.prod-step { flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:rgb(var(--on) / .08);border:1px solid var(--line-w);font:700 11px/1 var(--mono);color:var(--ink-soft); }

.prod-field + .prod-field { margin-top:14px; }
.prod-field-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px; }
.prod-field-head span { font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint); }
.prod-chips { display:flex;flex-wrap:wrap;gap:6px; }
.prod-chip { position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 10px;border:1px solid var(--control-border);border-radius:12px;background:var(--control-bg);cursor:pointer;transition:border-color .16s,background .16s,transform .16s var(--ease); }
.prod-chip:hover { border-color:var(--control-border-hover);background:var(--control-bg-hover);transform:translateY(-1px); }
.prod-chip input { position:absolute;opacity:0;width:0;height:0;pointer-events:none; }
.prod-chip input:focus-visible ~ .prod-chip-tick { box-shadow:0 0 0 3px var(--focus-halo); }
.prod-chip-tick { flex:none;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid var(--control-border-hover);border-radius:6px;transition:background .16s,border-color .16s; }
.prod-chip-tick::after { content:'';width:9px;height:5px;border-left:2px solid var(--space-2);border-bottom:2px solid var(--space-2);transform:rotate(-45deg) scale(.5);opacity:0;transition:opacity .16s,transform .16s var(--ease); }
.prod-chip.on { border-color:var(--coral);background:var(--coral-soft); }
.prod-chip.on .prod-chip-tick { background:var(--coral);border-color:var(--coral); }
.prod-chip.on .prod-chip-tick::after { opacity:1;transform:rotate(-45deg) scale(1);border-color:#fff; }
.prod-chip-copy { min-width:0;text-align:left; }
.prod-chip-copy b { display:block;font-size:12px;font-weight:640;white-space:nowrap; }
.prod-chip-copy small { display:block;margin-top:1px;font-size:9.5px;color:var(--ink-faint);white-space:nowrap; }
.prod-chip.locale .prod-chip-copy b { display:flex;align-items:center;gap:6px;font:640 11px/1 var(--mono); }
.prod-chip.locale .flag { font-size:14px; }

.prod-allclear { display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid rgba(98,199,179,.3);border-radius:12px;background:var(--foam-soft);font-size:11.5px;color:var(--ink-soft); }
.prod-allclear::before { content:'✓';font:700 12px/1 var(--mono);color:var(--foam); }
.prod-issue { display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:9px 12px;border:1px solid var(--line-soft);border-radius:12px;background:rgb(var(--on) / .03);text-align:left;transition:border-color .16s,background .16s,transform .16s var(--ease); }
.prod-issue + .prod-issue { margin-top:6px; }
.prod-issue:hover { border-color:var(--line-w);background:rgb(var(--on) / .07);transform:translateY(-1px); }
.prod-issue.active { border-color:var(--focus-ring);box-shadow:0 0 0 2px var(--focus-halo); }
.prod-issue > i { width:8px;height:8px;border-radius:50%;background:var(--ink-ghost); }
.prod-issue.warn > i { background:var(--amber); }
.prod-issue.bad > i { background:var(--coral); }
.prod-issue.ok > i { background:var(--foam); }
.prod-issue b { display:block;font-size:11.5px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.prod-issue small { display:block;margin-top:2px;font-size:10px;line-height:1.35;color:var(--ink-faint); }
.prod-issue em { font:600 9.5px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint); }
.prod-issue.warn em { color:var(--amber); }
.prod-issue.bad em { color:var(--coral); }

.prod-more { margin-top:10px;border:1px solid var(--line-soft);border-radius:12px;background:rgb(var(--on) / .022);overflow:hidden; }
.prod-more > summary { display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;font-size:11.5px;font-weight:620;color:var(--ink-soft); }
.prod-more > summary::-webkit-details-marker { display:none; }
.prod-more > summary::after { content:'';margin-left:auto;width:7px;height:7px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease); }
.prod-more[open] > summary::after { transform:rotate(225deg) translate(-2px,-2px); }
.prod-more > summary:hover { background:rgb(var(--on) / .05); }
.prod-more > div { padding:4px 12px 12px; }
.prod-more-block { margin-top:12px;border-radius:16px; }
.prod-more-block > div > section { margin-top:10px; }

.prod-grid { display:grid;gap:4px;padding:2px 0 4px; }
.prod-grid-row { display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:center; }
.prod-grid-rowhead { font:600 9.5px/1.2 var(--mono);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.prod-grid-cells { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px; }
.prod-grid-row.head .prod-grid-cells span { display:grid;place-items:center;font:600 8.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-ghost); }
/* 44px is the touch-target floor the production QA pins, and a status square
   you have to aim at is worse than a taller one. */
.prod-grid-cell { position:relative;display:grid;place-items:center;min-height:44px;border:1px solid var(--line-soft);border-radius:8px;background:rgb(var(--on) / .03);transition:border-color .16s,background .16s,transform .16s var(--ease); }
.prod-grid-cell:hover { transform:translateY(-1px);border-color:var(--line-w);background:rgb(var(--on) / .08); }
.prod-grid-cell.selected { background:rgb(var(--on) / .075);border-color:var(--line-w); }
/* "This one ships" was a 0.045 alpha shift in the background and nothing else
   — invisible on a laptop in daylight and gone entirely for anyone who cannot
   separate those two greys. The tick is the state; the tint reinforces it. */
.prod-grid-cell.selected::after { content:'';position:absolute;top:5px;right:6px;width:4px;height:8px;border:solid var(--foam);border-width:0 1.5px 1.5px 0;transform:rotate(45deg); }
.prod-grid-cell.active { border-color:var(--focus-ring);box-shadow:0 0 0 2px var(--focus-halo); }
.prod-grid-cell > i { width:8px;height:8px;border-radius:50%;background:var(--ink-ghost); }
.prod-grid-cell.ok > i { background:var(--foam); }
.prod-grid-cell.warn > i { background:var(--amber); }
.prod-grid-cell.bad > i { background:var(--coral); }

.prod-firsttwo { display:grid;gap:4px;margin:0 0 10px;padding:10px 12px;border-left:3px solid var(--lilac);border-radius:0 10px 10px 0;background:rgba(167,139,250,.1); }
.prod-firsttwo span { font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lilac); }
.prod-firsttwo b { font-size:11.5px;line-height:1.45; }
.prod-assign { padding-top:4px; }

#panel.production-panel #panel-body { padding-bottom:0; }
.prod-bar { position:sticky;bottom:0;z-index:3;margin:14px -14px 0;padding:12px 14px 16px;border-top:1px solid var(--line-w);background:var(--paper);box-shadow:0 -12px 26px -18px rgba(0,0,0,.55); }
.prod-bar-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px; }
.prod-bar-review { min-height:44px;flex:none; }
.prod-bar-go { width:100%;min-height:48px;justify-content:center;font-size:13.5px; }
.prod-bar .production-download-note { margin:8px 2px 0;text-align:center; }

.production-section-head { display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 9px; }
.production-section-head b { font-size:11.5px;font-weight:670; }
.production-section-head span { display:block;margin-top:3px;font:500 8.8px/1.35 var(--mono);letter-spacing:.02em;color:var(--ink-faint); }
.text-action { min-height:32px;padding:0 7px;color:var(--foam);font:600 9.5px/1 var(--mono);text-decoration:underline;text-underline-offset:3px; }
.production-presets,.production-queue,.production-checkpoints { padding:14px;border:1px solid var(--line-w);border-radius:14px;background:rgb(var(--on) / .03); }
.production-page-row input { width:22px;height:22px;accent-color:var(--coral-action);flex:none;cursor:pointer; }
.production-page-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:50px;padding:5px 4px;border-bottom:1px solid var(--line-soft); }
.production-page-row label { display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer; }
.production-page-row label span { min-width:0; }
.production-page-row b,.production-page-row small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.production-page-row b { font-size:10.5px; }
.production-page-row small { margin-top:2px;font-size:8.8px;color:var(--ink-faint); }
.production-order { display:flex;gap:4px; }
.production-order button { width:36px;min-height:44px;border:1px solid var(--line-soft);border-radius:9px;background:rgb(var(--on) / .035); }
.production-order button:disabled { opacity:var(--disabled-opacity);cursor:default; }
.production-download-note,.production-empty { margin:9px 2px 0;font-size:9.5px;line-height:1.5;color:var(--ink-faint); }
.production-preset-form { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:11px 0; }.production-preset-form input { min-width:0;min-height:44px;padding:0 11px;border:1px solid var(--control-border);border-radius:10px;background:var(--control-bg); }.production-preset-list { display:grid;gap:6px; }.production-preset-row { display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:5px; }.production-preset-row > button { min-height:48px;border:1px solid var(--line-soft);border-radius:10px;background:rgb(var(--on) / .026); }.production-preset-row [data-use-preset] { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;text-align:left; }.production-preset-row b,.production-preset-row small { display:block; }.production-preset-row b { font-size:10.5px; }.production-preset-row small { margin-top:2px;font-size:8.5px;color:var(--ink-faint); }.production-preset-row i { font:600 9px/1 var(--mono);color:var(--foam);font-style:normal; }
.production-queue-summary { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin:11px 0;padding:11px 12px;border:1px solid rgba(139,92,246,.26);border-radius:12px;background:rgba(139,92,246,.08); }.production-queue-summary b,.production-queue-summary span { display:block; }.production-queue-summary b { font-size:11px; }.production-queue-summary span { margin-top:3px;font:500 8.5px/1.35 var(--mono);color:var(--ink-faint); }.production-queue-summary em { font:700 10px/1 var(--mono);font-style:normal;color:var(--foam); }
.production-queue-list { display:grid;gap:7px; }.production-queue-cell { border:1px solid var(--line-soft);border-radius:12px;background:rgb(var(--on) / .025);overflow:hidden; }.production-queue-cell summary { display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:48px;padding:7px 10px;cursor:pointer;list-style:none; }.production-queue-cell summary::-webkit-details-marker { display:none; }.production-queue-cell summary::after { content:'+';font:650 13px/1 var(--mono);color:var(--ink-faint); }.production-queue-cell[open] summary::after { content:'−'; }.production-queue-cell summary > i { width:7px;height:7px;border-radius:50%;background:var(--ink-ghost); }.production-queue-cell summary > i.running { background:var(--lilac);box-shadow:0 0 8px rgba(215,182,240,.55); }.production-queue-cell summary > i.completed { background:var(--foam); }.production-queue-cell summary > i.failed,.production-queue-cell summary > i.cancelled { background:var(--coral); }.production-queue-cell summary b,.production-queue-cell summary small { display:block; }.production-queue-cell summary b { font-size:10.5px; }.production-queue-cell summary small { margin-top:2px;font-size:8.6px;color:var(--ink-faint); }
.production-queue-route { position:relative;display:flex;gap:7px;align-items:center;overflow-x:auto;padding:2px 10px 11px 27px; }.production-queue-route::before { content:'';position:absolute;left:16px;right:16px;top:22px;height:1px;background:var(--line-w); }.production-queue-page { position:relative;z-index:1;display:grid;place-items:center;min-width:44px;min-height:44px;padding:5px;border:1px solid var(--line-w);border-radius:11px;background:var(--space-3);font:650 8.5px/1 var(--mono);color:var(--ink-faint); }.production-queue-page.running { border-color:var(--lilac);color:var(--lilac); }.production-queue-page.completed { border-color:rgba(126,214,193,.48);color:var(--foam); }.production-queue-page.failed,.production-queue-page.cancelled { border-color:rgba(240,109,79,.48);color:var(--coral); }
.production-queue-actions,.checkpoint-actions,.production-checkpoint-actions { display:flex;flex-wrap:wrap;gap:7px;margin-top:10px; }.production-queue-actions button,.checkpoint-actions button,.production-checkpoint-actions button,.production-checkpoint-form button { min-height:44px; }.production-checkpoint-status { margin:9px 1px 0;font-size:9.5px;line-height:1.5;color:var(--ink-faint); }
.checkpoint-form { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:11px; }.checkpoint-form input,.checkpoint-form textarea { min-width:0;padding:10px 11px;border:1px solid var(--control-border);border-radius:10px;background:var(--control-bg);resize:vertical; }.checkpoint-form input { min-height:44px; }.checkpoint-form textarea { grid-column:1/-1;min-height:70px; }.checkpoint-form button { min-height:44px; }.checkpoint-list { display:grid;gap:7px;margin-top:11px; }
.production-checkpoint-form { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:11px; }.production-checkpoint-form label { display:grid;gap:5px;font-size:9px;color:var(--ink-faint); }.production-checkpoint-form label:nth-child(2) { grid-column:1/-1; }.production-checkpoint-form label span { padding-left:2px; }.production-checkpoint-form label i { font-style:normal;color:var(--ink-ghost); }.production-checkpoint-form input,.production-checkpoint-form textarea { width:100%;min-width:0;padding:10px 11px;border:1px solid var(--control-border);border-radius:10px;background:var(--control-bg);resize:vertical; }.production-checkpoint-form input { min-height:44px; }.production-checkpoint-form textarea { min-height:70px; }.production-checkpoint-list { display:grid;gap:7px;margin-top:11px; }.production-checkpoint-item { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 11px;border:1px solid var(--line-soft);border-radius:11px;background:rgb(var(--on) / .025); }.production-checkpoint-item b,.production-checkpoint-item small { display:block; }.production-checkpoint-item b { font-size:10.5px; }.production-checkpoint-item small,.production-checkpoint-item p { margin-top:3px;font-size:8.6px;line-height:1.4;color:var(--ink-faint); }.production-checkpoint-actions { margin:0; }.production-checkpoint-actions button { min-width:72px;padding-inline:9px; }
.production-queue-summary { grid-template-columns:8px minmax(0,1fr); }.production-queue-summary > .production-queue-pulse { width:8px;height:8px;margin:0;border-radius:50%;background:var(--ink-ghost); }.production-queue-pulse.running { background:var(--lilac);box-shadow:0 0 8px rgba(215,182,240,.55); }.production-queue-pulse.completed { background:var(--foam); }.production-queue-pulse.failed,.production-queue-pulse.cancelled { background:var(--coral); }.production-queue-summary small { display:block;margin-top:3px;font:500 8.5px/1.35 var(--mono);color:var(--ink-faint); }.production-queue-cell summary { grid-template-columns:minmax(0,1fr) auto 12px; }.production-queue-cell summary .production-queue-route { padding:0;overflow:hidden; }.production-queue-cell summary .production-queue-route::before { display:none; }.production-queue-cell summary .production-queue-route i { flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink-ghost); }.production-queue-cell summary .production-queue-route i.running { background:var(--lilac); }.production-queue-cell summary .production-queue-route i.completed { background:var(--foam); }.production-queue-cell summary .production-queue-route i.failed,.production-queue-cell summary .production-queue-route i.cancelled { background:var(--coral); }.production-queue-cell summary .production-queue-route b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.production-queue-cell summary em { color:var(--ink-ghost);font-style:normal; }.production-queue-pages { position:relative;display:flex;gap:7px;overflow-x:auto;padding:2px 10px 11px 27px; }.production-queue-pages::before { content:'';position:absolute;left:16px;right:16px;top:23px;height:1px;background:var(--line-w); }.production-queue-page { grid-template-rows:auto auto;grid-template-columns:8px auto;place-items:center start;gap:2px 5px;min-width:78px; }.production-queue-page i { grid-row:1/-1;width:7px;height:7px;border-radius:50%;background:currentColor; }.production-queue-page span { font-size:8.5px;color:var(--ink-soft); }.production-queue-page em { font-size:7.5px;font-style:normal;color:currentColor; }
@media (max-width:900px), (max-height:700px) { #panel.production-panel { width:100%; } }
@media (max-width:520px) { .prod-grid-row { grid-template-columns:44px minmax(0,1fr);gap:6px; }.prod-grid-cells { gap:3px; }.prod-summary { gap:11px;padding:13px; }.prod-summary-copy h3 { font-size:17px; }.prod-bar-row { grid-template-columns:1fr; }.prod-bar-review { width:100%; }.production-preset-form,.checkpoint-form,.production-checkpoint-form,.production-checkpoint-item { grid-template-columns:1fr; }.checkpoint-form textarea,.production-checkpoint-form label:nth-child(2) { grid-column:auto; }.checkpoint-form button,.production-queue-actions button,.checkpoint-actions button,.production-checkpoint-actions button,.production-checkpoint-form button { width:100%; }.production-checkpoint-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }.production-checkpoint-actions button { width:auto;min-width:0; }.production-queue-summary { grid-template-columns:1fr; }.production-queue-summary em { justify-self:start; } }

.production-review-modal { width:min(1020px,calc(100vw - 28px));height:min(720px,calc(100dvh - 28px));overflow:hidden;padding:0; }
.production-review-layout { display:grid;grid-template-columns:300px minmax(0,1fr);height:100%; }
.production-review-layout > aside { min-width:0;padding:28px 18px 20px;border-right:1px solid var(--line-w);background:linear-gradient(180deg,var(--space-3),var(--space-2));overflow:auto; }
.production-review-layout > aside h2 { margin-top:5px;font-size:21px;line-height:1.1;letter-spacing:-.04em; }.production-review-layout > aside > p:not(.eyebrow) { margin:9px 0 15px;font-size:11px;line-height:1.5;color:var(--ink-faint); }
.production-review-list { display:grid;gap:6px; }.production-review-list > button { display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:52px;padding:7px 9px;border:1px solid var(--line-soft);border-radius:11px;text-align:left;background:rgb(var(--on) / .025); }.production-review-list > button.active { border-color:var(--focus-ring);background:rgba(139,92,246,.12); }.production-review-list > button.reviewed { box-shadow:inset 3px 0 var(--foam); }.production-review-list i,.production-batch-row > i { width:7px;height:7px;border-radius:50%;background:var(--ink-ghost); }.production-review-list i.ready,.production-batch-row > i.complete { background:var(--foam); }.production-review-list i.fallback,.production-review-list i.overflow,.production-batch-row > i.failed { background:var(--amber); }.production-review-list b,.production-review-list small { display:block; }.production-review-list b { font-size:10.5px; }.production-review-list small { margin-top:2px;font-size:8.8px;color:var(--ink-faint); }.production-review-list em { font:500 8px/1 var(--mono);color:var(--ink-faint);font-style:normal;text-transform:uppercase; }
.production-review-stage { display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;padding:28px;background:radial-gradient(circle at 50% 10%,rgba(139,92,246,.16),transparent 52%),var(--premiere-bg); }.production-review-heading { display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:end; }.production-review-heading span { font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--coral); }.production-review-heading b { grid-row:2;font-size:22px; }.production-review-heading small { grid-column:2;grid-row:1/3;align-self:center;font-size:9px;color:var(--ink-faint); }
.production-review-canvases { display:flex;align-items:center;justify-content:center;gap:24px;min-height:0;padding:18px;overflow:hidden; }.production-review-canvases figure { display:grid;gap:7px;min-width:0;max-height:100%; }.production-review-canvases figure > div { min-height:0;border:1px solid rgb(var(--on) / .14);border-radius:13px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45); }.production-review-canvases canvas { display:block;max-width:min(210px,22vw);max-height:430px;width:auto;height:auto; }.production-review-canvases figcaption { max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:9.5px;color:var(--ink-faint); }.production-review-loading { display:grid;place-items:center;gap:8px;color:var(--ink-faint);font-size:10px; }.production-review-error { max-width:36ch;text-align:center;color:var(--coral); }
.production-review-foot { display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:12px;border-top:1px solid var(--line-soft); }.production-review-foot span { font:500 9px/1 var(--mono);color:var(--ink-faint); }.production-review-foot button { min-height:46px; }
.production-batch-modal { width:min(680px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));overflow:auto;padding:28px; }.production-batch-modal h2 { margin-top:5px;font-size:24px;letter-spacing:-.04em; }.production-batch-lede { margin-top:7px;font-size:11px;line-height:1.5;color:var(--ink-faint); }.production-batch-summary { margin:16px 0 10px;padding:13px 14px;border:1px solid rgba(139,92,246,.25);border-radius:13px;background:rgba(139,92,246,.08); }.production-batch-summary b,.production-batch-summary span { display:block; }.production-batch-summary b { font-size:12px; }.production-batch-summary span { margin-top:3px;font-size:9px;color:var(--ink-faint); }.production-batch-summary .prem-bar { margin-top:10px; }
.production-batch-cells { display:grid;gap:6px;max-height:360px;overflow:auto; }.production-batch-row { display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:49px;padding:7px 10px;border:1px solid var(--line-soft);border-radius:10px;background:rgb(var(--on) / .025); }.production-batch-row b,.production-batch-row small { display:block; }.production-batch-row b { font-size:10.5px; }.production-batch-row small { margin-top:2px;font-size:8.7px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.production-batch-row em { font:600 8.5px/1 var(--mono);font-style:normal;color:var(--ink-faint); }.production-batch-pages { display:flex;gap:4px;grid-column:2/-1;overflow-x:auto; }.production-batch-pages [data-queue-status] { display:grid;place-items:center;min-width:28px;min-height:24px;padding:3px;border:1px solid var(--line-soft);border-radius:7px;font:650 7.5px/1 var(--mono);font-style:normal;color:var(--ink-faint); }.production-batch-pages [data-queue-status="running"] { color:var(--lilac);border-color:rgba(215,182,240,.45); }.production-batch-pages [data-queue-status="completed"] { color:var(--foam);border-color:rgba(126,214,193,.45); }.production-batch-pages [data-queue-status="failed"],.production-batch-pages [data-queue-status="cancelled"] { color:var(--coral);border-color:rgba(240,109,79,.45); }.production-batch-actions { display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:15px; }.production-batch-actions button { min-height:44px; }
.production-part-downloads { margin-top:12px;padding:12px;border:1px solid rgba(126,214,193,.28);border-radius:12px;background:rgba(126,214,193,.07); }.production-part-downloads > b { font-size:11px; }.production-part-downloads > p { margin:4px 0 9px;font-size:9px;line-height:1.45;color:var(--ink-faint); }.production-part-downloads [data-server-part-list] { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }.production-part-downloads button { min-height:44px; }.production-part-downloads [data-refresh-parts] { width:100%;margin-top:7px; }
@media (max-width:700px) { .production-review-layout { grid-template-columns:1fr;grid-template-rows:minmax(150px,34%) minmax(0,1fr); }.production-review-layout > aside { padding:18px 14px;border-right:0;border-bottom:1px solid var(--line-w); }.production-review-layout > aside > p:not(.eyebrow) { display:none; }.production-review-list { display:flex;overflow-x:auto; }.production-review-list > button { flex:0 0 180px; }.production-review-stage { padding:15px; }.production-review-canvases { gap:10px;padding:10px; }.production-review-canvases canvas { max-width:36vw;max-height:280px; }.production-review-foot { align-items:stretch;flex-direction:column; }.production-review-foot button { width:100%; }.production-batch-modal { padding:22px 16px; } }

/* ═══════════ RIGHT-TO-LEFT (Arabic) ═══════════
   The shell mirrors: rail, panels, inspector and toolbar all flip with the
   document direction. The canvas does not — a design is artwork, and its
   rulers, handles and page order stay left-to-right in every language. */
[dir="rtl"] #rail { border-right: 0; border-left: 1px solid var(--line-soft); }
[dir="rtl"] #panel { border-right: 0; border-left: 1px solid var(--line-soft); }
[dir="rtl"] #inspector { border-left: 0; border-right: 1px solid var(--line-soft); }
[dir="rtl"] .modal-x { right: auto; left: 14px; }
[dir="rtl"] .eyebrow::before { order: 2; }
[dir="rtl"] .welcome-brand span,
[dir="rtl"] .door { text-align: right; }
/* Arrows point the way the reader travels. */
[dir="rtl"] .door .d-go i { transform: scaleX(-1); }
[dir="rtl"] .door:hover .d-go i { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] #stage, [dir="rtl"] #canvas-wrap { direction: ltr; }
[dir="rtl"] .film-meta, [dir="rtl"] .create-guide { direction: rtl; }

/* ─── Translated chrome ───
   English labels are unusually short. Japanese "プロジェクト" and German
   "Veröffentlichen" are not, and a fixed-height flex button with no wrapping
   rule stacked them one character per line and pushed the toolbar apart.
   Labels stay on one line everywhere and the row gives way instead. */
.tbtn, .brand, .create-guide-compact { white-space: nowrap; }
/* The rail is deliberately excluded: its labels are meant to wrap, and on a
   compact screen that wrapping is what keeps them readable at all. */
.storyboard-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.create-guide-kicker, .create-guide li strong { white-space: nowrap; }
/* No flex overrides here: pinning the toolbar groups against shrinking made
   the whole page overflow sideways on a narrow window. Keeping the labels on
   one line is enough — the existing layout already knows how to give way. */

/* Export dialog page picker. The list used to live inside the coral warning
   box, so a routine choice read as a wall of error and clipped mid-row. */
.prem-pick-warning{margin:12px 0 8px;color:var(--coral);font-weight:650;font-size:13px;line-height:1.45}
.prem-pick{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);overflow:hidden}
.prem-pick-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.prem-pick-head h4{margin:0;font-size:12.5px;font-weight:650;letter-spacing:.01em;color:var(--ink)}
.prem-pick-count{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.prem-pick-count.is-over{color:var(--coral);font-weight:650}
.prem-pick-list{max-height:min(46vh,300px);overflow:auto;padding:6px 4px 6px 12px}
.prem-pick-note{margin:0;padding:8px 12px 10px;font-size:11.5px;color:var(--ink-soft);border-top:1px solid var(--line)}

/* ── Language: one popover, two clearly separate jobs ──────────────
   The chip sets the language INSIDE the exported screenshots; the chips at
   the foot of the same popover set the language of the editor. Naming both
   in one place, with a sentence each, is the whole fix — customers were
   picking one and expecting the other. */
#locale-chip { position: relative; }
#locale-chip.needs-work { border-color: rgba(244,162,97,.45); background: rgba(244,162,97,.12); }
#locale-chip.needs-work::after,
#locale-chip.locked::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); border: 2px solid var(--space-2); }
#locale-chip.locked::after { background: var(--lilac); }

.locale-menu { display: flex; flex-direction: column; width: 300px; max-height: min(560px, calc(100vh - 96px)); padding: 0; overflow: hidden; }
.locale-menu-head { flex: none; padding: 13px 15px 8px; }
.locale-menu-head.second { border-top: 1px solid var(--line-soft); padding: 12px 15px 8px; background: rgb(var(--on) / .03); }
.locale-menu-head b { display: block; font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.locale-menu-head p { margin-top: 5px; font-size: 10.5px; line-height: 1.45; color: var(--ink-ghost); }
.locale-menu-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.locale-menu .locale-row { padding: 8px 10px; gap: 10px; }
.locale-menu .locale-row .locale-copy { flex: 1; min-width: 0; }
.locale-menu .locale-row b { font-size: 12.5px; }
.locale-state { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: var(--ink-faint); }
.locale-state.ok { color: var(--foam); }
.locale-state.warn { color: var(--amber); }
.locale-state.bad { color: var(--coral); }
.locale-state.idle { color: var(--ink-ghost); }
.locale-mark { flex: none; display: grid; place-items: center; width: 20px; color: var(--foam); font-size: 12px; }
.locale-row.locked { opacity: .82; }
.locale-row.locked .locale-mark { color: var(--lilac); }
.locale-row.locked .locale-state { color: var(--lilac); }
.locale-menu-ui { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 13px; background: rgb(var(--on) / .03); }
.locale-ui-chip { padding: 6px 10px; min-height: 32px; border: 1px solid var(--control-border); border-radius: 9px; background: var(--control-bg); font-size: 11px; font-weight: 600; color: var(--ink-faint); transition: all .18s; }
.locale-ui-chip:hover { border-color: var(--control-border-hover); background: var(--control-bg-hover); color: var(--ink); }
.locale-ui-chip.on { border-color: var(--foam); background: var(--foam-soft); color: var(--foam); }

.locale-menu-search { display: block; margin-top: 8px; }
.locale-menu-search input { width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--control-border); background: var(--control-bg); color: var(--ink); font-size: 12px; }
.locale-menu-search input:focus { outline: none; border-color: var(--foam); box-shadow: 0 0 0 2px var(--focus-halo); }

.prod-locale-search { display: block; margin-bottom: 8px; }
.prod-locale-search input { width: 100%; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--control-border); background: var(--control-bg); color: var(--ink); font-size: 11.5px; }
.prod-locale-search input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 2px var(--focus-halo); }

.prod-chips.locale { max-height: 220px; overflow-y: auto; padding: 2px; }

/* ── The locked Localize panel and the upgrade modal behind it ── */
.lang-gate { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 20px 22px; border: 1px solid rgba(167,139,250,.3); border-radius: 18px; background: linear-gradient(165deg, rgba(167,139,250,.14), rgb(var(--on) / .02)); }
.lang-gate-lock { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.34); color: var(--lilac); }
.lang-gate h3 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.lang-gate p { max-width: 34ch; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }
.lang-gate-flags { display: flex; align-items: center; gap: 5px; font-size: 17px; filter: saturate(.9); }
.lang-gate-more { display: inline-grid; place-items: center; padding: 0 6px; height: 24px; border-radius: 999px; background: rgba(167,139,250,.25); border: 1px solid rgba(167,139,250,.4); color: var(--lilac); font: 700 10px/1 var(--mono); }
.lang-gate-go { width: 100%; min-height: 46px; margin-top: 4px; justify-content: center; }
.lang-gate-note { font-size: 10px !important; color: var(--ink-ghost) !important; }

.premium-gate {
  position: relative;
  width: min(480px, calc(100vw - 28px));
  padding: 28px 26px 22px;
  background: radial-gradient(130% 90% at 50% 0%, rgba(240, 109, 79, 0.16) 0%, rgba(130, 90, 240, 0.08) 45%, rgba(20, 15, 30, 0.98) 100%), #140f1e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  box-shadow: 0 28px 72px -16px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  overflow-y: auto;
  animation: modalPop .22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.96) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.premium-gate .modal-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-faint);
  display: grid;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.premium-gate .modal-x:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: scale(1.05);
}
.premium-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(240, 109, 79, 0.35);
  background: linear-gradient(135deg, rgba(240, 109, 79, 0.18), rgba(167, 139, 250, 0.12));
  color: #ffaa95;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(240, 109, 79, 0.15);
}
.premium-gate h3 {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.22;
  color: #fff;
}
.premium-gate-lede {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}
.premium-gate-list {
  display: grid;
  gap: 7px;
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  list-style: none;
}
.premium-gate-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 2px;
}
.premium-gate-list-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(126, 214, 193, 0.16);
  border: 1px solid rgba(126, 214, 193, 0.45);
  color: #7ED6C1;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.premium-gate-list-icon svg {
  width: 10px;
  height: 10px;
}
.premium-gate-list-text {
  display: grid;
  gap: 1.5px;
  flex: 1;
}
.premium-gate-list-text b {
  font-size: 12.5px;
  font-weight: 650;
  color: #f5f5f7;
  letter-spacing: -.01em;
}
.premium-gate-list-text span {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}
.premium-gate-intervals {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  margin-top: 18px;
}
.premium-gate-intervals button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
  transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-gate-intervals button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.premium-gate-intervals button.on {
  border-color: #F06D4F;
  background: rgba(240, 109, 79, 0.09);
  box-shadow: 0 0 0 1px #F06D4F, 0 8px 20px -6px rgba(240, 109, 79, 0.35);
}
.premium-gate-interval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.premium-gate-interval-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.premium-gate-radio {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  transition: all .15s ease;
}
.premium-gate-intervals button.on .premium-gate-radio {
  border-color: #F06D4F;
  background: #F06D4F;
}
.premium-gate-radio::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: all .15s ease;
}
.premium-gate-intervals button.on .premium-gate-radio::after {
  opacity: 1;
  transform: scale(1);
}
.premium-gate-save {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: #7ED6C1;
  color: #0b1e17;
  font: 750 9px/1 var(--mono) !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.premium-gate-intervals strong {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
}
.premium-gate-intervals strong small {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
}
.price-shimmer {
  display: inline-block;
  width: 58px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: priceShimmer 1.5s infinite;
  vertical-align: middle;
}
@keyframes priceShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.premium-gate-subtext {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.25;
}
.premium-gate-go {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border-radius: 13px;
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(135deg, #FF6B4A 0%, #E04826 100%);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px -4px rgba(240, 109, 79, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-gate-go:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 12px 30px -4px rgba(240, 109, 79, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.premium-gate-go:active {
  transform: translateY(0);
}
.premium-gate-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.premium-gate-note span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.premium-gate-auth {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}
.premium-gate-auth a {
  color: #7ED6C1;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.premium-gate-auth a:hover {
  color: #a8ebd9;
  text-decoration: underline;
}

/* ── Phone repairs ─────────────────────────────────────────────────
   Measured at 375×812: the toolbar was 171px tall — a fifth of the screen
   before any work is visible — because .tb-center still carried the
   flex-wrap it is given at 1279px, so the size switcher and the language
   chip each took a row of their own inside a box that was already told to
   scroll. Everything below is that class of bug: a desktop rule surviving
   into a width it was never measured at. */
@media (max-width: 900px) {
  /* One scrolling row, not two stacked ones. */
  .tb-center { flex-wrap: nowrap; }
  /* A cut-off row reads as broken; a faded edge reads as "there is more". */
  .tb-center, #rail {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    overscroll-behavior-x: contain;
  }
  .tb-center { scroll-snap-type: x proximity; }
  #target-seg, #locale-chip, #appearance-seg { scroll-snap-align: start; }
  #rail { scrollbar-width: none; }
  #rail::-webkit-scrollbar { display: none; }
}

@media (max-width: 639px) {
  #app #topbar { min-height: 0; padding: 6px 8px; gap: 6px; row-gap: 6px; }
  /* A 44px floor on every top-bar control that a thumb has to hit. The bar
     already scrolls horizontally on a phone, so widening these costs scroll
     distance rather than layout — which is the right trade against a 22px
     arrow. Heights come first because several of these were tall enough and
     only narrow, and vice versa. */
  #app #topbar #projects-btn,
  #app #topbar #new-project-btn,
  #app #topbar #brand-btn,
  #app #topbar .target-nav-arrow,
  #app #topbar #target-seg button,
  #app #topbar .tbtn-account { min-width: 44px; min-height: 44px; }
  /* The size chips carry text, so give them room for it rather than letting
     min-width square them off and clip the label. */
  #app #topbar #target-seg button { padding-inline: 12px; }
  .tb-name { max-width: 84px; }
  /* Core sizes plus More will not fit a phone, so make the row obviously scrollable
     rather than squeezing the labels past legibility. */
  #target-seg { flex: none; padding: 3px; }
  #target-seg button { min-width: 0; padding-inline: 11px; font-size: 12px; }
  #locale-chip { flex: none; }

  /* The heading, the span toggle and the arrows were sharing 359px with no
     give: in French the toggle label alone is 114px and the three collided.
     The counter is the least useful of them on a phone, and the toggle label
     truncates before anything can overlap. */
  .storyboard-head { gap: 8px; padding-inline: 0; }
  #storyboard-position { display: none; }
  .storyboard-hint { display: none; }
  /* The title had no truncation, so once the row ran out of room its text
     painted straight over the span toggle instead of shortening — that is the
     "Storyboard/Débordement" overlap. */
  .storyboard-heading { overflow: hidden; }
  /* Width has to stay flexible so the label can ellipsis, but 32px is not a
     thumb target — floor the height only. */
  .storyboard-watermark-btn,
  .storyboard-toggle-btn { min-height: 44px; }
  .storyboard-watermark-btn { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .storyboard-watermark-btn span:not(.ic) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .storyboard-toggle-btn { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .storyboard-toggle-btn span:not(.ic) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .storyboard-nav { flex: none; }

  /* The support bubble is fixed over the bottom-right corner, and on a phone
     that corner is the screen-thumbnail row: measured at 375px the bubble
     covered x297-353 while the Add button ran to x361. Nudging the row is not
     enough once the row scrolls, so the bubble moves above the row it was
     sitting on — it has no business covering the editor's controls. */
  /* Moving the bubble only trades one collision for another — every corner of
     a phone screen is editor here. So the screen row ends above it instead,
     and the bubble shrinks to give that back. */
  #page-bar { padding: 10px 12px 76px; }
  body .support.support--studio { right: 14px; bottom: 16px; }
  body .support.support--studio .support-launcher { width: 46px; height: 46px; }
  body .support.support--studio .support-launcher svg { width: 25px; height: 25px; }
}

@media (max-width: 360px) {
  .storyboard-heading { display: none; }
}

@media (max-width: 430px) {
  /* Rail labels are what make the icons legible, so the buttons narrow
     rather than losing their words. */
  .rail-btn { width: 56px; }
  .rail-label { font-size: 8.5px; }
  /* Two panels' worth of chrome in a 46dvh sheet leaves too little list, so the
     sheet may reach 56dvh — but only into height the canvas can spare. Taking
     it out of the runway instead (190px here, against the 260px the dock
     guarantees) left a 390x844 phone 194px of storyboard above an open sheet,
     and the storyboard is the editor, not a preview: the runway floor wins and
     the dvh allowance yields to it. On a tall phone the allowance is still what
     binds, so the list keeps the room this rule was added to give it. */
  #panel, #inspector { height: min(56dvh, calc(100% - 260px - var(--drawer-rail-offset))); }
}

/* ── Production panel inside the phone bottom sheet ────────────────
   The sheet gives the panel body about 280px. A download bar built for a
   690px desktop column took 220px of that, so the summary and the three
   steps were pushed behind it and the panel looked like nothing but a
   button. Same controls, one row, no explanatory note. */
@media (max-width: 900px), (max-height: 700px) {
  .prod-bar { margin-inline: -14px; padding: 9px 14px calc(10px + env(safe-area-inset-bottom)); }
  .prod-bar .production-download-note { display: none; }
  .prod-bar-row { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 6px; }
  .prod-bar-review { min-height: 44px; }
  .prod-bar-go { min-height: 44px; font-size: 12.5px; }
  .prod-card { margin-top: 10px; padding: 12px; }
  .prod-summary { padding: 13px; }
  /* The support bubble sits over whichever sheet is open, and a sheet is
     always the thing being used when it is open. */
  body:has(#panel.compact-open) .support.support--studio,
  body:has(#inspector.compact-open) .support.support--studio { display: none; }
}

/* Short phones. Restoring the dock's 260px canvas runway leaves this sheet
   about 200px on a 700px-tall screen, and the two-row download bar was eating
   more than half of it — so the room comes out of the panel's own chrome
   rather than back out of the storyboard. Format, preview and download share
   one row, and the sub-line goes: the panel title already says Production. */
@media (max-height: 740px) and (max-width: 900px) {
  #panel.production-panel #panel-sub { display: none; }
  /* The download button is a sibling of the format/preview row, not a child of
     it, so the bar itself becomes the grid that puts them on one line. */
  .prod-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
              padding: 7px 14px calc(8px + env(safe-area-inset-bottom)); }
  .prod-bar-row { margin-bottom: 0; }
  .prod-bar-go { width: auto; min-height: 44px; margin-top: 0; padding-inline: 14px; font-size: 12px; }
  .prod-summary { padding: 10px; gap: 10px; }
  .prod-gauge { width: 46px; height: 46px; }
  .prod-summary-copy h3 { font-size: 16px; }
  .prod-card { margin-top: 8px; padding: 10px; }
  .prod-card-head { margin-bottom: 8px; }
}

/* Phone touch targets.
   On a 390px phone the Studio shipped a row of 24-30px icon buttons, 32px
   toolbar buttons and 34px screen minis — all under the 44px minimum, and all
   things you hit with a thumb while holding the phone. Heights were already
   right; it is the widths that were short, so these set a floor without
   changing the visual language. The minis row already scrolls horizontally, so
   widening the minis costs reachability of the later screens, not layout. */
@media (max-width: 430px) {
  .layer-quick button { min-width: 44px; min-height: 44px; }
  #projects-btn, #new-project-btn { min-height: 44px; }
  #project-name { min-width: 44px; }
  .storyboard-mini { width: 44px; }
  .storyboard-toggle-btn { min-height: 44px; }
}

/* Export paywall touch targets.
   This is the screen a customer is on when they decide to pay, and on a
   390px phone five of its controls were under the 44px minimum — the
   back link was 17px tall. Heights only; the widths here are already fine
   and stretching them would break the two-up billing toggle. */
@media (max-width: 430px) {
  .modal.premiere .modal-x { width: 44px; height: 44px; }
  .prem-plans-back { min-height: 44px; display: inline-flex; align-items: center; }
  .prem-toggle-btn { min-height: 44px; }
  .prem-plan-buy { min-height: 44px; }
  .modal.premiere .seg-mini button { min-height: 44px; }
}

.aso-campaigns-note { display: grid; gap: 10px; }
.aso-campaigns-current, .aso-campaigns-actions { display: grid; gap: 8px; margin: 0 0 14px; }
.aso-campaigns-actions { grid-template-columns: 1fr; }
.aso-campaigns-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aso-campaigns-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgb(var(--line) / .7); }
.aso-campaigns-list li:first-child { border-top: 0; padding-top: 0; }
.aso-campaigns-list small { display: block; margin-top: 3px; color: var(--ink-faint); }
.aso-campaigns-status { min-height: 1.4em; margin: 0 0 10px; color: var(--ink-faint); font-size: 12px; }
.fg-lede { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.fg-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 500;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
}
.fg-preview canvas { display: block; width: 100%; height: 100%; }
.fg-source { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.fg-source li { margin: 4px 0; }
.fg-layout-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-chip {
  min-height: 36px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--control-border); background: var(--control-bg);
  color: inherit; font: 640 12px/1 var(--font); cursor: pointer;
}
.fg-chip.on { border-color: var(--coral); background: var(--coral-soft); }
.fg-actions { display: grid; gap: 8px; margin-top: 16px; }
.fg-export-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fg-note { margin: 12px 2px 0; font-size: 12px; line-height: 1.4; color: var(--ink-faint); }
#target-seg .fg-target { letter-spacing: -0.02em; }
.auto-frame-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(12, 9, 18, .72);
}
.auto-frame-sheet {
  width: min(560px, calc(100vw - 32px));
  padding: 28px 28px 24px;
  border: 1px solid rgba(237, 232, 255, .12);
  border-radius: 22px;
  color: #EDE8FF;
  background: linear-gradient(165deg, #1b1626, #120c1b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.auto-frame-kicker {
  margin: 0 0 8px;
  color: #C4B5FD;
  font: 650 11px/1.3 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.auto-frame-sheet h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.auto-frame-sheet > p { margin: 10px 0 0; color: rgba(237, 232, 255, .62); line-height: 1.55; }
.auto-frame-well {
  display: grid; justify-items: center; gap: 8px;
  margin-top: 22px; padding: 28px 16px;
  border: 1px dashed rgba(196, 181, 253, .45);
  border-radius: 16px;
  text-align: center;
  cursor: copy;
}
.auto-frame-well.is-over { border-color: #C4B5FD; background: rgba(196, 181, 253, .08); }
.auto-frame-phones { display: flex; align-items: end; gap: 8px; }
.auto-frame-phones i {
  width: 28px; height: 52px;
  border: 1px dashed rgba(196, 181, 253, .7);
  border-radius: 8px;
  background: rgba(196, 181, 253, .08);
}
.auto-frame-phones i:nth-child(2) { height: 62px; }
.auto-frame-well b { font-size: 16px; }
.auto-frame-well small { color: rgba(237, 232, 255, .5); }
.auto-frame-thumbs { display: flex; gap: 8px; overflow: auto; margin-top: 18px; }
.auto-frame-thumbs img {
  width: 54px; height: 108px; object-fit: cover; object-position: top;
  border-radius: 8px; background: #0C0912;
}
.auto-frame-field { display: grid; gap: 6px; margin-top: 14px; font-size: 12px; color: rgba(237, 232, 255, .7); }
.auto-frame-field input, .auto-frame-field select {
  min-height: 40px; padding: 0 12px;
  border: 1px solid rgba(237, 232, 255, .14);
  border-radius: 10px;
  color: #EDE8FF; background: rgba(255, 255, 255, .04);
  font: inherit;
}
.auto-frame-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.auto-frame-error { color: #F06D4F !important; }
/* What happened to the files that are NOT in the thumbnails above. Reads as a
   notice rather than an error: nothing failed, some files were left out. */
.auto-frame-note {
  margin-top: 12px !important;
  padding: 10px 12px;
  border: 1px solid rgba(240, 180, 79, .3);
  border-radius: 12px;
  background: rgba(240, 180, 79, .1);
  color: rgba(237, 232, 255, .82) !important;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.auto-frame-note[hidden] { display: none; }
.auto-frame-status { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(196, 181, 253, .08); }
.auto-frame-status b { display: block; }
.auto-frame-status p { margin: 4px 0 0; color: rgba(237, 232, 255, .62); }
@media (max-width: 700px) {
  .auto-frame-sheet { padding: 22px 18px; }
  .auto-frame-sheet h2 { font-size: 24px; }
}

/* ══════════ IN-EDITOR AUTH MODAL (LOGIN & CREATE ACCOUNT) ══════════ */
.auth-modal-scrim {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 6, 12, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: authFadeIn .2s ease-out;
}
@keyframes authFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-modal-card {
  position: relative;
  width: 100%; max-width: 420px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(32, 24, 48, 0.98), rgba(16, 12, 24, 0.99));
  border: 1px solid rgba(196, 181, 253, 0.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding: 28px 26px 26px;
  animation: authCardIn .22s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ink);
}
[data-theme="light"] .auth-modal-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
@keyframes authCardIn {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-faint); cursor: pointer;
  transition: all .15s;
}
.auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff; transform: scale(1.05);
}
[data-theme="light"] .auth-modal-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #666;
}
[data-theme="light"] .auth-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}
.auth-modal-close .ic { width: 15px; height: 15px; }

.auth-modal-header { text-align: center; margin-bottom: 20px; }
.auth-modal-badge {
  width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(240, 109, 79, 0.25), rgba(20, 14, 30, 0.9));
  border: 1px solid rgba(240, 109, 79, 0.35);
  box-shadow: 0 6px 20px rgba(240, 109, 79, 0.25);
}
.auth-modal-badge img { width: 30px; height: 30px; border-radius: 8px; }

.auth-modal-title {
  margin: 0 0 6px; font-size: 20px; font-weight: 750;
  letter-spacing: -.02em; color: var(--ink);
}
.auth-modal-subtitle {
  margin: 0 auto 18px; font-size: 13px; line-height: 1.45;
  color: var(--ink-ghost); max-width: 320px;
}

.auth-tab-group {
  display: inline-flex; width: 100%;
  padding: 3px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .auth-tab-group {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
.auth-tab-btn {
  flex: 1; height: 34px; border-radius: 9px;
  border: 0; background: transparent;
  font-size: 13px; font-weight: 650;
  color: var(--ink-soft); cursor: pointer;
  transition: all .18s;
}
.auth-tab-btn:hover { color: var(--ink); }
.auth-tab-btn.active {
  background: linear-gradient(135deg, #7C3AED, #6366F1);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}

.auth-modal-alert {
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  background: rgba(240, 109, 79, 0.15);
  border: 1px solid rgba(240, 109, 79, 0.35);
  color: #FF9D8A;
}
.auth-modal-alert.is-success {
  background: rgba(91, 228, 155, 0.15);
  border-color: rgba(91, 228, 155, 0.35);
  color: #5BE49B;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.auth-field label {
  font-size: 12px; font-weight: 650; color: var(--ink-soft);
}
.auth-field-row {
  display: flex; align-items: center; justify-content: space-between;
}
.auth-forgot-link {
  border: 0; background: transparent; padding: 0;
  color: #C4B5FD; font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: color .15s;
}
.auth-forgot-link:hover { color: #fff; text-decoration: underline; }

.auth-input-wrap {
  position: relative; display: flex; align-items: center;
}
.auth-input-icon {
  position: absolute; left: 12px; width: 16px; height: 16px;
  color: var(--ink-faint); pointer-events: none;
}
.auth-input-wrap input {
  width: 100%; height: 42px; padding: 0 12px 0 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink); font-size: 13.5px; font-family: inherit;
  transition: all .18s;
}
.auth-input-wrap input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
[data-theme="light"] .auth-input-wrap input {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}
[data-theme="light"] .auth-input-wrap input:focus {
  background: #fff;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.auth-submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; margin-top: 4px; border-radius: 12px;
  border: 0; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #F06D4F 0%, #E04E2D 100%);
  box-shadow: 0 4px 18px rgba(240, 109, 79, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all .2s;
}
.auth-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(240, 109, 79, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.auth-submit-btn:disabled {
  opacity: .5; pointer-events: none;
}
.auth-submit-btn .ic { width: 16px; height: 16px; }

.auth-back-link {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px;
  margin-top: 4px; transition: color .15s;
}
.auth-back-link:hover { color: var(--ink); }

.auth-modal-divider {
  position: relative; text-align: center; margin: 18px 0 14px;
}
.auth-modal-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .auth-modal-divider::before { background: rgba(0, 0, 0, 0.08); }
.auth-modal-divider span {
  position: relative; padding: 0 10px; font-size: 11px; font-weight: 650;
  color: var(--ink-ghost); background: #181224; text-transform: uppercase;
  letter-spacing: .06em;
}
[data-theme="light"] .auth-modal-divider span { background: #ffffff; }

.auth-oauth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auth-oauth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink); font-size: 13px; font-weight: 650;
  text-decoration: none; cursor: pointer;
  transition: all .15s;
}
.auth-oauth-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
[data-theme="light"] .auth-oauth-btn {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.1);
  color: #111;
}
[data-theme="light"] .auth-oauth-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.auth-oauth-btn .ic { width: 17px; height: 17px; flex-shrink: 0; }