:root{
  --navy:#0a2437; --navy-2:#143a55; --teal:#16dfd4; --teal-ink:#0a8478; --yellow:#f6f9cc; --paper:#fdfffd;
  --bg:#f3f6f7; --surface:#fdfffd; --raised:#ffffff; --ink:#0f2233; --muted:#5f6e7c; --line:#dfe6ea; --line-2:#cbd6dc;
  --side:#0a2437; --side-ink:#d9e4ea; --side-muted:#8ea3b2; --side-hover:rgba(22,223,212,.10);
  --accent:#0a8478; --accent-soft:rgba(22,223,212,.14); --danger:#b4232c;
  --s-review:#b45309; --s-review-bg:#fdf1dc; --s-changes:#b4232c; --s-changes-bg:#fbe5e6; --s-approved:#0a7a5c; --s-approved-bg:#ddf5ec;
  --s-ready:#0a6f8a; --s-ready-bg:#dff1f6; --s-neutral:#5f6e7c; --s-neutral-bg:#eaeff2;
  --shadow:0 1px 2px rgba(10,36,55,.06),0 8px 24px rgba(10,36,55,.06);
  --r:10px; --sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Roboto Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#071a28; --surface:#0b2134; --raised:#0f2a40; --ink:#e6eef2; --muted:#93a6b4; --line:#173a52; --line-2:#21506d;
  --side:#05131e; --accent:#16dfd4; --accent-soft:rgba(22,223,212,.12);
  --s-review:#f5b452; --s-review-bg:rgba(245,180,82,.13); --s-changes:#ff8a8f; --s-changes-bg:rgba(255,138,143,.13);
  --s-approved:#5fe0b5; --s-approved-bg:rgba(95,224,181,.12); --s-ready:#6fd3ef; --s-ready-bg:rgba(111,211,239,.12);
  --s-neutral:#93a6b4; --s-neutral-bg:rgba(147,166,180,.12); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}
.eyebrow{margin:0;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--raised);font-weight:500;font-size:14px;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fdfffd}
.btn.primary:hover{background:var(--navy-2)}
@media (prefers-color-scheme:dark){.btn.primary{background:var(--teal);border-color:var(--teal);color:#05131e}.btn.primary:hover{background:#5ff0e7}}
.btn.small{min-height:30px;padding:0 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-size:13px}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border:0;background:none;border-radius:8px;cursor:pointer;color:inherit}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(120% 90% at 50% 0%,#143a55 0%,#0a2437 55%,#050e18 100%)}
.login-card{width:100%;max-width:380px;display:grid;gap:10px;padding:32px 28px;border-radius:14px;background:rgba(10,36,55,.78);border:1px solid rgba(22,223,212,.22);color:#fdfffd;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-card img{border-radius:10px;margin-bottom:6px}
.login-card .eyebrow{color:var(--teal)}
.login-card h1{font-size:28px;font-weight:700}
.login-card .muted{color:#a9bcc8;margin:0 0 10px}
.login-card label{font-size:13px;color:#a9bcc8}
.login-card input{height:44px;padding:0 12px;border-radius:8px;border:1px solid rgba(253,255,253,.2);background:rgba(5,14,24,.5);color:#fdfffd;outline:none}
.login-card input:focus{border-color:var(--teal)}
.login-card .btn.primary{height:44px;justify-content:center;background:var(--teal);border-color:var(--teal);color:#05131e;font-weight:700}
.err{min-height:20px;margin:0;color:#ff9da2;font-size:13px}

/* shell */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:14px;padding:18px 14px;background:var(--side);color:var(--side-ink);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;color:inherit;font-size:17px;text-decoration:none!important}
.brand img{border-radius:8px}
.brand b{font-weight:700}
.side .brand{padding:2px 6px 6px}
.search{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:8px;background:rgba(253,255,253,.06);border:1px solid rgba(253,255,253,.08);color:var(--side-muted)}
.search:focus-within{border-color:var(--teal)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;color:#fdfffd}
.search input::placeholder{color:var(--side-muted)}
nav{display:grid;gap:2px}
.nav-h{margin:12px 8px 4px;font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--side-muted)}
.nav-a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--side-ink);font-size:14px;text-decoration:none!important}
.nav-a:hover{background:var(--side-hover)}
.nav-a.on{background:rgba(22,223,212,.16);color:#fdfffd;box-shadow:inset 3px 0 0 var(--teal)}
.nav-a .n{margin-left:auto;font:500 12px/1 var(--mono);color:var(--side-muted)}
.nav-a .n.hot{color:#05131e;background:var(--teal);padding:3px 7px;border-radius:99px}
.side-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 8px 0;border-top:1px solid rgba(253,255,253,.08);font-size:12px;color:var(--side-muted)}
.side-foot .link{color:var(--teal)}
.topbar{display:none}
.main{min-width:0;padding:32px 40px 64px}
.wrap{max-width:1160px;margin:0 auto;display:grid;gap:28px}

/* page heads */
.head{display:grid;gap:8px}
.head h1{font-size:30px;font-weight:700}
.head p{margin:0;max-width:68ch;color:var(--muted)}
.section{display:grid;gap:12px}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.section-h h2{font-size:17px;font-weight:700}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:grid;gap:10px;align-content:start;padding:18px;border-radius:var(--r);background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow);color:inherit;text-decoration:none!important;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card h3{font-size:16.5px;font-weight:700;line-height:1.3}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card.video{padding:0;overflow:hidden}
.card.video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#050e18}
.card.video .body{display:grid;gap:8px;padding:14px 18px 18px}

/* list rows */
.list{border:1px solid var(--line);border-radius:var(--r);background:var(--raised);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:13px 18px;border-top:1px solid var(--line);color:inherit;text-decoration:none!important}
.row:first-child{border-top:0}
.row:hover{background:var(--accent-soft)}
.row .t{display:grid;gap:2px;min-width:0}
.row .t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t span{font-size:12.5px;color:var(--muted)}
.row .meta{font:500 12.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.tag{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cnt{display:inline-flex;align-items:center;gap:4px;font:500 12px/1 var(--mono);color:var(--accent)}
.cnt svg{width:14px;height:14px}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:500;white-space:nowrap;color:var(--s-neutral);background:var(--s-neutral-bg)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.review{color:var(--s-review);background:var(--s-review-bg)}
.pill.changes{color:var(--s-changes);background:var(--s-changes-bg)}
.pill.approved,.pill.filmed{color:var(--s-approved);background:var(--s-approved-bg)}
.pill.ready{color:var(--s-ready);background:var(--s-ready-bg)}
select.pill{appearance:none;border:0;cursor:pointer;padding-right:24px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 13px) 10px,calc(100% - 9px) 10px;background-size:4px 4px;background-repeat:no-repeat}

/* hero on home */
.hello{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;padding:26px 28px;border-radius:14px;color:#fdfffd;background:radial-gradient(90% 140% at 100% 0%,#143a55 0%,#0a2437 60%)}
.hello h1{font-size:28px;font-weight:700}
.hello p{margin:6px 0 0;color:#b9cad5;max-width:60ch}
.stats{display:flex;gap:28px}
.stat b{display:block;font:500 28px/1 var(--mono);color:var(--teal)}
.stat span{font-size:12px;color:#b9cad5}

/* item page */
.item-head{display:grid;gap:10px}
.item-head h1{font-size:28px;font-weight:700;line-height:1.2}
.item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13.5px;color:var(--muted)}
.item-actions{display:flex;flex-wrap:wrap;gap:8px}
.note-box{margin:0;padding:12px 14px;border-radius:8px;border-left:3px solid var(--teal);background:var(--accent-soft);font-size:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.paper{border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.paper iframe{display:block;width:100%;border:0;min-height:70vh;background:#fff}
.md{padding:28px 32px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);max-width:100%;overflow-wrap:anywhere}
.md h1{font-size:24px;margin:0 0 12px}.md h2{font-size:19px;margin:26px 0 8px}.md h3{font-size:16px;margin:20px 0 6px}
.md p,.md li{max-width:72ch}.md code{font:13px var(--mono);background:var(--accent-soft);padding:1px 5px;border-radius:4px}
.md pre{overflow-x:auto;padding:12px;border-radius:8px;background:var(--bg)}.md pre code{background:none;padding:0}
.md table{border-collapse:collapse;display:block;overflow-x:auto;font-size:13.5px}.md th,.md td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.md mark{background:#fff59a;color:#111}
video{display:block;width:100%;border-radius:var(--r);background:#050e18;aspect-ratio:16/9}
.links{display:grid;gap:8px}
.lk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--raised);color:var(--ink)}
.lk b{grid-column:1;grid-row:1;font-weight:500}.lk>svg,.lk>.btn{grid-column:2;grid-row:1}
.lk span,.lk code{grid-column:1/-1;min-width:0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.lk code{font:12px var(--mono)}

/* feedback panel */
.panel{position:sticky;top:20px;display:grid;gap:12px;padding:16px;border-radius:var(--r);background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 40px);overflow:auto}
.panel h2{font-size:15px;font-weight:700}
.panel .hint{margin:0;font-size:12.5px;color:var(--muted)}
.composer{display:grid;gap:8px}
.composer textarea,.field{width:100%;min-height:92px;padding:10px 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);resize:vertical;outline:none}
.field{min-height:40px;height:40px}
.composer textarea:focus,.field:focus{border-color:var(--accent)}
.quote{position:relative;margin:0;padding:8px 30px 8px 10px;border-left:3px solid var(--teal);background:var(--accent-soft);border-radius:0 6px 6px 0;font-size:13px;font-style:italic;color:var(--muted)}
.quote button{position:absolute;top:4px;right:4px}
.thread{display:grid;gap:10px}
.msg{display:grid;gap:6px;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.msg.claude{border-color:rgba(22,223,212,.45);background:var(--accent-soft)}
.msg.done{opacity:.6}
.msg .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.msg .who b{color:var(--ink);font-weight:700}
.msg .who .acts{margin-left:auto;display:flex;gap:10px}
.msg p{margin:0;white-space:pre-wrap;font-size:14px}
.msg .on{font-size:12px}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line-2);border-radius:var(--r)}

/* files */
.drop{display:grid;place-items:center;gap:6px;padding:26px;border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--raised);text-align:center;color:var(--muted);cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop b{color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.form{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--raised)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--raised);font-size:13px;cursor:pointer}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fdfffd}
@media (prefers-color-scheme:dark){.chip.on{background:var(--teal);border-color:var(--teal);color:#05131e}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px 16px;border-radius:8px;background:var(--navy);color:#fdfffd;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50}

@media (max-width:1100px){.split{grid-template-columns:minmax(0,1fr) 300px;gap:18px}}
.fab{display:none}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:35;max-height:78vh;border-radius:14px 14px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .2s;box-shadow:0 -12px 40px rgba(0,0,0,.3)}
  .panel.open{transform:none}
  .fab{display:inline-flex;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:34;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:99px;background:var(--teal);color:#05131e;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer}
  .fab .dot{width:8px;height:8px;border-radius:50%;background:#05131e}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .app.nav-open .side{transform:none}
  .topbar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:30;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--side);color:#fdfffd}
  .main{padding:20px 16px 48px}
  .hello{grid-template-columns:1fr;padding:22px 20px}
  .two{grid-template-columns:1fr}
  .row{grid-template-columns:minmax(0,1fr) auto}
  .row .meta{display:none}
  .md{padding:20px 18px}
}