html,body{height:100%;margin:0;overflow:hidden;background:#000}
body.error-state .side,body.error-state .statusbar,body.error-state .top-banner{display:none}
body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;transition:color .2s ease, background .2s ease}
body.dark{background:#000;color:#e9f1f7}
body.light{background:#000;color:#0b1e2d}
button{appearance:none;border:none;border-radius:10px;padding:8px 12px;font-weight:600;background:#50e3c2;color:#0b1e2d;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .05s ease, opacity .2s ease, filter .2s ease;font-size:13px}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.45;filter:saturate(.2) brightness(.9);cursor:not-allowed}
.top-banner{background:linear-gradient(135deg,#1a1a1a,#0a0a0a);backdrop-filter:blur(10px);padding:16px 20px;text-align:center;font-weight:700;font-size:16px;color:#e9f1f7;letter-spacing:.3px;box-shadow:0 2px 12px rgba(0,0,0,.5)}
body.light .top-banner{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);color:#e9f1f7}
#tank{flex:1;position:relative;background:#000}
canvas#c{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.side{position:absolute;left:8px;top:8px;z-index:4;display:flex;flex-direction:column;gap:8px;max-width:220px}
.panel{backdrop-filter:blur(6px);padding:8px 10px;border-radius:10px;line-height:1.25;box-shadow:0 4px 12px rgba(0,0,0,.25)}
body.dark .panel{background:rgba(0,0,0,.35)}
body.light .panel{background:rgba(255,255,255,.7)}
.panel h4{margin:0 0 6px 0;font-size:12px;letter-spacing:.2px;opacity:.95}
.item{font-size:12px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:#ffe066;color:#0b1e2d;font-weight:900;font-size:11px;flex:0 0 auto}
#activityList .label{width:auto;height:auto;border-radius:0;background:none;color:inherit;font-size:14px}
.statusbar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:4;flex-wrap:wrap;align-items:center;justify-content:center;font-size:12px}
.pill{background:rgba(0,0,0,.35);backdrop-filter:blur(6px);padding:4px 8px;border-radius:999px;font-weight:600;white-space:nowrap;border:1px solid rgba(255,255,255,.15)}
.pill.status-warn{background:rgba(255,159,67,.25);border:1px solid rgba(255,159,67,.4)}
.pill.status-danger{background:rgba(235,87,87,.25);border:1px solid rgba(235,87,87,.4)}
body.light .pill{background:rgba(255,255,255,.7);color:#0b1e2d;border:1px solid rgba(0,0,0,.15)}
body.light .pill.status-warn{background:rgba(255,159,67,.3);color:#0b1e2d;border:1px solid rgba(255,159,67,.5)}
body.light .pill.status-danger{background:rgba(235,87,87,.3);color:#0b1e2d;border:1px solid rgba(235,87,87,.5)}
#cooldown.ready{background:rgba(255,215,0,.85);color:#0b1e2d;box-shadow:0 0 12px rgba(255,215,0,.4);border:1px solid rgba(255,215,0,.6)}
body.light #cooldown.ready{background:rgba(255,215,0,.9);color:#0b1e2d;box-shadow:0 0 8px rgba(255,215,0,.3);border:1px solid rgba(255,215,0,.7)}
.qrbox #qrLink{display:block;text-decoration:none;cursor:pointer}
.qrbox canvas{display:block;width:50%;margin:0 auto;aspect-ratio:1/1;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.25);background:#fff}
.qrbox .caption{margin-top:4px;text-align:center;font-size:11px;opacity:.85}