/* UGC Content Engine — dark dashboard theme
   Mamenta brand palette: dark-first, orange CTAs, magenta actives,
   blue links (see the Mamenta brand guidelines). */

:root {
  --bg: #0a0a12;
  --panel: #10101a;
  --card: #16161f;
  --card-hover: #1c1c28;
  --border: #262639;
  --border-soft: #1d1d2c;
  --text: #eef0f6;
  --muted: #8f96ab;
  --accent: #FF9D00;        /* Mamenta orange — CTAs, primary actions */
  --accent-strong: #ffb640;
  --accent-2: #DA19A0;      /* Mamenta magenta — active/selected */
  --link: #2FB5FF;          /* Mamenta blue — links, titles */
  --good: #19C32A;
  --warn: #E3EE46;
  --bad: #e5484d;
  --info: #2FB5FF;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px rgba(255, 157, 0, .28);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.5 Inter, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Ambient depth: two faint brand glows behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(218, 25, 160, .07), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(47, 100, 255, .06), transparent 60%);
}
a { color: var(--link); text-decoration: none; }
h1 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 15px; font-weight: 650; margin-bottom: 10px; letter-spacing: -.01em; }
h3 { font-size: 13px; font-weight: 600; }
::selection { background: rgba(255, 157, 0, .3); }

/* One consistent, visible-but-quiet focus treatment everywhere. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* Slim dark scrollbars, all browsers. */
* { scrollbar-width: thin; scrollbar-color: #2a2a3e transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2a2a3e; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #34344c; }
*::-webkit-scrollbar-track { background: transparent; }

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

/* ---------- layout ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 216px;
  background: linear-gradient(180deg, #0e0e17, #0b0b13);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; padding: 16px 12px 12px; z-index: 30;
}
.logo {
  display: flex; align-items: center; gap: 10px; color: var(--text);
  padding: 2px 8px 16px;
}
.logo img { height: 36px; width: auto; }
.logo img.logo-custom { max-height: 40px; max-width: 156px; height: auto; object-fit: contain; }
.logo-word {
  display: flex; flex-direction: column; line-height: 1.12;
  font-weight: 750; font-size: 14.5px; letter-spacing: 1.2px;
}
.logo-word b {
  color: var(--link); font-size: 10.5px; letter-spacing: 3.8px; font-weight: 700;
  text-shadow: 0 0 12px rgba(47, 181, 255, .6);
}

/* The nav is the scrollable part of the sidebar (a safety net — at normal
   window heights everything fits with no scrolling), so Create stays
   pinned above it and the user row stays visible below it. */
.sidebar nav {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -12px; padding: 0 12px 6px;
}
.sidebar nav a {
  display: flex; align-items: center; gap: 11px; color: var(--muted);
  padding: 7px 10px; border-radius: 9px; font-weight: 500; position: relative;
  font-size: 13.5px;
  transition: color .13s ease, background .13s ease;
}
.sidebar nav a svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.sidebar nav a:hover { color: var(--text); background: var(--card); }
.sidebar nav a:hover svg { opacity: 1; }
.sidebar nav a.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(218, 25, 160, .16), rgba(218, 25, 160, .05) 65%, transparent);
}
.sidebar nav a.active svg { opacity: 1; color: #ff6fd4; }
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 3px; background: var(--accent-2);
  box-shadow: 0 0 10px rgba(218, 25, 160, .7);
}

/* Split Create button: pinned above the nav; the caret opens a floating
   format menu that overlays the nav instead of pushing it down. */
.create-split { display: flex; gap: 5px; position: relative; margin: 0 0 6px; }
.sidebar .create-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #ffb640, #ff9d00 55%, #f08800);
  color: #1c1205; font-weight: 700; font-size: 13.5px;
  padding: 9px 10px; border-radius: 10px;
  box-shadow: 0 3px 14px rgba(255, 157, 0, .28);
  transition: filter .13s ease, transform .13s ease;
}
.sidebar .create-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sidebar .create-btn svg { width: 16px; height: 16px; }
.create-caret {
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, #ffb640, #ff9d00 55%, #f08800);
  color: #1c1205; width: 30px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 3px 14px rgba(255, 157, 0, .28);
  transition: filter .13s ease;
}
.create-caret:hover { filter: brightness(1.07); }
.create-caret svg { width: 15px; height: 15px; transition: transform .16s var(--ease); }
.create-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.create-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: #191925; border: 1px solid var(--border);
  border-radius: 12px; padding: 5px; box-shadow: var(--shadow-2);
  animation: menuIn .14s var(--ease);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
.create-menu a, .create-menu-soon {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 8px; color: var(--text); font-size: 12.5px;
}
.create-menu a:hover { background: var(--card-hover); }
.create-menu b { display: block; font-weight: 600; }
.create-menu small, .create-menu-soon small {
  display: block; color: var(--muted); font-size: 11px; font-weight: 400;
}
.create-menu .cm-emoji { font-size: 17px; flex: none; }
.create-menu-soon { color: var(--muted); opacity: .55; }

#clientRoster { width: auto; min-width: 160px; }
.badge {
  background: var(--bad); color: #fff; font-size: 10.5px;
  min-width: 17px; height: 17px; border-radius: 9px; text-align: center;
  line-height: 17px; padding: 0 5px; font-weight: 650;
}
.sidebar nav .badge { margin-left: auto; }

/* Compact credits pill (white-label accounts with a credit balance). */
.credits-tile {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 0; padding: 8px 12px; background: var(--card);
  border: 1px solid var(--border-soft); border-radius: 10px;
}
.credits-tile b { font-size: 16px; font-weight: 700; }

/* User row pinned to the sidebar foot: identity + sign out. */
.sidebar-user {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding: 8px 6px 2px;
  border-top: 1px solid var(--border-soft);
}
.user-dot {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #DA19A0, #7B2FF7);
  color: #fff; font-size: 12.5px; font-weight: 700;
}
.user-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-name small {
  display: block; color: var(--muted); font-size: 10px; font-weight: 450;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-out {
  width: 28px; height: 28px; flex: none; border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--muted); cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.user-out svg { width: 15px; height: 15px; }
.user-out:hover { background: rgba(229, 72, 77, .14); color: #ff8589; }
/* legacy footer (still used by standalone pages) */
.sidebar-foot { margin-top: auto; color: var(--muted); font-size: 11px; padding: 10px; }

/* ---- nav grouping ---------------------------------------------------- */
.nav-group {
  font-size: 10px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); opacity: .55;
  padding: 12px 10px 4px;
}
.nav-sep {
  height: 1px; background: var(--border-soft); margin: 8px 10px 4px;
}

/* Short screens: tighten the sidebar so everything still fits. */
@media (max-height: 780px) {
  .sidebar { padding-top: 12px; }
  .logo { padding-bottom: 10px; }
  .logo img { height: 30px; }
  .sidebar nav a { padding: 5.5px 10px; }
  .nav-group { padding: 8px 10px 3px; }
  .nav-sep { margin: 6px 10px 3px; }
}
/* Very short screens: drop the group labels — items alone tell the story. */
@media (max-height: 700px) {
  .nav-group { display: none; }
  .sidebar nav { gap: 0; }
  .sidebar nav a { padding: 5px 10px; }
  .create-split { margin-bottom: 4px; }
  .logo { padding-bottom: 8px; }
  .sidebar-user { margin-top: 6px; padding-top: 6px; }
}

/* ---- Queue: the item paints itself with the state of the work -------- */
.q-item { overflow: hidden; }
.q-item > svg, .q-item .q-text, .q-item .q-count { position: relative; z-index: 1; }
.q-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform-origin: left center; transform: scaleX(var(--q-progress, 0));
  opacity: 0; pointer-events: none;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}
.q-count {
  margin-left: auto; font-size: 11px; font-weight: 650; line-height: 18px;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  text-align: center;
}
/* Generic sidebar count pill (open quality cases on the Quality item). */
.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 650; line-height: 18px;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  text-align: center; background: rgba(218, 25, 160, .2); color: #ff6fd4;
}
/* running — the machine is working: orange fill grows as videos finish */
.q-item[data-state="running"] { color: var(--text); }
.q-item[data-state="running"] .q-fill {
  opacity: 1; background: var(--accent);
  animation: qbreathe 2.4s ease-in-out infinite;
}
.q-item[data-state="running"] .q-count {
  background: rgba(255, 157, 0, .18); color: var(--accent-strong);
}
/* review — a sample batch is waiting on YOU: magenta */
.q-item[data-state="review"] { color: var(--text); }
.q-item[data-state="review"] .q-fill { opacity: 1; background: var(--accent-2); }
.q-item[data-state="review"] .q-count {
  background: rgba(218, 25, 160, .2); color: #ff6fd4;
}
/* idle — nothing in flight: plain, like any other item */
.q-item[data-state="idle"] .q-fill { opacity: 0; }
@keyframes qbreathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

/* ---- topbar icon buttons (bell / guide / what's new) ------------------ */
.topbtn {
  width: 36px; height: 36px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 10px;
  background: var(--card); color: var(--muted); position: relative;
  border: 1px solid var(--border); cursor: pointer;
  transition: background .15s ease, border-color .15s ease,
              transform .15s ease, color .15s ease;
}
.topbtn svg { width: 17px; height: 17px; }
.topbtn:hover {
  background: var(--card-hover); border-color: #333350;
  color: var(--text); transform: translateY(-1px);
}
.topbtn.on { color: var(--accent-strong); border-color: rgba(255, 157, 0, .4); }
.topbtn .badge {
  position: absolute; top: -5px; right: -5px;
  box-shadow: 0 0 0 2px var(--bg);
}
.whatsnew-btn { color: var(--accent-strong); }

/* ---- What's new overlay ----------------------------------------------- */
.whatsnew-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 6, 12, .55); backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: 66px 22px; animation: wnFade .18s ease;
}
.whatsnew-overlay[hidden] { display: none; }
.whatsnew-panel {
  width: 400px; max-width: calc(100vw - 44px); max-height: calc(100vh - 100px);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
  animation: wnRise .22s var(--ease);
}
.whatsnew-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
}
.whatsnew-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 15px; color: var(--text);
}
.whatsnew-title svg { width: 17px; height: 17px; color: var(--accent-strong); }
.whatsnew-close {
  width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; background: none;
  border: none; color: var(--muted); cursor: pointer;
}
.whatsnew-close svg { width: 17px; height: 17px; }
.whatsnew-close:hover { background: var(--card); color: var(--text); }
.whatsnew-body { overflow-y: auto; padding: 6px 0; }
.wn-item { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.wn-item:last-child { border-bottom: none; }
.wn-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wn-tag {
  font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(255, 157, 0, .14); color: var(--accent-strong);
}
.wn-date { font-size: 11px; color: var(--muted); }
.wn-item h4 { font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 5px; }
.wn-item p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.whatsnew-all {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px; font-weight: 600; font-size: 13px; color: var(--accent-strong);
  border-top: 1px solid var(--border-soft); background: var(--card);
}
.whatsnew-all svg { width: 15px; height: 15px; }
.whatsnew-all:hover { background: var(--card-hover); }
@keyframes wnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wnRise { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

main { margin-left: 216px; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(10, 10, 18, .82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.top-actions { display: flex; gap: 10px; align-items: center; }
.content { padding: 20px 28px 56px; display: grid; gap: 18px; }

/* ---------- panels & cards ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-1);
}
.panel > h2 { display: flex; align-items: center; gap: 8px; }
.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

/* hero action cards (Dreamina-style) */
.hero-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .hero-row { grid-template-columns: 1fr; } }
.hero {
  border-radius: 16px; padding: 22px; min-height: 128px; position: relative;
  border: 1px solid rgba(255, 255, 255, .08); overflow: hidden;
  display: flex; flex-direction: column; gap: 6px; justify-content: space-between;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 180px at 88% -20%, rgba(255, 255, 255, .1), transparent 65%);
}
.hero h2 { font-size: 17px; margin: 0; }
.hero p { color: rgba(236, 238, 244, .72); font-size: 13px; }
/* Mamenta gradient pair: deep blue #0052BC -> purple #5D04A4 (dimmed) */
.hero-a { background: linear-gradient(135deg, #0a2e63 0%, #33025c 100%); }
.hero-b { background: linear-gradient(135deg, #06254f 0%, #202a5e 100%); }
.hero-c { background: linear-gradient(135deg, #33025c 0%, #0a2e63 100%); }
.hero .hero-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; position: relative; z-index: 1; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease;
}
.stat:hover { border-color: var(--border); }
.stat .k { color: var(--muted); font-size: 12px; font-weight: 550; }
.stat .v {
  font-size: 25px; font-weight: 700; margin-top: 2px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat .s { color: var(--muted); font-size: 11px; margin-top: 2px; }
.stat .v.warn { color: var(--warn); }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 550;
  font-size: 13.5px;
  transition: background .13s ease, border-color .13s ease, transform .13s ease,
              box-shadow .13s ease, filter .13s ease;
}
.btn:hover { background: var(--card-hover); border-color: #333350; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, #ffb640, #ff9d00 55%, #f08800);
  border-color: transparent; color: #1c1205; font-weight: 700;
  box-shadow: 0 3px 14px rgba(255, 157, 0, .25);
}
.btn.primary:hover { filter: brightness(1.07); background: linear-gradient(135deg, #ffb640, #ff9d00 55%, #f08800); }
.btn.danger { color: #ff8589; border-color: #4a2328; }
.btn.danger:hover { background: #2a181b; border-color: #5d2c32; }
.btn.good { color: #6fe0a8; border-color: #1d4633; }
.btn.good:hover { background: #14261d; border-color: #26593f; }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

input, select, textarea {
  background: #0e0e17; color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 11px; font: inherit; width: 100%;
  transition: border-color .13s ease, box-shadow .13s ease;
}
input::placeholder, textarea::placeholder { color: #5c637a; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
textarea { resize: vertical; min-height: 70px; }
label { display: block; }
.field { display: grid; gap: 5px; }
.field > span { color: var(--muted); font-size: 12px; font-weight: 550; }
.field .hint { color: var(--muted); font-size: 11px; font-weight: 400; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 140px; }
.check {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  transition: border-color .13s ease;
}
.check:hover { border-color: #333350; }
.check input { width: auto; margin-top: 2px; accent-color: var(--accent); }
.check b { font-weight: 600; display: block; }
.check .hint { color: var(--muted); font-size: 11.5px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- status chips ---------- */
.chip {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  border-radius: 20px; padding: 2px 9px; white-space: nowrap;
  background: #23283a; color: #a6aec6; border: 1px solid transparent;
}
.st-held            { background: #1d2230; color: #7d879e; }
.st-pending_script  { background: #1c2740; color: #7fa4dc; }
.st-awaiting_approval { background: #3a2f14; color: #f5b942; }
.st-queued          { background: #232a3e; color: #9aa5c4; }
.st-generating      { background: #14304d; color: #58a6ff; animation: pulse 1.6s infinite; }
.st-delayed         { background: #3d2a12; color: #f0964a; animation: pulse 1.6s infinite; }
.st-succeeded       { background: #123726; color: #4bd48f; }
.st-failed          { background: #3d1a1d; color: #ff7b81; }
.st-approved        { background: #123726; color: #4bd48f; border-color: #1e5b3f; }
.st-rejected        { background: #33202f; color: #cd7bb4; }
.st-canceled        { background: #1d2230; color: #6b7383; }
/* Quality-case lifecycle tags: rejection under team review (red),
   credit returned (orange), plus the case chips on /quality. */
.st-under-review    { background: #3d1a1d; color: #ff7b81; border-color: #6b2a2f; }
.st-credit-issued   { background: #3a2410; color: #ffb04d; border-color: #6b4a1e; }
.st-open            { background: #3d1a1d; color: #ff7b81; }
.st-credited        { background: #3a2410; color: #ffb04d; }
.st-no_credit       { background: #33202f; color: #cd7bb4; }
@keyframes pulse { 50% { opacity: .55; } }

/* batch status chips reuse the same palette */
.st-running          { background: #14304d; color: #58a6ff; }
.st-complete         { background: #123726; color: #4bd48f; }
.st-complete_with_errors { background: #3a2f14; color: #f5b942; }
.st-sample_review    { background: #3a2f14; color: #f5b942; animation: pulse 1.6s infinite; }

/* ---------- video cards ---------- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 14px; }
.vcard {
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden; color: var(--text);
  transition: transform .15s var(--ease), border-color .15s ease, box-shadow .15s ease;
  display: block;
}
.vcard:hover { transform: translateY(-3px); border-color: #333a58; box-shadow: var(--shadow-2); }
.vthumb { position: relative; aspect-ratio: 9 / 16; background: #0a0c11; }
.vthumb video, .vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vthumb-empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--muted); font-size: 12px;
}
.vchip { position: absolute; top: 8px; left: 8px; }
.vmeta { padding: 9px 11px; }
.vpersona { font-weight: 600; font-size: 12.5px; }
.vscript { color: var(--muted); font-size: 11.5px; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* hover-to-play: thumbnail previews on hover, click toggles sound */
.vthumb[data-hoverplay] { cursor: pointer; }
a.vmeta { display: block; color: var(--text); text-decoration: none; }
a.vmeta:hover .vpersona { color: var(--accent-2); }
a.vthumb-empty { text-decoration: none; }
.vsound {
  position: absolute; bottom: 8px; left: 8px; font-size: 13px;
  background: rgba(8, 10, 16, .72); border-radius: 999px;
  padding: 3px 7px; pointer-events: none;
}
.vopen {
  position: absolute; bottom: 8px; right: 8px; font-size: 11px;
  font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(8, 10, 16, .72); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 3px 9px;
  opacity: 0; transition: opacity .15s ease;
}
.vcard:hover .vopen { opacity: 1; }
.vopen:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* ---------- asset cards ---------- */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.acard {
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease;
}
.acard:hover { border-color: #333a58; }
.athumb { aspect-ratio: 1; background: #0a0c11; }
.athumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acard .ameta { padding: 8px 10px; font-size: 12px; }
.acard .ameta .tags { color: var(--muted); font-size: 11px; }

/* ---------- create format picker ---------- */
.fmt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fmt-card {
  display: block; background: var(--card);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 22px 20px; color: var(--text); position: relative; overflow: hidden;
  transition: transform .15s var(--ease), border-color .15s ease, box-shadow .15s ease;
}
.fmt-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(300px 140px at 85% -10%, rgba(255, 157, 0, .12), transparent 65%);
  transition: opacity .18s ease;
}
a.fmt-card:hover { transform: translateY(-3px); border-color: rgba(255, 157, 0, .5); box-shadow: var(--shadow-2); }
a.fmt-card:hover::after { opacity: 1; }
.fmt-card .fmt-emoji { font-size: 28px; line-height: 1; }
.fmt-card h2 { margin: 12px 0 6px; font-size: 16px; }
.fmt-card p { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
.fmt-card .fmt-go { color: var(--accent-strong); font-size: 12.5px; font-weight: 600; }
.fmt-card.fmt-soon { opacity: .55; }

/* ---------- full-prompt view (video page + queue script review) ----------
   The prompt is sent as one continuous string; on screen it's split at
   its section markers so the shot-script structure is visible. */
.promptview { display: grid; gap: 10px; margin-top: 10px; }
.psection .plabel {
  color: var(--accent-strong); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px;
}
.psection .mono { color: var(--text); line-height: 1.55; }

/* Generation-time tag on video cards (submission -> finished file). */
.vtime { color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 6px; }

/* Reference-order badge: the number an image gets when ticked for a
   build — tick order becomes @Image1, @Image2... in the video prompt. */
.refno {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 4px;
  border-radius: 11px; background: var(--brand, #FF9D00); color: #14100a;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none;
}

/* ---------- queue ---------- */
.batch-card { display: grid; gap: 12px; }
.batch-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.batch-head .grow { flex: 1; }
.batch-head .sub { color: var(--muted); font-size: 12px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-row a { line-height: 1; }
.script-review {
  background: var(--card); border: 1px solid #3a2f14; border-radius: 12px;
  padding: 12px; display: grid; gap: 10px;
}
.script-item { display: grid; gap: 6px; }
.script-item .who { font-weight: 600; font-size: 12.5px; }
.script-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notice {
  border-radius: 12px; padding: 12px 15px; font-size: 13px; line-height: 1.55;
  background: rgba(28, 39, 64, .65); border: 1px solid #2b3a67;
}
.notice.warn { background: #2b2410; border-color: #4a3d17; color: #f0d9a2; }
.notice.bad { background: #2a1518; border-color: #4a2328; color: #f4b8bb; }
.error-text { color: #ff8589; font-size: 12px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border-soft); }
th {
  color: var(--muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}
tbody tr { transition: background .1s ease; }
table tr:hover td { background: rgba(255, 255, 255, .015); }
td { font-variant-numeric: tabular-nums; }

/* ---------- misc ---------- */
.toast {
  position: fixed; top: 16px; right: 20px; z-index: 70;
  background: #16233c; border: 1px solid #31518a; color: #cfe0ff;
  border-radius: 12px; padding: 11px 16px; font-size: 13px;
  box-shadow: var(--shadow-2);
  animation: slidein .2s var(--ease);
}
@keyframes slidein { from { transform: translateY(-10px); opacity: 0; } }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input { width: auto; min-width: 130px; }

/* Queue filter pills — the four views: All + the three 'Needs you'
   buckets. Magenta = the active/selected pill (brand rule); a red count
   on Failed reads as 'this one wants attention'. */
.qfilters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--border-soft); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.qpill:hover { color: var(--text); border-color: var(--border); }
.qpill b { font-weight: 700; color: var(--text); }
.qpill.on {
  background: rgba(218, 25, 160, .13); color: #f2a6dc;
  border-color: var(--accent-2);
}
.qpill.on b { color: #f2a6dc; }
.qpill.danger b { color: #ff7b81; }              /* the Failed count */
.qpill.danger.on {
  background: rgba(229, 72, 77, .13); color: #ff9a9e; border-color: #6b2a2f;
}
.qpill.danger.on b { color: #ff9a9e; }

/* One failed video per row in the Failed view: id · product, the error,
   then Retry / Write off. */
.fail-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--border-soft);
}
.fail-row .grow { min-width: 240px; }
.fail-row .who {
  display: block; color: var(--text); text-decoration: none; font-weight: 600;
}
.fail-row .who:hover { color: var(--link); }
details.box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
details.box summary {
  cursor: pointer; font-weight: 550; color: var(--muted);
  transition: color .13s ease;
}
details.box summary:hover { color: var(--text); }
details.box[open] summary { margin-bottom: 10px; }
.face-warning {
  display: flex; gap: 10px; align-items: center;
  background: #2b2410; border: 1px solid #4a3d17; color: #f0d9a2;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px;
}
.persona-card { display: grid; gap: 10px; }
.persona-top { display: flex; gap: 12px; align-items: center; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--accent-strong); flex: none;
}
.cost-panel {
  background: linear-gradient(135deg, #0a2e63, #33025c);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius);
  padding: 16px; position: sticky; top: 80px; box-shadow: var(--shadow-1);
}
.cost-panel .big { color: var(--accent); font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.player { max-height: 78vh; border-radius: 14px; background: #000; }
.progressbar { height: 6px; border-radius: 3px; background: #232a3e; overflow: hidden; }
.progressbar > div {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 3px; transition: width .5s var(--ease);
}

/* wizard product catalog cards */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pcard {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; cursor: pointer;
  transition: border-color .13s ease, transform .13s ease;
}
.pcard:hover { transform: translateY(-2px); border-color: #3a3a55; }
.pcard.sel { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pthumb-empty {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px; background: #0a0c11;
}
.pcard .pmeta { padding: 7px 9px; display: grid; gap: 1px; font-size: 12px; }

.vibe-box { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vibe-chip.sel { border-color: var(--accent); color: var(--accent-strong); }

/* compact wizard spacing */
.grid.compact { gap: 12px; }
.grid.compact .panel { padding: 13px 14px; }
.grid.compact h2 { margin-bottom: 4px; }

[data-dropzone] { transition: outline-color .12s ease; outline: 2px dashed transparent; outline-offset: -2px; }
[data-dropzone].dropping { outline-color: var(--accent); background: rgba(255, 157, 0, .05); }
[data-dropzone].uploading { opacity: .6; pointer-events: none; }

/* ---- Type-to-filter dropdowns (makeSearchable in app.js) ---- */
.searchsel { position: relative; display: block; }
.searchsel select { display: none; }
.filters .searchsel, .top-actions .searchsel { min-width: 180px; }
.searchsel-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 100%; max-height: 300px; overflow-y: auto;
  background: #191925; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-2);
}
.searchsel-item {
  padding: 7px 12px; cursor: pointer; white-space: nowrap; font-size: 13px;
}
.searchsel-item:hover { background: rgba(255, 255, 255, .07); }
.searchsel-item.current { color: var(--accent); font-weight: 600; }

/* ---- Main + side-panel layout (batch forms) ---- */
/* Wide: form left, sticky cost estimate right (the estimate must stay
   visible while scrolling — it's where money gets committed). Narrow:
   stack to one column and let the estimate flow normally. */
.layout-main-side { grid-template-columns: 2fr 1fr; align-items: start; }
@media (min-width: 1101px) {
  .layout-main-side > :last-child { position: sticky; top: 76px; }
}
@media (max-width: 1100px) {
  .layout-main-side { grid-template-columns: 1fr; }
}

/* Colorway quick-pick: mark the active color */
[data-colorway].active { border-color: var(--accent); color: var(--accent); }

/* Doc pages (Guide, What's new): one shared list style */
.doclist { margin: 10px 0 2px 18px; line-height: 1.55; }
.doclist li { margin-bottom: 7px; }
a.chip { text-decoration: none; cursor: pointer; }
a.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- tool playbook tables (Guide) ---------- */
.tp-group {
  margin: 22px 0 8px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-strong);
}
.tp-table { width: 100%; border-collapse: collapse; font-size: 12.5px;
  display: block; overflow-x: auto; }
.tp-table th, .tp-table td {
  text-align: left; vertical-align: top; padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.tp-table th {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.tp-table td:first-child { white-space: nowrap; }
.tp-table tr:hover td { background: rgba(255, 255, 255, .02); }

/* Auto/Manual segmented toggle (multi-scene builder) */
.mode-seg {
  display: inline-flex; border: 1px solid var(--border, #33384a);
  border-radius: 9px; overflow: hidden; background: #1a1f2e;
}
.mode-seg .mode-opt {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border: none; background: transparent;
  color: var(--muted, #8b93a7);
}
.mode-seg .mode-opt + .mode-opt { border-left: 1px solid var(--border, #33384a); }
.mode-seg .mode-opt.active { background: rgba(123, 47, 247, .20); color: #fff; }

/* ---- ✨ AI generate button (Script Studio + Create) ---- */
.btn-ai {
  position: relative; overflow: hidden; border: none; cursor: pointer;
  color: #fff; font: inherit; font-weight: 650; border-radius: 10px;
  padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(100deg, #DA19A0, #7B2FF7 45%, #2FB5FF);
  background-size: 200% 100%; animation: aiflow 5s linear infinite;
  box-shadow: 0 4px 18px rgba(123, 47, 247, .35);
}
.btn-ai:hover { filter: brightness(1.08); }
.btn-ai:disabled { opacity: .6; cursor: default; animation-play-state: paused; }
.btn-ai::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%,
              rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%); animation: aishine 2.8s ease-in-out infinite;
}
@keyframes aiflow { to { background-position: 200% 0; } }
@keyframes aishine { 0%,60% { transform: translateX(-100%); }
                     100% { transform: translateX(100%); } }
.ai-spin { animation: aispin .8s linear infinite; display: inline-block; }
@keyframes aispin { to { transform: rotate(360deg); } }

/* Script Studio result + casting chips */
.studio-out {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; min-height: 90px; line-height: 1.55;
  white-space: pre-wrap;
}
.cast-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px;
  border-radius: 20px; background: var(--card); border: 1px solid var(--border);
  font-size: 12px;
}
.cast-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  object-position: top; }

/* ---- Creator Center (talking-creator roster) ---- */
.cc-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 2px;
}
.cc-head .cc-note { color: var(--muted); font-size: 13px; }
.cc-cost {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 157, 0, .1); border: 1px solid rgba(255, 157, 0, .3);
  color: var(--accent-strong); font-size: 12px; font-weight: 600;
  border-radius: 20px; padding: 3px 11px; white-space: nowrap;
}
.cc-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.cc-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform .15s var(--ease), border-color .15s ease, box-shadow .15s ease;
}
.cc-card:hover { transform: translateY(-3px); border-color: #333a58; box-shadow: var(--shadow-2); }
.cc-photo { position: relative; aspect-ratio: 4 / 3.4; background: #0a0c11; }
.cc-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}
.cc-photo::after {          /* legibility fade under the name */
  content: ""; position: absolute; inset: auto 0 0 0; height: 64%;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 14, .92));
}
.cc-id {
  position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 1;
}
.cc-id h2 { margin: 0 0 5px; font-size: 17px; letter-spacing: -.01em; }
.cc-id .chips-row { gap: 5px; }
.cc-body { display: flex; flex-direction: column; gap: 10px; padding: 13px 14px 14px; flex: 1; }
.cc-facts {
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.cc-facts b { color: var(--text); font-weight: 550; }
.cc-desc { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.cc-usage { font-size: 12px; }
.cc-card audio { width: 100%; height: 32px; }
.cc-cta { margin-top: auto; display: grid; gap: 8px; }
.cc-cta .btn { justify-content: center; }
.cc-empty {
  text-align: center; padding: 56px 24px; display: grid; gap: 10px;
  justify-items: center;
}
.cc-empty .cc-empty-emoji { font-size: 40px; }
.cc-pending { display: flex; gap: 12px; align-items: center; }

@media (max-width: 720px) { .cc-grid { grid-template-columns: 1fr; } }

/* ---- Styled dialogs (showConfirm/showAlert in app.js) ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 6, 12, .6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: wnFade .15s ease;
}
.modal-panel {
  width: 400px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px; box-shadow: var(--shadow-2);
  animation: wnRise .18s var(--ease);
}
.modal-msg { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
}

/* Native <dialog> flavor of the same look — the reject-reasons popup. */
dialog.modal-dlg {
  width: 460px; max-width: calc(100vw - 48px);
  background: var(--panel); color: inherit;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow-2);
  animation: wnRise .18s var(--ease);
}
dialog.modal-dlg::backdrop {
  background: rgba(6, 6, 12, .6); backdrop-filter: blur(3px);
}

/* "What was wrong?" tick-chips inside the reject dialog. */
.reason-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reason-chip input { position: absolute; opacity: 0; pointer-events: none; }
.reason-chip span {
  display: inline-block; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 12.5px; line-height: 1.35;
  cursor: pointer; user-select: none; transition: all .15s var(--ease);
}
.reason-chip span:hover { border-color: var(--muted); }
.reason-chip input:checked + span {
  border-color: #DA19A0; background: rgba(218, 25, 160, .14);
  color: #fff;
}
.reason-chip input:focus-visible + span { box-shadow: var(--ring); }

/* ---- Quality review desk (/quality) ---- */
.qcase-row {
  display: flex; gap: 14px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--border);
}
.qcase-row:first-of-type { border-top: 0; }
.qcase-meta { flex: 1; min-width: 0; }
.qcase-meta .muted { display: block; }
.qscore {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; border-radius: 10px; font-weight: 700;
  border: 1px solid var(--border);
}
.qscore.good { color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.qscore.mid  { color: #FF9D00; border-color: rgba(255, 157, 0, .35); }
.qscore.bad  { color: #f87171; border-color: rgba(248, 113, 113, .35); }
.qfault { font-size: 11px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap; }

/* ---- shared bits & utilities (used across templates) ---- */
.hint { color: var(--muted); font-size: 11px; font-weight: 400; }
.warn { color: var(--warn); }
.num { text-align: right; }
.m-0 { margin: 0; }
.mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; }
.doc-col { max-width: 860px; }
.doc-anchor { scroll-margin-top: 76px; }
.searchsel-item.active { background: rgba(255, 157, 0, .12); color: var(--accent-strong); }
.dropping {
  outline: 2px dashed var(--accent) !important; outline-offset: -2px;
  background: rgba(255, 157, 0, .05);
}

/* Wizard step numbers: status-chip colors WITHOUT the generating pulse. */
.step-chip {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 650;
  border-radius: 20px; padding: 2px 9px; white-space: nowrap;
  background: #14304d; color: #58a6ff;
}

/* Image tiles you tick to pick reference images (wizard + quick pane). */
.thumb-pick {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; margin: 4px; cursor: pointer; width: 92px;
}
.thumb-pick img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border);
}
.thumb-pick span { max-width: 88px; overflow: hidden; }

/* Notification rows */
.notif-row {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px;
}
.notif-row.unread {
  background: rgba(255, 157, 0, .07); border: 1px solid rgba(255, 157, 0, .18);
}

/* Topbar h1 never wraps the bar taller — long product names truncate. */
.topbar h1 {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; margin-right: 14px;
}

/* Two-line clamp for long names/descriptions (full text in title=). */
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "In rotation" flag — its own token, not the approval green. */
.st-rotation { background: rgba(218, 25, 160, .16); color: #ff6fd4; }
/* Padded asset-card variant for text cards (script library etc.). */
.acard.pad { padding: 12px; }
.acard.sel { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
/* Current video inside its batch strip — ring moves with the card. */
.vcard.current { box-shadow: 0 0 0 2px var(--accent-2); }
.vcard.current:hover { transform: none; }
/* Long tables scroll inside their panel instead of stretching the page. */
.table-scroll { max-height: 420px; overflow-y: auto; }

/* Bars in the 14-day summary chart: always show a scaffold floor. */
.barchart { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.barchart .bar {
  flex: 1; min-height: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}
.barchart .bar.empty { background: var(--border-soft); }

/* ---- Sign-in page ---- */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background:
    radial-gradient(700px 420px at 70% 8%, rgba(218, 25, 160, .12), transparent 60%),
    radial-gradient(700px 480px at 12% 92%, rgba(47, 100, 255, .11), transparent 60%),
    var(--bg);
}
.login-panel {
  width: 384px; max-width: 100%;
  background: rgba(17, 17, 26, .88); border: 1px solid var(--border);
  border-radius: 20px; padding: 34px 32px 30px;
  box-shadow: var(--shadow-2); backdrop-filter: blur(8px);
  animation: wnRise .3s var(--ease);
}
.login-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.login-logo img { height: 38px; }
/* The neon LLYUGC.AI mark: the hero of the sign-in panel. Its glow is
   baked into the PNG, so it just needs size and breathing room. */
.login-logo-max { justify-content: center; margin: 0 0 18px; }
.login-logo-max img {
  height: auto; width: 280px; max-width: 100%;
  filter: drop-shadow(0 0 26px rgba(46, 228, 228, .14));
}
.login-powered {
  margin-top: 18px; text-align: center;
  color: var(--muted); font-size: 11.5px; letter-spacing: .06em;
}
.login-powered b {
  color: var(--link); font-weight: 700; letter-spacing: .18em;
  text-shadow: 0 0 10px rgba(47, 181, 255, .5);
}
.login-panel h2 { font-size: 19px; margin-bottom: 4px; letter-spacing: -.015em; }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.login-panel .btn { justify-content: center; padding: 10px 14px; }

/* ---- multi-scene filmstrip (video page) ---- */
.filmstrip .fs-track { display:flex; align-items:center; gap:4px;
  overflow-x:auto; padding:6px 2px; }
.fs-cell { flex:0 0 auto; width:74px; background:none; border:2px solid
  var(--border, #333); border-radius:10px; padding:0; cursor:pointer;
  overflow:hidden; position:relative; transition:border-color .15s ease,
  transform .15s ease; }
.fs-cell:hover { transform:translateY(-2px); border-color:var(--accent, #FF9D00); }
.fs-cell.current { border-color:var(--accent, #FF9D00);
  box-shadow:0 0 0 2px rgba(255,157,0,.25); }
.fs-cell img { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; }
.fs-noimg { display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:9/16; font-size:22px; opacity:.5; }
.fs-label { position:absolute; left:0; right:0; bottom:0; font-size:10px;
  line-height:1.25; text-align:center; padding:3px 2px;
  background:linear-gradient(transparent, rgba(0,0,0,.82)); color:#fff; }
.fs-label b { display:block; font-size:11px; }
.fs-link { flex:0 0 auto; opacity:.45; font-size:14px; }

/* FreedomLoud build reference — the parts of a stitched story build,
   each linked to its own video page (video.html info table). */
.build-parts { display:flex; flex-direction:column; gap:6px; }
.build-part { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 9px; border:1px solid var(--border, #333); border-radius:9px;
  text-decoration:none; color:inherit; transition:border-color .15s ease,
  background .15s ease; }
.build-part:hover { border-color:var(--accent, #FF9D00);
  background:rgba(255,157,0,.06); }
.build-part-n { font-weight:600; min-width:64px; }

/* ================================================================
   FREEDOM LOUD — wordmark + sign-in screen only (July 10, 2026).
   Deliberately scoped: the rest of the app keeps its existing
   palette until the full rebrand is approved.
   ================================================================ */

/* ---------- the wordmark, drawn in type (sidebar + login) ---------- */
.fl-wm { display: inline-block; text-align: left; line-height: 1; padding: 2px 0 4px; }
.fl-freedom {
  display: block; font: 600 8px/1 Manrope, Inter, sans-serif;
  letter-spacing: .5em; color: var(--muted); margin: 0 0 3px 1px;
}
.fl-loud {
  display: flex; align-items: center; gap: 7px;
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-size: 26px; line-height: .9; color: var(--text); letter-spacing: .01em;
}
.fl-tri {
  width: 0; height: 0; display: inline-block;
  border-left: 11px solid #1be0f5;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  filter: drop-shadow(0 0 10px rgba(27, 224, 245, .55));
}
.fl-wm small {
  display: block; font: 700 7.5px/1 Manrope, Inter, sans-serif;
  letter-spacing: .34em; color: #6b7383; margin-top: 5px;
}
.fl-wm-big .fl-freedom { font-size: 12px; letter-spacing: .58em; margin: 0 0 4px 4px; }
.fl-wm-big .fl-loud { font-size: 58px; gap: 12px; }
.fl-wm-big .fl-tri { border-left-width: 21px; border-top-width: 13px; border-bottom-width: 13px; }
.fl-studio-tag {
  text-align: center; font: 700 11px/1 Manrope, Inter, sans-serif;
  letter-spacing: .42em; text-indent: .42em;
  color: #1be0f5; margin: 2px 0 24px;
}

/* ---------- sign-in scene ---------- */
.login-body {
  background:
    radial-gradient(700px 420px at 70% 8%, rgba(27, 224, 245, .07), transparent 60%),
    #0b0b0e;
  overflow: hidden; position: relative;
}
.login-ghost {
  position: fixed; left: 50%; top: 54%; transform: translate(-50%, -50%);
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-size: min(42vw, 520px); line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 244, 246, .05);
  user-select: none; pointer-events: none;
}
.login-eq {
  position: fixed; left: 0; right: 0; bottom: 0; height: 84px;
  display: flex; align-items: flex-end; gap: 6px; padding: 0 24px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.login-eq i {
  flex: 1; background: rgba(244, 244, 246, .07); height: 12px; border-radius: 1px;
  animation: flpump 2.6s ease-in-out infinite; animation-delay: var(--d);
}
.login-eq i.hot { background: rgba(27, 224, 245, .28); }
@keyframes flpump {
  0%, 100% { height: 10px; }
  35% { height: var(--h); }
  60% { height: calc(var(--h) * .45); }
  78% { height: calc(var(--h) * .8); }
}
.login-panel {
  border-radius: 8px; position: relative; z-index: 2;
  width: 400px; padding: 40px 38px 28px;
  background: #121218; border-color: rgba(244, 244, 246, .1);
}
.login-logo { justify-content: center; margin-bottom: 4px; }
.login-panel h2 {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-weight: 400; font-size: 26px; letter-spacing: .02em;
  text-transform: uppercase; text-align: center;
}
.login-sub { text-align: center; }
.login-powered {
  font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: #6b7383;
}
.login-powered b { color: #1be0f5; letter-spacing: .3em; text-shadow: 0 0 10px rgba(27, 224, 245, .5); }

/* scoped to the panel: white CTA + cyan focus, without touching the app's
   global orange buttons and focus ring */
.login-panel .btn.primary {
  background: #f4f4f6; color: #0b0b0e; border-color: transparent;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}
.login-panel .btn.primary:hover { background: #63ecfb; filter: none; }
.login-panel :focus-visible { box-shadow: 0 0 0 3px rgba(27, 224, 245, .28); }
.login-panel .field input:focus, .login-panel .field input:focus-visible { border-color: #1be0f5; }

/* ---- top-bar credit pill + panel (client accounts) ------------------
   Always-visible balance; the panel shows details, recent activity,
   and the top-up request button. */
.credit-widget { position: relative; }
.credit-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 157, 0, .12); color: #FF9D00;
  border: 1px solid rgba(255, 157, 0, .45);
  font: inherit; font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.credit-pill svg { width: 15px; height: 15px; }
.credit-pill:hover { background: rgba(255, 157, 0, .2); }
.credit-pill.low {
  background: rgba(255, 176, 32, .14); color: #ffb020;
  border-color: rgba(255, 176, 32, .55);
}
.credit-pill.empty {
  background: rgba(229, 72, 77, .14); color: #ff6b6f;
  border-color: rgba(229, 72, 77, .6);
}
.credit-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 290px; padding: 14px;
  background: var(--panel, #14141a); border: 1px solid var(--border, #2a2a33);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
.credit-panel[hidden] { display: none !important; }
.cp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; font-size: 14px;
}
.cp-row b { font-size: 17px; }
.cp-hist {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border, #2a2a33);
  display: grid; gap: 5px; max-height: 190px; overflow-y: auto;
}
.cp-ev {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--muted, #9a9aa5);
}
.cp-note {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.cp-delta { font-weight: 700; color: #ff6b6f; flex: none; }
.cp-delta.plus { color: #AEF341; }
.cp-empty-note {
  margin: 10px 0 0; font-size: 12.5px; color: #ff6b6f;
}
/* Admin variant: global spend, blue instead of the client orange.
   `.low` (from the shared pill markup) = today is near the daily cap. */
.credit-pill.spend {
  background: rgba(47, 181, 255, .1); color: #2FB5FF;
  border-color: rgba(47, 181, 255, .4);
}
.credit-pill.spend:hover { background: rgba(47, 181, 255, .18); }
.credit-pill.spend.low {
  background: rgba(255, 176, 32, .14); color: #ffb020;
  border-color: rgba(255, 176, 32, .55);
}
.cp-row b { text-align: right; }
.cp-row b .muted { font-weight: 400; }
.cp-row .warn { color: #ffb020; }
/* Month-to-date breakout by video format (admin spend panel) */
.cp-types {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border, #2a2a33);
  display: grid; gap: 5px;
}
.cp-amt { color: var(--text, #ececf1); font-variant-numeric: tabular-nums; }
/* The seat's monthly-budget line: color tracks how close the month is
   to the cap (muted < 75% ≤ warn < 90% ≤ bad). */
.cp-budget { margin: 8px 0 0; }
.cp-budget.warn { color: var(--warn); }
.cp-budget.bad { color: var(--bad); }
.cp-req-status { margin: 4px 0 0; }
.good-text { color: var(--good); }
/* "Request more" mini-form in the credit panel. */
.cp-req { display: flex; gap: 6px; margin-top: 8px; }
.cp-req input[name="amount"] { width: 62px; flex: none; }
.cp-req input[name="note"] { flex: 1; min-width: 0; }
.cp-req .btn { flex: none; }

/* ---- Team page: pending raise-request strip ------------------------ */
.req-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--border-soft);
}
.req-row:first-of-type { border-top: 0; }
.req-what { flex: 1; min-width: 240px; }
.req-actions { display: flex; gap: 6px; flex: none; }
.req-actions input[name="amount"] { width: 70px; }
.req-actions input[name="note"] { width: 170px; }

/* ---- admin accounts table ------------------------------------------
   One glance-able row per account; the full editor hides in a separate
   row the Manage button toggles. */
.admin-table td { vertical-align: middle; }
.acct-id { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.acct-dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #000;
  background: linear-gradient(135deg, #FF9D00, #DA19A0);
}
.acct-dot.house { background: linear-gradient(135deg, #2FB5FF, #AEF341); }
.acct-logo {
  height: 30px; max-width: 110px; object-fit: contain; flex: none;
  background: #fff; border-radius: 6px; padding: 2px 6px;
}
.topup-mini { display: flex; gap: 6px; align-items: center; }
.topup-mini input { width: 72px; }
/* Click-to-edit numbers: dashed underline on hover says "editable",
   the input appears in place, green blink confirms the save. */
.cell-edit { cursor: pointer; }
.cell-edit:hover .cev:not([hidden]) {
  border-bottom: 1px dashed #FF9D00;
}
.cell-input {
  width: 86px; text-align: right; padding: 4px 7px;
  background: #101016; color: #fff; font: inherit;
  border: 1px solid #FF9D00; border-radius: 6px;
}
.cell-input.bad { border-color: #e5484d; }
.cev.saved { color: #AEF341; }
.acct-editor > td {
  background: rgba(255, 157, 0, .04) !important;
  border-left: 3px solid #FF9D00;
  padding: 14px 16px;
}
.admin-table .warn { color: #ffb020; }

/* Draw-on-image studio: the toolbar, the canvas stage, the save bar.
   The canvas shows a fitted preview; the save exports full resolution. */
.draw-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 12px 0;
}
.draw-group { display: inline-flex; gap: 6px; align-items: center; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px #FF9D00; }
.draw-size { display: inline-flex; gap: 6px; align-items: center; }
.draw-size input[type="range"] { width: 110px; }
.draw-stage {
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  background: #0b0b10; padding: 1px; overflow: hidden;
  display: flex; justify-content: center;
}
.draw-stage canvas {
  display: block; border-radius: 11px;
  cursor: crosshair; touch-action: none;
}
.draw-savebar {
  display: flex; gap: 12px; align-items: end; margin-top: 12px;
}

/* Story Board: the build laid out left-to-right as stages, with the
   orange anchor wire showing the face+voice carry. */
.board-flow {
  display: flex; gap: 10px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
}
.board-stage {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 240px; flex: 1;
}
.board-slab {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #8f8f9b;
}
.board-arrow {
  color: #54545f; font-size: 20px; align-self: center; flex: none;
  padding-top: 30px;
}
.board-card {
  background: #16161d; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 10px 12px;
}
.board-card.board-anchor { border-color: rgba(255, 157, 0, .6); }
.board-card.board-soon { text-align: center; padding: 18px 12px; }
.board-ch { display: flex; gap: 9px; align-items: center; }
.board-th {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  flex: none;
}
.board-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; background: #14141b;
}
.board-no {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #23232d; font-weight: 700; font-size: 13px;
}
.board-vid {
  width: 100%; max-height: 260px; border-radius: 9px; margin-top: 8px;
  background: #000; cursor: pointer;
}
.board-wire {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin: -4px 0;
}
.board-wire-line { height: 16px; border-left: 2px solid #FF9D00; }
.board-wire-label {
  font-size: 11px; color: #FFb44d; display: flex; align-items: center;
}

/* Board canvas (advanced mode): pannable node editor with SVG wires. */
.cv-stage {
  position: relative; height: calc(100vh - 210px); min-height: 480px;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; background: #0b0b10;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px,
                                    transparent 0);
  background-size: 18px 18px; cursor: grab; touch-action: none;
}
.cv-stage:active { cursor: grabbing; }
.cv-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cv-wires { position: absolute; left: 0; top: 0; overflow: visible;
  pointer-events: none; }
.cv-wires path { pointer-events: auto; }
.cv-wire { fill: none; stroke: #4a90d9; stroke-width: 2; }
.cv-wire-anchor { stroke: #FF9D00; stroke-width: 2.5; }
.cv-wire-dim { stroke: #3a3a44; stroke-width: 1.5; }
.cv-wire-ghost { stroke: #AEF341; stroke-dasharray: 6 5; }
.cv-wire-hit { fill: none; stroke: transparent; stroke-width: 14;
  cursor: pointer; }
.cv-wire-hit:hover + .cv-wire, .cv-wire-hit:hover { stroke: #e5484d; }
.cv-wire-label { fill: #FFb44d; font-size: 11px; }
.cv-node { position: absolute; left: 0; top: 0; }
.cv-card {
  width: 300px; background: #16161d;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  position: relative;
}
.cv-ingredient { width: 190px; }
.cv-final { width: 280px; }
.cv-card.cv-anchor { border-color: rgba(255, 157, 0, .65); }
.cv-head {
  display: flex; gap: 8px; align-items: center; cursor: grab;
  margin-bottom: 6px; min-height: 26px;
}
.cv-head:active { cursor: grabbing; }
.cv-thumb { width: 34px; height: 34px; border-radius: 8px;
  object-fit: cover; flex: none; }
.cv-no {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #23232d; font-weight: 700; font-size: 12px;
}
.cv-anchor-chip { border-color: #FF9D00; color: #FFb44d; font-size: 10px; }
.cv-port {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #2FB5FF; border: 2px solid #0b0b10; top: 33px;
}
.cv-port-out { right: -8px; cursor: crosshair; }
.cv-port-out:hover { background: #AEF341; transform: scale(1.25); }
.cv-port-in { left: -8px; background: #4a90d9; }
.cv-shot .field { margin-top: 6px; }
.cv-shot .field span { font-size: 10.5px; }
.cv-shot input, .cv-shot textarea { font-size: 12px; padding: 6px 8px; }
.cv-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cv-vid { width: 100%; max-height: 200px; border-radius: 8px;
  margin-top: 8px; background: #000; }
.cv-zoom {
  position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px;
  z-index: 5;
}
.cv-drawer {
  position: fixed; right: 18px; top: 90px; bottom: 18px; width: 340px;
  background: #14141b; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; padding: 14px; overflow-y: auto; z-index: 40;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ---- Tool Chest (Jul 11): option cards + picker groups ---- */
.tool-optgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.tool-opt {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  padding: 12px; transition: border-color .15s ease, background .15s ease;
}
.tool-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tool-opt:hover { border-color: rgba(255, 255, 255, .35); }
.tool-opt.sel {
  border-color: var(--accent, #FF9D00);
  background: rgba(255, 157, 0, .07);
}
.pick-group {
  margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px;
}
.pick-group h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin: 0;
}
.pick-group span { font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.fmt-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
  margin-left: auto;
}
.fmt-badge.live { color: #3DDC84; border: 1px solid #3DDC84; }
.fmt-badge.new { color: var(--accent, #FF9D00);
  border: 1px solid var(--accent, #FF9D00); }
.fmt-takes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
  align-items: center; }
.fmt-takes span {
  font-size: 10.5px; color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 2px 7px;
}
/* the cost chip sits at the far right of the "takes" row */
.fmt-takes .fmt-cost {
  margin-left: auto; color: var(--accent, #FF9D00);
  background: rgba(255, 157, 0, .1); font-weight: 600;
}

/* ---------- the make → review → multiply → deliver journey strip ---------- */
.journey {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.jstep {
  display: flex; flex-direction: column; gap: 1px; text-decoration: none;
  color: var(--text); padding: 4px 8px; border-radius: 8px;
  transition: background .15s ease;
}
.jstep:hover { background: rgba(255, 255, 255, .05); }
.jstep b { font-size: 12.5px; }
.jstep span { font-size: 11px; color: var(--muted); }
.jarrow { align-self: center; color: rgba(255, 255, 255, .3); font-size: 15px; }
.jguide {
  margin-left: auto; align-self: center; text-decoration: none;
  color: var(--accent-strong); font-size: 12.5px; font-weight: 600;
}
.jguide:hover { text-decoration: underline; }
.tool-opt-vid {
  width: 100%; border-radius: 8px; margin: 4px 0 2px;
  background: #000; aspect-ratio: 9 / 16; max-height: 190px;
  object-fit: cover;
}

/* ---------- "★ your winner" thumbs on the Create picker ----------
   The account's latest approved video from each tool, docked to the
   tile's right edge. Hover plays it; clicking it opens the video page
   (the tile's own link keeps working — see create_pick's script). */
.fmt-winner {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 62px; z-index: 2; cursor: pointer; text-align: center;
}
.fmt-winner video {
  width: 62px; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border-radius: 9px; background: #000;
  border: 1px solid rgba(255, 157, 0, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.fmt-winner:hover video { border-color: var(--accent); }
.fmt-winner-cap {
  display: block; margin-top: 4px; font-size: 9.5px; font-weight: 700;
  color: var(--accent-strong); white-space: nowrap;
}
/* Make room for the docked thumb so the tile copy never sits under it
   (the page script adds .has-winner; :has() covers scriptless renders). */
.fmt-card.has-winner { padding-right: 96px; }
.fmt-card:has(.fmt-winner) { padding-right: 96px; }

/* ---------- the "Improve & multiply a winner" action row ----------
   Visually distinct from the three make-something pillars: these tiles
   act on a FINISHED video, so the row reads as a workbench strip. */
.pick-group.improve-head { margin-top: 34px; }
.pick-group.improve-head h2 { color: var(--accent-strong); }
.fmt-grid.improve-row {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 14px; border-radius: var(--radius);
  border: 1px dashed rgba(255, 157, 0, .35);
  background: rgba(255, 157, 0, .04);
}
.fmt-grid.improve-row .fmt-card { padding: 16px 14px; }
.fmt-grid.improve-row .fmt-card p { font-size: 12px; }

/* ---------- Home: the "Needs you" lead panel ---------- */
.needs-panel { margin-bottom: 16px; }
.needs-grid {
  display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.needs-card {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 16px;
  color: var(--text); text-decoration: none;
  transition: transform .15s var(--ease), border-color .15s ease;
}
.needs-card:hover { transform: translateY(-2px); border-color: rgba(255, 157, 0, .5); }
.needs-card .needs-n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.needs-card .needs-label { color: var(--muted); font-size: 12.5px; }
.needs-card .needs-go {
  margin-top: 8px; color: var(--accent-strong); font-size: 12.5px;
  font-weight: 600; text-decoration: none;
}
.needs-card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.needs-review { border-color: rgba(218, 25, 160, .45); }
.needs-review:hover { border-color: var(--accent-2); }
.needs-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.needs-thumb {
  width: 52px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden;
  background: #000; border: 1px solid var(--border-soft); display: block;
  transition: border-color .12s ease, transform .12s ease;
}
.needs-thumb:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.needs-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Home pillar heroes: four cards, and the pillar heroes are links. */
.hero-row.pillars { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1300px) { .hero-row.pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .hero-row.pillars { grid-template-columns: 1fr; } }
a.hero { color: var(--text); text-decoration: none; display: block; }

/* ---------- Labs — the capability playground ---------- */
/* Equal-height rows + a fixed preview aspect keep the card rhythm even;
   the launch link is a real button pinned to the card foot. */
.labs-grid { margin-top: 4px; grid-auto-rows: 1fr; }
.labs-card { display: flex; flex-direction: column; }
.labs-preview {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px;
  overflow: hidden; background: #0a0c11; margin-bottom: 12px; flex: none;
}
.labs-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.labs-preview-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; background: linear-gradient(135deg, #141425, #1c1030);
  text-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.labs-card h2 { margin-top: 0; }
.labs-card .fmt-go { margin-top: auto; }
.labs-card .labs-launch { margin-top: auto; align-self: flex-start; }

/* ================================================================
   Design-polish pass (July 15, 2026) — Team, Create picker, Home,
   and the shared "Who is this for?" control. Every new selector is
   prefixed (.role-, .team-, .act-, .pillar-, .whofor) so nothing
   collides with the existing system.
   ================================================================ */

/* ---- Team: role preset chips -----------------------------------
   Each preset gets a soft translucent tint of its token with the
   full-strength color as text — the same recipe as the .st-* chips.
   Owner keeps the distinctive st-credit-issued chip. */
.role-chip { border: 1px solid transparent; }
.role-admin        { background: rgba(255, 157, 0, .14);   color: #ffb04d; }
.role-elevated     { background: rgba(218, 25, 160, .14);  color: #ff6fd4; }
.role-creator_1080 { background: rgba(47, 181, 255, .14);  color: #58c4ff; }
.role-creator_480  { background: rgba(143, 150, 171, .14); color: #a6aec6; }
.role-reviewer     { background: rgba(25, 195, 42, .14);   color: #4bd48f; }

/* ---- Team: the people table ------------------------------------ */
.team-table td { padding: 13px 10px; vertical-align: middle; }
.team-id { display: flex; align-items: center; gap: 11px; }
.team-dot {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #DA19A0, #7B2FF7);
  color: #fff; font-size: 13px; font-weight: 700;
}
tr[data-disabled] .team-dot { background: #23283a; color: var(--muted); }
/* Tiny budget meter under "used X of Y" — orange fill, red past 90%. */
.team-meter {
  width: 110px; max-width: 100%; height: 3px; border-radius: 2px;
  background: #232a3e; margin-top: 6px; overflow: hidden;
}
.team-meter > i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.team-meter > i.hot { background: var(--bad); }

/* ---- Team: form section labels + the role blurb helper ---------- */
.team-sec {
  font-size: 10.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: -6px;
}
.preset-blurb { min-height: 15px; }

/* ---- Team: first-run nudge when only the owner seat exists ------ */
.team-first {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin-top: 14px; padding: 15px 18px;
  background: rgba(255, 157, 0, .05);
  border: 1px dashed rgba(255, 157, 0, .35); border-radius: var(--radius);
}
.team-first-emoji { font-size: 24px; flex: none; }
.team-first .muted { font-size: 12.5px; }
.team-first-arrow {
  margin-left: auto; color: var(--accent-strong); font-weight: 600;
  font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.team-first-arrow:hover { text-decoration: underline; }

/* ---- Team: Activity tab ----------------------------------------- */
.gov-note { font-style: italic; opacity: .85; }
.act-personal { background: rgba(227, 238, 70, .12); color: #dce65e; }
.act-client   { background: #23283a; color: #a6aec6; }
.act-off      { background: rgba(229, 72, 77, .13); color: #ff8589; }
.team-empty-cell {
  text-align: center; color: var(--muted); padding: 30px 10px !important;
}

/* ---- Create picker: pillar headers ------------------------------
   Slightly larger than the utility .pick-group, with a hairline
   gradient rule running out to the right. */
.pick-group.pillar-head { margin: 30px 0 12px; gap: 12px; }
.pick-group.pillar-head h2 {
  font-size: 15px; letter-spacing: .08em; color: var(--text);
}
.pick-group.pillar-head span { color: var(--muted); }
.pick-group.pillar-head::after {
  content: ""; flex: 1; height: 1px; align-self: center; min-width: 40px;
  background: linear-gradient(90deg, var(--border), transparent);
}
#pillar-creator.pillar-head { margin-top: 18px; }
/* The improve strip's one-line explainer keeps its links quiet. */
.pick-group.improve-head span a { color: var(--accent-strong); }
.pick-group.improve-head span a:hover { text-decoration: underline; }

/* ---- Create picker: "★ your winner" thumbs ----------------------
   Radius matches the app token; hover gets a soft orange ring; the
   caption stays one tidy line. */
.fmt-winner video { border-radius: var(--radius); }
.fmt-winner:hover video {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 157, 0, .35), 0 4px 14px rgba(0, 0, 0, .45);
}
.fmt-winner-cap {
  max-width: 62px; margin-left: auto; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---- Home: the "Needs you" lead panel ---------------------------- */
.needs-card .needs-n {
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.needs-thumbs { flex-wrap: wrap; }
/* The all-clear state: centered, calm, a little air. */
.needs-clear { text-align: center; color: var(--muted); padding: 22px 0 16px; }

/* ---- Home: pillar heroes ----------------------------------------
   Link heroes were display:block, which broke the column flex that
   bottom-aligns the arrows — restore flex so all four cards align. */
a.hero { display: flex; }
.hero-row.pillars .hero-actions { margin-top: auto; }

/* ---- The shared "Who is this for?" control -----------------------
   One look everywhere: in a cost/side panel a hairline top border
   separates it from the money math above it. */
.whofor { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09); }
.whofor-note {
  color: var(--muted); font-size: 11.5px; line-height: 1.5;
  margin: 5px 0 0;
}

/* ---- Home "Latest stills" row (logos/posters/studio imagery) ------- */
.stills-row { display:flex; gap:10px; overflow-x:auto; padding:4px 0 6px; }
.still-card { flex:0 0 auto; width:118px; text-decoration:none; }
.still-card img { width:118px; height:118px; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--border);
  display:block; background:var(--card); transition:border-color .15s; }
.still-card:hover img { border-color:var(--accent); }
.still-card span { display:block; margin-top:4px; font-size:11px;
  color:var(--muted); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }