:root{--bg:#0b0f17;--bg2:#121826;--card:#161d2e;--bd:#25304a;--tx:#e8edf7;--mu:#97a3bd;--ac:#22d3ee;--ac2:#8b5cf6;--ok:#22c55e;--wa:#f59e0b;--er:#ef4444;--sh:0 8px 30px #0006}
[data-theme=light]{--bg:#f4f6fb;--bg2:#fff;--card:#fff;--bd:#d9e0ee;--tx:#0f172a;--mu:#5b6780;--ac:#0891b2;--ac2:#6d28d9;--sh:0 8px 24px #1e293b1a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--tx);transition:background .3s,color .3s}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}main.wrap{padding-top:32px;padding-bottom:56px;min-height:70vh}
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.ann{background:linear-gradient(90deg,var(--ac2),var(--ac));color:#fff;text-align:center;padding:6px 12px;font-size:.9rem}
.bar{display:flex;align-items:center;gap:14px;height:62px}
.logo{font-weight:900;font-size:1.45rem;letter-spacing:.14em;color:var(--tx)!important;text-decoration:none!important}.logo span{color:var(--ac)}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}nav a{color:var(--mu);padding:7px 11px;border-radius:10px;font-size:.93rem;transition:.2s}
nav a:hover,nav a[aria-current]{background:var(--bg2);color:var(--tx);text-decoration:none}nav a[aria-current]{box-shadow:inset 0 -2px var(--ac)}
.ic{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:10px;width:38px;height:38px;cursor:pointer;font-size:1.1rem;transition:.2s}.ic:hover{border-color:var(--ac)}.mb{display:none}
h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:.2em 0 .3em}h2{margin:1.6em 0 .5em}.lead{color:var(--mu);font-size:1.08rem;max-width:70ch}.small{font-size:.85rem;color:var(--mu)}
.hero{padding:40px 0 20px;animation:up .7s both}.hero h1 span{background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.grid2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:20px;box-shadow:var(--sh);transition:transform .25s,border-color .25s;animation:up .6s both}
a.card{display:block;color:var(--tx);text-decoration:none}.card:hover{transform:translateY(-4px);border-color:var(--ac)}.card h3{margin:.2em 0 .3em}.card p{color:var(--mu);margin:.3em 0}
.card.note{border-left:4px solid var(--wa)}.tag{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:99px;background:var(--bg2);border:1px solid var(--bd);color:var(--mu);margin:0 4px 4px 0}
label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--mu);font-weight:600}
select,input{background:var(--bg2);color:var(--tx);border:1px solid var(--bd);border-radius:12px;padding:11px 12px;font:inherit;width:100%}select:focus,input:focus{outline:2px solid var(--ac);outline-offset:1px}
.btn{margin-top:18px;background:linear-gradient(90deg,var(--ac),var(--ac2));color:#fff;border:0;border-radius:14px;padding:13px 28px;font:700 1rem inherit;letter-spacing:.05em;cursor:pointer;transition:.2s;box-shadow:var(--sh)}.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn.alt{background:var(--card);color:var(--tx);border:1px solid var(--bd)}
#out{margin-top:22px}.big{font-size:2.6rem;font-weight:800;line-height:1}.stats{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin:14px 0}.stats div{background:var(--bg2);border-radius:14px;padding:14px;text-align:center}.stats small{color:var(--mu);display:block}
.meter{position:relative;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--er),var(--wa),var(--ok),var(--wa),var(--er));margin:22px 0 6px}.meter i{position:absolute;top:-5px;width:6px;height:22px;background:var(--tx);border-radius:4px;transform:translateX(-50%);box-shadow:0 0 0 3px var(--bg)}
.ml{display:flex;justify-content:space-between;font-size:.78rem;color:var(--mu)}
.b{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px;color:#fff;margin-right:8px}.ok{background:var(--ok)}.warn{background:var(--wa)}.bad{background:var(--er)}.unk{background:#64748b}
.row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bd)}.row:last-child{border:0}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--bd)}th{color:var(--mu);font-weight:600;width:28%}td.w{color:var(--ok);font-weight:700}
details{margin-top:24px}summary{cursor:pointer;font-weight:700}.prose{max-width:80ch}.prose li{margin:.3em 0}.ph{background:#f59e0b33;border:1px dashed var(--wa);padding:0 5px;border-radius:5px;font-weight:600}
footer{border-top:1px solid var(--bd);padding:28px 0;background:var(--bg2)}[hidden]{display:none!important}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:820px){.mb{display:block;margin-left:auto}nav{display:none;position:absolute;top:62px;left:0;right:0;background:var(--bg2);padding:10px 20px;flex-direction:column;border-bottom:1px solid var(--bd);margin:0}nav.open{display:flex}.stats{grid-template-columns:1fr}}
dialog{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:18px;max-width:560px;width:92%;padding:22px}dialog::backdrop{background:#000a}.gc{cursor:pointer}
.gc{position:relative}.gc .ic{position:absolute;top:10px;right:10px;z-index:1}