:root{--bg:#fff;--panel:#fafafa;--line:#ececec;--text:#111;--muted:#8a8a8a;--accent:#e8622c;--soft:#f2f2f2;--up:#0ca30c;--down:#d03b3b;--warn:#fab219;--field:#fff;--shadow:0 1px 2px rgba(0,0,0,.04)}
@media (prefers-color-scheme:dark){:root{--bg:#171717;--panel:#1c1c1c;--line:#2a2a2a;--text:#f4f4f4;--muted:#8a8a8a;--soft:#262626;--field:#202020}}
:root{color-scheme:light dark}
*{margin:0;box-sizing:border-box}html,body{height:100%;width:100%;background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:100%;outline:none}
input:focus,textarea:focus,select:focus,.rich:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:60px;line-height:1.45}
.k{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.big{font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-1.5px;line-height:1;margin-top:10px;font-variant-numeric:tabular-nums}
.sub{font-size:11px;color:var(--muted);margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:10px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.live{background:rgba(12,163,12,.12);color:var(--up)}.pill.draft{background:rgba(250,178,25,.16);color:#b07a00}
@media (prefers-color-scheme:dark){.pill.draft{color:var(--warn)}}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;white-space:nowrap}
a.btn{text-decoration:none;color:var(--text)}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--soft)}
.btn:disabled{opacity:.45;cursor:default}
.btn.sm{padding:3px 8px;font-size:11px}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block}
.gear{position:fixed;top:8px;right:10px;z-index:50;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:.5}
.gear:hover{opacity:1}
.keybox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:16px}
.keybox.on{display:flex}
.keybox .card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px;width:min(380px,100%);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.keybox h3{font-size:14px;margin-bottom:6px}.keybox p{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.45}
.keybox .row{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(20px);opacity:0;transition:.25s;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:9px;font-size:12px;z-index:70;pointer-events:none;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--down);color:#fff}
.empty{font-size:12px;color:var(--muted);line-height:1.5}
*{scrollbar-width:thin;scrollbar-color:#c9c9c7 transparent}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9c9c7;border-radius:9px;border:3px solid transparent;background-clip:content-box}
@media (prefers-color-scheme:dark){*{scrollbar-color:#3a3a3a transparent}::-webkit-scrollbar-thumb{background:#3a3a3a;background-clip:content-box}}