/* Cerebro — built on the Virtual Johnny Studios design system (dark). */
:root {
  --surface-0:#0b0a14; --surface-1:#16142a; --surface-2:#1f1b3a; --line:#2e2a4d; --line-strong:#6e68a0;
  --text:#f4f3f8; --text-2:#c9c6de; --muted:#9a96b8; --accent:#a98aff; --accent-strong:#ff7cda; --on-accent:#0b0a14;
  --holo: linear-gradient(135deg,#cdff8a 0%,#7cf2df 20%,#7eb4ff 40%,#a98aff 60%,#ff7cda 80%,#ffb37c 100%);
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif; --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"Barlow","Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --glow:0 24px 64px rgba(157,124,255,.35); --elev:0 30px 60px rgba(0,0,0,.45);
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--surface-0); color:var(--text); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
body { background: radial-gradient(1200px 600px at 85% -10%, rgba(169,138,255,.14), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(124,242,223,.07), transparent 60%), var(--surface-0); min-height:100vh; }
[hidden] { display:none !important; }
.muted { color:var(--muted); } .small { font-size:14px; }
button { font:inherit; color:inherit; cursor:pointer; }

/* wordmark + the one allowed glitch */
.wordmark { font-family:var(--display); font-size:64px; line-height:.95; letter-spacing:.015em; position:relative; display:inline-block; }
.wordmark.sm { font-size:34px; }
.glitch::before, .glitch::after { content:attr(data-text); position:absolute; inset:0; overflow:hidden; }
.glitch::before { clip-path: inset(24% 0 66% 0); transform:translateX(7%); background:var(--surface-0); text-shadow:-0.03em 0 #1be7ff, 0.03em 0 #ff2ed2; animation: jit 300ms steps(3) 1; }
.glitch::after  { clip-path: inset(60% 0 36% 0); transform:translateX(-5%); background:var(--surface-0); text-shadow:-0.03em 0 #1be7ff, 0.03em 0 #ff2ed2; }
@keyframes jit { 0%{transform:translateX(12%)} 50%{transform:translateX(2%)} 100%{transform:translateX(7%)} }
.studios { font-family:var(--cond); font-weight:600; letter-spacing:.42em; font-size:13px; color:var(--muted); margin-top:6px; }
.studios.sm { letter-spacing:.22em; font-size:12px; margin-top:2px; }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { text-align:center; padding:48px 40px; border-radius:24px; background:rgba(22,20,42,.7); border:1px solid var(--line); box-shadow:var(--elev); backdrop-filter:blur(20px); width:min(420px,100%); }
.login-card form { margin-top:32px; display:grid; gap:12px; }
input, textarea, select { font:inherit; color:var(--text); background:var(--surface-0); border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px; width:100%; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* buttons */
.btn { font-family:var(--cond); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:13px; border-radius:12px; padding:10px 16px; border:1px solid var(--line-strong); background:transparent; white-space:nowrap; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow); }
.btn.primary:hover { background:var(--accent-strong); }
.btn.ghost { border-color:var(--line); }
.btn.sm { padding:6px 10px; font-size:12px; border-radius:8px; }
.btn:disabled { opacity:.4; cursor:default; }

/* header */
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px clamp(16px,4vw,64px) 8px; flex-wrap:wrap; }
.stats { display:flex; gap:8px; flex-wrap:wrap; }
.pill { font-family:var(--cond); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--text-2); display:inline-flex; gap:6px; align-items:center; }
.pill b { color:var(--text); font-weight:600; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--muted); }
.st-draft .dot{background:var(--muted)} .st-approved .dot{background:#7eb4ff} .st-due .dot{background:#ffb37c; box-shadow:0 0 10px #ffb37c}
.st-posting .dot{background:#7cf2df} .st-posted .dot{background:#cdff8a} .st-failed .dot{background:#ff7cda} .st-skipped .dot{background:#3e3b55}

.nextup { margin:8px clamp(16px,4vw,64px) 0; padding:16px 20px; border-radius:24px; position:relative; overflow:hidden; background:var(--surface-1); border:1px solid var(--line); display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.nextup::before { content:""; position:absolute; inset:0; background:var(--holo); opacity:.13; pointer-events:none; }
.nextup .label { font-family:var(--cond); font-weight:600; letter-spacing:.18em; font-size:12px; color:var(--muted); text-transform:uppercase; }
.nextup .big { font-family:var(--display); font-size:32px; line-height:1; letter-spacing:.015em; }
.nextup .grow { flex:1; min-width:200px; position:relative; }

/* tabs */
.tabs { display:flex; gap:4px; padding:20px clamp(16px,4vw,64px) 0; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs button { background:none; border:none; padding:10px 14px; font-family:var(--cond); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; }
.tabs button.on { color:var(--text); border-color:var(--accent); }
.count { color:#ffb37c; }
main { padding:24px clamp(16px,4vw,64px) 96px; }

/* day blocks */
.day { margin-bottom:48px; }
.day-head { display:flex; align-items:baseline; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.day-head h2 { font-family:var(--display); font-weight:400; font-size:32px; line-height:1; letter-spacing:.015em; margin:0; }
.day-head .sub { font-family:var(--cond); font-weight:600; letter-spacing:.18em; color:var(--muted); font-size:13px; text-transform:uppercase; flex:1; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

.card { background:rgba(22,20,42,.85); border:1px solid var(--line); border-radius:24px; padding:16px; display:flex; flex-direction:column; gap:12px; position:relative; }
.card.is-due { border-color:#ffb37c; box-shadow:0 0 0 1px #ffb37c40, 0 20px 50px rgba(255,179,124,.12); }
.card.is-posted { opacity:.78; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.net { display:flex; gap:8px; align-items:center; font-weight:600; }
.net i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.time { font-family:var(--cond); font-weight:600; letter-spacing:.1em; color:var(--text-2); font-size:14px; }
.clip { display:flex; gap:12px; align-items:center; }
.thumb { width:64px; height:114px; border-radius:12px; overflow:hidden; background:var(--surface-0); flex:none; position:relative; border:1px solid var(--line); cursor:pointer; padding:0; }
.thumb video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.thumb::after { content:"▶"; position:absolute; inset:auto 6px 6px auto; font-size:10px; background:rgba(11,10,20,.7); border-radius:6px; padding:2px 5px; }
.clip-meta .hook { font-family:"Heebo",var(--sans); font-weight:600; font-size:16px; line-height:1.35; }
.clip-meta .who { font-size:14px; color:var(--muted); }
textarea.caption { min-height:176px; resize:vertical; font-family:"Heebo",var(--sans); font-size:15px; line-height:1.5; unicode-bidi:plaintext; }
input.title { font-size:14px; }
.counter { font-size:12px; color:var(--muted); text-align:end; margin-top:-8px; }
.counter.over { color:#ff7cda; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions .spacer { flex:1; }
.posted-link { font-size:14px; color:var(--accent); word-break:break-all; }
.err { font-size:13px; color:#ff7cda; }

/* library */
.lib { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.lib .item { background:var(--surface-1); border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.lib video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#000; }
.lib .meta { padding:12px; }
.lib .id { font-family:var(--cond); font-weight:600; letter-spacing:.12em; font-size:12px; color:var(--muted); }
.lib .uses { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.lib .uses i { width:8px; height:8px; border-radius:2px; display:inline-block; }

/* tables */
table { width:100%; border-collapse:collapse; font-size:14px; }
td, th { text-align:start; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-family:var(--cond); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--muted); }

.player { background:var(--surface-1); border:1px solid var(--line); border-radius:24px; padding:16px; color:var(--text); max-width:min(420px,92vw); }
.player::backdrop { background:rgba(11,10,20,.8); backdrop-filter:blur(6px); }
.player video { width:100%; max-height:76vh; border-radius:12px; display:block; margin-bottom:12px; background:#000; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface-2); border:1px solid var(--line-strong); padding:10px 18px; border-radius:999px; box-shadow:var(--elev); font-size:14px; z-index:10; }
.empty { color:var(--muted); padding:48px 0; text-align:center; }
@media (max-width:600px){ .wordmark{font-size:48px} .grid{grid-template-columns:1fr} .day-head .sub{flex-basis:100%;order:3} .day-head .btn{margin-left:auto} }