:root { --bg:#0a0e17; --card:#121826; --accent:#f0b90b; --red:#f6465d; --green:#0ecb81; --text:#eaecef; --muted:#848e9c; --link:#58a6ff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.75; }
a { color:var(--link); }
header { background:linear-gradient(135deg,#1a1f2e,#0a0e17); padding:3rem 1rem 2rem; text-align:center; border-bottom:2px solid var(--accent); }
h1 { font-size:2.2rem; margin-bottom:.5rem; }
.subtitle { color:var(--muted); font-size:1.05rem; max-width:820px; margin:0 auto; }
.cross { margin-top:1.2rem; }
.cross a { display:inline-block; margin:.3rem; padding:.55rem 1rem; border:1px solid var(--accent); border-radius:8px; color:var(--accent); text-decoration:none; font-weight:600; }
nav { background:var(--card); padding:.85rem 1rem; position:sticky; top:0; z-index:50; display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; border-bottom:1px solid #2a2f3e; }
nav a { color:var(--text); text-decoration:none; padding:.4rem .75rem; border-radius:6px; font-size:.95rem; }
nav a:hover, nav a.active { background:#2a2f3e; color:var(--accent); }
main { max-width:980px; margin:0 auto; padding:2rem 1.2rem 3rem; }
h2 { font-size:1.65rem; margin:2rem 0 1rem; color:var(--accent); border-left:4px solid var(--accent); padding-left:.8rem; }
h3 { font-size:1.25rem; margin:1.4rem 0 .7rem; color:#ffd666; }
.card { background:var(--card); border:1px solid #2a2f3e; border-radius:12px; padding:1.25rem 1.4rem; margin:1rem 0 1.4rem; }
.muted { color:var(--muted); font-size:.95rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.2rem 0; }
.grid a.card { display:block; text-decoration:none; color:var(--text); transition:.15s; }
.grid a.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.grid a.card strong { color:var(--accent); display:block; margin-bottom:.35rem; }
ul,ol { margin:.5rem 0 .8rem 1.3rem; }
li { margin:.35rem 0; }
.note { background:#182033; border-left:3px solid var(--accent); padding:.8rem 1rem; margin:1rem 0; border-radius:0 8px 8px 0; }
.warn { border-left-color:var(--red); }
.ok { border-left-color:var(--green); }
footer { text-align:center; padding:2rem 1rem; color:var(--muted); border-top:1px solid #2a2f3e; font-size:.9rem; }
.toc li { margin:.45rem 0; }
@media (max-width:700px){ h1{font-size:1.7rem;} }