/* Aequus — calm dark control room */
:root {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #0d0d0f;
  --surface: #111113;
  --surface-2: #19191c;
  --surface-3: #232327;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --text-2: #c7c7cc;
  --muted: #8e8e93;
  --brand: #0a84ff;
  --brand-ink: #ffffff;
  --money: #30d158;
  --ok: #30d158;
  --warn: #ff9f0a;
  --bad: #ff453a;
  --run: #64d2ff;
  --review: #ff9f0a;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --r: 20px;
  --r-sm: 12px;
  --sidebar: 248px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(1200px 700px at 70% -10%, #1a1b20 0%, transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.money { color: var(--money); }

/* ── shell ── */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: rgba(18, 19, 22, 0.92); border-right: 1px solid var(--line); padding: 18px 12px 24px; display: flex; flex-direction: column; gap: 4px; backdrop-filter: blur(12px); z-index: 30; }
.brandmark { display: flex; align-items: center; gap: 11px; padding: 6px 10px 18px; }
.brandmark .glyph { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(140deg, #f0d79c, var(--brand) 55%, #8f6b27); display: grid; place-items: center; color: var(--brand-ink); font: 600 15px var(--display); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.brandmark b { display: block; font: 400 21px/1 var(--display); letter-spacing: .01em; }
.brandmark small { display: block; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--muted); margin-top: 3px; }
.nav-group { margin-top: 12px; }
.nav-group:first-of-type { margin-top: 0; }
.nav-label { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-weight: 500; transition: background .12s, color .12s; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.nav a svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.nav a .count { margin-left: auto; font: 500 11px var(--mono); padding: 1px 7px; border-radius: 20px; background: rgba(216, 180, 106, .14); color: var(--brand); }
.nav-sep { height: 1px; background: var(--line); margin: 12px 8px 4px; }
.side-foot { margin-top: auto; padding: 14px 12px 0; font-size: 12px; color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px max(24px, env(safe-area-inset-right, 0px)) 14px 28px; border-bottom: 1px solid var(--line); background: rgba(13, 14, 16, .8); backdrop-filter: blur(14px); }
.btn.menu-btn { display: none; }
.crumb { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.chip.ok { border-color: rgba(69, 211, 154, .35); color: var(--ok); }
.chip.ok .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(69,211,154,.15); }
.chip.bad { border-color: rgba(239, 111, 122, .4); color: var(--bad); }
.chip.bad .dot { background: var(--bad); }
.chip.money { color: var(--money); border-color: rgba(69, 211, 154, .3); }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--surface-2); }

.page { padding: 30px 28px 80px; max-width: 1280px; width: 100%; }
.eyebrow { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--brand); transform: rotate(45deg); }
h1.title { font: 400 44px/1.05 var(--display); letter-spacing: -.005em; margin: 12px 0 8px; text-wrap: balance; }
.lede { color: var(--text-2); max-width: 64ch; margin: 0 0 28px; font-size: 15px; }
h2.h2 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.section { margin-top: 30px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ── cards, tiles ── */
.card { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.card.pad { padding: 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tile { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: default; }
button.tile { cursor: pointer; transition: border-color .12s, background .12s; }
button.tile:hover { border-color: var(--line-2); background: var(--surface-2); }
.tile .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.tile .ic svg { width: 17px; height: 17px; }
.tile .k { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile .v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile.review .ic { color: var(--review); background: rgba(216,180,106,.12); }
.tile.run .ic { color: var(--run); background: rgba(127,168,255,.12); }
.tile.ok .ic { color: var(--ok); background: rgba(69,211,154,.12); }
.tile.bad .ic { color: var(--bad); background: rgba(239,111,122,.12); }
.tile.money .v { color: var(--money); }

/* ── buttons, forms ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, filter .12s; }
.btn:hover { background: var(--surface-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--text); color: #121212; border-color: var(--text); }
.btn.primary:hover { filter: brightness(.92); }
.btn.brand { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.ok { background: var(--ok); color: #05261a; border-color: var(--ok); }
.btn.bad { background: transparent; color: var(--bad); border-color: rgba(239,111,122,.45); }
.btn.bad:hover { background: rgba(239,111,122,.1); }
.btn.ghost { background: transparent; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn svg { width: 15px; height: 15px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-btn { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 500; }
.pill-btn:hover { color: var(--text); background: var(--surface-2); }
.pill-btn.active { background: var(--text); color: #111; border-color: var(--text); }
.pill-btn b { font-weight: 600; margin-left: 4px; opacity: .7; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .lbl { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, textarea.input, select.input { width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); outline: none; transition: border-color .12s, box-shadow .12s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(216,180,106,.15); }
textarea.input { min-height: 130px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.form-stack { display: flex; flex-direction: column; gap: 18px; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }

/* model choice cards */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.choice { position: relative; display: block; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; transition: border-color .12s, background .12s; }
.choice:hover { background: var(--surface-2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice b { display: block; font-weight: 600; }
.choice span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.choice::after { content: ""; position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-2); }
.choice:has(input:checked) { border-color: var(--brand); background: rgba(216,180,106,.07); }
.choice:has(input:checked)::after { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--bg-2); }
.choice:has(input[type=radio])::after { border-radius: 50%; }

/* character picker */
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.char { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; aspect-ratio: 3/4; max-width: 100%; }
.char img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char input { position: absolute; opacity: 0; }
.char .nm { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.8)); font-weight: 600; font-size: 13px; }
.char:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }

.drop { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); background: var(--bg-2); cursor: pointer; transition: border-color .12s, background .12s; }
.drop:hover, .drop.over { border-color: var(--brand); background: rgba(216,180,106,.05); color: var(--text-2); }
.drop b { color: var(--text); }
.field > label.drop { font: 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.file-list span { font: 12px var(--mono); padding: 3px 9px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }

.summary-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.summary-bar .muted b { color: var(--text); font-weight: 600; }

/* ── job rows ── */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 12px 9px 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .12s, background .12s; cursor: pointer; }
.row:hover { border-color: var(--line-2); background: var(--surface-2); }
.row .th { width: 46px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; color: var(--muted); }
.row .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row .mid { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .who { font-weight: 600; font-size: 15px; }
.row .meta { color: var(--muted); font-size: 13px; }
.row .right { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.row .err { flex-basis: 100%; color: var(--bad); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 11.5px var(--sans); border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.badge.tg { color: #6fd0a3; border-color: rgba(111,208,163,.35); background: rgba(111,208,163,.07); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--text-2); }
.status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.review { color: var(--review); border-color: rgba(216,180,106,.4); }
.status.approved { color: var(--ok); border-color: rgba(69,211,154,.4); }
.status.awaiting { color: #c9a6ff; border-color: rgba(201,166,255,.4); }
.status.rejected, .status.failed, .status.skipped { color: var(--bad); border-color: rgba(239,111,122,.4); }
.status.running { color: var(--run); border-color: rgba(127,168,255,.4); }
.status.running i { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty b { color: var(--text); display: block; font-size: 15px; margin-bottom: 4px; }
.more { display: flex; justify-content: center; margin-top: 14px; }

/* ── spend chart ── */
.chart-card { padding: 20px 22px 18px; }
.chart-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.chart-head .big { font-size: 28px; font-weight: 600; color: var(--money); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; margin-top: 14px; }
.chart-wrap svg { display: block; width: 100%; height: 240px; overflow: visible; }
.chart-wrap .tip { position: absolute; pointer-events: none; transform: translate(-50%, -100%); background: var(--surface-3); border: 1px solid var(--line-2); padding: 6px 9px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.axis { display: flex; justify-content: space-between; color: var(--muted); font: 12px var(--mono); margin-top: 8px; }
.ulist { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.urow { display: grid; grid-template-columns: 120px minmax(0,1fr) 92px; align-items: center; gap: 14px; font-size: 13.5px; }
.urow .track { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.urow .track span { display: block; height: 100%; background: var(--money); border-radius: 4px; }
.urow .amt { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── galleries / review ── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.g-item { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: pointer; aspect-ratio: 9/16; max-width: 100%; }
.g-item.square { aspect-ratio: 4/5; }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.g-item:hover img { transform: scale(1.03); }
.g-item .cap { position: absolute; inset: auto 0 0 0; padding: 26px 10px 9px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font-size: 12px; display: flex; justify-content: space-between; gap: 6px; }
.g-item .cap b { font-weight: 600; }
.g-item .play { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.g-item .play svg { width: 11px; height: 11px; }
.g-item .st { position: absolute; top: 9px; left: 9px; }

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rcard { display: flex; flex-direction: column; overflow: hidden; }
.rcard .media { aspect-ratio: 9/16; background: #000; max-height: 520px; display: grid; place-items: center; max-width: 100%; }
.rcard .media.square { aspect-ratio: 4/5; }
.rcard video, .rcard .media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rcard .info { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rcard .acts { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; padding: 0 14px 14px; }

/* ── modal ── */
.modal-bg { position: fixed; inset: 0; z-index: 60; background: rgba(5,5,7,.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px 16px; }
.modal { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal.narrow { width: min(520px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 20px; }
.viewer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; }
.viewer .stage { background: #000; border-radius: 12px; overflow: hidden; display: grid; place-items: center; max-height: 72vh; min-height: 320px; }
.viewer .stage video, .viewer .stage img { max-width: 100%; max-height: 72vh; display: block; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13.5px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); gap: 2px; }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; }
.seg button.active { background: var(--surface-3); color: var(--text); }

/* tables */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.r, table.t th.r { text-align: right; }

/* settings */
.set-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.set-grid:first-of-type { border-top: 0; padding-top: 4px; }
.set-grid h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.set-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; background: linear-gradient(transparent, var(--bg) 40%); }

/* auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(400px, 100%); padding: 30px 28px; }
.auth-card h1 { font: 400 36px/1.1 var(--display); margin: 18px 0 6px; }

/* toast */
#toasts { position: fixed; z-index: 90; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { padding: 10px 14px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line-2); font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 360px; animation: tin .18s ease-out; }
.toast.err { background: #3a1a1e; border-color: rgba(239,111,122,.5); color: #ffd5d9; }
.toast.ok { border-color: rgba(69,211,154,.4); }
@keyframes tin { from { transform: translateY(6px); opacity: 0; } }

.skel { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.kbd { font: 11px var(--mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--muted); }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; transform: translateX(-100%); transition: transform .2s; padding-top: max(18px, env(safe-area-inset-top, 0px)); }
  .shell.nav-open .sidebar { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.5); }
  .btn.menu-btn { display: inline-flex; }
  .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); top: env(safe-area-inset-top, 0px); }
  .page { padding: 22px max(16px, env(safe-area-inset-right, 0px)) 70px max(16px, env(safe-area-inset-left, 0px)); }
  .viewer { grid-template-columns: 1fr; }
  .set-grid { grid-template-columns: 1fr; gap: 14px; }
  h1.title { font-size: 36px; }
}
@media (max-width: 620px) {
  .top-right .chip.hide-sm { display: none; }
  .row { grid-template-columns: 40px minmax(0,1fr); }
  .row .th { width: 40px; height: 50px; }
  .row .right { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .row .right .btn { display: none; }
  .chart-wrap .lbl-svg { display: none; }
  .urow { grid-template-columns: 84px minmax(0,1fr) 74px; gap: 10px; }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tile { padding: 12px; gap: 10px; }
  .tile .ic { width: 30px; height: 30px; }
  .tile .v { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── library ── */
.add-bar { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; }
.add-bar .input { flex: 1 1 320px; min-width: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding-bottom: 90px; }
.modal .lib-grid { padding-bottom: 0; max-height: 60vh; overflow: auto; }
.lib-card { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.lib-card:hover { border-color: var(--line-2); }
.lib-card.off { cursor: default; }
.lib-card.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.lib-media { position: relative; aspect-ratio: 9/16; background: var(--bg-2); display: grid; place-items: center; color: var(--muted); max-width: 100%; }
.lib-media > img, .lib-media > div:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-media svg { width: 26px; height: 26px; }
.lib-media .tick { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.75); background: rgba(0,0,0,.35); display: grid; place-items: center; color: transparent; }
.lib-media .tick svg { width: 13px; height: 13px; }
.lib-card.sel .tick { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.lib-media .pv { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.lib-card:hover .pv, .lib-media .pv:focus-visible { opacity: 1; }
.lib-media .pv svg { width: 11px; height: 11px; }
.lib-media .dur { position: absolute; right: 8px; bottom: 8px; font: 500 11px var(--mono); padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; }
.lib-media .used { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 60px); }
.mini { font: 500 10.5px var(--sans); padding: 2px 6px; border-radius: 5px; background: rgba(69,211,154,.85); color: #04261a; }
.lib-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; text-align: center; font-size: 12.5px; }
.lib-state.bad { color: var(--bad); }
.lib-state.bad span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lib-foot { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; font-size: 12px; align-items: center; white-space: nowrap; overflow: hidden; }
.selbar { position: fixed; z-index: 40; left: calc(var(--sidebar) + 24px); right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: rgba(28,29,34,.92); border: 1px solid var(--line-2); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.spinner { width: 24px; height: 24px; border: 3px solid var(--surface-3); border-top-color: var(--run); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── studio ── */
.studio { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; }
.panel-l { position: sticky; top: 76px; padding: 14px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 96px); overflow-y: auto; }
.panel-l > * { flex-shrink: 0; }
.model-hero { position: relative; border-radius: 12px; padding: 16px 16px 12px; background: radial-gradient(120% 140% at 100% 0%, hsl(var(--h), 60%, 32%) 0%, transparent 60%), linear-gradient(160deg, hsl(var(--h), 30%, 16%), #101114); border: 1px solid var(--line-2); overflow: hidden; }
.mh-label { font: 500 10.5px var(--mono); letter-spacing: .16em; color: rgba(255,255,255,.65); }
.mh-name { font: 400 34px/1.05 var(--display); margin: 4px 0 12px; }
.mh-switch { display: flex; gap: 4px; flex-wrap: wrap; }
.mh-switch a { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.35); color: var(--text-2); border: 1px solid rgba(255,255,255,.1); }
.mh-switch a.on { background: var(--text); color: #111; }
.blk { display: flex; flex-direction: column; gap: 8px; }
.blk-h { display: flex; justify-content: space-between; align-items: center; }
.ref-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-tile, .ref-add { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); flex: none; padding: 0; }
.ref-tile.tall, .ref-add.tall { height: 96px; width: 56px; }
.ref-tile img, .ref-tile > div:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-tile .dur { position: absolute; left: 4px; bottom: 4px; font: 500 10px var(--mono); padding: 1px 4px; border-radius: 4px; background: rgba(0,0,0,.65); color: #fff; }
.ref-tile .rm { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ref-tile .rm svg { width: 10px; height: 10px; }
.ref-tile.char { cursor: pointer; width: 72px; height: 92px; }
.ref-tile.char .nm { position: absolute; inset: auto 0 0 0; font-size: 11px; font-weight: 600; padding: 12px 5px 4px; background: linear-gradient(transparent, rgba(0,0,0,.8)); text-align: left; }
.ref-tile.char.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.ref-add { display: grid; place-items: center; font-size: 22px; color: var(--muted); cursor: pointer; border-style: dashed; }
.ref-add:hover { color: var(--text); border-color: var(--brand); }
.linkish { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; }
.linkish:hover { color: var(--text); }
textarea.input.prompt { min-height: 150px; font-family: var(--sans); font-size: 13px; line-height: 1.55; }
.toggle { align-self: flex-start; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font-size: 12.5px; cursor: pointer; }
.toggle.on { color: var(--text); background: var(--surface-3); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.opt:first-child { grid-column: 1 / -1; }
.opt span { font-size: 11.5px; color: var(--muted); }
.opt select, .opt input { background: transparent; border: 0; outline: none; font-weight: 600; font-size: 14px; padding: 0; width: 100%; min-width: 0; }
.opt select option { background: var(--surface-2); }
.btn.gen { height: 50px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.hist { display: flex; flex-direction: column; gap: 14px; }
.hcard { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.hp-media { background: #000; display: grid; place-items: center; height: min(62vh, 560px); }
.hp-media video, .hp-media img { max-width: 100%; max-height: 100%; height: 100%; display: block; object-fit: contain; }
.hp-state { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; padding: 20px; text-align: center; }
.hp-state.bad { color: var(--bad); }
.hp-side { padding: 14px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line); min-width: 0; }
.hp-prompt { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.hp-prompt.open { -webkit-line-clamp: unset; }
.hp-refs { display: flex; gap: 6px; flex-wrap: wrap; }
.ref-mini { width: 40px; height: 50px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line-2); display: block; }
.ref-mini img, .ref-mini > div { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-chips span { font: 500 11.5px var(--mono); padding: 3px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); }
.hp-actions { margin-top: auto; display: flex; gap: 4px; align-items: center; }
a.tile { color: inherit; }
a.tile:hover { border-color: var(--line-2); background: var(--surface-2); }

@media (max-width: 1100px) {
  .studio { grid-template-columns: 1fr; }
  .panel-l { position: static; max-height: none; }
  .hcard { grid-template-columns: 1fr; }
  .hp-side { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 960px) { .selbar { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); } }
@media (max-width: 620px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .selbar .hide-sm { display: none; } .hp-media { height: 70vh; } }


/* ═══════════ Apple-style refinement ═══════════ */
body { background: var(--bg); font: 15px/1.47 var(--sans); letter-spacing: -0.01em; }
/* labels: sentence case, quiet grey */
.eyebrow, .nav-label, .crumb, .field > label, .lbl, .tile .k, table.t th, .mh-label, .brandmark small {
  font: 500 12.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted);
}
.eyebrow::before { display: none; }
.nav-label { padding: 14px 12px 6px; font-size: 12px; }
.crumb { font-size: 13px; color: var(--text-2); font-weight: 500; }
h1.title { font: 700 44px/1.06 var(--display); letter-spacing: -0.035em; margin: 6px 0 10px; }
h2.h2 { font: 600 21px/1.2 var(--display); letter-spacing: -0.025em; }
.lede { font-size: 17px; line-height: 1.5; color: var(--muted); letter-spacing: -0.015em; }
.mono, .num { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* sidebar like macOS */
.sidebar { background: rgba(22, 22, 24, 0.72); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border-right: 1px solid var(--line); padding: 20px 12px; }
.brandmark { padding: 4px 10px 20px; gap: 10px; }
.brandmark .glyph { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #d9d9de); color: #000; font: 700 15px var(--display); box-shadow: none; }
.brandmark b { font: 600 17px/1.1 var(--display); letter-spacing: -0.02em; }
.brandmark small { font-size: 11.5px; margin-top: 2px; }
.nav a { padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.nav a:hover { background: rgba(255,255,255,.06); }
.nav a.active { background: rgba(255,255,255,.1); box-shadow: none; color: var(--text); }
.nav a .count { background: var(--brand); color: #fff; font: 600 11px var(--sans); min-width: 20px; text-align: center; }
.side-foot { font-size: 12.5px; }

/* top bar: frosted */
.topbar { background: rgba(0,0,0,.6); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
.chip { height: 30px; border-radius: 999px; background: rgba(255,255,255,.06); border: 0; font-size: 13px; color: var(--text-2); }
.chip.ok { background: rgba(48,209,88,.12); color: var(--ok); }
.chip.bad { background: rgba(255,69,58,.12); color: var(--bad); }
.chip.money { background: rgba(48,209,88,.12); color: var(--ok); }
button.chip:hover { background: rgba(255,255,255,.1); }

.page { padding: 40px 40px 90px; max-width: 1320px; }

/* surfaces: soft, borderless-feeling */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.tile { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 18px 18px; }
.tile .ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.07); }
.tile .k { font-size: 13px; }
.tile .v { font: 600 28px/1.15 var(--display); letter-spacing: -0.03em; }
.tile.review .ic { background: rgba(255,159,10,.14); color: var(--review); }
.tile.run .ic { background: rgba(100,210,255,.14); color: var(--run); }
.tile.ok .ic { background: rgba(48,209,88,.14); color: var(--ok); }
.tile.bad .ic { background: rgba(255,69,58,.14); color: var(--bad); }

/* buttons: pills */
.btn { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }
.btn:hover { background: rgba(255,255,255,.16); }
.btn.primary { background: #f5f5f7; color: #000; }
.btn.brand { background: var(--brand); color: #fff; }
.btn.brand:hover { background: #2b95ff; }
.btn.ok { background: var(--ok); color: #00230b; }
.btn.bad { background: rgba(255,69,58,.14); color: var(--bad); border: 0; }
.btn.bad:hover { background: rgba(255,69,58,.22); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,.08); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 16px; }
.btn.gen { height: 52px; font-size: 17px; font-weight: 600; border-radius: 14px; }
.pill-btn { border: 0; background: rgba(255,255,255,.07); color: var(--text-2); height: 30px; }
.pill-btn.active { background: #f5f5f7; color: #000; }

/* iOS segmented control */
.seg { background: rgba(118,118,128,.24); border: 0; border-radius: 10px; padding: 2px; }
.seg button { border-radius: 8px; height: 28px; color: var(--text); font-weight: 500; }
.seg button.active { background: #636366; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); }

/* inputs */
.input, textarea.input, select.input { background: rgba(118,118,128,.16); border: 1px solid transparent; border-radius: 12px; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(10,132,255,.22); }
textarea.input { font-family: var(--sans); }
.check input, .choice input { accent-color: var(--brand); }

/* status pills */
.status { border: 0; height: 24px; padding: 0 10px; background: rgba(255,255,255,.08); font-weight: 500; }
.status.review { background: rgba(255,159,10,.15); color: var(--review); }
.status.approved { background: rgba(48,209,88,.15); color: var(--ok); }
.status.rejected, .status.failed, .status.skipped { background: rgba(255,69,58,.14); color: var(--bad); }
.status.running { background: rgba(100,210,255,.14); color: var(--run); }
.status.awaiting { background: rgba(191,90,242,.15); color: #bf5af2; }
.badge { border: 0; background: rgba(255,255,255,.08); color: var(--text-2); font-weight: 500; }
.badge.tg { background: rgba(48,209,88,.13); color: var(--ok); }

/* job rows */
.row { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); padding: 10px 14px 10px 10px; }
.row:hover { background: var(--surface-2); border-color: var(--line); }
.row .th { border-radius: 10px; }
.row .who { font-weight: 600; letter-spacing: -0.015em; }

/* chart */
.chart-card { padding: 24px 26px 22px; }
.chart-head .big { font: 600 34px/1 var(--display); letter-spacing: -0.035em; color: var(--ok); }
.axis { font: 12px var(--sans); }
.urow .track { height: 5px; background: rgba(255,255,255,.08); }
.urow .track span { background: var(--ok); }

/* library */
.add-bar { border-radius: 18px; padding: 8px; background: var(--surface); }
.add-bar .input { background: transparent; }
.lib-card { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.lib-card.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.lib-media .tick { border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); background: rgba(0,0,0,.25); }
.lib-card.sel .tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.lib-media .dur { font: 600 11px var(--sans); border-radius: 6px; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.mini { background: rgba(48,209,88,.9); color: #002a0e; font: 600 10.5px var(--sans); }
.selbar { border-radius: 20px; background: rgba(36,36,40,.78); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border: 1px solid var(--line-2); padding: 12px 14px 12px 20px; }

/* studio */
.panel-l { border-radius: 22px; padding: 16px; background: var(--surface); }
.model-hero { border-radius: 16px; border: 0; padding: 18px 18px 14px; background: radial-gradient(120% 130% at 100% 0%, hsl(var(--h), 70%, 28%) 0%, transparent 62%), #1a1a1d; }
.mh-label { color: rgba(255,255,255,.7); }
.mh-name { font: 700 32px/1.05 var(--display); letter-spacing: -0.035em; margin: 2px 0 14px; }
.mh-switch a { border: 0; background: rgba(255,255,255,.12); color: var(--text); }
.mh-switch a.on { background: #f5f5f7; color: #000; }
.ref-tile, .ref-add { border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.ref-add { border: 1.5px dashed var(--line-2); }
.ref-add:hover { border-color: var(--brand); color: var(--brand); }
.ref-tile.char.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.toggle { border: 0; background: rgba(255,255,255,.08); }
.toggle.on { background: rgba(10,132,255,.2); color: #5eb0ff; }
.opt { border: 0; border-radius: 12px; background: rgba(118,118,128,.16); }
.opt span { font-size: 12px; }
.hcard { border-radius: 20px; border: 1px solid var(--line); }
.hp-media { background: #050505; }
.hp-chips span { font: 600 12px var(--sans); border: 0; background: rgba(255,255,255,.08); border-radius: 7px; }
.ref-mini { border-radius: 8px; border: 0; }

/* gallery, review, modal */
.g-item, .rcard { border-radius: 18px; }
.modal { border-radius: 24px; background: rgba(28,28,30,.92); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border: 1px solid var(--line-2); }
.modal-bg { background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.viewer .stage { border-radius: 16px; }
.toast { border-radius: 14px; background: rgba(44,44,46,.92); backdrop-filter: blur(20px); border: 1px solid var(--line-2); }
.empty { border: 0; background: var(--surface); border-radius: 20px; padding: 56px 20px; }
.empty b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.auth-card { border-radius: 24px; padding: 34px 30px; }
.auth-card h1 { font: 700 30px/1.1 var(--display); letter-spacing: -0.03em; }
.set-grid h3 { font-size: 17px; letter-spacing: -0.02em; }
table.t td { border-bottom-color: var(--line); }
.skel { background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; }
@media (max-width: 960px) { .page { padding: 26px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px)); } h1.title { font-size: 34px; } }

/* ── posting ── */
.nav a .count.warn { background: var(--bad); }
.progress-card { padding: 20px 22px; margin-bottom: 22px; }
.pc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pc-big { font: 700 40px/1 var(--display); letter-spacing: -0.04em; }
.pc-big span { color: var(--muted); font-weight: 600; font-size: 26px; }
.pc-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 16px; overflow: hidden; }
.pc-bar span { display: block; height: 100%; background: var(--ok); border-radius: 4px; transition: width .4s; }
.phone-list { display: flex; flex-direction: column; gap: 26px; }
.phone-sec { display: flex; flex-direction: column; gap: 10px; }
.phone-h { display: flex; align-items: center; gap: 10px; }
.phone-h > div:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.phone-h b { font-size: 17px; letter-spacing: -0.02em; }
.phone-h .muted { font-size: 13px; }
.ph-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; flex: none; }
.ph-ic svg { width: 17px; height: 17px; }
.acc-card { padding: 14px; }
.acc-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.acc-h b { font-size: 15px; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.slot-c { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.slot-c.overdue { border-color: rgba(255,69,58,.5); background: rgba(255,69,58,.06); }
.slot-c.posted { opacity: .75; }
.ps-media { position: relative; width: 84px; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer; display: grid; place-items: center; color: var(--muted); max-width: 100%; }
.ps-media.sm { width: 56px; }
.ps-media img, .ps-media > div:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-media .ps-play { position: absolute; inset: auto auto 6px 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; color: #fff; }
.ps-media .ps-play svg { width: 9px; height: 9px; }
.ps-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.ps-empty svg { width: 20px; height: 20px; opacity: .5; }
.ps-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.ps-top { display: flex; gap: 8px; align-items: baseline; }
.ps-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.plan-rows { display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; padding: 12px 14px; align-items: center; }
.pr-acc { display: flex; flex-direction: column; min-width: 0; }
.pr-acc b { overflow: hidden; text-overflow: ellipsis; }
.pr-acc .muted { font-size: 12.5px; }
.pr-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pr-slot { display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: var(--bg-2); align-items: center; }
.pr-slot.overdue { box-shadow: inset 0 0 0 1px rgba(255,69,58,.45); }
.pr-info { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; font-size: 13px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ph-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ph-card-h { display: flex; gap: 10px; align-items: center; }
.ph-card-h > div:nth-child(2) { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.ph-card-h .muted { font-size: 13px; }
.ph-va { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--text-2); }
.ph-va svg { width: 14px; height: 14px; }
.ph-accs { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-chip { display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.08); color: var(--text); font-size: 13px; cursor: pointer; }
.acc-chip:hover { background: rgba(255,255,255,.14); }
.acc-chip span { color: var(--muted); font-size: 11.5px; }
.acc-chip.off { opacity: .55; }
@media (max-width: 760px) { .plan-row { grid-template-columns: 1fr; } .slots { grid-template-columns: 1fr; } }
#p-grid { display: flex; flex-direction: column; gap: 26px; }
.acc-link { color: inherit; display: inline-flex; gap: 4px; align-items: baseline; }
.acc-link:hover b { color: var(--brand); }
.own-pool { padding: 14px 16px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.own-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.own-item { width: 54px; aspect-ratio: 9/16; border-radius: 9px; overflow: hidden; flex: none; background: var(--bg-2); cursor: pointer; display: grid; place-items: center; }
.own-item img, .own-item > div { width: 100%; height: 100%; object-fit: cover; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.day-col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.day-col.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.day-col.past { opacity: .6; }
.day-h { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 4px; }
.day-slot { display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: var(--bg-2); align-items: flex-start; }
.day-slot.overdue { box-shadow: inset 0 0 0 1px rgba(255,69,58,.45); }
.drop svg { width: 18px; height: 18px; vertical-align: -3px; }
/* collapsible sidebar groups */
.nav-toggle { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; border-radius: 8px; padding: 14px 10px 6px 12px; }
.nav-toggle:hover { color: var(--text-2); }
.nav-toggle span:first-child { flex: 1; }
.nav-toggle .chev { width: 13px; height: 13px; transition: transform .18s ease; opacity: .7; }
.nav-group.collapsed .chev { transform: rotate(-90deg); }
.nav-group .nav { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.nav-group.collapsed .nav { display: none; }
.nav-sum { font: 600 11px var(--sans); padding: 1px 7px; border-radius: 20px; background: var(--brand); color: #fff; }
.nav-group + .nav-group:not([data-group]) { margin-top: 2px; }
/* trim */
.trim-btn { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 7px; border: 0; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.trim-btn svg { width: 12px; height: 12px; }
.trim-btn.warn { background: var(--warn); color: #2a1800; }
.ref-tile.trimmed { box-shadow: 0 0 0 2px #c6f24e; border-color: #c6f24e; }
.trim { display: flex; flex-direction: column; gap: 14px; }
.trim-stage { position: relative; background: #000; border-radius: 16px; height: min(58vh, 560px); display: grid; place-items: center; overflow: hidden; }
.trim-stage video { max-height: 100%; max-width: 100%; display: block; }
.trim-ph { height: 100%; }
.trim-bigplay { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.trim-bigplay svg { width: 22px; height: 22px; margin-left: 3px; }
.trim-bar { display: flex; gap: 10px; align-items: stretch; background: var(--bg-2); border-radius: 14px; padding: 8px; }
.trim-play { width: 52px; height: 56px; border-radius: 12px; padding: 0; flex: none; }
.trim-play svg { width: 18px; height: 18px; }
.trim-strip { position: relative; flex: 1; height: 56px; border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; cursor: pointer; }
.trim-frames { position: absolute; inset: 0; display: flex; }
.trim-frames > div { flex: 1; background-size: cover; background-position: center; }
.trim-shade { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.62); pointer-events: none; }
.trim-shade.l { left: 0; }
.trim-win { position: absolute; top: 0; bottom: 0; border: 3px solid #c6f24e; border-radius: 10px; cursor: grab; box-sizing: border-box; }
.trim-win:active { cursor: grabbing; }
.trim-h { position: absolute; top: 50%; width: 14px; height: 70%; transform: translateY(-50%); background: #c6f24e; border-radius: 4px; cursor: ew-resize; }
.trim-h.l { left: -8px; } .trim-h.r { right: -8px; }
.trim-h::after { content: ""; position: absolute; left: 6px; top: 30%; bottom: 30%; width: 2px; background: rgba(0,0,0,.45); border-radius: 1px; }
.trim-len { position: absolute; left: 8px; bottom: 4px; font: 600 11px var(--sans); background: rgba(0,0,0,.7); color: #fff; padding: 1px 6px; border-radius: 5px; pointer-events: none; }
.trim-head { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; left: 0; pointer-events: none; box-shadow: 0 0 6px rgba(0,0,0,.6); }
.trim-info { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.trim-acts { display: flex; gap: 8px; align-items: center; }
/* phone page */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.pf-card { padding: 20px 22px; margin-bottom: 16px; }
.pf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-top > b { font-size: 17px; letter-spacing: -0.02em; }
.pf-top .num { font-size: 17px; }
.pf-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.add-acc { padding: 18px 20px; margin-bottom: 16px; }
.add-acc-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.add-acc-row .field { min-width: 180px; }
.acc-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.acc-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: inherit; transition: background .12s; flex-wrap: wrap; }
.acc-row:hover { background: var(--surface-2); }
.acc-row > b { font-size: 16px; min-width: 160px; }
.acc-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.acc-row .dot.bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(255,69,58,.15); }
.acc-row .dot.ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(48,209,88,.15); }
.acc-row .dot.warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(255,159,10,.15); }
.acc-slots { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: center; }
.slot-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 12px; background: var(--bg-2); font-size: 13.5px; font-weight: 500; }
.chev-r { color: var(--muted); font-size: 20px; margin-left: auto; }
.ph-card.clickable { cursor: pointer; transition: background .12s; }
.ph-card.clickable:hover { background: var(--surface-2); }
@media (max-width: 620px) { .acc-slots { justify-content: flex-start; } .acc-row > b { min-width: 0; } }

/* niches */
.niche-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.niche { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: var(--surface); color: var(--text-2); cursor: pointer; text-align: left; font: inherit; min-width: 0; transition: background .15s, border-color .15s; }
.niche:hover { background: var(--surface-2); color: var(--text); }
.niche.active { border-color: var(--brand); color: var(--text); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.niche-ic svg { width: 20px; height: 20px; display: block; color: var(--brand); }
.niche-t { flex: 1; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niche-n { font-size: 12px; color: var(--text-3, var(--text-2)); font-variant-numeric: tabular-nums; }
.lib-media .nb { position: absolute; left: 36px; top: 9px; max-width: calc(100% - 80px); padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* character folders */
.modal.wide { width: min(860px, 100%); }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 64vh; overflow-y: auto; padding: 2px; }
.cp-item, .cp-add { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); padding: 0; cursor: pointer; }
.cp-item.static { cursor: default; }
.cp-item img, .cp-item > div:first-child { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.cp-item:not(.static):hover img { transform: scale(1.03); }
.cp-item.on { border-color: #c6f24e; box-shadow: 0 0 0 2px #c6f24e; }
.cp-tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: #c6f24e; color: #000; display: none; place-items: center; }
.cp-tick svg { width: 13px; height: 13px; }
.cp-item.on .cp-tick { display: grid; }
.cp-main { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; }
.cp-acts { position: absolute; inset: auto 0 0 0; display: flex; gap: 6px; justify-content: flex-end; padding: 22px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.cp-acts .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.cp-acts .btn svg { width: 12px; height: 12px; }
.cp-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; color: var(--text-2); font-size: 13px; font-weight: 600; text-align: center; }
.cp-add:hover { color: var(--text); background: var(--surface-2); }
.cp-add svg { width: 22px; height: 22px; transform: rotate(180deg); }
.cp-add small { font-weight: 400; color: var(--muted); font-size: 11.5px; padding: 0 10px; }
.ref-tile .cnt, .g-item .cnt { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; font-weight: 600; }
.ref-tile .cnt svg, .g-item .cnt svg { width: 11px; height: 11px; }
.g-item .cnt.big { top: 9px; right: 9px; font-size: 12px; padding: 3px 8px; border-radius: 999px; }
.g-item .cnt.big svg { width: 13px; height: 13px; }
.g-item .cdel { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.g-item .cdel svg { width: 11px; height: 11px; }
.g-item:hover .cdel, .g-item .cdel.sure, .g-item .cdel:focus-visible { opacity: 1; }
.g-item .cdel:hover, .g-item .cdel.sure { background: var(--bad); }
@media (hover: none) { .g-item .cdel { opacity: 1; } }

/* clickable references + lightbox */
button.ref-mini { padding: 0; cursor: zoom-in; position: relative; background: var(--bg-2); width: 54px; height: 68px; transition: transform .15s, box-shadow .15s; }
button.ref-mini:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--brand); }
.ref-mini .ref-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.18); }
.ref-mini .ref-play svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.lb-bg { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 48px 16px 64px; }
.lb-bg video, .lb-bg img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 12px; display: block; }
.lb-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-x svg { width: 16px; height: 16px; }
.lb-dl { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); }

/* approved → assign */
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.ap-card { padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; color: inherit; font: inherit; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.ap-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.ap-media { position: relative; aspect-ratio: 9/16; background: var(--bg-2); }
.ap-media img, .ap-media > div:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-model { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-play { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; }
.ap-play svg { width: 11px; height: 11px; }
.ap-foot { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px 11px; font-size: 12.5px; position: relative; padding-left: 24px; min-height: 52px; justify-content: center; }
.ap-foot .dot { position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: var(--muted); }
.ap-foot.open .dot { background: #ff9f0a; }
.ap-foot.planned .dot { background: var(--brand); }
.ap-foot.posted .dot { background: var(--ok); }
.ap-foot b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-foot .muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.asg-now .lbl { width: 100%; }
.asg-now.posted b { color: var(--ok); }
.asg-now .btn { margin-left: auto; }
.pill-btn:disabled { opacity: .4; cursor: not-allowed; }
.spinner.sm { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: -2px; border-top-color: currentColor; }
.btn.ready { background: var(--ok); color: #000; border-color: var(--ok); }

/* home-screen app (standalone): keep clear of the notch / home bar */
.topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); top: 0 !important; }
.sidebar { padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.lb-x { top: calc(14px + env(safe-area-inset-top, 0px)); }
.lb-dl { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#toasts { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 960px) {
  .page { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .input, select.input, textarea.input, textarea { font-size: 16px; } /* no auto-zoom on iPhone when typing */
  html, body { overflow-x: hidden; }
}
@media (max-width: 620px) {
  .niche-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .niche { padding: 10px 12px; }
  .ap-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cp-grid { grid-template-columns: 1fr 1fr; }
  .topbar .crumb, .topbar .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ───────── login ───────── */
.auth { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)); overflow: hidden; background: #05060a; isolation: isolate; }
.auth-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.reel-wall { position: absolute; left: 50%; top: 50%; width: 1700px; height: 1500px; display: flex; gap: 22px; transform: translate(-50%, -50%) perspective(1400px) rotateX(24deg) rotateZ(-9deg) scale(1.05); opacity: .55; }
.reel-col { flex: 1; overflow: hidden; }
.reel-track { display: flex; flex-direction: column; gap: 22px; animation: reelDrift var(--d) linear infinite; animation-direction: var(--dir); }
.reel-track i { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.reel-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%, transparent 70%, rgba(0,0,0,.35)); }
.reel-track i b { position: absolute; left: 50%; width: 34%; aspect-ratio: 1 / 2.2; transform: translateX(-50%); border-radius: 40% 40% 30% 30% / 22% 22% 12% 12%; background: radial-gradient(circle at 50% 14%, rgba(255,255,255,.16) 0 13%, transparent 14%), linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.02)); filter: blur(.5px); }
@keyframes reelDrift { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 11px)); } }
.auth-glow { position: absolute; left: 50%; top: 38%; width: 900px; height: 600px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(70, 110, 255, .32), rgba(120, 70, 255, .14) 55%, transparent); filter: blur(10px); }
.auth-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(5,6,10,.15), rgba(5,6,10,.82) 70%, #05060a 100%), linear-gradient(transparent 60%, #05060a); }
.auth-stack { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; animation: authIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-logo { width: 88px; height: 88px; }
.auth-name { font: 600 26px/1 var(--display, var(--sans)); letter-spacing: -.02em; color: #f5f5f7; }
.auth-card { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: rgba(20, 21, 28, .62); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
.auth-in { height: 46px; width: 100%; padding: 0 15px; border-radius: 13px; border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.35); color: #f5f5f7; font: 500 15px var(--sans); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.auth-in::placeholder { color: rgba(235,235,245,.38); }
.auth-in:focus { border-color: rgba(120, 150, 255, .9); box-shadow: 0 0 0 4px rgba(90, 120, 255, .18); background: rgba(0,0,0,.5); }
.auth-btn { height: 46px; margin-top: 4px; border: 1px solid rgba(140, 160, 255, .45); border-radius: 999px; cursor: pointer; color: #fff; font: 600 15px var(--sans); background: linear-gradient(180deg, rgba(92, 116, 255, .55), rgba(60, 64, 190, .55)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(50, 70, 220, .3); transition: filter .15s, transform .1s; }
.auth-btn:hover { filter: brightness(1.15); }
.auth-btn:active { transform: scale(.985); }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-note { margin: 4px 6px 0; text-align: center; font-size: 12px; line-height: 1.45; color: rgba(235,235,245,.45); }
.auth-intro { margin: 2px 4px 4px; font-size: 13px; line-height: 1.45; color: rgba(235,235,245,.6); }
@media (max-width: 620px) { .reel-wall { width: 1100px; height: 1300px; gap: 14px; } .reel-track { gap: 14px; } .auth-in, .auth-btn { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .reel-track, .auth-stack { animation: none; } }
.brandmark .glyph.logo { background: radial-gradient(circle at 50% 35%, #1d2150, #0b0c12 75%); padding: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brandmark .glyph.logo svg { width: 100%; height: 100%; display: block; }

/* ═════════ Aequus theme: same look as the login (deep navy, glass, blue-violet) ═════════ */
:root {
  --bg: #05060a;
  --bg-2: rgba(0, 0, 0, .32);
  --surface: rgba(20, 21, 30, .62);
  --surface-2: rgba(255, 255, 255, .055);
  --surface-3: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, .78);
  --muted: rgba(235, 235, 245, .48);
  --brand: #6e86ff;
  --brand-ink: #ffffff;
  --aq-grad: linear-gradient(180deg, rgba(98, 122, 255, .9), rgba(64, 66, 200, .9));
  --aq-glass: blur(22px) saturate(140%);
}
html { background: var(--bg); }
body {
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(70, 110, 255, .20), transparent 60%),
    radial-gradient(800px 600px at 8% 105%, rgba(120, 70, 255, .13), transparent 60%),
    radial-gradient(600px 400px at 40% 40%, rgba(40, 50, 120, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body::before { /* very faint grain so the dark doesn't band */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#root { position: relative; z-index: 1; }

/* chrome */
.sidebar { background: rgba(10, 11, 18, .72); border-right: 1px solid var(--line); backdrop-filter: var(--aq-glass); -webkit-backdrop-filter: var(--aq-glass); }
.topbar { background: rgba(6, 7, 12, .62); border-bottom: 1px solid var(--line); backdrop-filter: var(--aq-glass); -webkit-backdrop-filter: var(--aq-glass); }
.nav a { border-radius: 11px; }
.nav a:hover { background: rgba(255, 255, 255, .05); }
.nav a.active { background: linear-gradient(90deg, rgba(98, 122, 255, .22), rgba(98, 122, 255, .06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(130, 150, 255, .28); }
.nav a.active svg { opacity: 1; color: #a9b8ff; }
.nav a .count { background: rgba(110, 134, 255, .2); color: #c4ceff; font-family: var(--sans); font-weight: 600; }
.brandmark b { letter-spacing: -.01em; }

/* surfaces */
.card, .tile, .niche, .ap-card, .lib-card, .hp, .hist-card, .acc-card, .ph-card, .phone-card, .add-bar, .modal {
  background: var(--surface); border-color: var(--line);
  backdrop-filter: var(--aq-glass); -webkit-backdrop-filter: var(--aq-glass);
}
.card, .tile, .ap-card, .lib-card { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 50px rgba(0, 0, 0, .25); }
.tile .ic { background: rgba(255, 255, 255, .06); }
.tile.run .ic { color: #8fb4ff; background: rgba(110, 150, 255, .14); }
.modal { background: rgba(16, 17, 26, .9); border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.modal-bg { background: rgba(3, 4, 8, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* buttons */
.btn { background: rgba(255, 255, 255, .06); border-color: var(--line-2); }
.btn:hover { background: rgba(255, 255, 255, .1); }
.btn.brand, .btn.primary {
  background: var(--aq-grad); color: #fff; border: 1px solid rgba(150, 165, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 24px rgba(50, 70, 220, .28);
}
.btn.brand:hover, .btn.primary:hover { filter: brightness(1.12); background: var(--aq-grad); }
.btn.brand:disabled, .btn.primary:disabled { filter: saturate(.4) brightness(.7); box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .07); }

/* controls */
.input, select.input, textarea.input, textarea {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:focus, select.input:focus, textarea:focus { outline: none; border-color: rgba(120, 150, 255, .9); box-shadow: 0 0 0 4px rgba(90, 120, 255, .18); background: rgba(0, 0, 0, .5); }
.seg { background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px; }
.seg button { border-radius: 9px; }
.seg button.active { background: linear-gradient(180deg, rgba(110, 134, 255, .35), rgba(80, 90, 220, .28)); color: #fff; box-shadow: inset 0 0 0 1px rgba(140, 160, 255, .35); }
.pill-btn { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.pill-btn.active { background: var(--aq-grad); color: #fff; border-color: rgba(150, 165, 255, .45); }
.pill-btn.active b { opacity: .85; }
.chip { background: rgba(255, 255, 255, .05); border-color: var(--line-2); backdrop-filter: blur(10px); }

/* selections & accents */
.ref-tile.char.on, .lib-card.sel, .cp-item.on { border-color: #7d93ff; box-shadow: 0 0 0 2px #7d93ff, 0 0 24px rgba(110, 134, 255, .35); }
.lib-card.sel .tick, .cp-tick { background: #7d93ff; border-color: #7d93ff; color: #fff; }
.niche.active { border-color: rgba(130, 150, 255, .7); background: linear-gradient(180deg, rgba(98, 122, 255, .22), rgba(98, 122, 255, .08)); }
.niche-ic svg { color: #8fa2ff; }
.selbar { background: rgba(16, 17, 28, .82); border: 1px solid var(--line-2); backdrop-filter: var(--aq-glass); -webkit-backdrop-filter: var(--aq-glass); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.status.running { color: #8fb4ff; border-color: rgba(120, 160, 255, .4); }

/* page titles a touch brighter, like the login */
h1.title { letter-spacing: -.035em; background: linear-gradient(180deg, #ffffff, #c9cfe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: #8f9cd8; }
.lede, .sub { color: var(--muted); }
::selection { background: rgba(110, 134, 255, .45); }