:root{--bg:#07111f;--panel:#0d2036;--line:#274968;--text:#eef5fc;--muted:#9fb4ca;--cyan:#66c7ff;--green:#55d89b;--orange:#ffb454}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
a{color:var(--cyan);text-decoration:none}
nav{position:sticky;top:0;z-index:99;display:flex;align-items:center;gap:22px;padding:10px 26px;background:rgba(6,17,31,.98);border-bottom:1px solid var(--line)}
nav .brand{margin-right:auto;font-weight:800}nav .brand small{display:block;color:var(--muted);font-size:10px;font-weight:500}
nav a{color:#c8d7e7;font-size:13px;padding:8px 4px;border-bottom:2px solid transparent}nav a.active{color:#fff;font-weight:700;border-bottom-color:var(--cyan)}
main{max-width:1380px;margin:auto;padding:34px 26px 50px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.card,.panel{background:linear-gradient(180deg,var(--panel),#0a1a2c);border:1px solid var(--line);border-radius:14px;padding:18px}
h1{font-size:34px;margin:0 0 12px}h2{font-size:20px;margin:0 0 12px}h3{font-size:15px;margin:0 0 8px}
p{line-height:1.6;color:#dce8f3}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.step{background:#091a2b;border:1px solid #2d4d69;border-radius:12px;padding:14px;text-align:center}.step b{display:block;margin-bottom:5px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
table{width:100%;border-collapse:collapse;background:#0b1d31}th,td{padding:10px;border-bottom:1px solid #27445e;text-align:left;font-size:13px;vertical-align:top}
th{background:#10263d;color:#c5d7e7}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}
.ok{background:#123928;color:#7ce0ad}.warn{background:#432f14;color:#ffd08c}.info{background:#173853;color:#8fd3ff}
.callout{margin-top:16px;padding:15px;border-radius:12px;border:1px solid #365473;background:#0b1d31}.footer{margin-top:28px;color:var(--muted);font-size:12px}
@media(max-width:900px){.hero,.grid{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,1fr)}nav{flex-wrap:wrap}nav .brand{width:100%;margin-right:0}}