:root { --bg:#0f1117; --card:#171a23; --fg:#e7e9ee; --muted:#8a93a6; --accent:#5b8def; --danger:#e05a5a; --ok:#3ecf8e; --border:#262a36; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:#0a0c12; border-bottom:1px solid var(--border); }
.topbar .brand a { color:#fff; font-weight:600; }
.topbar nav { display:flex; gap:16px; align-items:center; color:var(--muted); }
.container { max-width: 960px; margin: 32px auto; padding: 0 24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:24px; margin:16px 0; }
.card.narrow { max-width: 420px; margin: 64px auto; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin-top: 24px; }
form label { display:block; margin: 12px 0; color:var(--muted); font-size:13px; }
form input, form select, form textarea { display:block; width:100%; margin-top:6px; padding:10px 12px; background:#0d1018; border:1px solid var(--border); color:var(--fg); border-radius:6px; font:inherit; }
form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--accent); }
button, .btn { display:inline-block; padding:9px 16px; background:var(--accent); color:#fff; border:none; border-radius:6px; font:inherit; cursor:pointer; }
button:hover, .btn:hover { filter:brightness(1.1); text-decoration:none; }
button.danger { background: var(--danger); }
.btn-link { color: var(--muted); }
.flash { padding: 10px 14px; border-radius:6px; margin: 8px 0; font-size: 14px; }
.flash-success { background: rgba(62,207,142,0.15); border:1px solid var(--ok); color: #b8f0d4; }
.flash-error { background: rgba(224,90,90,0.15); border:1px solid var(--danger); color:#f5c2c2; }
.grid { width:100%; border-collapse: collapse; }
.grid th, .grid td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:14px; }
.grid th { color: var(--muted); font-weight:500; }
.muted { color: var(--muted); font-size:13px; }
.subnav { display:flex; gap:16px; padding:0 0 16px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.subnav a { padding:8px 4px; color: var(--muted); border-bottom: 2px solid transparent; }
.subnav a.active { color:#fff; border-color: var(--accent); }
.kv { display:grid; grid-template-columns: 200px 1fr; gap: 6px 16px; }
.kv dt { color: var(--muted); font-size: 13px; }
.code-box { background:#0d1018; border:1px solid var(--border); padding:12px; border-radius:6px; overflow-x:auto; font-size:13px; }
.who { color: #fff; }
.wysiwyg { background:#0d1018; border:1px solid var(--border); border-radius:6px; }
.wysiwyg .toolbar { display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--border); }
.wysiwyg .toolbar button { padding:6px 10px; background:#1a1e29; color:var(--fg); border:1px solid var(--border); }
.wysiwyg .toolbar button:hover { background:#22273a; }
.editor { min-height: 320px; padding: 14px 16px; line-height: 1.5; outline:none; }
.editor h1, .editor h2, .editor h3 { margin: 0.6em 0 0.3em; }
.editor p { margin: 0.4em 0; }