/* Pilot styles. Default skin: Manrope, ink #14181F, sunset accent #E4572E. Other skins at the end (from the mock's
   brand.css); the server sets html[data-brand]. */
:root{
  --ink:#14181F; --muted:#5d6470; --faint:#8a909a; --line:rgba(20,24,31,.10); --line2:rgba(20,24,31,.16);
  --accent:#E4572E; --accent-dark:#C4441F; --wash:rgba(228,87,46,.07);
  --card:#F8F8F7; --bg:#fff;
  --ok:#1B9E74; --ok-bg:rgba(27,158,116,.09); --bad:#C94040; --bad-bg:rgba(201,64,64,.08);
  --warn:#B86E06; --warn-bg:rgba(201,122,10,.09);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#ECEDEF; --muted:#A3A8B0; --faint:#7d838c; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
    --card:#1C2027; --bg:#121519; --wash:rgba(228,87,46,.14); --ok-bg:rgba(27,158,116,.16); --bad-bg:rgba(201,64,64,.16); --warn-bg:rgba(201,122,10,.16);
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.6 'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.top{display:flex;align-items:center;gap:10px;height:64px;padding:0 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.top img{height:30px;width:auto;max-width:180px}
.top .wm{font-weight:800;font-size:19px;letter-spacing:-.02em}
.top .right{margin-left:auto;font-size:13px;color:var(--muted);text-align:right;line-height:1.35}
.testbar{background:#FFF4D6;color:#6b4a00;font-size:12.5px;text-align:center;padding:5px 12px}
main{max-width:560px;margin:0 auto;padding:22px 16px 120px}
main.wide{max-width:1180px}
h1{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.025em;margin:6px 0 10px}
h2{font-size:18px;font-weight:700;margin:26px 0 6px}
p{color:var(--muted);margin:6px 0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin:12px 0}
label.f{display:block;font-weight:700;font-size:14px;margin:14px 0 4px}
input[type=text],input[type=email],input[type=password],textarea,select{width:100%;padding:11px 12px;border:1.5px solid var(--line2);border-radius:10px;font:15px inherit;font-family:inherit;background:var(--bg);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
.btn{display:inline-block;border:1.5px solid var(--accent);background:var(--accent);color:#fff;border-radius:10px;padding:13px 18px;font:700 15px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.block{display:block;width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{background:var(--card)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.sbtn{border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 10px;font:700 13px inherit;font-family:inherit;cursor:pointer}
.sbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sbtn.ok.on{background:var(--ok);border-color:var(--ok);color:#fff}
.sbtn.warn.on{background:var(--warn);border-color:var(--warn);color:#fff}
.sbtn.bad.on{background:var(--bad);border-color:var(--bad);color:#fff}
.choice{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;margin:8px 0;cursor:pointer}
.choice.on{border-color:var(--accent);background:var(--wash)}
.choice input{margin-top:5px;accent-color:var(--accent);width:18px;height:18px}
.choice b{display:block;line-height:1.35}
.choice small{color:var(--muted);font-size:13.5px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;vertical-align:2px;margin-left:4px}
.tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)} .tag.n{background:var(--card);color:var(--muted);border:1px solid var(--line)}
.drop{border:2px dashed var(--line2);border-radius:12px;padding:26px 14px;text-align:center;color:var(--muted);cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--wash)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-top:10px}
.thumbs div{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--card)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs span{position:absolute;inset:auto 0 0 0;font-size:11px;background:rgba(0,0,0,.55);color:#fff;padding:1px 5px}
.err{color:var(--bad);font-weight:600;font-size:14px;margin-top:8px}
.note{font-size:13px;color:var(--faint)}
video{width:100%;border-radius:10px;background:#000;display:block}
#main{aspect-ratio:16/9}
.vtall{max-width:300px;margin:0 auto}
.vtall #main{aspect-ratio:9/16}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px;gap:4px;margin:12px 0}
.seg button{flex:1;border:0;background:transparent;border-radius:7px;padding:8px;font:700 14px inherit;font-family:inherit;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.shot{border:1.5px solid var(--line2);border-radius:12px;margin:10px 0;overflow:hidden}
.shot.approved{border-color:rgba(27,158,116,.5)} .shot.remake{border-color:rgba(201,122,10,.55)} .shot.dropped{opacity:.55}
.shot .row{display:flex;gap:12px;align-items:center;padding:10px}
.shot .row video,.shot .row img.th{width:150px;flex:none;aspect-ratio:16/9;object-fit:cover;border-radius:6px;cursor:pointer}
.shot .nm{flex:1;min-width:0}
.shot .nm b{display:block;line-height:1.3}
.shot .nm small{color:var(--faint);font-size:12.5px;display:block}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.panel{border-top:1px solid var(--line);padding:12px 14px;background:var(--card)}
.pinwrap{position:relative;cursor:crosshair;border-radius:6px;overflow:hidden;margin-top:8px}
.pinwrap img{width:100%;display:block}
.pin{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:3px solid #fff;background:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.pick img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;border:2px solid transparent;cursor:pointer}
.pick img.sel{border-color:var(--accent)}
.bar{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(rgba(255,255,255,0),var(--bg) 30%);padding:22px 16px 14px}
.bar .in{max-width:560px;margin:0 auto}
.qc{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--muted)}
.qc .hot{color:var(--bad);font-weight:700}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list td,table.list th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
table.list tr{cursor:pointer} table.list tr:hover td{background:var(--card)}
.grid2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.log{font-size:13px;max-height:420px;overflow:auto}
.log div{padding:5px 0;border-bottom:1px solid var(--line)}
.log b{font-weight:700}
.done{text-align:center;padding:30px 0}
.done .big{font-size:54px;color:var(--accent);line-height:1}
footer{max-width:560px;margin:30px auto 0;padding:0 16px 30px;font-size:12.5px;color:var(--faint)}
@media (max-width:520px){.shot .row{flex-wrap:wrap}.shot .row video,.shot .row img.th{width:100%}}

/* The brand switcher (only Simon sees it) */
.switcher{background:#FFF4D6;color:#6b4a00;font-size:12.5px;text-align:center;padding:6px 10px}
.switcher button{background:#fff;border:0;border-radius:6px;padding:2px 9px;margin-left:5px;font:700 12px inherit;font-family:inherit;color:#6b4a00;cursor:pointer}
.switcher button.on{background:#6b4a00;color:#fff}
.switcher a{color:#6b4a00;margin-left:6px}

/* ---- Skins (ported from the mock's brand.css, 10 Oct) ---- */
/* Grevon: grevon.ai styles v1.1 - Satoshi; navy #1C2128 bar with the white wordmark; teal #29BCAF; 4px buttons, 8px cards */
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Bold.woff2') format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/brand/Satoshi-Black.woff2') format('woff2');font-weight:800 900;font-display:swap}
html[data-brand="grevon"]{--accent:#29BCAF;--accent-dark:#1f9a8f;--wash:rgba(41,188,175,.08)}
html[data-brand="grevon"] body,html[data-brand="grevon"] button,html[data-brand="grevon"] input,
html[data-brand="grevon"] textarea,html[data-brand="grevon"] select{font-family:'Satoshi',system-ui,-apple-system,sans-serif}
html[data-brand="grevon"] .top{background:#1C2128;color:#fff;border-bottom-color:rgba(255,255,255,.07);height:68px}
html[data-brand="grevon"] .top img{height:28px;max-width:160px}
html[data-brand="grevon"] .top .right{color:rgba(255,255,255,.65)}
html[data-brand="grevon"] .top .right a{color:#fff}
html[data-brand="grevon"] .btn,html[data-brand="grevon"] .sbtn{border-radius:4px}
html[data-brand="grevon"] .card,html[data-brand="grevon"] .shot,html[data-brand="grevon"] .choice{border-radius:8px}
html[data-brand="grevon"] h1{font-weight:700;letter-spacing:-.01em}
html[data-brand="grevon"] .eyebrow{color:#29BCAF}

/* Pixel Juice: Plus Jakarta Sans; ink #171717; pink #F82A86; pill buttons (comes along; not tested this stretch) */
html[data-brand="pixeljuice"]{--accent:#F82A86;--accent-dark:#D91E70;--wash:rgba(248,42,134,.07)}
html[data-brand="pixeljuice"] body,html[data-brand="pixeljuice"] button,html[data-brand="pixeljuice"] input,
html[data-brand="pixeljuice"] textarea,html[data-brand="pixeljuice"] select{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
html[data-brand="pixeljuice"] .top img{border-radius:8px}
html[data-brand="pixeljuice"] .btn{border-radius:40px}