/* StoryStars operator console — dense, calm, brand-adjacent. */
:root{
  --cream:#fdf7ee; --cream-2:#f7ece0; --card:#fffdf9; --ink:#3a2540; --ink-2:#2c1c33;
  --muted:#7a6a80; --muted-2:#a494a8; --line:#eaddcf; --line-2:#e0d0bf;
  --coral:#ec6a4f; --coral-deep:#d1543c; --amber:#f2a63e; --plum:#6b3f7a;
  --berry:#c65b6b; --sky:#bcd8e6; --green:#5f9068;
  --radius:14px; --radius-sm:9px;
  --shadow:0 18px 40px -28px rgba(120,60,40,.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font:14px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased;
}
a{color:var(--coral-deep)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}

/* ---- shell ---- */
.top{
  display:flex;align-items:center;gap:16px;padding:12px 20px;
  background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.brand span:first-child{color:var(--coral)}
.brand small{font-weight:600;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.top .spacer{flex:1}
.health{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2)}
.dot.ok{background:var(--green)} .dot.bad{background:var(--coral)}

.layout{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:18px;
  padding:18px;align-items:start}
/* Single column: the sidebar must NOT be sticky, or it hovers over the detail
   panel as soon as the operator scrolls down. */
@media(max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr)}
}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);min-width:0}
.panel h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:13px 15px;border-bottom:1px solid var(--line);font-weight:700}
.panel .body{padding:13px 15px}
.side{position:sticky;top:74px;display:grid;gap:14px;max-height:calc(100vh - 92px);
  overflow:auto;align-self:start}

/* ---- filters + project list ---- */
.filters{display:flex;flex-wrap:wrap;gap:5px;padding:11px 13px;border-bottom:1px solid var(--line)}
.chip{padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:11.5px;
  font-weight:600;color:var(--muted)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.plist{max-height:46vh;overflow:auto}
.queue{max-height:34vh;overflow:auto}
.pitem{display:block;width:100%;text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);
  border-left:3px solid transparent}
.pitem:hover{background:var(--cream-2)}
.pitem.on{background:var(--cream-2);border-left-color:var(--coral)}
.pitem .row{display:flex;align-items:center;gap:8px}
.pitem .name{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .meta{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}

/* ---- status pills ---- */
.pill{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--cream-2);color:var(--muted);white-space:nowrap}
.pill.review{background:#fdf0d8;color:#9a6a12}
.pill.delivered{background:#e3f1e5;color:#3f6b48}
.pill.failed{background:#fbe3df;color:#a83b28}
.pill.running,.pill.animating,.pill.imaging,.pill.casting,.pill.narrating,.pill.scoring,
.pill.planning,.pill.assembling{background:#e6eff5;color:#3c6a86}
.pill.review_cast,.pill.review_scenes{background:#fdf0d8;color:#9a6a12}
.pill.approved{background:#e3f1e5;color:#3f6b48}
.pill.ready{background:#fdf0d8;color:#9a6a12}
.pill.rejected{background:#fbe3df;color:#a83b28}
.pill.hold{background:#efe6f3;color:#6b3f7a}

/* ---- detail ---- */
.head{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.head h1{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.head .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.actions{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.btn{padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:700;
  border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.btn:hover{border-color:var(--muted-2)}
.btn.primary{background:var(--coral);border-color:var(--coral);color:#fff}
.btn.primary:hover{background:var(--coral-deep)}
.btn.ghost{background:transparent}
.btn.small{padding:4px 9px;font-size:11.5px;border-radius:7px}
.btn.ok{color:#3f6b48;border-color:#bcd8c2}
.btn.no{color:#a83b28;border-color:#eec4bc}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.grid{display:grid;gap:14px;padding:16px 18px}
.cast{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.scenes{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.card{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.card .cap{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px}
.card .cap b{font-size:12.5px}
.card .cap .pill{margin-left:auto}
.card .pad{padding:10px}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--cream-2)}
.thumbs .lbl{position:relative}
.thumbs .lbl span{position:absolute;left:5px;bottom:5px;background:rgba(44,28,51,.72);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px}
.scene-media{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink-2)}
video.scene-media{background:#000}
.rowbtns{display:flex;gap:5px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--line)}
.narr{font-size:12.5px;color:var(--ink);background:var(--cream);border:1px solid var(--line);
  border-radius:8px;padding:8px 9px;margin:0 10px 9px;line-height:1.45}
.small{font-size:11.5px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:11px}
audio{width:100%;height:32px;margin:6px 0 2px}

textarea.edit{width:100%;min-height:64px;border:1px solid var(--line-2);border-radius:8px;
  padding:8px;font-size:12.5px;line-height:1.45;resize:vertical;background:#fff}
.editrow{display:grid;gap:6px;padding:0 10px 10px}
.editrow label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}

.queue li,.events li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.queue li:last-child,.events li:last-child{border-bottom:0}
.events{max-height:300px;overflow:auto}
.empty{padding:28px 18px;text-align:center;color:var(--muted)}

.login{max-width:380px;margin:14vh auto;padding:26px;text-align:center}
.login input{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;margin:14px 0}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;padding:11px 16px;
  border-radius:10px;font-size:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);
  transition:.2s;pointer-events:none;z-index:60;max-width:420px}
.toast.on{opacity:1;transform:none}
.toast.bad{background:var(--coral-deep)}

/* ---- new-film modal ---- */
.modal{position:fixed;inset:0;background:rgba(44,28,51,.5);backdrop-filter:blur(3px);
  z-index:50;overflow:auto;padding:24px 16px;display:block}
.modal[hidden]{display:none!important}
.sheet{max-width:860px;margin:0 auto;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 40px 90px -40px rgba(60,30,20,.6);overflow:hidden}
.sheet__head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.sheet__head h2{font-size:17px;letter-spacing:-.02em;font-weight:800}
.sheet__head .x{margin-left:auto;font-size:20px;line-height:1;color:var(--muted);padding:4px 8px}
.sheet__body{padding:18px 20px 4px}
.sheet__foot{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--card);
  border-top:1px solid var(--line);position:sticky;bottom:0}
.sheet__foot .grow{flex:1}

.step{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  font-weight:800;margin:18px 0 9px}
.step:first-child{margin-top:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:640px){.row2,.row3{grid-template-columns:1fr}}
.field{display:grid;gap:5px}
.field label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{padding:9px 11px;border:1px solid var(--line-2);
  border-radius:9px;background:#fff;font-size:13.5px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--coral);
  outline-offset:-1px;border-color:var(--coral)}
.field .hint{font-size:11.5px;color:var(--muted-2)}
.field.bad input,.field.bad select{border-color:var(--coral);background:#fff6f4}

.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{padding:7px 12px;border-radius:9px;border:1px solid var(--line-2);background:#fff;
  font-size:12.5px;font-weight:600}
.opt:hover{border-color:var(--muted-2)}
.opt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.opt[disabled]{opacity:.4;cursor:not-allowed}
.opt .tag2{font-size:10px;color:var(--amber);font-weight:800;margin-left:5px}
.opt.on .tag2{color:#ffd9a0}

.storylist{display:grid;gap:8px}
.story{display:block;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:11px;background:#fff}
.story:hover{border-color:var(--muted-2)}
.story.on{border-color:var(--coral);background:#fff6f2;box-shadow:0 0 0 2px rgba(236,106,79,.16)}
.story b{font-size:13.5px}
.story .meta2{font-size:11.5px;color:var(--muted);margin-top:3px}
.story p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}

.castgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.castcard{border:1px solid var(--line-2);border-radius:12px;background:#fff;overflow:hidden}
.castcard.req{border-color:var(--amber)}
.castcard.filled{border-color:var(--green)}
.castcard__top{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line)}
.castcard__top b{font-size:12.5px}
.castcard__top .rm{margin-left:auto;color:var(--muted-2);font-size:16px;line-height:1;padding:0 4px}
.drop{position:relative;display:block;aspect-ratio:3/4;background:var(--cream-2);cursor:pointer;
  display:grid;place-items:center;text-align:center}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop span{font-size:12px;color:var(--muted-2);font-weight:600;z-index:1}
.castcard__fields{padding:9px 11px;display:grid;gap:7px}
.castcard__fields input,.castcard__fields select{padding:7px 9px;font-size:12.5px;
  border:1px solid var(--line-2);border-radius:8px;width:100%}
.mini{display:grid;grid-template-columns:1fr 70px;gap:6px}

.notice{padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;margin-top:10px}
.notice.warn{background:#fdf0d8;color:#8a5d10}
.notice.info{background:#eaf1f6;color:#375a70}
.notice.err{background:#fbe3df;color:#a83b28}
.result{padding:14px;border-radius:12px;background:#e9f3ea;color:#325c3c;font-size:13px;line-height:1.6}

/* ---- style picker with sample images ---- */
.stylegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stylecard{border:1px solid var(--line-2);border-radius:11px;background:#fff;overflow:hidden;
  text-align:left;padding:0;display:block;width:100%}
.stylecard:hover{border-color:var(--muted-2)}
.stylecard.on{border-color:var(--coral);box-shadow:0 0 0 2px rgba(236,106,79,.18)}
.stylecard__img{position:relative;aspect-ratio:16/9;background:var(--cream-2);display:block;
  width:100%;object-fit:cover}
.stylecard__ph{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;
  color:var(--muted-2);text-align:center;padding:6px}
.stylecard__cap{padding:7px 9px 9px}
.stylecard__cap b{font-size:12.5px;display:block}
.stylecard__cap span{font-size:11px;color:var(--muted);line-height:1.35;display:block;margin-top:2px}
.stylecard .rec{color:var(--amber);font-weight:800;font-size:10px;letter-spacing:.04em}

/* Single-column layout: the sidebar must drop out of sticky positioning, or it
   rides over the detail panel as soon as the page scrolls. Kept last so it wins
   over the .side rule above. */
@media(max-width:1100px){
  .side{position:static;max-height:none;overflow:visible}
  .plist{max-height:none}
  .queue{max-height:40vh}
}

/* ---- photo vs character comparison ---- */
#lightbox{padding:20px 16px;z-index:60}
.compare{max-width:1180px;margin:0 auto;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(60,30,20,.65)}
.compare__head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--card);
  border-bottom:1px solid var(--line)}
.compare__head h3{font-size:16px;letter-spacing:-.01em}
.compare__head .x{margin-left:auto;font-size:22px;line-height:1;color:var(--muted);padding:2px 8px}
.compare__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
@media(max-width:760px){.compare__grid{grid-template-columns:1fr}}
.compare__pane{background:var(--cream-2);position:relative;display:flex;flex-direction:column}
.compare__pane figcaption{position:absolute;left:10px;top:10px;background:rgba(44,28,51,.78);
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;z-index:2}
.compare__pane img{width:100%;height:min(66vh,660px);object-fit:contain;background:#fff;display:block}
.compare__foot{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--card);
  border-top:1px solid var(--line)}
.compare__foot .grow{flex:1;font-size:12px;color:var(--muted)}
.thumbs .lbl{cursor:zoom-in}

/* ---- wardrobe continuity, shown per scene ---- */
.wardrobe{margin:0 10px 9px;padding:7px 9px;border:1px dashed var(--line-2);border-radius:8px;
  background:#fffaf4;font-size:11.5px;color:var(--muted);display:grid;gap:3px}
.wardrobe b{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.wardrobe span{line-height:1.4}