/* ══════════════════════════════════════════════════════════════════════════════
   Alef UI — the one design language of studio.aleftv.
   Monochrome like the logo: graphite surfaces, white is the one accent (primary
   actions, selection), colour only carries meaning (status). Every class is a-*,
   every token --a-*. Screens are built from these parts and the Jinja macros in
   templates/ui/macros.html — never a one-off style on a page.
   Reference page with every part: /ui
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  /* surfaces · each step is one layer up */
  --a-bg:#0b0b0d;          /* page */
  --a-surface:#141417;     /* cards, sidebar */
  --a-raised:#1c1c20;      /* controls on a card, hover rows */
  --a-overlay:#202025;     /* dialogs, menus */
  --a-line:#26262b;        /* hairlines */
  --a-line-strong:#34343a; /* control borders */
  /* ink */
  --a-ink:#f4f4f5; --a-muted:#a1a1aa; --a-faint:#6b6b74;
  /* the accent is white */
  --a-accent:#f4f4f5; --a-accent-ink:#0b0b0d; --a-accent-hover:#ffffff;
  --a-focus:0 0 0 2px var(--a-bg),0 0 0 4px rgba(244,244,245,.55);
  /* tones · text / soft background / vivid dot — by meaning only */
  --a-ok:#6ee7a8;   --a-ok-soft:rgba(52,211,153,.12);  --a-ok-vivid:#34d399;
  --a-warn:#fcd34d; --a-warn-soft:rgba(251,191,36,.12); --a-warn-vivid:#fbbf24;
  --a-err:#fda4af;  --a-err-soft:rgba(244,63,94,.13);   --a-err-vivid:#f43f5e;
  --a-info:#a5b4fc; --a-info-soft:rgba(129,140,248,.13); --a-info-vivid:#818cf8;
  --a-neutral:#a1a1aa; --a-neutral-soft:rgba(161,161,170,.12); --a-neutral-vivid:#71717a;
  /* shape */
  --a-r-lg:16px; --a-r:12px; --a-r-sm:9px; --a-r-xs:6px;
  /* type · Heebo, one scale */
  --a-font:'Heebo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --a-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --a-t1:28px; --a-t2:20px; --a-t3:16px; --a-t4:15px; --a-t5:13.5px; --a-t6:12px;
  /* sizes */
  --a-ctl-h:40px; --a-ctl-h-sm:32px; --a-ctl-h-lg:48px;
  /* rhythm · tight inside a unit, more between parts, most between sections */
  --a-in:6px; --a-part:16px; --a-grid:16px; --a-sec:40px;
  --a-page-pad:32px; --a-side-w:248px;
  --a-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  --a-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.a-app{margin:0;background:var(--a-bg);color:var(--a-ink);font-family:var(--a-font);font-size:var(--a-t4);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
.a-app button,.a-app input,.a-app textarea,.a-app select{font:inherit;color:inherit}
.a-app a{color:inherit;text-decoration:none}
.a-app ::selection{background:rgba(244,244,245,.25)}
.a-app [hidden]{display:none!important}
.a-app svg.lucide{width:18px;height:18px;stroke-width:1.75;flex:none}
:focus-visible{outline:none;box-shadow:var(--a-focus)}

.a-h1{font-size:var(--a-t1);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0}
.a-h2{font-size:var(--a-t2);font-weight:650;line-height:1.3;margin:0}
.a-h3{font-size:var(--a-t3);font-weight:600;line-height:1.35;margin:0}
.a-muted{color:var(--a-muted)} .a-faint{color:var(--a-faint)}
.a-small{font-size:var(--a-t5)} .a-xs{font-size:var(--a-t6)}
.a-mono{font-family:var(--a-mono);font-size:.92em}
.a-ltr{direction:ltr;unicode-bidi:isolate}
.a-num{font-variant-numeric:tabular-nums}
.a-label{font-size:var(--a-t6);font-weight:600;letter-spacing:.04em;color:var(--a-faint)}

/* ── shell · sidebar on the right (RTL) + main ───────────────────────────── */
.a-shell{display:grid;grid-template-columns:var(--a-side-w) minmax(0,1fr);min-height:100vh}
.a-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:22px 14px 16px;background:var(--a-surface);border-inline-end:1px solid var(--a-line)}
.a-side-logo{display:flex;align-items:center;padding:4px 10px 22px}
.a-side-logo img{height:22px;width:auto;display:block}
.a-side-logo .a-side-tag{margin-inline-start:10px;font-size:var(--a-t6);font-weight:600;letter-spacing:.08em;color:var(--a-faint);padding:2px 7px;border:1px solid var(--a-line-strong);border-radius:999px}
.a-nav{display:flex;flex-direction:column;gap:2px}
.a-nav-label{padding:16px 12px 6px}
.a-nav-item{display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;border-radius:var(--a-r-sm);color:var(--a-muted);font-weight:500;transition:background-color .12s,color .12s}
.a-nav-item:hover{background:var(--a-raised);color:var(--a-ink)}
.a-nav-item.on{background:var(--a-raised);color:var(--a-ink);font-weight:600}
.a-nav-item .a-count{margin-inline-start:auto;font-size:var(--a-t6);color:var(--a-faint);font-variant-numeric:tabular-nums}
.a-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--a-line)}
.a-main{min-width:0;padding:var(--a-page-pad) var(--a-page-pad) 80px}
.a-page{max-width:1280px;margin:0 auto}
.a-topbar{display:none}

/* ── page header ─────────────────────────────────────────────────────────── */
.a-crumbs{display:flex;align-items:center;gap:6px;font-size:var(--a-t5);color:var(--a-faint);margin-bottom:10px;flex-wrap:wrap}
.a-crumbs a{color:var(--a-muted)} .a-crumbs a:hover{color:var(--a-ink)}
.a-crumbs svg.lucide{width:14px;height:14px}
.a-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.a-head-text{display:flex;flex-direction:column;gap:var(--a-in);min-width:0}
.a-head-sub{color:var(--a-muted);font-size:var(--a-t4);max-width:760px}
.a-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.a-head-media{display:flex;gap:18px;align-items:center}
.a-section{margin-top:var(--a-sec)}
.a-section:first-child{margin-top:0}
.a-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.a-section-head .a-h2{display:flex;align-items:center;gap:10px}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.a-btn{--h:var(--a-ctl-h);--px:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 var(--px);
  border-radius:var(--a-r-sm);border:1px solid var(--a-line-strong);background:var(--a-raised);color:var(--a-ink);font-size:var(--a-t4);font-weight:550;
  line-height:1;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color .12s,border-color .12s,color .12s,transform .06s}
.a-btn:hover{background:#26262b;border-color:#3d3d44}
.a-btn:active{transform:scale(.98)}
.a-btn svg.lucide{width:17px;height:17px}
.a-btn.primary{background:var(--a-accent);border-color:var(--a-accent);color:var(--a-accent-ink);font-weight:600}
.a-btn.primary:hover{background:var(--a-accent-hover)}
.a-btn.ghost{background:transparent;border-color:transparent;color:var(--a-muted)}
.a-btn.ghost:hover{background:var(--a-raised);color:var(--a-ink)}
.a-btn.danger{background:var(--a-err-soft);border-color:transparent;color:var(--a-err)}
.a-btn.danger:hover{background:rgba(244,63,94,.2)}
.a-btn.sm{--h:var(--a-ctl-h-sm);--px:11px;font-size:var(--a-t5);border-radius:var(--a-r-xs)}
.a-btn.sm svg.lucide{width:15px;height:15px}
.a-btn.lg{--h:var(--a-ctl-h-lg);--px:22px;font-size:var(--a-t3)}
.a-btn.icon{--px:0;width:var(--h)}
.a-btn.block{width:100%}
.a-btn:disabled,.a-btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.a-btn.is-loading{pointer-events:none;color:transparent!important;position:relative}
.a-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--a-ink);border-top-color:transparent;animation:a-spin .7s linear infinite}
.a-btn.primary.is-loading::after{border-color:var(--a-accent-ink);border-top-color:transparent}
@keyframes a-spin{to{transform:rotate(360deg)}}
.a-btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── badges ──────────────────────────────────────────────────────────────── */
.a-badge{--tt:var(--a-neutral);--tb:var(--a-neutral-soft);--tv:var(--a-neutral-vivid);
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:var(--tb);color:var(--tt);
  font-size:var(--a-t6);font-weight:600;white-space:nowrap;line-height:1}
.a-badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tv)}
.a-badge svg.lucide{width:13px;height:13px}
.a-badge.outline{background:transparent;border:1px solid var(--a-line-strong);color:var(--a-muted)}
.tone-ok{--tt:var(--a-ok);--tb:var(--a-ok-soft);--tv:var(--a-ok-vivid)}
.tone-warn{--tt:var(--a-warn);--tb:var(--a-warn-soft);--tv:var(--a-warn-vivid)}
.tone-err{--tt:var(--a-err);--tb:var(--a-err-soft);--tv:var(--a-err-vivid)}
.tone-info{--tt:var(--a-info);--tb:var(--a-info-soft);--tv:var(--a-info-vivid)}
.tone-neutral{--tt:var(--a-neutral);--tb:var(--a-neutral-soft);--tv:var(--a-neutral-vivid)}

/* ── cards & surfaces ────────────────────────────────────────────────────── */
.a-card{background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-r-lg);padding:22px}
.a-card.flush{padding:0;overflow:hidden}
.a-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--a-part)}
.a-grid{display:grid;gap:var(--a-grid);grid-template-columns:repeat(auto-fill,minmax(var(--min,260px),1fr))}
.a-split{display:grid;gap:var(--a-grid);grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.a-stack{display:flex;flex-direction:column;gap:var(--a-grid)}

/* tile · a clickable card with a picture on top (series, actors, roles, locations) */
.a-tile{display:flex;flex-direction:column;background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-r-lg);overflow:hidden;
  transition:border-color .15s,transform .15s var(--a-ease),background-color .15s}
.a-tile:hover{border-color:#3a3a41;transform:translateY(-2px)}
.a-tile-media{position:relative;aspect-ratio:var(--ar,4/5);background:var(--a-raised);overflow:hidden}
.a-tile-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--a-ease)}
.a-tile:hover .a-tile-media img{transform:scale(1.03)}
.a-tile-media .a-badge{position:absolute;top:10px;inset-inline-start:10px;backdrop-filter:blur(8px);background:rgba(11,11,13,.62)}
.a-tile-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.a-tile-title{font-size:var(--a-t3);font-weight:600;line-height:1.3}
.a-tile-meta{font-size:var(--a-t5);color:var(--a-muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.a-tile-meta .sep{color:var(--a-faint)}
.a-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--a-faint);
  background:radial-gradient(ellipse at 50% 35%,#1f1f24,var(--a-raised) 70%)}
.a-placeholder svg.lucide{width:30px;height:30px;stroke-width:1.4}
.a-placeholder .a-initials{font-size:34px;font-weight:300;letter-spacing:.04em;color:#55555d}

/* add tile · the dashed "new" slot at the end of a grid */
.a-tile-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;border:1.5px dashed var(--a-line-strong);
  border-radius:var(--a-r-lg);color:var(--a-muted);background:transparent;cursor:pointer;font-weight:550;transition:border-color .15s,color .15s,background-color .15s}
.a-tile-add:hover{border-color:#55555d;color:var(--a-ink);background:rgba(255,255,255,.015)}

/* ── list rows ───────────────────────────────────────────────────────────── */
.a-list{background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-r-lg);overflow:hidden}
.a-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--a-line);min-height:64px}
.a-row:first-child{border-top:0}
a.a-row:hover,.a-row.clickable:hover{background:var(--a-raised);cursor:pointer}
.a-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a-row-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-row-sub{font-size:var(--a-t5);color:var(--a-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-row-end{display:flex;gap:8px;align-items:center;flex:none}
.a-row-num{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--a-r-sm);background:var(--a-raised);font-weight:650;font-variant-numeric:tabular-nums;color:var(--a-muted)}

/* ── avatar / thumb ──────────────────────────────────────────────────────── */
.a-avatar{--s:40px;width:var(--s);height:var(--s);flex:none;border-radius:50%;overflow:hidden;background:var(--a-raised);display:grid;place-items:center;
  font-size:calc(var(--s)*.38);font-weight:500;color:var(--a-muted);border:1px solid var(--a-line)}
.a-avatar img{width:100%;height:100%;object-fit:cover}
.a-avatar.xs{--s:26px;font-size:11px}
.a-avatar.sm{--s:32px}
.a-avatar.sq{border-radius:var(--a-r-sm)}
.a-avatar.lg{--s:96px}
.a-avatar.xl{--s:120px;border-radius:var(--a-r-lg)}

/* ── fact sheet · label / value pairs read from the same field definitions as the forms ── */
.a-facts{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px}
.a-fact-k,.a-fact-v{padding:12px 0;border-top:1px solid var(--a-line)}
.a-facts>.a-fact-k:first-child,.a-facts>.a-fact-k:first-child+.a-fact-v{border-top:0;padding-top:2px}
.a-fact-k{font-size:var(--a-t5);color:var(--a-faint);font-weight:500}
.a-fact-v{white-space:pre-wrap;word-break:break-word}
.a-fact-v.empty{color:var(--a-faint);font-style:normal}
.a-fact-v.mono{font-family:var(--a-mono);font-size:13px;line-height:1.65;direction:ltr;text-align:left}

/* ── forms ───────────────────────────────────────────────────────────────── */
.a-form{display:flex;flex-direction:column;gap:18px}
.a-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.a-form-grid .wide{grid-column:1/-1}
.a-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.a-field-label{font-size:var(--a-t5);font-weight:550;color:var(--a-ink);display:flex;gap:6px;align-items:baseline}
.a-field-label .req{color:var(--a-faint);font-weight:400}
.a-field-help{font-size:var(--a-t6);color:var(--a-faint);line-height:1.5}
.a-input,.a-textarea,.a-select{width:100%;height:var(--a-ctl-h);padding:0 13px;border-radius:var(--a-r-sm);border:1px solid var(--a-line-strong);
  background:var(--a-bg);color:var(--a-ink);font-size:var(--a-t4);transition:border-color .12s,box-shadow .12s}
.a-textarea{height:auto;min-height:96px;padding:10px 13px;line-height:1.6;resize:vertical}
.a-textarea.mono{font-family:var(--a-mono);font-size:13px;direction:ltr;text-align:left}
.a-input::placeholder,.a-textarea::placeholder{color:#5a5a62}
.a-input:hover,.a-textarea:hover,.a-select:hover{border-color:#44444b}
.a-input:focus,.a-textarea:focus,.a-select:focus{outline:none;border-color:#8a8a93;box-shadow:0 0 0 3px rgba(244,244,245,.08)}
.a-select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center}
.a-field.err .a-input,.a-field.err .a-textarea{border-color:var(--a-err-vivid)}
.a-field-err{font-size:var(--a-t6);color:var(--a-err)}
.a-input.ltr{direction:ltr;text-align:left}
.a-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--a-t4)}
.a-check input{appearance:none;width:18px;height:18px;border-radius:5px;border:1.5px solid #55555d;background:var(--a-bg);display:grid;place-items:center;margin:0;cursor:pointer}
.a-check input:checked{background:var(--a-accent);border-color:var(--a-accent)}
.a-check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--a-accent-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* segmented picker · one choice of a few */
.a-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--a-r-sm);background:var(--a-bg);border:1px solid var(--a-line-strong)}
.a-seg label{position:relative}
.a-seg input{position:absolute;opacity:0;pointer-events:none}
.a-seg span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:6px;font-size:var(--a-t5);font-weight:550;color:var(--a-muted);cursor:pointer;white-space:nowrap}
.a-seg span:hover{color:var(--a-ink)}
.a-seg input:checked+span{background:var(--a-accent);color:var(--a-accent-ink)}
.a-seg input:focus-visible+span{box-shadow:var(--a-focus)}

/* ── tabs · underline style, links ───────────────────────────────────────── */
.a-tabs{display:flex;gap:4px;border-bottom:1px solid var(--a-line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.a-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;color:var(--a-muted);font-weight:550;white-space:nowrap}
.a-tab:hover{color:var(--a-ink)}
.a-tab.on{color:var(--a-ink)}
.a-tab.on::after{content:"";position:absolute;inset-inline:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--a-accent)}
.a-tab .a-count{font-size:var(--a-t6);color:var(--a-faint);font-variant-numeric:tabular-nums}

/* chips · filters */
.a-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.a-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--a-line-strong);
  background:transparent;color:var(--a-muted);font-size:var(--a-t5);font-weight:550;cursor:pointer;white-space:nowrap}
.a-chip:hover{color:var(--a-ink);border-color:#44444b}
.a-chip.on{background:var(--a-accent);border-color:var(--a-accent);color:var(--a-accent-ink)}
.a-chip .a-count{font-size:var(--a-t6);opacity:.65}

/* ── empty state ─────────────────────────────────────────────────────────── */
.a-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 24px;border:1px dashed var(--a-line-strong);border-radius:var(--a-r-lg)}
.a-empty-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--a-raised);color:var(--a-muted);margin-bottom:6px}
.a-empty-icon svg.lucide{width:24px;height:24px}
.a-empty p{margin:0;color:var(--a-muted);max-width:420px}
.a-empty .a-btn-row{margin-top:10px}

/* ── media gallery · reference images on an entity ───────────────────────── */
.a-gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(var(--min,170px),1fr))}
.a-shot{position:relative;border-radius:var(--a-r);overflow:hidden;background:var(--a-raised);aspect-ratio:var(--ar,3/4);cursor:zoom-in;border:1px solid var(--a-line)}
.a-shot img{width:100%;height:100%;object-fit:cover;display:block}
.a-shot-tags{position:absolute;top:8px;inset-inline-start:8px;inset-inline-end:8px;display:flex;gap:5px;flex-wrap:wrap}
.a-shot-tags .a-badge{backdrop-filter:blur(8px);background:rgba(11,11,13,.66);color:var(--a-ink)}
.a-shot-tags .a-badge.tone-ok{color:var(--a-ok)}
.a-shot-cap{position:absolute;inset-inline:0;bottom:0;padding:26px 10px 9px;font-size:var(--a-t6);color:#e4e4e7;
  background:linear-gradient(transparent,rgba(0,0,0,.78));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-shot.locked{border-color:rgba(52,211,153,.4)}

/* dropzone · drag files in, or click */
.a-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;
  border:1.5px dashed var(--a-line-strong);border-radius:var(--a-r);color:var(--a-muted);cursor:pointer;aspect-ratio:var(--ar,3/4);
  transition:border-color .15s,background-color .15s,color .15s}
.a-drop:hover,.a-drop.over{border-color:#71717a;color:var(--a-ink);background:rgba(255,255,255,.02)}
.a-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.a-drop svg.lucide{width:22px;height:22px}
.a-drop .a-xs{color:var(--a-faint)}
.a-drop-progress{position:absolute;inset-inline:14px;bottom:14px;height:3px;border-radius:3px;background:var(--a-line-strong);overflow:hidden}
.a-drop-progress i{display:block;height:100%;width:0;background:var(--a-accent);transition:width .2s}

/* ── dialog ──────────────────────────────────────────────────────────────── */
.a-dialog{border:0;padding:0;margin:auto;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);border-radius:var(--a-r-lg);
  background:var(--a-overlay);color:var(--a-ink);box-shadow:var(--a-shadow);overflow:hidden}
.a-dialog.wide{width:min(880px,calc(100vw - 32px))}
.a-dialog.narrow{width:min(440px,calc(100vw - 32px))}
.a-dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.a-dialog[open]{display:flex;flex-direction:column;animation:a-pop .18s var(--a-ease)}
.a-dialog[open]::backdrop{animation:a-fade .18s ease}
@keyframes a-pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes a-fade{from{opacity:0}}
.a-dialog>form{display:flex;flex-direction:column;min-height:0;flex:1}
.a-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 0}
.a-dialog-head .a-h2{font-size:18px}
.a-dialog-head p{margin:4px 0 0;color:var(--a-muted);font-size:var(--a-t5)}
.a-dialog-body{padding:20px 22px;overflow:auto;min-height:0}
.a-dialog-foot{display:flex;justify-content:flex-start;gap:8px;padding:14px 22px;border-top:1px solid var(--a-line);background:rgba(0,0,0,.12)}
.a-dialog-foot .push{margin-inline-start:auto}

/* lightbox · one image, full */
.a-lightbox{width:min(1100px,calc(100vw - 32px))}
.a-lightbox .a-dialog-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;padding:22px}
.a-lightbox-img{display:grid;place-items:center;background:#000;border-radius:var(--a-r);min-height:360px;max-height:calc(100vh - 160px);overflow:hidden}
.a-lightbox-img img{max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;display:block}
.a-lightbox-side{display:flex;flex-direction:column;gap:16px}

/* ── menu (⋯) ────────────────────────────────────────────────────────────── */
.a-menu{position:relative;display:inline-block}
.a-menu-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;min-width:200px;padding:5px;border-radius:var(--a-r);
  background:var(--a-overlay);box-shadow:var(--a-shadow);display:none}
.a-menu.open .a-menu-list{display:block;animation:a-pop .14s var(--a-ease)}
.a-menu-item{display:flex;width:100%;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--a-ink);font-size:var(--a-t5);cursor:pointer;text-align:start}
.a-menu-item:hover{background:var(--a-raised)}
.a-menu-item.danger{color:var(--a-err)}
.a-menu-item svg.lucide{width:16px;height:16px;color:var(--a-muted)}
.a-menu-item.danger svg.lucide{color:var(--a-err)}
.a-menu-sep{height:1px;margin:5px 4px;background:var(--a-line)}

/* ── toast ───────────────────────────────────────────────────────────────── */
.a-toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.a-toast{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border-radius:var(--a-r);background:var(--a-accent);color:var(--a-accent-ink);
  font-weight:550;box-shadow:var(--a-shadow);pointer-events:auto;animation:a-toast-in .25s var(--a-ease)}
.a-toast.err{background:#3b1219;color:var(--a-err);box-shadow:var(--a-shadow),inset 0 0 0 1px rgba(244,63,94,.35)}
.a-toast svg.lucide{width:17px;height:17px}
.a-toast.out{opacity:0;transform:translateY(6px);transition:all .25s}
@keyframes a-toast-in{from{opacity:0;transform:translateY(10px)}}

/* ── callout ─────────────────────────────────────────────────────────────── */
.a-note{display:flex;gap:12px;padding:14px 16px;border-radius:var(--a-r);background:var(--tb,var(--a-neutral-soft));color:var(--a-ink);font-size:var(--a-t5)}
.a-note svg.lucide{color:var(--tt,var(--a-muted));margin-top:1px}

/* ── auth pages ──────────────────────────────────────────────────────────── */
.a-auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(255,255,255,.06),transparent 70%),var(--a-bg)}
.a-auth-card{width:min(400px,100%);display:flex;flex-direction:column;gap:26px}
.a-auth-logo{display:flex;justify-content:center;margin-bottom:6px}
.a-auth-logo img{height:30px}
.a-auth-box{background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-r-lg);padding:28px}
.a-auth-box .a-h2{margin-bottom:6px}
.a-auth-foot{text-align:center;font-size:var(--a-t5);color:var(--a-faint)}
.a-auth-foot a{color:var(--a-muted);text-decoration:underline;text-underline-offset:3px}

/* ── reference page helpers ──────────────────────────────────────────────── */
.a-spec{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:22px 0;border-top:1px solid var(--a-line);align-items:start}
.a-spec:first-of-type{border-top:0}
.a-swatch{width:100%;height:56px;border-radius:var(--a-r-sm);border:1px solid var(--a-line)}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1080px){.a-split{grid-template-columns:minmax(0,1fr)!important}}
@media (max-width:860px){
  :root{--a-page-pad:16px;--a-t1:24px}
  .a-shell{grid-template-columns:minmax(0,1fr)}
  .a-side{position:fixed;inset-block:0;inset-inline-start:0;width:280px;z-index:60;transform:translateX(100%);visibility:hidden;transition:transform .22s var(--a-ease),visibility 0s .22s;box-shadow:var(--a-shadow)}
  body.nav-open .a-side{transform:none;visibility:visible;transition:transform .22s var(--a-ease)}
  html,body.a-app{overflow-x:clip}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50}
  .a-topbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px;border-bottom:1px solid var(--a-line);position:sticky;top:0;background:rgba(11,11,13,.9);backdrop-filter:blur(10px);z-index:40}
  .a-topbar img{height:18px}
  .a-form-grid{grid-template-columns:1fr}
  .a-facts{grid-template-columns:1fr}
  .a-fact-k{padding-bottom:0;border-top:1px solid var(--a-line)}
  .a-fact-v{border-top:0;padding-top:4px}
  .a-lightbox .a-dialog-body{grid-template-columns:1fr}
  .a-spec{grid-template-columns:1fr}
}

/* ── cost ────────────────────────────────────────────────────────────────── */
.a-cost{display:inline-flex;align-items:center;gap:7px;height:var(--a-ctl-h);padding:0 13px;border-radius:var(--a-r-sm);border:1px solid var(--a-line-strong);color:var(--a-muted);font-size:var(--a-t5);white-space:nowrap}
.a-cost b{color:var(--a-ink);font-weight:650}
.a-cost svg.lucide{width:16px;height:16px}
.a-gen .a-row-num svg.lucide{width:16px;height:16px}

/* ── working · a call in progress ────────────────────────────────────────── */
.a-working{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--a-r);background:var(--a-info-soft);border:1px solid rgba(129,140,248,.25)}
.a-spinner{width:22px;height:22px;flex:none;border-radius:50%;border:2.5px solid rgba(165,180,252,.3);border-top-color:var(--a-info);animation:a-spin .8s linear infinite}

/* ── picker · choose pictures (refs, outfits) ────────────────────────────── */
.a-pick{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.a-pick-item{min-width:0;position:relative;display:flex;flex-direction:column;gap:5px;cursor:pointer;font-size:var(--a-t6);color:var(--a-muted)}
.a-pick-item input{position:absolute;opacity:0;pointer-events:none}
.a-pick-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--a-r-sm);border:2px solid transparent;opacity:.55;transition:all .12s}
.a-pick-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-pick-item input:checked+img{border-color:var(--a-accent);opacity:1}
.a-pick-item input:checked~span{color:var(--a-ink)}
.a-pick-item input:focus-visible+img{box-shadow:var(--a-focus)}
.a-pick-item.none{justify-content:flex-start}
.a-pick-item.none i,.a-pick-item.none .a-pick-none{display:grid;place-items:center;width:100%;aspect-ratio:3/4;border-radius:var(--a-r-sm);border:2px dashed var(--a-line-strong);color:var(--a-faint)}
.a-pick-item input:checked+.a-pick-none{border-color:var(--a-accent);border-style:solid;color:var(--a-ink)}

/* ── builder · the scene screen: setup | writing | prompts ───────────────── */
.a-builder{display:grid;grid-template-columns:320px minmax(0,1fr) minmax(0,1.25fr);gap:var(--a-grid);align-items:start}
.a-builder>.a-card{min-width:0}
.a-col-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.a-col-head .a-step{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--a-raised);font-size:var(--a-t6);font-weight:700;color:var(--a-muted)}
.a-castrow{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--a-line)}
.a-castrow:first-of-type{border-top:0;padding-top:0}
.a-castrow-head{display:flex;align-items:center;gap:10px}
.a-castrow-head .a-row-main{gap:0}
.a-shotcard{border:1px solid var(--a-line);border-radius:var(--a-r);overflow:hidden;background:var(--a-bg)}
.a-shotcard+.a-shotcard{margin-top:12px}
.a-shotcard-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--a-line);background:var(--a-surface)}
.a-shotcard-head .a-h3{flex:1;min-width:0}
.a-shotrefs{display:flex;gap:6px;padding:12px 14px 0;flex-wrap:wrap;direction:ltr}
.a-shotref{position:relative;width:52px}
.a-shotref img{width:52px;height:68px;object-fit:cover;border-radius:6px;display:block}
.a-shotref b{position:absolute;bottom:3px;inset-inline-start:3px;font-size:10px;font-weight:600;background:rgba(0,0,0,.72);padding:1px 4px;border-radius:4px;direction:ltr}
.a-shotcard .a-textarea{border:0;border-radius:0;background:transparent;min-height:260px;font-size:12.5px;padding:14px}
.a-shotcard .a-textarea:focus{box-shadow:none;background:rgba(255,255,255,.015)}
.a-shotcard-foot{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--a-line);background:var(--a-surface)}
.a-understood{padding:14px 16px;border-radius:var(--a-r);background:var(--a-raised);font-size:var(--a-t5);margin-bottom:12px}
/* mid screens: setup and writing stack on the right, the prompt keeps its own column beside them */
@media (max-width:1280px){.a-builder{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"setup prompt" "write prompt"}
  .a-builder .b-setup{grid-area:setup}.a-builder .b-write{grid-area:write}.a-builder .b-prompt{grid-area:prompt;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}}
@media (max-width:860px){.a-builder{grid-template-columns:minmax(0,1fr);grid-template-areas:"setup" "write" "prompt"}.a-builder .b-prompt{position:static;max-height:none}}

/* ── disclosure · a folded list (Claude's notes, long details) ───────────── */
.a-fold{border:1px solid var(--a-line);border-radius:var(--a-r);margin-bottom:12px;overflow:hidden}
.a-fold>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-weight:600;font-size:var(--a-t5);background:var(--a-surface)}
.a-fold>summary::-webkit-details-marker{display:none}
.a-fold>summary .chev{margin-inline-start:auto;transition:transform .15s;color:var(--a-faint)}
.a-fold[open]>summary .chev{transform:rotate(180deg)}
.a-fold-body{display:flex;flex-direction:column;gap:8px;padding:12px}

/* ── casting · the series' characters as portraits; tap to put one in the scene ── */
.a-castpick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.a-face{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0}
.a-face input{position:absolute;opacity:0;pointer-events:none}
.a-face-img{position:relative;aspect-ratio:3/4;border-radius:var(--a-r-sm);overflow:hidden;background:var(--a-raised);border:2px solid transparent;transition:border-color .12s,filter .15s,opacity .15s;filter:grayscale(.85);opacity:.5}
.a-face-img img{width:100%;height:100%;object-fit:cover;display:block}
.a-face-img .a-initials{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:var(--a-faint)}
.a-face:hover .a-face-img{opacity:.8;filter:grayscale(.3)}
.a-face-name{font-size:var(--a-t6);font-weight:600;color:var(--a-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-face input:checked+.a-face-img{border-color:var(--a-accent);filter:none;opacity:1}
.a-face input:checked~.a-face-name{color:var(--a-ink)}
.a-face input:focus-visible+.a-face-img{box-shadow:var(--a-focus)}
.a-face-check{position:absolute;top:5px;inset-inline-end:5px;width:20px;height:20px;border-radius:50%;background:var(--a-accent);color:var(--a-accent-ink);display:none;place-items:center}
.a-face-check svg.lucide{width:13px;height:13px;stroke-width:3}
.a-face input:checked+.a-face-img .a-face-check{display:grid}

/* ── wardrobe strip · one character's collection, pick one ───────────────── */
.a-outfit{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--a-r);background:var(--a-bg);border:1px solid var(--a-line)}
.a-outfit-head{display:flex;align-items:center;gap:10px}
.a-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;scroll-snap-type:x proximity}
.a-strip>.a-pick-item{flex:0 0 84px;scroll-snap-align:start}
.a-strip-add{flex:0 0 84px;display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:0;color:var(--a-muted);font-size:var(--a-t6)}
.a-strip-add span:first-child{display:grid;place-items:center;aspect-ratio:3/4;border-radius:var(--a-r-sm);border:2px dashed var(--a-line-strong);transition:border-color .12s,color .12s}
.a-strip-add:hover span:first-child{border-color:#71717a;color:var(--a-ink)}

/* ── location card · the chosen place, big; tap to change ────────────────── */
.a-loccard{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:var(--a-r);overflow:hidden;background:var(--a-raised);border:1px solid var(--a-line);cursor:pointer;padding:0;text-align:start;color:var(--a-ink)}
.a-loccard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--a-ease)}
.a-loccard:hover img{transform:scale(1.03)}
.a-loccard-cap{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:30px 12px 11px;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.a-loccard-cap b{font-size:var(--a-t3);font-weight:650}
.a-loccard-cap .a-badge{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.a-loccard.empty{display:grid;place-items:center;border:1.5px dashed var(--a-line-strong);background:transparent;color:var(--a-muted)}
.a-loccard.empty>div{display:flex;flex-direction:column;align-items:center;gap:8px}

/* location picker · big tiles in a dialog */
.a-locgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.a-loctile{position:relative;display:block;cursor:pointer;border-radius:var(--a-r);overflow:hidden;border:2px solid transparent;background:var(--a-raised)}
.a-loctile input{position:absolute;opacity:0;pointer-events:none}
.a-loctile img,.a-loctile .a-placeholder{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;position:relative}
.a-loctile span{display:block;padding:9px 11px;font-weight:600;font-size:var(--a-t5)}
.a-loctile:has(input:checked){border-color:var(--a-accent)}
.a-loctile:has(input:focus-visible){box-shadow:var(--a-focus)}

/* chips that are checkboxes (multi-select) */
label.a-chip{position:relative}
label.a-chip input{position:absolute;opacity:0;pointer-events:none}
label.a-chip:has(input:checked){background:var(--a-accent);border-color:var(--a-accent);color:var(--a-accent-ink)}
label.a-chip:has(input:focus-visible){box-shadow:var(--a-focus)}
.a-chipgroup{display:flex;gap:10px;align-items:baseline}
.a-chipgroup>.a-label{flex:0 0 46px}

/* autosave state */
.a-savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--a-t6);color:var(--a-faint)}
.a-savestate svg.lucide{width:14px;height:14px}
.a-savestate.saving{color:var(--a-muted)}
.a-savestate.err{color:var(--a-err)}

/* ── create · panel on the right, the feed beside it ─────────────────────── */
.a-create{display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px;align-items:start}
.a-create-panel{position:sticky;top:16px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 32px);overflow:auto}
.a-seg-block{display:flex}.a-seg-block label{flex:1}.a-seg-block span{width:100%;justify-content:center;height:36px}
.a-models{display:flex;flex-direction:column;gap:6px}
.a-model{position:relative;display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:var(--a-r-sm);border:1px solid var(--a-line-strong);cursor:pointer;transition:border-color .12s,background-color .12s}
.a-model input{position:absolute;opacity:0;pointer-events:none}
.a-model:hover{border-color:#4a4a52}
.a-model:has(input:checked){border-color:var(--a-accent);background:rgba(255,255,255,.04)}
.a-model-name{display:flex;align-items:baseline;gap:8px}
.a-model[hidden]{display:none}
.a-tray{display:flex;gap:8px;flex-wrap:wrap}
.a-tray-item{position:relative;width:64px}
.a-tray-item img{width:64px;height:84px;object-fit:cover;border-radius:7px;display:block}
.a-tray-item b{position:absolute;bottom:3px;inset-inline-start:3px;font-size:10px;font-weight:600;background:rgba(0,0,0,.72);padding:1px 4px;border-radius:4px}
.a-tray-item button{position:absolute;top:-6px;inset-inline-end:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--a-overlay);color:var(--a-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 1px var(--a-line-strong)}
.a-tray-item button svg.lucide{width:12px;height:12px}
.a-tray-add{width:64px;height:84px;border-radius:7px;border:1.5px dashed var(--a-line-strong);background:none;color:var(--a-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:var(--a-t6)}
.a-tray-add:hover{border-color:#71717a;color:var(--a-ink)}
.a-range{display:flex;align-items:center;gap:12px}
.a-range input[type=range]{flex:1;accent-color:var(--a-accent)}
.a-range output{min-width:46px;text-align:center;font-weight:650}
.a-create-go{display:flex;flex-direction:column;gap:10px;padding-top:6px;border-top:1px solid var(--a-line);position:sticky;bottom:-22px;background:var(--a-surface);padding-bottom:4px}
.a-estimate{display:flex;align-items:baseline;gap:10px}
.a-estimate b{font-size:20px}
.a-feed{background:var(--a-surface);border:1px solid var(--a-line);border-radius:var(--a-r-lg);overflow:hidden}
.a-feed-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 14px 0}
.a-feed-prompt{margin:10px 14px 12px;font-size:var(--a-t5);color:var(--a-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a-feed-wait{display:flex;align-items:center;gap:12px;margin:0 14px 14px;padding:22px;border-radius:var(--a-r);background:var(--a-bg);color:var(--a-muted);font-size:var(--a-t5)}
.a-feed-files{display:flex;gap:8px;padding:0 14px 14px;overflow-x:auto}
.a-feed-file{position:relative;flex:none;height:300px;aspect-ratio:var(--ar);border:0;padding:0;border-radius:var(--a-r-sm);overflow:hidden;cursor:zoom-in;background:var(--a-raised)}
.a-feed-file img{width:100%;height:100%;object-fit:cover;display:block}
.a-feed-foot{display:flex;gap:6px;padding:0 10px 10px}
.a-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;pointer-events:none}
.a-play svg.lucide{width:44px;height:44px;padding:11px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);fill:#fff}
.a-dur{position:absolute;bottom:8px;inset-inline-end:8px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.65);color:#fff}

/* ── library · masonry of everything ─────────────────────────────────────── */
.a-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.a-filters .a-select{width:auto;min-width:150px}
.a-masonry{columns:5 220px;column-gap:12px}
.a-lib{position:relative;display:block;width:100%;margin:0 0 12px;break-inside:avoid;border:0;padding:0;border-radius:var(--a-r);overflow:hidden;cursor:zoom-in;background:var(--a-raised)}
.a-lib img{width:100%;height:auto;display:block;transition:transform .4s var(--a-ease)}
.a-lib:hover img{transform:scale(1.025)}
.a-fav{position:absolute;top:8px;inset-inline-end:8px;color:#fcd34d}
.a-fav svg.lucide{width:16px;height:16px;fill:#fcd34d}

/* viewer */
.a-lightbox-img video{max-width:100%;max-height:calc(100vh - 160px);display:block}
.a-v-prompt{max-height:220px;overflow:auto;padding:10px 12px;border-radius:var(--a-r-sm);background:var(--a-bg);font-size:var(--a-t5);line-height:1.6;white-space:pre-wrap}
.a-lightbox .a-facts{grid-template-columns:90px minmax(0,1fr)}
.a-lightbox .a-fact-k,.a-lightbox .a-fact-v{padding:7px 0;font-size:var(--a-t5)}
[data-v-fav].on svg.lucide{fill:#fcd34d;color:#fcd34d}

@media (max-width:1080px){.a-create{grid-template-columns:minmax(0,1fr)}.a-create-panel{position:static;max-height:none}.a-feed-file{height:220px}}

/* attempts · every render of a shot, with its verdict */
.a-attempts{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;border-top:1px solid var(--a-line)}
.a-attempt{display:flex;gap:12px;align-items:flex-start}
.a-attempt-side{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.a-verdict{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.a-verdict .a-chip{height:28px;padding:0 10px}