:root { --bg:#0f1216; --card:#171c23; --border:#262d37; --txt:#d6dee6; --dim:#8a94a0;
        --green:#4ade80; --red:#f87171; --yellow:#facc15; --blue:#60a5fa; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--txt); font:14px/1.5 system-ui,sans-serif; padding:20px;
       display:flex; flex-direction:column; align-items:center; }
h1 { font-size:20px; margin-bottom:4px; text-align:center; }
h2 { font-size:16px; margin:18px 0 8px; text-align:center; color:var(--blue); }
.sub { color:var(--dim); font-size:13px; margin-bottom:12px; text-align:center; max-width:1000px; }
.note { background:#1a1f2e; border:1px solid #2a3550; border-radius:10px; padding:8px 14px;
        font-size:12.5px; color:var(--yellow); margin-bottom:14px; text-align:center; max-width:1000px; }
.legend { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:5px 12px;
          font-size:12.5px; color:var(--dim); margin-bottom:14px; text-align:center; max-width:1000px; }
.legend b { color:var(--txt); }
.bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; justify-content:center; }
select { background:var(--card); color:var(--txt); border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:14px; }
.vtbl { width:100%; max-width:1100px; border-collapse:collapse; margin-bottom:8px; font-size:13px; }
.tblwrap { width:100%; max-width:1100px; overflow-x:auto; }
.vtbl th, .vtbl td { border:1px solid var(--border); padding:6px 10px; text-align:right; }
.vtbl th:first-child, .vtbl td:first-child { text-align:left; }
.vtbl th { background:var(--card); color:var(--dim); font-weight:600; }
.vtbl tr:first-child th { position:sticky; top:0; background:var(--card); }
.best { color:var(--green); font-weight:700; }
.panels { display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
          width:100%; max-width:1200px; margin-bottom:16px; }
.panel { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:9px; text-align:center;
         width:230px; }
.panel img { width:100%; height:auto; aspect-ratio:1/1; border-radius:8px; border:1px solid var(--border);
             display:block; margin:0 auto 6px; background:#000; }
.panel .cap { font-size:11.5px; color:var(--dim); min-height:2.7em; display:flex; flex-direction:column;
              justify-content:center; }
.panel .cap b { color:var(--txt); }
.panel .cap .s { color:var(--green); }
.panel .cap .warn { color:var(--yellow); }
.prov { color:var(--dim); font-size:12px; max-width:950px; text-align:center; margin-top:8px; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
                   clip:rect(0 0 0 0); white-space:nowrap; border:0; }
code { background:var(--card); padding:1px 5px; border-radius:4px; font-size:11.5px; }