/* Reelwood screen look: near-black ground, warm off-white type, one red REC accent. */
:root{
  --bg:#0a0a0a; --bg2:#151515; --bg3:#1f1f1f; --fg:#f4f2ee; --fg2:#a9a6a0; --line:rgba(244,242,238,.13);
  --rec:#c1121c; --ok:#5fb37a;
  --disp:'Bebas Neue','Arial Narrow',Impact,sans-serif; --body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--body)}
a{color:var(--fg)}
.wrap{max-width:980px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.lab{font-size:11px;font-weight:600;letter-spacing:1.54px;text-transform:uppercase;color:var(--fg2)}
.red{color:var(--rec)}
.muted{color:var(--fg2)}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mark{font-family:var(--disp);font-size:28px;letter-spacing:.02em;text-decoration:none;margin-right:auto}
.mark sup{font:500 11px var(--body)}
.rec{display:flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.4s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.usernav{display:flex;gap:8px;flex-wrap:wrap}
h1{font:400 clamp(48px,9vw,92px)/.88 var(--disp);text-transform:uppercase;margin:26px 0 8px;text-wrap:balance}
h1 .red{color:var(--rec)}
h2{font:400 28px/1.1 var(--disp);text-transform:uppercase;letter-spacing:.02em;margin:28px 0 8px}
h3{font:400 22px/1.15 var(--disp);text-transform:uppercase;margin:0}
.sub{color:var(--fg2);margin:0 0 18px}
.btn{font:600 12px var(--body);letter-spacing:1.2px;text-transform:uppercase;background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--fg2);border-color:var(--line)}
.btn.danger{background:transparent;color:#e06b6b;border-color:rgba(224,107,107,.4)}
.btn:disabled{opacity:.5;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--rec);outline-offset:2px}
.card{background:var(--bg2);border:1px solid var(--line);padding:18px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pcard{display:block;text-decoration:none;background:var(--bg2);border:1px solid var(--line);padding:18px 20px}
.pcard:hover{border-color:var(--fg2)}
.pcard .t{font:400 30px/1 var(--disp);text-transform:uppercase;margin:6px 0}
form.stack{display:grid;gap:12px;max-width:420px}
label{display:grid;gap:5px;font-size:13px;color:var(--fg2)}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:9px 10px;width:100%;min-width:0}
textarea{min-height:70px;resize:vertical}
.flash{margin-top:14px;padding:12px 14px;border:1px solid var(--line);background:var(--bg2)}
.flash.err{border-color:rgba(224,107,107,.5);color:#f0a0a0}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta>div{padding:12px 14px 12px 0;min-width:0}
.meta .v{font:400 22px/1.15 var(--disp);text-transform:uppercase}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 6px}
.tabs a{font:600 12px var(--body);letter-spacing:1.1px;text-transform:uppercase;color:var(--fg2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;text-decoration:none}
.tabs a[aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.row.done .t{color:var(--fg2);text-decoration:line-through}
.chk{width:22px;height:22px;border:1.5px solid var(--fg2);border-radius:4px;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.chk[aria-checked="true"]{background:var(--ok);border-color:var(--ok)}
.chk[aria-checked="true"]::after{content:"";width:6px;height:11px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.chip{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--fg2);white-space:nowrap}
.chip.me{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.slot{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.slot .tm{font:400 19px/1.25 var(--disp);font-variant-numeric:tabular-nums}
.slot.mine .tm{color:var(--rec)}
.slot.mine .wh{font-weight:600}
.slot.set .wh::before{content:"♪ ";color:var(--rec)}
.angle{border:1px solid var(--line);background:var(--bg2);padding:16px 18px;display:grid;gap:6px}
.angle.mine{border-color:var(--fg2)}
.angle .t{font:400 26px/1 var(--disp);text-transform:uppercase}
.list{list-style:none;margin:0;padding:0}
.list li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.due{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--rec);white-space:nowrap}
.tscroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;letter-spacing:1.54px;text-transform:uppercase;color:var(--fg2);font-weight:600;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.admin-sec{margin-top:26px}
.addform{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end;margin-top:12px;padding:14px;border:1px dashed var(--line)}
.addform .wide{grid-column:1/-1}
.empty{color:var(--fg2);padding:14px 0}
.foot{margin-top:46px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Client area */
.chip.warn{color:#e8b04a;border-color:rgba(232,176,74,.5)}
.meta .v.red{color:var(--rec)}
.plink{display:block;text-decoration:none;margin-top:12px}
.plink:hover{border-color:var(--fg2)}
.prog{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:14px}
.pstep{display:grid;gap:6px}
.pstep span{height:6px;background:var(--bg3);border-radius:3px}
.pstep.past span{background:var(--fg2)}
.pstep.now span{background:var(--rec)}
.pstep small{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--fg2);line-height:1.3}
.pstep.now small{color:var(--fg)}
@media (max-width:520px){.pstep small{display:none}.pstep.now small{display:block;grid-column:1/-1;white-space:nowrap}}
.pkg{display:grid;gap:8px}
.pkg .big{font:400 54px/1 var(--disp)}
.pkg .big small{font:500 14px var(--body);color:var(--fg2);margin-left:6px}
.bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--fg)}

/* Crew roster — styled like the homepage reel cards */
.rh{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:10px 0 22px}
.rh h1{margin:0}
.rh-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.rsearch{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 22px;margin:0 0 26px;background:var(--bg2)}
.rsearch input{border:0;background:transparent;padding:10px 6px;font-size:16px}
.rsearch input:focus-visible{outline:none}
.rsearch:focus-within{border-color:var(--fg2)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.cc{display:flex;flex-direction:column;gap:10px;min-width:0}
.cc.off{opacity:.5}
.cc .ph{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--bg3);text-decoration:none;isolation:isolate}
.cc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(1.06) brightness(.9);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.cc .ph:hover img{transform:scale(1.05);filter:none}
.cc .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));pointer-events:none}
.cc .ini{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(64px,9vw,110px)/1 var(--disp);color:rgba(244,242,238,.16);background:radial-gradient(120% 90% at 30% 20%,#262626,#121212)}
.cc .rate{position:absolute;top:12px;right:12px;z-index:2;background:rgba(10,10,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--fg)}
.cc .rate small{font-size:10px;color:var(--fg2);margin-left:2px}
.cc .rate.off{left:12px;right:auto;color:#e8b04a}
.cc .cmeta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:6px}
.cc .rl{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rec)}
.cc .nm{font:400 clamp(34px,3.4vw,44px)/.88 var(--disp);text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.cc .kit{margin:0;font-size:13px;color:var(--fg2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.acts a{color:var(--fg2);text-decoration:none}
.acts a:hover{color:var(--fg)}
.acts.big{margin:4px 0 22px;font-size:12px}
.stars{color:#e8b04a;letter-spacing:1px}
.photo-in{display:flex;gap:16px;align-items:center}
.photo-in .pv{flex:none;width:96px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg3);display:grid;place-items:center;font:400 34px/1 var(--disp);color:var(--fg2)}
.photo-in .pv img{width:100%;height:100%;object-fit:cover}
.photo-in label{flex:1}
.photo-in small{font-size:12px}
fieldset.roles{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px;margin:0}
fieldset.roles legend{font-size:13px;color:var(--fg2);padding:0 4px}
.pick{display:inline-flex;flex-direction:row;gap:0;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{font-size:12px;font-weight:600;letter-spacing:.6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--fg2)}
.pick input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pick input:focus-visible+span{outline:2px solid var(--rec);outline-offset:2px}
.roles .other{flex-basis:100%;margin-top:4px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:520px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cc .nm{font-size:28px}.cc .cmeta{left:12px;right:12px;bottom:10px}.cc .rate{top:8px;right:8px;padding:4px 9px;font-size:11px}.rh-side{align-items:flex-start;text-align:left}}
.addform[hidden]{display:none}
.addform .btnrow,.addform .photo-in{grid-column:1/-1}