/* ─── Seedance Studio: Higgsfield-style theme ───
   Almost-black neutral background, acid lime, white pills,
   Space Grotesk in caps for headings, system grotesk for body text. */

:root {
  --bg: #0d0e10;
  --panel: #131416;
  --card: #1a1c1e;
  --card-2: #222426;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #f7f7f8;
  --muted: #9a9fa6;
  --dim: #5d6167;
  --lime: #d1fe17;
  --lime-dim: #a8cd12;
  --pink: #ff005b;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Menlo", monospace;
  /* header height — re-measured by app.js (syncTopbarHeight); everything sticky hangs off it */
  --topbar-h: 56px;
}

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

/* the hidden attribute always beats class-based display */
[hidden] { display: none !important; }
/* Held by the boot snippet in index.html while the Russian dictionary is on its way, and
   released by i18n.js the moment the sweep is done — visibility, not display, so layout
   is already measured when it appears. Never fires for an English UI. */
html.lang-boot body { visibility: hidden; }

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ─── header ─── */

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 60;
}

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

.brand-dot {
  width: 26px; height: 26px;
  flex-shrink: 0;
  background: var(--lime);
  /* the mark from public/icon.svg as a mask, so the aperture shows the surface behind it
     instead of a hardcoded background colour */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20fill%3D%27%23000%27%20fill-rule%3D%27evenodd%27%20d%3D%27M37.27%2018.04A24.5%2024.5%200%200%200%2062.73%2018.04A14%2014%200%200%201%2081.96%2037.27A24.5%2024.5%200%200%200%2081.96%2062.73A14%2014%200%200%201%2062.73%2081.96A24.5%2024.5%200%200%200%2037.27%2081.96A14%2014%200%200%201%2018.04%2062.73A24.5%2024.5%200%200%200%2018.04%2037.27A14%2014%200%200%201%2037.27%2018.04ZM33.5%2050A16.5%2016.5%200%201%200%2066.5%2050A16.5%2016.5%200%201%200%2033.5%2050Z%27/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20fill%3D%27%23000%27%20fill-rule%3D%27evenodd%27%20d%3D%27M37.27%2018.04A24.5%2024.5%200%200%200%2062.73%2018.04A14%2014%200%200%201%2081.96%2037.27A24.5%2024.5%200%200%200%2081.96%2062.73A14%2014%200%200%201%2062.73%2081.96A24.5%2024.5%200%200%200%2037.27%2081.96A14%2014%200%200%201%2018.04%2062.73A24.5%2024.5%200%200%200%2018.04%2037.27A14%2014%200%200%201%2037.27%2018.04ZM33.5%2050A16.5%2016.5%200%201%200%2066.5%2050A16.5%2016.5%200%201%200%2033.5%2050Z%27/%3E%3C/svg%3E") center / contain no-repeat;
}

.brand h1 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand h1 em { font-style: normal; color: var(--lime); }

.topbar-status {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  margin-left: auto;
}

.token-total { color: var(--muted); }

.api-status { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.api-led { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.api-status.online .api-led { background: var(--lime); box-shadow: 0 0 8px rgba(209, 254, 23, .5); }
.api-status.online { color: var(--lime); }
.api-status.offline .api-led { background: var(--pink); }
.api-status.offline { color: var(--pink); }

/* Storage fill, in the header only once it is nearly gone — the figure itself lives in the
   account menu, which nobody opens while things are going well. Built like the key status
   beside it: a word, a number, a colour, no chrome. */
.storage-warn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0;
  font: inherit; color: #ffcc33; cursor: pointer;
}
.storage-warn b { font-weight: 600; }
.storage-warn:hover { filter: brightness(1.15); }
.storage-warn.full { color: var(--pink); }

/* ─── layout ─── */

.layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

/* tabs without the slate (art dept, cast, library): the right zone gets full width */
.layout.reel-only { grid-template-columns: 1fr; }

/* ─── generation panel ─── */

.slate {
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 18px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  position: sticky;
  top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.slate-field { min-width: 0; }

textarea, input[type="number"] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 13px;
  resize: vertical;
  transition: border-color .15s;
}
textarea:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--line-strong);
}
textarea::placeholder, input::placeholder { color: var(--dim); }

.note { margin-top: 7px; font-size: 11.5px; color: var(--dim); }

/* upload zones */

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

.drop {
  position: relative;
  background: var(--card);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drop:hover, .drop.dragover { border-color: var(--lime); background: var(--card-2); }

.drop-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.drop-hint { font-size: 11px; color: var(--dim); }

/* segments (model) */

.seg {
  display: flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.seg button {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button.active { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.seg button .seg-hint {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
  margin-top: 1px;
}
.seg button.active .seg-hint { color: var(--muted); }

/* model dropdown — a list, not segments: it has to hold engines from several
   vendors without running out of the slate's 340px */

.model-picker { position: relative; }

.model-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-body);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .15s;
}
.model-btn:hover, .model-picker [aria-expanded="true"] { border-color: var(--line-strong); }
.model-btn-name { font-size: 13.5px; font-weight: 600; }
.model-btn-price {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--lime);
}
.model-caret { color: var(--muted); flex-shrink: 0; }
.model-picker [aria-expanded="true"] .model-caret { transform: rotate(180deg); }

/* fixed, not absolute: the slate is an overflow-y:auto container and would clip
   the list as soon as it grows past the panel edge. Placement is computed in
   placeModelMenu() — flips above the trigger when there is no room below. */
/* .model-picker prefix on purpose: plain .model-menu would lose to .project-menu,
   which sits later in this file and sets position:absolute */
.model-picker .model-menu {
  position: fixed;
  top: auto; left: auto; right: auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-group {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 11px 4px;
}

.model-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 11px;
  text-align: left;
  cursor: pointer;
}
.model-item:hover { background: var(--card-2); }
.model-item-name { font-family: var(--font-body); font-size: 13px; color: var(--text); }
.model-item.current .model-item-name { color: var(--lime); font-weight: 600; }
.model-item-price { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.model-item-hint { grid-column: 1 / -1; font-size: 11px; color: var(--dim); margin-top: 1px; }
.model-item-hint:empty { display: none; }
/* a provider discount that is running right now — the reason this row is cheap today */
.promo-off { color: var(--lime); }
.model-item-hint > :first-child + .promo-off { margin-left: 7px; }

/* pill chips */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: rgba(255, 255, 255, .3); }
.chip.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #101201;
  font-weight: 700;
}


/* slider */

input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
  margin-top: 12px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--lime);
  cursor: pointer;
  border: 3px solid var(--panel);
  box-shadow: 0 0 0 1px var(--lime);
}
output { font-family: var(--font-mono); color: var(--lime); }

/* the far-left notch means "auto" — say so instead of hiding it in a tooltip */
.range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--dim);
}

/* toggle */

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 6px; }
.switch input { display: none; }
.switch-track {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s, background .15s;
}
.switch input:checked + .switch-track { background: var(--lime); border-color: var(--lime); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: #101201; }
.switch-label { font-size: 12.5px; color: var(--muted); }

.slate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.slate-extra summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.slate-extra summary::-webkit-details-marker { display: none; }
.slate-extra summary::before { content: "+"; color: var(--lime); font-family: var(--font-mono); font-size: 11px; }
.slate-extra[open] summary::before { content: "−"; }
.slate-extra summary .eyebrow { margin-bottom: 0; }
.slate-extra summary:hover .eyebrow { color: var(--text); }
.slate-extra .slate-field { margin-top: 12px; }
.slate-extra .slate-grid { margin-top: 12px; }

/* collapsed summary carries the live values, so folding hides nothing */
.params-summary {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slate-extra[open] .params-summary { display: none; }

/* cast under the prompt: click to insert @name */
.cast-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cast-quick:empty { display: none; }
.cast-quick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px 3px 4px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cast-quick-chip:hover { border-color: var(--lime); color: var(--lime); }
.cast-quick-chip img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; }
.cast-quick-chip .cast-quick-noface {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--card-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--muted);
}

/* button + variants selector */

/* The dock is pinned to the bottom of the (scrolling) slate: the primary action
   and its price must never sit below the fold. The ::before gradient doubles as
   the "there is more above" scroll affordance. */
.fire-dock {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 -16px;
  padding: 10px 16px 16px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fire-dock::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -24px;
  height: 24px;
  background: linear-gradient(to top, var(--panel), transparent);
  pointer-events: none;
}

/* Free takes on the studio's key. Sits directly above Generate because that is where the
   question "will this cost me anything" is actually asked. Lime while takes remain; once
   they're spent it turns into the one instruction that matters. */
.bonus-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid rgba(209, 254, 23, .28);
  border-radius: 12px;
  background: rgba(209, 254, 23, .06);
}
.bonus-bar .bonus-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bonus-bar b {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lime);
}
.bonus-bar span { font-size: 11.5px; color: var(--faint); line-height: 1.35; }
.bonus-bar .linkish {
  background: none; border: 0; padding: 0; cursor: pointer; flex-shrink: 0;
  color: var(--muted); font: inherit; font-size: 11.5px; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px;
}
.bonus-bar .linkish:hover { color: var(--lime); text-decoration-color: var(--lime); }
/* spent: no longer an offer, so it stops wearing the accent colour */
.bonus-bar.spent { border-color: var(--line-strong); background: rgba(255,255,255,.03); }
.bonus-bar.spent b { color: var(--text); }
.bonus-bar.spent .linkish { color: var(--lime); text-decoration-color: var(--lime); }

.takes-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.takes-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fire-row { display: flex; gap: 8px; align-items: stretch; }
.fire-row .fire { flex: 1; }

.variants {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.variants button {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  min-width: 38px;
  height: 26px;
  padding: 0 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.variants button:last-child { border-right: none; }
.variants button.active { background: var(--lime); color: #101201; font-weight: 700; }

/* button */

.fire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--lime);
  color: #101201;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 14px 20px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.fire:hover { filter: brightness(1.07); }
.fire:active { transform: scale(.99); }
.fire:disabled { background: var(--card-2); color: var(--dim); cursor: wait; }

.fire-rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #101201;
  flex-shrink: 0;
}
.fire:disabled .fire-rec { background: var(--pink); animation: blink 1s infinite; }

.form-error {
  color: #ff5c92;
  font-size: 12.5px;
  border: 1px solid rgba(255, 0, 91, .35);
  border-radius: 12px;
  padding: 10px 13px;
  background: rgba(255, 0, 91, .07);
}
/* The way out, inside the refusal itself. Underlined rather than coloured: the box is
   already pink, and a second colour in it reads as a second error. */
.form-error-help {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-error-help:hover { color: #fff; }

/* ─── studio header: back to projects ─── */

.studio-nav { display: flex; align-items: center; gap: 10px; margin-left: 10px; min-width: 0; }

.back-home {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.back-home:hover { color: var(--lime); border-color: rgba(209, 254, 23, .4); }

.studio-sep { color: var(--dim); font-size: 13px; }

.studio-project-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── home: project grid ─── */

.home { padding: 40px clamp(20px, 5vw, 64px) 80px; }

.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.home-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--lime);
  line-height: 1;
}

.home-counts {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 10px;
}
.home-counts-spent { color: var(--muted); }

.home-head .pill { flex: none; padding: 11px 22px; }

/* min card 272px, capped at 4 columns on wide screens */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(272px, (100% - 3 * 24px) / 4), 1fr));
  gap: 24px;
  align-items: start;
}

.project-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.project-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.project-cover {
  aspect-ratio: 16 / 9;
  background: #08090a;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-cover video, .project-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.project-cover-fallback {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--dim);
}

.project-live {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lime);
  color: #101201;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  transform: skewX(-8deg);
  border-radius: 3px;
}
.project-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #101201;
  animation: blink 1s infinite;
}

.project-body { padding: 16px; }

.project-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.project-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.project-meta-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-cost {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A locked project: the cover is replaced by the lock itself rather than dimmed, because a
   dimmed thumbnail still invites the click that will be refused. */
.project-card.locked { cursor: pointer; }
.project-card.locked .project-cover { background: repeating-linear-gradient(-45deg, #0b0c0d 0 8px, #0e0f11 8px 16px); }
.project-lock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--dim);
}
.project-lock b {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project-clock {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.project-clock.urgent { color: var(--pink); }

/* The same countdown, inside the studio. Sits above the reel head, full width. */
.lock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(209, 254, 23, .06);
  font-size: 12px;
  color: var(--muted);
}
.lock-bar .linkish {
  margin-left: auto;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.project-actions {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity .15s;
}
.project-card:hover .project-actions { opacity: 1; }
.project-actions .icon-btn { background: rgba(8, 9, 10, .65); backdrop-filter: blur(4px); }

.project-card.project-new-card {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: stretch;
  min-height: 181px;
  padding: 16px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  transition: color .15s, border-color .15s;
}
.project-card.project-new-card:hover { color: var(--lime); border-color: rgba(209, 254, 23, .4); transform: none; }
.project-new-sub { font: 400 11px var(--font-mono); color: var(--dim); }

.project-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 6px;
  z-index: 70;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.project-item {
  display: flex; align-items: center; gap: 8px;
  border-radius: 9px;
  padding: 2px 2px 2px 11px;
}
.project-item:hover { background: var(--card-2); }
.project-item.current .project-item-name { color: var(--lime); }

.project-item-name {
  flex: 1;
  background: none; border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  padding: 8px 0;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.item-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}

.project-new {
  display: block; width: 100%;
  background: none;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 8px 11px;
  margin-top: 6px;
  cursor: pointer;
  text-align: left;
}
.project-new:hover { color: var(--lime); border-color: rgba(209, 254, 23, .4); }

/* ─── mentions ─── */

.prompt-wrap { position: relative; }

/* @tags get lost in a long prompt, so a mirror layer over the textarea repaints the
   text with the tags in lime, and the textarea's own text goes transparent. The layers
   must be metrically IDENTICAL — same font, size, line-height, padding, border width —
   and nothing inside .prompt-hl may change metrics (no padding, no bold), otherwise the
   wrapping diverges and the text ghosts. The textarea only goes transparent once JS has
   actually filled the layer (.hl-on), so a missing layer can't leave the prompt blank. */
#prompt { display: block; position: relative; z-index: 0; }
.prompt-wrap.hl-on #prompt { color: transparent; caret-color: var(--text); }
#prompt::selection { background: rgba(209, 254, 23, .28); }

.prompt-hl {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border: 1px solid transparent;
  padding: 12px 13px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
}
.prompt-hl mark { background: transparent; color: var(--lime); }
/* a tag that resolves to nothing — a typo or a deleted asset. Colour and background
   only: anything that changes metrics (padding, weight, border) would drift the
   mirror layer out of sync with the textarea underneath. */
.prompt-hl mark.miss { color: var(--pink); background: rgba(255, 0, 91, .14); border-radius: 3px; }

.mention-menu {
  position: absolute;
  left: 8px; right: 8px;
  bottom: 8px;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 5px;
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.mention-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: none; border: none;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: left;
}
.mention-item img {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 7px;
}
.mention-item:hover, .mention-item.sel { background: rgba(255, 255, 255, .07); color: var(--lime); }
.mention-empty { padding: 10px 12px; font-size: 12px; color: var(--muted); font-family: var(--font-body); }

.mention-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mention-chips:empty { display: none; }

.mention-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
}
.mention-chip img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; }
/* a tag that resolves to nothing — same red as the mirror paints it inside the prompt,
   and a button rather than a label: it selects itself in the text when clicked */
.mention-chip.miss {
  color: var(--pink);
  border-color: rgba(255, 0, 91, .45);
  background: rgba(255, 0, 91, .1);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.mention-chip.miss:hover { border-color: var(--pink); background: rgba(255, 0, 91, .18); }

/* ─── frame slots ─── */

/* empty = one compact row (the hint moved to title); filled = a preview card */
.frame-slot {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  min-height: 0;
}
.frame-slot .drop-tag { font-size: 10px; }
.frame-slot .drop-plus { color: var(--muted); font-size: 14px; line-height: 1; }
.frame-slot:hover .drop-plus { color: var(--lime); }
.frame-slot.filled {
  border-style: solid;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 8px;
}
.frame-slot.filled .drop-plus { display: none; }
.frame-slot.filled .drop-tag { font-size: 9.5px; color: var(--muted); }

.slot-preview { position: relative; margin-top: 6px; }
.slot-preview img {
  width: 100%; height: 72px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.slot-preview .slot-name {
  position: absolute; left: 6px; bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  background: rgba(13, 14, 16, .8);
  border-radius: 5px;
  padding: 2px 6px;
  max-width: calc(100% - 40px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-preview .slot-clear {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* ─── right zone ─── */

.reel {
  --reel-pad-b: 24px;
  padding: 16px 24px var(--reel-pad-b);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Crumbs + tabs are the studio's navigation and must not scroll away with the pane
   under them — the art chat runs long, and losing the tabs mid-conversation was the
   complaint. Negative side margins bleed the bar across the section's padding, so
   cards and messages pass UNDER it instead of appearing beside it. */
.reel-head {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30; /* over the feed, under the app header (60) */
  background: var(--bg);
  margin: -16px -24px 18px;
  padding: 16px 24px 10px;
  border-bottom: 1px solid var(--line);
}
.reel-head .crumbs { margin-bottom: 12px; }
.reel-head .reel-nav { margin-bottom: 0; }

/* breadcrumb: folder / scene */

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.crumb-sep { color: var(--dim); font-size: 13px; }

.crumb-picker { position: relative; }

.crumb-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .15s;
}
.crumb-btn:hover { border-color: var(--line-strong); }
.crumb-btn svg:first-child { color: var(--muted); }
.crumb-picker[data-kind="scene"] .crumb-btn svg:first-child { color: var(--lime); }

.crumb-menu { left: 0; right: auto; }

/* actual spend of the selected scene, folder and project — to the right of the breadcrumbs */
.reel-cost {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
}

.reel-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}

.tabs { display: flex; gap: 2px; }

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px 9px;
  cursor: pointer;
  transition: color .15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--lime); border-bottom-color: var(--lime); }
.tab-count { font-family: var(--font-mono); font-weight: 400; opacity: .65; margin-left: 3px; }

.reel-tools { display: flex; align-items: center; gap: 8px; }

.chip-star {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  padding: 5px 11px;
  color: var(--dim);
}
.chip-star.active { background: transparent; border-color: var(--lime); color: var(--lime); }

.search {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 8px 15px;
  width: 220px;
  transition: border-color .15s, width .2s;
}
.search:focus { outline: none; border-color: var(--line-strong); width: 280px; }
.search::placeholder { color: var(--dim); }

/* ─── takes feed (masonry, like Higgsfield's Explore feed) ─── */

.gallery {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* masonry column — layout in renderGallery/layoutMasonry */
.gallery-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
}
.card:hover { border-color: var(--line-strong); }

@keyframes blink { 50% { opacity: .15; } }

.card-screen {
  background: #08090a;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-screen video { width: 100%; height: 100%; display: block; background: #08090a; object-fit: cover; }

.timecode {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: .08em;
  color: var(--lime);
  text-shadow: 0 0 28px rgba(209, 254, 23, .35);
}
.timecode-sub {
  position: absolute;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card-screen:has(.card-fail) { aspect-ratio: auto; min-height: 96px; }

.card-fail {
  padding: 38px 16px 16px;
  font-size: 12px;
  color: #ff5c92;
  text-align: center;
}

/* skewed status badge (Higgsfield's signature trick) */
.card-badge[hidden] { display: none; }
.card-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lime);
  color: #101201;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  transform: skewX(-8deg);
  border-radius: 3px;
}
.card-badge > * { transform: skewX(8deg); }
.card-badge.badge-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #101201;
  animation: blink 1s infinite;
}
.card-badge.badge-fail { background: var(--pink); color: #fff; }
/* queued: the take is waiting for a free slot at BytePlus, nothing is being computed yet —
   so it gets the badge shape without the lime and without the blinking rec dot */
.card-badge.badge-queued {
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
}
.card-badge.badge-queued::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
}
/* upscaled copy exists: outlined, not filled — it is a property of the take, not an
   event demanding attention like a live render or a failure */
.card-badge.badge-hd {
  background: transparent;
  color: var(--lime);
  border: 1px solid var(--lime);
}

/* hover overlay: prompt and actions */
.card-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(to top, rgba(8, 9, 10, .88) 0%, rgba(8, 9, 10, .45) 45%, transparent 75%);
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.card:hover .card-hover, .card:focus-within .card-hover { opacity: 1; pointer-events: auto; }

.card-prompt {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.card-take {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-actions { display: flex; gap: 5px; flex-shrink: 0; }
.card-actions .icon-btn { background: rgba(8, 9, 10, .6); backdrop-filter: blur(4px); }

.act-star { font-size: 14px; line-height: 1; }
.act-star.starred { color: var(--lime); border-color: var(--lime); }
.act-star.starred:hover { background: transparent; color: var(--lime); }

/* star on a favorited take card (visible even without hover) */
.card-star-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  color: var(--lime);
  font-size: 15px;
  text-shadow: 0 0 10px rgba(8, 9, 10, .9);
}

/* ─── lightbox ─── */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: rgba(5, 6, 7, .82); backdrop-filter: blur(6px); }

.lightbox-close {
  position: fixed;
  top: 14px; right: 356px;
  width: 36px; height: 36px;
  z-index: 5;
  background: var(--card);
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  z-index: 5;
  background: var(--card);
}
.lightbox-prev { left: 26px; }
.lightbox-next { right: 366px; }
.lightbox-nav[disabled] { opacity: .25; pointer-events: none; }

.lightbox-media {
  position: relative;
  flex: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-width: 0;
}

/* SD ⇄ HD switch over the video: the original is never replaced, so there has to be
   a way back to it (upscaling can smear faces or plasticise grain) */
.hd-toggle {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 5; /* above the paused-state overlay button */
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(8, 9, 10, .78);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hd-opt {
  background: none;
  border: none;
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.hd-opt:hover { color: var(--text); }
.hd-opt.current { background: var(--lime); color: #101201; }

/* running upscale: same pill, but reads as a live process rather than a control */
.upscale-live { align-items: center; gap: 8px; padding: 6px 12px 6px 10px; }
.upscale-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  animation: blink 1s infinite;
}
.upscale-live-text {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--lime);
}
.upscale-live-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lightbox-media video {
  width: 100%;
  max-width: 1180px;
  max-height: calc(100vh - 140px); /* the player bar lives below the video, not over it */
  object-fit: contain;
  border-radius: 14px;
  background: #08090a;
}
.lightbox-media .lightbox-placeholder {
  font-family: var(--font-mono);
  color: var(--dim);
  font-size: 12px;
}

/* big centered play button — the paused state of the viewer */
.lb-playbig {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}
.lb-playbig span {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(13, 14, 16, .62);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* custom transport bar pinned to the bottom of the media zone */
.lb-bar {
  position: absolute;
  left: 40px;
  right: 380px; /* 340px side panel + the media zone's 40px inset */
  bottom: 34px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb-track {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .18);
  cursor: pointer;
}
/* fat invisible hit area — a 3px line is not a target */
.lb-track::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.lb-track-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 2px;
  background: var(--lime);
}
.lb-track-thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--lime);
}
.lb-bar-row { display: flex; align-items: center; gap: 16px; }
.lb-rbtn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(8, 9, 10, .6);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  transition: color .15s;
}
.lb-bar-right .lb-rbtn { color: var(--muted); }
.lb-rbtn:hover { color: var(--lime); }
.lb-time {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text);
}
.lb-time-total { color: var(--dim); }
.lb-flags {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.lb-bar-right { margin-left: auto; display: flex; gap: 8px; }
/* icon pairs swap with the player state */
.lb-bar .lb-ic-play { display: none; }
.lb-bar.paused .lb-ic-play { display: block; }
.lb-bar.paused .lb-ic-pause { display: none; }
.lb-bar .lb-ic-muted { display: none; }
.lb-bar.muted .lb-ic-muted { display: block; }
.lb-bar.muted .lb-ic-sound { display: none; }
@media (max-width: 1100px) { .lb-flags { display: none; } }

.lightbox-side {
  width: 340px;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 22px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lightbox-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lightbox-take {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lightbox-status { position: static; }

.lightbox-star {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.lightbox-star:hover { color: var(--lime); }
.lightbox-star.starred { color: var(--lime); border-color: var(--lime); }

.lightbox-copy {
  float: right;
  background: none;
  border: none;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  padding: 0;
}
.lightbox-copy:hover { color: var(--lime); }

.lightbox-prompt {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
/* a long brief runs dozens of lines and pushed the parameters, the references and the
   actions below the fold — the prompt opens folded to six lines, the toggle unfolds it */
.lightbox-prompt.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.prompt-toggle {
  margin-top: 7px;
  padding: 0;
  background: none;
  border: none;
  color: var(--dim);
  font-family: var(--font-body);
  font-size: 10.5px;
  cursor: pointer;
}
.prompt-toggle::before { content: "+ "; color: var(--lime); }
.prompt-toggle.open::before { content: "\2212 "; }
.prompt-toggle:hover { color: var(--text); }

.lightbox-params {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: 12px;
}
.lightbox-params dt { color: var(--dim); }
.lightbox-params dd { font-family: var(--font-mono); color: var(--text); text-align: right; }

.lightbox-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.lightbox-ref { position: relative; }
.lightbox-ref-icon {
  width: 62px; height: 62px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  background: var(--card);
}
.lightbox-ref img {
  width: 62px; height: 62px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  display: block;
}
.lightbox-ref .ref-role {
  position: absolute;
  left: 3px; bottom: 3px;
  background: rgba(8, 9, 10, .8);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 8.5px;
  border-radius: 4px;
  padding: 1px 5px;
}
.lightbox-refs-block[hidden] { display: none; }

.lightbox-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

/* More: everything that is not Download, in one drop-up menu (as in the design) */
.more-picker { display: contents; }
.lb-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lb-more[aria-expanded="true"] .lb-more-caret { transform: rotate(180deg); }
.more-picker .more-menu {
  position: fixed;
  top: auto; left: auto; right: auto; bottom: auto;
  min-width: 250px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lb-mi {
  background: none;
  border: none;
  border-radius: 9px;
  color: var(--text);
  font: 400 13px var(--font-body);
  text-align: left;
  padding: 8px 11px;
  cursor: pointer;
  transition: background .12s;
}
.lb-mi:hover { background: var(--card-2); }
.lb-mi[disabled] { color: var(--dim); cursor: default; }
.lb-mi[disabled]:hover { background: none; }
.lb-mi.danger { color: #ff5c92; }
.lb-mi.danger:hover { background: rgba(255, 0, 91, .12); }
.lb-mi-sep { display: block; height: 1px; background: var(--line); margin: 5px; }

/* engine picker: same trick as the model one — fixed, so the scrolling side panel
   can't clip it. The wrapper only exists to host the menu. */
/* ─── fix a detail ───
   The drawing layer sits above .lb-playbig (z-index 3) so a drag can't be read as
   "play/pause", and the panel above that. Both live inside .lightbox-media, which is the
   positioned ancestor; the box is drawn in ITS coordinates, but stored in fractions of the
   video frame — the element and the picture are different rectangles under object-fit. */
.fix-layer { position: absolute; inset: 0; z-index: 6; cursor: crosshair; touch-action: none; }
/* The frame has to fit ABOVE the panel: the video is sized for the 40px transport bar,
   and the fix panel is ~140px — without this the bottom of the picture sits under it,
   exactly where something might need outlining. And the dimming shadow below is
   9999px wide, so it has to be clipped to the media area instead of the whole dialog. */
.lightbox-media.fixing { overflow: hidden; }
.lightbox-media.fixing video { max-height: calc(100vh - 250px); }
/* the big Play button covers the middle of the frame — exactly where things get outlined */
.lightbox-media.fixing .lb-playbig { display: none; }
.fix-box {
  position: absolute;
  border: 1.5px solid var(--lime);
  background: rgba(209, 254, 23, .10);
  box-shadow: 0 0 0 9999px rgba(13, 14, 16, .34);
  pointer-events: none;
}
.fix-bar {
  position: absolute;
  left: 40px; right: 380px; bottom: 34px;
  z-index: 7;
  background: rgba(19, 20, 22, .94);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fix-hint { font-size: 12px; color: var(--muted); }
.fix-prompt {
  width: 100%;
  resize: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
}
.fix-prompt:focus { outline: none; border-color: var(--line-strong); }
.fix-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fix-cost { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.fix-buttons { display: flex; gap: 8px; }
.fix-bar .pill { padding: 7px 14px; font-size: 11px; }

@media (max-width: 900px) {
  .fix-bar { left: 12px; right: 12px; bottom: 12px; }
}

.upscale-picker { display: contents; }
.upscale-picker .upscale-menu {
  position: fixed;
  top: auto; left: auto; right: auto; bottom: auto;
  width: 328px;
  min-width: 0;
  /* the list grew past a couple of rows — cap it and scroll inside instead of
     running off the top of the screen when it flips above the button */
  max-height: min(74vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* header: what is being enhanced, and from what */
.up-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 11px 5px;
}
.up-title {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.up-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); white-space: nowrap; }

/* resolution chips: the first of the two questions this window asks */
.up-seg { display: flex; gap: 6px; padding: 3px 11px 10px; }
.up-seg .chip { padding: 6px 14px; }
/* Frame rate is a separate question, not a third size — pushed to the far end so it
   never reads as one more option in the same group. */
.up-fps { margin-left: auto; }

/* only shown when a copy already exists — the run about to start overwrites it */
.up-note { margin: 0; padding: 0 11px 9px; font-size: 11px; color: var(--dim); }
.up-note b { color: var(--muted); font-weight: 600; }
.up-note b::after { content: " — "; color: var(--dim); font-weight: 400; }

.up-sep { height: 1px; background: var(--line); margin: 5px 8px; }

/* The role reads first ("Best quality — …"): the engine name is the footnote. The dash
   is drawn, not written — applyI18n translates whole text nodes, and a dash glued to
   the hint would make its dictionary key unmatchable. */
.model-item-hint b { color: var(--muted); font-weight: 600; }
.model-item-hint b::after { content: " — "; color: var(--dim); font-weight: 400; }

/* coarse speed scale — a counterweight to price, which is the only other number here */
.up-speed {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  transform: skewX(-8deg);
  margin-left: 7px; vertical-align: 1px;
}
.up-speed i { display: inline-block; transform: skewX(8deg); font-style: normal; }
.sp-fast { background: rgba(209, 254, 23, .16); color: var(--lime); }
.sp-medium { background: rgba(255, 255, 255, .08); color: var(--muted); }
.sp-slow { background: rgba(255, 255, 255, .05); color: var(--dim); }

/* frame interpolation: same enhanced copy, so same window — but not a resolution,
   hence its own row under the rule rather than a line in the list */
.up-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 11px;
  background: none; border: none; border-radius: 9px;
  text-align: left; cursor: pointer; font: inherit; color: var(--text);
}
.up-foot:hover { background: var(--card-2); }
.up-foot-l { display: block; font-size: 13px; }
.up-foot-s { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.up-foot-p { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.up-foot:hover .up-foot-p,
.model-item:hover .model-item-price { color: var(--lime); }

.pill {
  flex: 1;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  transition: filter .15s, background .15s;
  white-space: nowrap;
}
.pill:hover { filter: brightness(1.15); }
.pill-lime { background: var(--lime); border-color: var(--lime); color: #101201; }
.pill-danger { background: transparent; border-color: rgba(255, 0, 91, .5); color: #ff5c92; }
.pill-danger:hover { background: var(--pink); color: #fff; }

/* ─── A/B take comparison ─── */

.card.compare-pick { outline: 2px solid var(--lime); outline-offset: -2px; }
.card.compare-pick::after {
  content: "A";
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lime);
  color: #101201;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
body.comparing .card { cursor: crosshair; }

.compare {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none; max-height: none;
  width: 100vw; height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.compare[open] { display: flex; }
.compare::backdrop { background: rgba(5, 6, 7, .88); backdrop-filter: blur(6px); }

.compare-close { position: fixed; top: 14px; right: 14px; }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 120px);
}

.compare-cell { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.compare-cell video {
  width: 100%;
  max-height: calc(100vh - 170px);
  object-fit: contain;
  border-radius: 12px;
  background: #08090a;
}
.compare-cell figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare-bar { display: flex; gap: 10px; }
.compare-bar .pill { flex: none; padding: 10px 26px; }

@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-cell video { max-height: 38vh; }
}

/* live-renders indicator on the tab */
.tab-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--lime);
  color: #101201;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
.tab-live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #101201;
  animation: blink 1s infinite;
}

.icon-btn {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.icon-btn:hover { color: #101201; background: var(--lime); border-color: var(--lime); }
.icon-btn.act-delete:hover, .icon-btn.act-del:hover { color: #fff; background: var(--pink); border-color: var(--pink); }

/* ─── library ─── */

.asset-uploader { margin-bottom: 16px; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.asset {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  transition: border-color .15s;
}
.asset:hover { border-color: var(--line-strong); }
.asset:active { cursor: grabbing; }

.asset-pic { aspect-ratio: 4 / 3; background: #08090a; }
.asset-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.asset-body { padding: 8px 10px 10px; }

.asset-name {
  display: block;
  width: 100%;
  background: none; border: none;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: left;
  padding: 0 0 7px;
  cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asset-name::before { content: "@"; color: var(--dim); }

.asset-actions { display: flex; gap: 5px; }
.asset-actions .icon-btn { width: 26px; height: 26px; font-family: var(--font-mono); font-size: 12px; }

/* ─── cast ─── */

.cast-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.cast-card { cursor: default; }

.cast-pic { aspect-ratio: 1 / 1; position: relative; }
.cast-pic .cast-noface {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--dim);
}

.cast-name { color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; cursor: default; }
.cast-name::before { content: "@"; color: var(--lime); }

.cast-voice {
  width: 100%;
  height: 30px;
  margin: 4px 0 6px;
}
.cast-voice[hidden] { display: none; }
audio::-webkit-media-controls-panel { background: #222426; }

.cast-hint {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cast-hint:empty { display: none; }

/* screen test: verdict badge over the portrait, its clip on hover, the reason below */
.cast-pic .cast-test {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .18s;
}
.cast-pic:hover .cast-test { opacity: 1; }
.cast-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  background: rgba(13, 14, 16, .82);
  backdrop-filter: blur(4px);
}
.cast-badge-ok { color: var(--lime); }
.cast-badge-bad { color: var(--pink); }
.cast-badge-warn,
.cast-badge-muted { color: var(--dim); }

.cast-check-hint {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 7px;
}
.cast-check-hint.bad { color: var(--pink); }

/* screen-test block in the character dialog */
.cast-check {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cast-check-line { font-size: 12px; color: var(--text); }
.cast-check-line.ok { color: var(--lime); }
.cast-check-line.bad { color: var(--pink); }
.cast-check-line.warn,
.cast-check-line.muted { color: var(--dim); }
#castCheckDetail { white-space: pre-line; }

.cast-quick-chip.rejected { border-color: color-mix(in srgb, var(--pink) 55%, transparent); }
.cast-quick-chip.rejected::after {
  content: "✕";
  color: var(--pink);
  font-size: 10px;
}

/* audio asset in the library */
.asset-pic.is-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 4 / 3;
  color: var(--lime);
}
.asset-pic.is-audio audio { width: calc(100% - 16px); height: 30px; }

/* character dialog */
.cast-dialog {
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  margin: auto; /* restores UA centering killed by the global *{margin:0} */
}
.cast-dialog::backdrop { background: rgba(5, 6, 7, .8); backdrop-filter: blur(6px); }

.cast-form { padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; }

.cast-form input[type="text"] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 10px 12px;
}
.cast-form input[type="text"]:focus { outline: none; border-color: var(--line-strong); }

.cast-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cast-slot {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s;
  position: relative;
}
.cast-slot:hover, .cast-slot.dragover { border-color: var(--lime); }
.cast-slot img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 10px;
}
.cast-slot .slot-file {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--lime);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cast-slot .slot-clear {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
/* character files live only here, so this is the only place to pull one back to disk */
.cast-slot .slot-get {
  position: absolute; top: -7px; right: 17px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
}
.cast-slot .slot-get:hover { color: var(--lime); border-color: var(--lime-dim); }

/* appearance generator: creation paths */
.mocap-drop { min-height: 72px; }

.mocap-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
}
.mocap-thumbs:empty { display: none; }
.mocap-thumb { position: relative; }
.mocap-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  display: block;
}
.mocap-thumb button {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: none;
  background: var(--pink);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.banana-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.banana-panel textarea { background: var(--card-2); }

.banana-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }

.banana-result img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 10px;
  background: #08090a;
}
/* voice sample: the native player, only sized and darkened to fit the panel */
.banana-result audio {
  width: 100%;
  height: 36px;
  border-radius: 999px;
  color-scheme: dark;
}

/* resolved prompt in the lightbox */
/* The engine's note about what it could not carry (a voice, an asset:// portrait). A
   footnote, not an alarm: without a rule of its own it rendered as plain 14px white and
   shouted louder than the prompt it annotates. */
/* A finished take whose file has not reached us yet. Sits over the black frame the card
   would otherwise show, and reads as an explanation rather than an alarm. */
.card-error {
  position: absolute;
  inset: auto 12px 12px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #E8C36A;
}
.lightbox-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #E8C36A;
}
.lightbox-resolved-block summary { cursor: pointer; list-style: none; }
.lightbox-resolved-block summary::before { content: "+ "; color: var(--lime); }
.lightbox-resolved-block[open] summary::before { content: "− "; }
.lightbox-resolved {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ─── art dept: asset-generation chat ─── */

.art-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 18px;
  flex: 1 1 auto;
}
.art-feed:empty { display: none; }

.art-msg { display: flex; flex-direction: column; gap: 7px; }

.art-user {
  align-self: flex-end;
  max-width: min(78%, 560px);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 16px 16px 5px 16px;
  padding: 11px 14px;
}

.art-text {
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.art-user-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.art-user-ref {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
}

.art-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  word-break: break-word;
}

.art-ai { align-self: flex-start; max-width: min(88%, 520px); }

.art-image {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #08090a;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition: border-color .15s;
}
.art-image:hover { border-color: var(--line-strong); }

.art-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
}

.art-ai-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.art-act {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.art-act:hover { color: #101201; background: var(--lime); border-color: var(--lime); }
.art-act:disabled { opacity: .4; cursor: wait; }

.art-saved {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--lime);
}

.art-ai-error { max-width: 100%; }

.art-skeleton {
  width: 380px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.art-skeleton-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  animation: blink 1s infinite;
}

/* The art pane is a chat, so the composer is nailed to the bottom of the window:
   the pane fills the reel and the feed above absorbs the slack while the
   conversation is short, sticky keeps the composer down once the feed runs past
   the viewport. Both states rest the same distance off the edge (--reel-pad-b),
   so it does not hop the moment scrolling starts. */
#artPane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Whichever of the two is on screen takes the slack, so the composer lands on the
   bottom edge either way: the feed grows under the messages, the empty state
   centres itself in the room left above it. Its inset is tighter than the stock
   empty state's — it now shares the pane with the composer. */
#artPane > .empty { margin-block: auto; padding: 40px 30px; }
@media (max-height: 640px) { #artPane > .empty { padding: 22px 24px; } }

.art-composer {
  position: sticky;
  bottom: var(--reel-pad-b);
  z-index: 20;
  max-width: 780px;
  width: 100%;
  margin: 14px auto 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s;
}
.art-composer.dragover { border-color: var(--lime); }

/* The native corner handle drags the wrong way here: the composer's bottom edge is
   pinned, so pulling it down only pushed the box's top further up and the handle
   slid out from under the cursor. This grip sits on the top edge and grows the
   prompt upward, which is the direction the panel actually has room in. */
.art-grip {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 12px;
  margin: -6px 0 -2px;
  cursor: ns-resize;
  touch-action: none;
}
.art-grip > span {
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background .15s;
}
.art-grip:hover > span, .art-grip.dragging > span, .art-grip:focus-visible > span { background: var(--lime); }
.art-grip:focus-visible { outline: none; }

.art-context { display: flex; flex-wrap: wrap; gap: 6px; }
.art-context:empty { display: none; }

.art-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 6px 3px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.art-chip img { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; }
.art-chip button {
  width: 17px; height: 17px;
  border: none;
  border-radius: 50%;
  background: var(--card-2);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.art-chip button:hover { background: var(--pink); color: #fff; }
.art-chip-edit { border-color: rgba(209, 254, 23, .5); color: var(--lime); }

/* flex-start, not flex-end: the prompt grows upward from a pinned composer, so a
   bottom-aligned row would drag the two buttons up the screen with it */
.art-input-row { display: flex; gap: 8px; align-items: flex-start; }
.art-input-row textarea { flex: 1; min-height: 46px; background: var(--card); resize: none; }

.art-attach-wrap { position: relative; flex-shrink: 0; }
/* .icon-btn's shape at the input row's size — round, like every icon button in
   the studio; 12px corners here were this composer's own invention */
.art-attach-btn {
  width: 46px; height: 46px;   /* .fire is sized by padding — match what it comes out to */
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.art-attach-btn:hover { color: #101201; background: var(--lime); border-color: var(--lime); }

.attach-menu {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  width: 280px;
  max-height: 300px;
  overflow-y: auto;
}
.attach-file-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 1px dashed var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  flex-shrink: 0;
}

/* the slate's .fire, sized by padding rather than a fixed height — same pill, same
   type, same press feedback as the Generate button on the Reel */
.art-send {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--lime);
  color: #101201;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 14px 20px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.art-send:hover { filter: brightness(1.07); }
.art-send:active { transform: scale(.99); }
.art-send:disabled { background: var(--card-2); color: var(--dim); cursor: wait; }
.art-send:disabled .fire-rec { background: var(--pink); animation: blink 1s infinite; }
.art-send-price { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; opacity: .7; }
.art-send-price:empty { display: none; }

/* Settings row: engine · ratio · variants · ···. No shared track behind them —
   each control carries its own pill instead, exactly like .crumb-btn up in the
   breadcrumb, and lifts a shade under the cursor. */
.art-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-bar-fill { flex: 1; min-width: 4px; }
.art-pop { position: relative; display: flex; min-width: 0; }
.art-bar-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  /* without this the bare "···" of the More button falls back to the UA's Arial,
     which renders U+00B7 blank here — the button looked empty */
  font-family: var(--font-body);
  color: var(--text);
  padding: 0 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  min-width: 0;
}
.art-bar-btn:hover, .art-bar-btn[aria-expanded="true"] {
  background: var(--card-2);
  border-color: var(--line-strong);
}
.art-engine-ic { color: var(--lime); flex: none; }
.art-engine-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-engine-price { font-family: var(--font-mono); font-size: 11px; color: var(--lime); white-space: nowrap; }
.art-engine-price:empty { display: none; }
.art-caret { color: var(--muted); flex: none; }
.art-bar-btn[aria-expanded="true"] .art-caret { transform: rotate(180deg); }

.art-ratio-ic { display: flex; align-items: center; flex: none; }
.art-ratio-rect { display: block; border: 1.5px solid var(--muted); border-radius: 2px; flex: none; }
.art-ratio-rect.on { border-color: var(--lime); }
.art-ratio-label { font-family: var(--font-mono); font-size: 12px; }

.art-pop-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 300px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 6px;
  z-index: 80;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.art-ratio-menu {
  width: 184px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.art-ratio-menu[hidden] { display: none; }
.art-ratio-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  transition: background .12s;
}
.art-ratio-opt:hover { background: var(--card-2); }
.art-ratio-opt.current { color: var(--lime); }
.art-ratio-opt.current .art-ratio-rect { border-color: var(--lime); }

.art-variants { display: flex; align-items: center; gap: 9px; flex: none; }
.art-variants-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
/* One pill holding three round chips, not a pill sliced into segments: a sliced
   pill gives its active segment two square edges, which is the corner this row was
   rewritten to get rid of. */
.art-variants-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.art-variants-seg button {
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  font: 700 11px var(--font-mono);
  min-width: 34px;
  padding: 0 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.art-variants-seg button:hover { color: var(--text); background: var(--card-2); }
.art-variants-seg button.active, .art-variants-seg button.active:hover { background: var(--lime); color: #101201; }

.art-more-pick { flex: none; }
.art-more-btn {
  width: 34px;
  justify-content: center;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: .06em;
  padding: 0;
}
.art-more-btn:hover { color: var(--lime); }
.art-more-menu {
  left: auto;
  right: 0;
  width: auto;
  min-width: 236px;
  display: flex;
  flex-direction: column;
}
.art-more-menu[hidden] { display: none; }

/* frame-edit marker above the user bubble */
.art-edit-pill {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid rgba(209, 254, 23, .5);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
}

/* ─── empty states ─── */

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 64px 30px;
  text-align: center;
  color: var(--muted);
  max-width: 520px;
  margin: 48px auto;
}
.empty-slate {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 10px;
}

/* ─── responsive ─── */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .slate { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .project-picker { margin-left: 0; }
  /* the crumbs row (folder pill + scene pill + spend) and the tab row are the two things
     that used to push the whole studio into a horizontal scroll on a phone: the spend is
     nowrap by design and the tabs have display-font letter spacing. Let the crumbs wrap
     and the tabs scroll inside their own row instead of widening the page. */
  .crumbs { flex-wrap: wrap; row-gap: 8px; }
  .tabs { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }
  .reel-nav { flex-direction: column; align-items: stretch; }
  .search, .search:focus { width: 100%; }
  .art-user, .art-ai { max-width: 94%; }
  .reel { --reel-pad-b: 14px; }
  .topbar .brand h1 { display: none; } /* on the sign-in gate the brand stays */
  /* Same fight as the crumbs above: the header on a phone has about fifty pixels to spare,
     and the word "Storage" costs forty of them. The number keeps its colour and its click
     through to the menu, where it is spelled out. */
  .storage-warn span { display: none; }
  .lightbox[open] { flex-direction: column; }
  .lightbox-media { height: auto; max-height: 55vh; padding: 16px; width: 100%; }
  .lightbox-side { width: 100%; height: auto; flex: 1; border-left: none; border-top: 1px solid var(--line); }
  .lightbox-close { right: 14px; }
  .lightbox-next { right: 14px; }
  .lightbox-nav { top: 28vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ─── sign-in (gate) and account ─── */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  overflow: auto;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(209, 254, 23, .05), transparent 60%),
    rgba(13, 14, 16, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 28px;
}

/* the big popup: sign-in on the left, the decorative studio pass on the right */
.auth-modal {
  margin: auto; /* centers AND keeps the top reachable when the viewport is short */
  width: 100%;
  max-width: 1020px;
  min-height: min(620px, calc(100dvh - 56px));
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 60px 140px rgba(0, 0, 0, .65);
  overflow: hidden;
}

.auth-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 46px 22px;
}

.auth-top { display: flex; align-items: center; gap: 16px; }
.auth-top-side { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.auth-back { font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.auth-back:hover { color: var(--lime); }

.auth-main { margin: auto 0; padding: 44px 0 36px; max-width: 430px; width: 100%; }

.auth-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lime);
}

.auth-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 46px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-top: 14px;
}
.auth-title-accent {
  display: inline-block;
  color: var(--lime);
  transform: skewX(-8deg);
  padding-right: .08em;
}

.auth-lead { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 16px; max-width: 42ch; }

.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  font: 500 14.5px var(--font-body);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s ease, box-shadow .18s ease;
}
.auth-btn:hover { border-color: rgba(255, 255, 255, .32); background: var(--card-2); }

.auth-btn-primary {
  background: var(--text);
  border-color: transparent;
  color: #101201;
  font: 700 15px var(--font-display);
  letter-spacing: .01em;
}
.auth-btn-primary:hover {
  background: var(--text);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(247, 247, 248, .14);
}
.auth-btn:active { transform: none; box-shadow: none; }
.auth-btn[disabled] { cursor: default; transform: none; box-shadow: none; }

.auth-btn-wait { display: flex; align-items: center; gap: 10px; }
.auth-spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(247, 247, 248, .25);
  border-top-color: var(--text);
  animation: auth-spin .7s linear infinite;
}
.auth-btn-primary .auth-spinner { border-color: rgba(16, 18, 1, .25); border-top-color: #101201; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #ff5c92;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid rgba(255, 0, 91, .35);
  border-radius: 12px;
  padding: 11px 13px;
  background: rgba(255, 0, 91, .07);
  margin-top: 14px;
}
.auth-error-cut { font-family: var(--font-mono); letter-spacing: .1em; flex: none; }

/* in-app browser hint — a line, not a wall: the buttons above it stay live */
.auth-inapp {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 11px 13px;
  border: 1px solid rgba(209, 254, 23, .3); border-radius: 12px;
  background: rgba(209, 254, 23, .06);
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.auth-inapp span { flex: 1; min-width: 200px; }
.auth-copy {
  flex: none; padding: 6px 11px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .16); background: var(--card-2);
  color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.auth-copy:hover { border-color: rgba(209, 254, 23, .5); }

.auth-note { margin-top: 18px; font-size: 12.5px; color: var(--dim); line-height: 1.6; }

.auth-foot {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.auth-foot b { font-weight: 400; color: var(--muted); }
.auth-foot b.auth-foot-lime { color: var(--lime); }

/* right side: decorative soundstage panel with the studio pass card */
.auth-right {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background:
    radial-gradient(560px 300px at 70% -8%, rgba(209, 254, 23, .09), transparent 62%),
    radial-gradient(460px 340px at 20% 110%, rgba(255, 0, 91, .07), transparent 60%),
    #101113;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 40px;
}
/* film grain (under the pass card — ::before renders before children) */
.auth-right::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.6'/%3E%3C/svg%3E");
}
/* clapper hazard stripe along the top edge */
.auth-right::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(-55deg, var(--lime) 0 15px, transparent 15px 32px);
  opacity: .85;
}

.auth-pass {
  position: relative;
  width: 100%;
  max-width: 400px;
  transform: rotate(-1.6deg);
  background: #17191b;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.auth-pass-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--line);
}
.auth-pass-dot { width: 20px; height: 20px; border-radius: 6px; background: var(--lime); position: relative; flex: none; }
.auth-pass-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #17191b; }
.auth-pass-title {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-pass-no { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--dim); }

.auth-pass-body { padding: 22px 20px 18px; }
.auth-pass-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.auth-pass-name {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
  padding: 5px 0 10px;
}
.auth-pass-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 20px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.auth-pass-lime { color: var(--lime); }

.auth-pass-tear { border-top: 1px dashed rgba(255, 255, 255, .16); margin: 0 10px; }

.auth-pass-foot { display: flex; align-items: center; gap: 16px; padding: 15px 20px 17px; }
.auth-pass-barcode {
  width: 74px; height: 34px;
  flex: none;
  background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 9px);
  opacity: .5;
}
.auth-pass-price { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.auth-pass-price span { color: var(--dim); }

.auth-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.auth-rolling { display: inline-flex; align-items: center; gap: 7px; color: #ff6b9e; }
.auth-rolling-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: auth-blink 1.4s ease-in-out infinite; }
@keyframes auth-blink { 50% { opacity: .15; } }
.auth-stage-sep { color: rgba(255, 255, 255, .2); }
.auth-tc { color: var(--lime); }
.auth-stage-note { position: relative; margin-top: 12px; max-width: 34ch; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--dim); }

@media (max-width: 960px) {
  .auth-modal { grid-template-columns: 1fr; max-width: 560px; min-height: 0; }
  .auth-right { display: none; }
  .auth-left { padding: 24px 30px 20px; }
  .auth-main { padding: 36px 0 30px; }
}
@media (max-width: 560px) {
  .auth-gate { padding: 12px; }
  .auth-left { padding: 20px 22px 16px; }
  .auth-foot { gap: 12px 18px; }
}

/* account chip in the header */
.user-box { position: relative; }

.user-chip {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--lime);
  font: 700 13px var(--font-display);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-chip img { width: 100%; height: 100%; object-fit: cover; }
.user-chip:hover, .user-chip.open { border-color: var(--lime); }

/* account dropdown: who you are, what the studio costs you, whose keys it runs on */
.acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 308px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  z-index: 80;
  overflow: hidden;
  text-align: left;
}

.acct-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--line);
}
.acct-ava {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(90% 80% at 50% 20%, rgba(209, 254, 23, .5), var(--card-2));
  color: #101201;
  font: 700 14px var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-ava img { width: 100%; height: 100%; object-fit: cover; }
.acct-who { min-width: 0; }
.acct-name {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-name:empty { display: none; }
.acct-email {
  display: block;
  font-size: 12px;
  color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acct-stats {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.acct-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.acct-k { color: var(--dim); }
.acct-v { margin-left: auto; text-align: right; }
.acct-v.lime { color: var(--lime); }
.acct-v.warn { color: #ff5c92; }
.acct-num { font-variant-numeric: tabular-nums; }

/* The storage bar. Sits right under its own row, so the gap of .acct-stats reads as the
   space between two stats and not between a label and its own meter. */
.acct-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
  margin-top: -4px;
}
.acct-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
  transition: width .3s ease;
}
.acct-bar.warn i { background: #ffcc33; }
.acct-bar.full i { background: var(--pink); }
.acct-note {
  margin-top: -3px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--dim);
}

.acct-keys {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}
.acct-keys-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.acct-keys-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.acct-manage {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--dim);
  font: 400 11px var(--font-body);
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.acct-manage:hover { color: var(--lime); }
.acct-keys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.acct-key { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.acct-key.off { color: var(--dim); }
.acct-key-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; }
.acct-key.off .acct-key-dot { background: var(--dim); }

.acct-actions {
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.acct-item {
  display: block;
  background: none;
  border: none;
  border-radius: 9px;
  color: var(--text);
  font: 400 13px var(--font-body);
  text-align: left;
  padding: 8px 11px;
  cursor: pointer;
  transition: background .12s, color .12s;
  text-decoration: none;
}
.acct-item:hover { background: var(--card-2); color: var(--text); }
.acct-signout { color: var(--muted); }
.acct-signout:hover { color: #ff5c92; }

/* keys dialog — a roster: one line per key, the field opens inside its row.
   Lime is spent on two things only, the Save button and the dot of a key the studio can
   actually run on; the guide links are muted so they stop out-shouting the state. */
.keys-dialog .keys-intro { margin: -4px 0 2px; }
#keysTitle:focus { outline: none; }

.key-list { border-top: 1px solid var(--line); }
.key-row { border-bottom: 1px solid var(--line); }
.key-head {
  width: 100%;
  display: grid;
  grid-template-columns: 6px 1fr auto 8px;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.key-head:hover { background: rgba(255, 255, 255, .02); }
.key-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px var(--dim);
}
.key-row.on .key-dot, .agent-token.on .key-dot { background: var(--lime); box-shadow: none; }
.key-id { min-width: 0; }
.key-vendor { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.key-role { display: block; color: var(--dim); font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
.key-state { font: 11.5px var(--font-mono); color: var(--muted); white-space: nowrap; }
/* nothing saved yet — the row says what to do, and that is the one place a missing key
   is allowed to pull the eye */
.key-row:not(.on) .key-state {
  font: 700 11px var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lime);
}
.key-row.removing .key-state { color: #ff5c92; font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.key-chev {
  width: 0; height: 0; justify-self: end;
  border: 4px solid transparent;
  border-left-color: var(--dim);
  transition: transform .15s;
}
.key-row.open .key-chev { transform: rotate(90deg) translateX(1px); }

.key-open { display: none; flex-direction: column; gap: 9px; padding: 0 2px 13px; }
.key-row.open .key-open { display: flex; }
.key-open-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keys-dialog .key-help {
  margin-top: 0;
  font-size: 11.5px;
  color: var(--dim);
  opacity: 1;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: 1px;
}
.keys-dialog .key-help:hover { color: var(--muted); border-color: var(--muted); text-decoration: none; }
.key-drop {
  flex: none;
  background: none; border: 0; cursor: pointer;
  font: 11.5px var(--font-body); color: var(--dim);
}
.key-drop:hover { color: #ff5c92; }
.key-row.removing input { opacity: .45; }

/* the agent token is not a key, but it is read the same way: a dot, a name, a state */
.agent-token { padding-top: 13px; }
.key-mcp { display: flex; align-items: center; gap: 11px; }
.key-mcp .key-id { flex: 1; }
.agent-token .note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; }
.agent-note { margin: 9px 0 0 17px; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.agent-token-env {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--lime);
  border-radius: 10px;
  font: 12px/1.6 var(--font-mono);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}
.pill-ghost {
  flex: none;
  background: transparent;
  border-color: var(--line-strong);
  color: var(--muted);
  font-size: 11px;
  padding: 6px 12px;
}
.pill-ghost:hover { color: var(--text); filter: none; background: var(--card-2); }

.key-status {
  font-size: 11px;
  color: var(--dim);
  margin-top: 4px;
}

.keys-dialog input,
.onboarding .slate-field input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  font: 13px var(--font-mono);
}

.keys-dialog input:focus,
.onboarding .slate-field input:focus {
  outline: none;
  border-color: var(--lime);
}

/* ── first-run onboarding ── */
.onboarding {
  width: min(560px, 92vw);
  max-height: 92vh;
  overflow: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* bulletproof centering (global *{margin:0} kills margin:auto) */
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.onboarding::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.ob-slate {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 24px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em;
}
.ob-clap {
  width: 28px; height: 18px; border-radius: 3px;
  background: repeating-linear-gradient(-52deg, var(--lime) 0 6px, #0d0e10 6px 12px);
}
.ob-scene { font-weight: 700; font-size: 12px; color: var(--lime); }
.ob-take { font-size: 11px; color: var(--muted); margin-left: auto; }
.ob-step { padding: 28px 26px 6px; }
.ob-title {
  font-family: var(--font-display); font-size: 27px; font-weight: 700;
  margin: 0 0 10px; text-transform: none; letter-spacing: -.01em;
}
.ob-title em { color: var(--lime); font-style: normal; }
.ob-lead { color: var(--muted); line-height: 1.55; margin: 0 0 22px; font-size: 14px; }
.ob-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.ob-shots li { display: flex; gap: 14px; align-items: flex-start; }
.ob-num { font-family: var(--font-display); color: var(--lime); font-weight: 700; font-size: 13px; min-width: 22px; padding-top: 1px; }
.ob-shots b { display: block; font-size: 14px; margin-bottom: 2px; }
.ob-shots span { color: var(--dim); font-size: 13px; line-height: 1.45; }
.onboarding .slate-field { margin-bottom: 16px; }
.ob-hint { color: var(--dim); font-size: 12px; margin: 6px 0 0; }
.key-help {
  display: inline-block; margin-top: 7px;
  font-size: 12px; color: var(--lime); text-decoration: none; opacity: .85;
}
.key-help:hover { opacity: 1; text-decoration: underline; }

/* language picker (header) */
.lang-pick {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden;
}
.lang-pick button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font: 700 11px var(--font-display); letter-spacing: .05em; padding: 4px 10px;
}
.lang-pick button:hover { color: var(--text); }
.lang-pick button.on { background: var(--lime); color: #0d0e10; }
.ob-price { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 6px; }
.ob-amount { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1; }
.ob-amount small { font-size: 16px; color: var(--muted); font-weight: 400; }

/* plan tiles: the choice itself is the price, so the amount is the headline and the
   period is the label under it */
.ob-plans { display: flex; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; }
.ob-plan {
  position: relative;
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--card-2);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ob-plan:hover { border-color: var(--muted); }
.ob-plan.current { border-color: var(--lime); background: rgba(209, 254, 23, .07); }
.ob-plan-amount { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05; color: var(--text); }
.ob-plan-amount small { font-size: 13px; color: var(--muted); font-weight: 400; }
.ob-plan-name {
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
}
.ob-plan.current .ob-plan-name { color: var(--lime); }
.ob-plan-save {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--lime);
}
.ob-trial {
  padding: 5px 12px; border-radius: 999px; background: rgba(209, 254, 23, .14); color: var(--lime);
  font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
.ob-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 22px 20px; border-top: 1px solid var(--line); margin-top: 16px;
}
.ob-dots { display: flex; gap: 7px; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .2s; }
.ob-dot.on { background: var(--lime); }
/* margin-left keeps the actions on the right even when the left half of the bar is
   empty — on a phone the copy button is hidden, and space-between then slid the
   primary action over to the left edge. */
.ob-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ob-skip { background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; font-size: 13px; padding: 4px; }
.ob-skip:hover { color: var(--text); }

/* the skills offer: same slate as onboarding, plus one line to copy. A command block and
   not a button that runs it — this installs files on the reader's own machine, so the
   reader gets to see exactly what runs. */
.skills-seg { margin: 22px 0 10px; }
/* the copy on the second screen serves only the terminal line under it, so it sits
   quieter and closer to what it controls */
.skills-seg-alt { margin: 4px 0 8px; max-width: 260px; }
.skills-cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: var(--text);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 10px;
  white-space: pre-wrap; word-break: break-word;
}
#skillsCopy.copied { color: var(--lime); }
/* the terminal way, kept next to the sentence rather than instead of it: one line, quiet */
.skills-alt { margin: -2px 0 14px; }
.skills-alt code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); word-break: break-word; }

/* On a phone these dialogs are two screens tall, and the action that closes them sat below
   the fold — the reader had to scroll a wall of text to find "Download" or "Next". The
   footer rides along instead; it already has its own border and panel background, so it
   reads as a bar rather than as floating text over the list. */
@media (max-width: 640px) {
  .onboarding .ob-foot {
    position: sticky; bottom: 0; z-index: 1;
    background: var(--panel);
  }
  /* the command is for a machine with a terminal, and nobody installs a skill from the
     phone they are reading this on — the block itself stays as a reference, its copy
     button does not earn two lines in a bar this narrow */
  #skillsCopy { display: none; }
}

/* move-to-scene picker: same fixed-position trick as the upscale one */
.move-picker { display: contents; }
.move-picker .move-menu {
  position: fixed;
  top: auto; left: auto; right: auto; bottom: auto;
  width: 250px;
  min-width: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.move-picker .model-item:disabled { cursor: default; opacity: .55; }

/* Second payment route on the plan step. Deliberately quiet: it is an answer to "my card
   doesn't work", not a competing call to action. */
.ob-alt-pay { margin-top: 10px; font-size: 13px; color: var(--faint); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ob-alt-pay .linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px;
}
.ob-alt-pay .linkish:hover { color: var(--lime); text-decoration-color: var(--lime); }
.ob-alt-pay b { color: var(--text); font-weight: 600; }
.ob-alt-pay b s { color: var(--dim); font-weight: 400; margin-right: 2px; } /* full price next to the invitee's discounted one */

/* ── invites and the studio key pool ── */
/* 2×2, not a row of four: the RU labels ("зарегистрировались") are single unbreakable
   words that refuse to shrink and pushed the fourth tile past the dialog edge */
.invite-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 2px;
}
.invite-stats > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.invite-stats b { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 19px; letter-spacing: -.01em; }
.invite-stats span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
#inviteLink { font-size: 12.5px; }

.pool-list { display: flex; flex-direction: column; gap: 6px; }
.pool-row {
  display: grid; grid-template-columns: 1fr 1.2fr auto auto auto auto auto;
  align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font-size: 12px;
}
.pool-row.off { opacity: .5; }
.pool-row.parked { border-color: var(--pink); }
.pool-row .pool-p { font-weight: 600; }
.pool-row .pool-num { color: var(--muted); white-space: nowrap; }
/* The label is the only elastic cell: it carries whatever the key was named ("ARK (was
   TRIAL_ARK_KEY)") and used to push the row's buttons off the edge, especially in Russian
   where every word is longer. It shrinks and ellipsises; the numbers and the buttons keep
   their size. */
.pool-row .pool-hint {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pool-row .pool-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pool-row > .pill { justify-self: end; }
.pool-row .pool-state { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; color: var(--dim); }
.pool-row.parked .pool-state { color: var(--pink); }
.pool-row .pill { padding: 4px 10px; font-size: 11px; }
.pool-add { display: flex; gap: 8px; align-items: center; }
.pool-add select, .pool-add input { flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .pool-row { grid-template-columns: 1fr 1fr; }
  .invite-stats { grid-template-columns: 1fr; }
}

/* the quote turns amber when the bonus cannot cover this take and no key can */
#costHint.warn { color: #ffb020; }

/* Launch-promo line under the plan tiles (see renderPromoHint in app.js). */
.ob-promo {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lime);
}

/* What the picked engine cannot carry from the slate (Veo has no voice input, Lite takes
   no references). Amber, not red: nothing is broken and nothing is blocked — the take
   will shoot, just without that piece. */
.engine-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #E8C36A;
}