:root{--bg:#0d0f1a;--panel:#161a2b;--panel2:#1e2338;--line:#2b3150;--text:#eef0fb;--dim:#a3a9c7;--faint:#6f7697;--accent:#ff8a2a;--accent2:#ffb36b;--ok:#3ddc97;--warn:#ffc857;--bad:#ff5d6c}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent2)}h1,h2,.brand{font-family:"Barlow Condensed",Inter,sans-serif;letter-spacing:.02em}h1{font-size:40px;margin:0 0 6px;line-height:1.05}h2{font-size:24px;margin:28px 0 10px}
.top{display:flex;align-items:center;gap:20px;padding:14px 28px;border-bottom:1px solid var(--line);background:#0b0d17;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:22px}.brand b{color:var(--accent)}.mark{background:var(--accent);color:#111;border-radius:8px;padding:2px 8px;font-weight:700}
nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}nav a{color:var(--dim);text-decoration:none;padding:7px 12px;border-radius:8px;font-weight:500}nav a:hover{color:var(--text);background:var(--panel)}nav a.on{color:var(--text);background:var(--panel2)}
.who{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14px}main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:28px}footer{color:var(--faint);font-size:13px;text-align:center;padding:22px 16px;border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 16px;border-radius:10px;font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--faint)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#141414}.btn.primary:hover{background:var(--accent2)}.btn.small{padding:5px 11px;font-size:13px}.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.bar{display:flex;gap:10px;margin:18px 0 22px;flex-wrap:wrap}input,select,textarea{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 12px;font:inherit}input[type=search]{flex:1;min-width:200px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:border-color .15s}
.card:hover{border-color:var(--accent)}.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#232947,#141829);display:grid;place-items:center;color:var(--faint);font:700 28px "Barlow Condensed",sans-serif}.thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}.card .name{font-weight:600;font-size:16px}.muted{color:var(--dim)}.faint{color:var(--faint);font-size:13px}
.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--dim);border:1px solid var(--line)}.tag.board{color:var(--warn);border-color:#5a4a20}.tag.cos{color:var(--ok);border-color:#1f5a43}
.detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:28px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.hero{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.actions{display:flex;flex-direction:column;gap:10px}.desc{white-space:pre-wrap;color:var(--dim)}.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.kv dt{color:var(--faint)}.kv dd{margin:0;word-break:break-word}
table{width:100%;border-collapse:collapse}td,th{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}th{color:var(--faint);font-weight:500;font-size:13px}td .btn{margin-right:6px}
.note{padding:12px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--dim);margin:12px 0}.note.ok{border-color:#1f5a43;color:var(--ok)}.note.bad{border-color:#6a2832;color:var(--bad)}
.panel>h2:first-child{margin-top:0}input.code{text-transform:uppercase;letter-spacing:.12em;max-width:200px}input.small{width:140px}label.pair{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:500;color:var(--faint)}label.pair select,label.pair input{max-width:200px}.btn.end{align-self:flex-end}.row{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)}.row .bar{margin:0 0 6px}.empty{text-align:center;padding:50px 20px;color:var(--dim)}form.stack{display:flex;flex-direction:column;gap:12px;max-width:620px}label{font-weight:500}code{background:var(--panel2);padding:1px 6px;border-radius:6px}pre{background:var(--panel);border:1px solid var(--line);padding:14px;border-radius:10px;overflow:auto;font-size:13px}
@media(max-width:760px){.top{padding:12px 16px}main{padding:18px 16px}.detail{grid-template-columns:1fr}h1{font-size:32px}td:nth-child(3),th:nth-child(3){display:none}}