:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --sunk:#F5F7F9; --ink:#15202E; --muted:#5B6676; --line:#D5DBE2;
  --primary:#15202E; --on-primary:#FFFFFF; --focus:#1B6FD8; --ok:#1E9E5A; --danger:#C21F35;
  --red:#D7263D; --blue:#1B6FD8; --yellow:#E9AE00; --green:#1E9E5A; --iron:#3A4250; --white:#9AA4B1;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E141C; --surface:#16202B; --sunk:#111A24; --ink:#E8EDF3; --muted:#93A0B1; --line:#263341;
    --primary:#E8EDF3; --on-primary:#0E141C; --focus:#5AA0FF; --iron:#8C97A6; --white:#C9D1DB;
  }
}
:root[data-theme="dark"]{
  --bg:#0E141C; --surface:#16202B; --sunk:#111A24; --ink:#E8EDF3; --muted:#93A0B1; --line:#263341;
  --primary:#E8EDF3; --on-primary:#0E141C; --focus:#5AA0FF; --iron:#8C97A6; --white:#C9D1DB;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
img{max-width:100%}
a{color:var(--blue)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
header.top{padding:28px 0 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.top-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand h1{font:800 clamp(40px,7vw,64px)/.9 var(--display);letter-spacing:-.01em;margin:0}
.brand-row{display:flex;align-items:center;gap:14px}
.logo{width:clamp(52px,8vw,72px);height:auto;flex:none}
.tag{display:block;margin-top:6px;font:600 18px/1 var(--display);color:var(--muted)}
.brand p{margin:8px 0 0;color:var(--muted);max-width:52ch}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{position:relative}
.search input{width:min(300px,70vw);padding:10px 12px 10px 36px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--surface);padding:9px 14px;border-radius:10px;font-weight:600}
.btn:hover{background:var(--sunk)}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn.primary:hover{opacity:.9}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted);padding:6px 8px}
.btn.ghost:hover{color:var(--ink);background:var(--sunk)}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Layout */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding:28px 0 60px}
@media (max-width:820px){.layout{grid-template-columns:1fr;gap:16px;padding-top:16px}}

/* Barbell sleeve of categories */
.sleeve{position:relative;list-style:none;margin:0;padding:0}
.sleeve::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:6px;border-radius:3px;
  background:linear-gradient(90deg,#9aa3ad,#dfe4ea 45%,#8a939d);opacity:.9}
.cat-btn{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:6px 8px 6px 0;border-radius:10px}
.cat-btn:hover .cat-name{text-decoration:underline;text-underline-offset:3px}
.cat-btn[aria-pressed="true"] .cat-name{font-weight:700}
.cat-btn[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cat-name{flex:1;font-weight:500}
.cat-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px;padding-right:6px}
.plate{--c:var(--iron);flex:none;width:48px;height:48px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 50%, var(--bg) 0 13%, #0000 14%),
             radial-gradient(circle at 50% 50%, #0000 0 38%, rgba(0,0,0,.18) 39% 41%, #0000 42%),
             var(--c);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.12)}
.plate.sm{width:14px;height:14px;box-shadow:none;background:radial-gradient(circle, var(--surface) 0 20%, #0000 22%), var(--c)}
.plate.md{width:22px;height:22px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.cat-btn.all .plate{background:radial-gradient(circle, var(--bg) 0 13%, #0000 14%), conic-gradient(var(--red) 0 60deg,var(--blue) 0 120deg,var(--yellow) 0 180deg,var(--green) 0 240deg,var(--iron) 0 300deg,var(--white) 0)}
.cat-desc{color:var(--muted);font-size:14px;margin:14px 0 0;padding-left:60px}
@media (max-width:820px){
  .sleeve{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
  .sleeve::before{display:none}
  .cat-btn{width:auto;flex:none;padding:6px 12px 6px 6px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;gap:8px}
  .cat-btn[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
  .cat-btn .plate{width:24px;height:24px}
  .cat-count{display:none}
  .cat-desc{display:none}
}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar h2{font:700 30px/1 var(--display);margin:0}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}

/* Thread list */
.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;padding:16px 18px;border-top:1px solid var(--line);align-items:start;cursor:pointer}
.row:first-child{border-top:0}
.row:hover{background:var(--sunk)}
.row.pinned{background:linear-gradient(90deg,color-mix(in srgb,var(--yellow) 12%,transparent),transparent 40%)}
.score{text-align:center}
.score b{display:block;font:700 26px/1 var(--display);font-variant-numeric:tabular-nums}
.score span{font-size:12px;color:var(--muted)}
.row h3{margin:0 0 4px;font-size:18px;line-height:1.3;font-weight:600}
.row h3 a{color:inherit;text-decoration:none}
.excerpt{margin:0 0 8px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);background:var(--sunk);border:1px solid var(--line);padding:2px 9px 2px 6px;border-radius:999px}
.chip.solved{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.chip.pin{border-color:color-mix(in srgb,var(--yellow) 60%,var(--line))}
.who-inline{display:inline-flex;align-items:center;gap:6px}
.av{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--line);flex:none}
.av.lg{width:36px;height:36px}
.side-stat{text-align:right;font-size:14px;color:var(--muted);white-space:nowrap}
.side-stat b{font:700 22px/1 var(--display);color:var(--ink);display:block}
@media (max-width:560px){.row{grid-template-columns:44px minmax(0,1fr)}.side-stat{display:none}}

.empty{padding:48px 24px;text-align:center;color:var(--muted)}
.empty h3{color:var(--ink);font:700 26px/1.1 var(--display);margin:0 0 6px}
.notice{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--yellow);padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:15px}

/* Thread view */
.back{margin-bottom:12px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.post h1{font:700 clamp(28px,4.5vw,40px)/1.05 var(--display);margin:8px 0 14px}
.byline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.byline strong{color:var(--ink);font-weight:600}
.content{margin:16px 0 0;max-width:72ch;overflow-wrap:anywhere}
.content p{margin:0 0 .8em}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:16px}
.vote{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-weight:600}
.vote[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.vote svg{width:16px;height:16px}
.replies-head{font:700 24px/1 var(--display);margin:30px 0 12px}
.reply{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px}
.reply.accepted{border-color:var(--ok);box-shadow:inset 4px 0 0 var(--ok)}
.accepted-tag{color:var(--ok);font-weight:700;font-size:14px;display:inline-flex;gap:4px;align-items:center}
.composer-inline{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:16px}
textarea,input[type=text],input[type=number],select{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--sunk);padding:10px 12px}
textarea{min-height:110px;resize:vertical}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.hint{font-size:13px;color:var(--muted)}

/* Logbook attachments */
.log{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:560px}
.log-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;background:var(--sunk);border-bottom:1px solid var(--line)}
.log-head strong{font:700 20px/1.1 var(--display)}
.log-head span{font-size:13px;color:var(--muted)}
.log table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.log td{padding:8px 14px;border-top:1px solid var(--line)}
.log tr:first-child td{border-top:0}
.log td.n{text-align:right;white-space:nowrap;color:var(--muted)}
.log td.n b{color:var(--ink);font-weight:600}
.pr{display:flex;align-items:center;gap:18px;padding:16px}
.pr .big{font:800 56px/.9 var(--display);font-variant-numeric:tabular-nums}
.pr .big small{font-size:24px;font-weight:600;color:var(--muted)}
.pr .sub{font-size:14px;color:var(--muted)}
.pr .sub b{color:var(--ink)}

/* Dialog */
dialog{border:0;border-radius:16px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 40px);background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,15,22,.55)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 0}
.dlg-head h2{font:700 30px/1 var(--display);margin:0}
.dlg-body{padding:16px 20px 20px;display:grid;gap:14px}
label.f{display:grid;gap:6px;font-weight:600;font-size:14px}
.cat-pick{display:flex;flex-wrap:wrap;gap:6px}
.cat-pick label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 6px;font-weight:500;cursor:pointer}
.cat-pick input{position:absolute;opacity:0;pointer-events:none}
.cat-pick input:checked + label{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.cat-pick input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.att-rows{display:grid;gap:6px}
.att-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 76px 32px;gap:6px;align-items:center}
.att-row input{padding:8px}
.att-labels{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 76px 32px;gap:6px;font-size:12px;color:var(--muted)}
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr) 90px 80px;gap:8px}
.live{font-size:14px;color:var(--muted)}
.live b{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Auth ---------- */
.auth-box{display:flex;align-items:center;gap:8px}
.auth-box .who{display:flex;align-items:center;gap:8px;font-size:14px}
.gate{max-width:420px;margin:60px auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px}
.gate h2{font:700 32px/1 var(--display);margin:0 0 6px}
.gate p.lead{color:var(--muted);margin:0 0 20px}
.gate .f{margin-bottom:12px}
.gate .row{display:flex;gap:10px;margin-top:6px}
.gate .row .btn{flex:1;justify-content:center;text-align:center}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.msg{font-size:14px;margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--sunk);border:1px solid var(--line)}
.msg.bad{border-color:var(--danger);color:var(--danger)}
.msg.good{border-color:var(--ok);color:var(--ok)}
.switch{background:none;border:0;color:var(--blue);padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.skeleton{height:96px;border-top:1px solid var(--line);background:linear-gradient(90deg,transparent,var(--sunk),transparent)}