:root {
  --bg:#0f1420; --surface:#1a2130; --surface-2:#212a3d; --border:#2e3950;
  --text:#e8ecf4; --muted:#9aa5bc;
  --accent:#4f8ef7; --accent-soft:rgba(79,142,247,.14);
  --green:#3ecf8e; --green-soft:rgba(62,207,142,.14);
  --amber:#f5b84f; --amber-soft:rgba(245,184,79,.14);
  --red:#f26d6d; --red-soft:rgba(242,109,109,.14);
  --purple:#b98af7; --purple-soft:rgba(185,138,247,.14);
  --radius:14px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; line-height:1.6; padding:48px 20px 80px; }
.container { max-width:1080px; margin:0 auto; }
header { margin-bottom:34px; }
.kicker { display:inline-block; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; font-weight:600; }
h1 { font-size:clamp(24px,4vw,34px); line-height:1.25; margin-bottom:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
h1 .key { font-family:ui-monospace,Menlo,Consolas,monospace; }
.subtitle { color:var(--muted); max-width:820px; font-size:15.5px; }
.subtitle strong { color:var(--text); }

.badge { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.badge.mvp { color:var(--green); background:var(--green-soft); border:1px solid rgba(62,207,142,.4); }
.badge.v15 { color:var(--accent); background:var(--accent-soft); border:1px solid rgba(79,142,247,.4); }
.badge.v2 { color:var(--amber); background:var(--amber-soft); border:1px solid rgba(245,184,79,.4); }
.badge.v3 { color:var(--purple); background:var(--purple-soft); border:1px solid rgba(185,138,247,.4); }
.badge.pain { color:var(--green); background:var(--green-soft); border:1px solid rgba(62,207,142,.4); }
.badge.new { color:var(--red); background:var(--red-soft); border:1px solid rgba(242,109,109,.4); }

.note { margin-top:16px; border-radius:var(--radius); padding:14px 18px; font-size:13.5px; }
.note.warn { background:var(--amber-soft); border:1px solid rgba(245,184,79,.35); }
.note.warn strong { color:var(--amber); }
.note.ok { background:var(--green-soft); border:1px solid rgba(62,207,142,.35); }
.note.ok strong { color:var(--green); }

section { margin-top:44px; }
.section-head { display:flex; align-items:baseline; gap:14px; margin-bottom:10px; }
.section-num { font-size:13.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(79,142,247,.35); border-radius:8px; padding:2px 10px; white-space:nowrap; }
h2 { font-size:21px; }
h3.sub { margin:20px 0 10px; font-size:15.5px; color:var(--accent); }
.section-desc { color:var(--muted); margin-bottom:16px; max-width:840px; font-size:14px; }
.section-desc strong { color:var(--text); }
.il { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 6px; }

.tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; min-width:620px; }
table.tbl th, table.tbl td { text-align:left; padding:9px 13px; border-bottom:1px solid var(--border); vertical-align:top; }
table.tbl th { background:var(--surface-2); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.7px; }
table.tbl td { background:var(--surface); }
table.tbl td.dim { color:var(--muted); }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl td strong { color:var(--text); }
table.tbl td .code, .code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 6px; font-weight:600; }
.req { color:var(--green); font-weight:700; } .opt { color:var(--muted); }

.act { display:inline-block; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:0 7px; margin:1px 1px; white-space:nowrap; }
.act.x { color:var(--amber); border-color:rgba(245,184,79,.4); background:var(--amber-soft); }

/* permission matrix badges (same as WS0 matrix) */
table.mx { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
table.mx th, table.mx td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:center; }
table.mx thead th { background:var(--surface-2); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
table.mx tbody th { text-align:left; background:var(--surface); color:var(--text); font-weight:600; white-space:nowrap; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
table.mx td { background:var(--surface); }
table.mx tr:last-child td, table.mx tr:last-child th { border-bottom:none; }
.p { display:inline-block; min-width:26px; font-weight:700; border-radius:6px; font-size:12.5px; padding:0 4px; }
.p.R { color:var(--accent); background:var(--accent-soft); }
.p.W { color:var(--green); background:var(--green-soft); }
.p.A { color:var(--amber); background:var(--amber-soft); }
.p.none { color:var(--muted); }
.p sup { font-size:9px; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.card.hl { border-color:rgba(62,207,142,.45); background:linear-gradient(180deg,rgba(62,207,142,.06),var(--surface)); }
.card h3 { font-size:15px; margin-bottom:8px; }
.card p, .card ul { font-size:13.5px; color:var(--muted); }
.card ul { margin:6px 0 0 18px; } .card li { margin-top:5px; } .card strong { color:var(--text); }

.flow { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--muted); overflow-x:auto; white-space:pre; line-height:1.85; }
.flow b { color:var(--accent); font-weight:700; }
.flow .g { color:var(--green); font-weight:700; }
.flow .r { color:var(--red); font-weight:700; }

footer { margin-top:56px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
footer a { color:var(--accent); text-decoration:none; } footer a:hover { text-decoration:underline; }
.modnav { display:flex; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
@media print { body{background:#fff;color:#111;} .card,.tbl-wrap,.flow{border-color:#ccc;} table.tbl td{background:#fff;} }