:root{--bg:#111;--fg:#eee;--card:#1c1c1c;--bd:#333;--mut:#999;--acc:#2a7;--red:#b33}
*{box-sizing:border-box}
body{font-family:system-ui,Arial,sans-serif;background:var(--bg);color:var(--fg);margin:0;padding:16px;max-width:1150px;margin:auto}
h1{font-size:20px;margin:0 0 12px}h2{font-size:16px;margin:20px 0 8px;color:#ccc}
a{color:#6cf}.top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.top .sp{flex:1}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px;margin-bottom:14px}
.small{color:var(--mut);font-size:13px}.err{color:#f55;font-weight:700}.ok{color:#4f4}
.warn{background:#4a2a00;border:1px solid #fa4;color:#fc8;padding:10px;border-radius:8px;margin-bottom:12px}
.good{background:#12361f;border:1px solid #2a7;color:#9f9;padding:10px;border-radius:8px;margin-bottom:12px}
label{display:block;margin:10px 0 3px;font-size:14px;color:#bbb}
label.inl{display:inline-block;margin-right:16px}
input,select,textarea{width:100%;padding:9px;border-radius:6px;border:1px solid #444;background:#0d0d0d;color:var(--fg);font-size:15px}
input[type=checkbox],input[type=radio]{width:auto}
button,.btn{display:inline-block;padding:9px 16px;border:0;border-radius:6px;background:var(--acc);color:#fff;font-size:15px;margin-top:12px;cursor:pointer;text-decoration:none}
button.red{background:var(--red)}button.gray,.btn.gray{background:#555}button.mini{padding:5px 10px;font-size:13px;margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.mc{background:#161616;border:1px solid var(--bd);border-radius:12px;padding:12px;min-width:0;cursor:pointer}
.mc:hover{border-color:#666}.mc.sel{border-color:#6cf}
.mid{font-size:18px;font-weight:700;word-break:break-word}
.mrow{display:flex;gap:14px;align-items:center;margin-top:8px}.mv{flex:1;min-width:0}
.pp{font-size:36px;font-weight:700;line-height:1.05}.vv{font-size:17px}.ms{margin-top:8px;font-size:13px}
.stale .pp,.stale .vv{opacity:.45}
.bat{position:relative;width:54px;height:104px;flex:none}
.bat .cap{position:absolute;left:17px;top:0;width:20px;height:8px;background:#888;border-radius:3px 3px 0 0}
.bat .body{position:absolute;left:0;top:8px;right:0;bottom:0;border:4px solid #888;border-radius:11px;overflow:hidden;background:#0d0d0d}
.bat .fill{position:absolute;left:0;right:0;bottom:0;height:0;background-color:#4f4;transition:height 1s,background-color 1s}
.bat .fill:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.22),rgba(0,0,0,.18))}
.bat.off .fill{background-color:#666!important;opacity:.55}.bat.off .body{border-color:#555}
.bat.mis .fill{height:0!important}.bat.mis .body{border-color:#fa4}
.bat .bang{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:28px;height:28px;border-radius:50%;background:#d22;color:#fff;font-weight:700;font-size:18px;align-items:center;justify-content:center;box-shadow:0 0 0 3px #111}
.bat.off .bang,.bat.mis .bang{display:flex}.bat.mis .bang{background:#e90}
.ch{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:18px 0 8px}.ch h2{margin:0}
canvas{width:100%;height:300px;background:#0d0d0d;border-radius:8px;display:block}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:7px 6px;border-bottom:1px solid #2a2a2a;text-align:left;vertical-align:top}
code,.mono{font-family:monospace;background:#0d0d0d;padding:2px 5px;border-radius:4px;word-break:break-all}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tabs a{padding:7px 12px;background:#222;border-radius:6px;text-decoration:none;color:#ddd}.tabs a.on{background:var(--acc);color:#fff}
.ranges a{padding:3px 9px;background:#222;border-radius:5px;text-decoration:none;color:#ccc;font-size:13px;margin-right:4px}.ranges a.on{background:#355}
@media(max-width:600px){.row2{grid-template-columns:1fr}}