:root{
--bg:#0b0c10;--card:#151821;--muted:#a3acc3;--text:#e8eefc;--accent:#6ee7b7;--accent-2:#60a5fa;--warn:#f59e0b;--danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:var(--bg); color:var(--text);
display:flex;flex-direction:column;
}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #232634;background:#0e1118;position:sticky;top:0;z-index:10}
.brand{font-weight:700;letter-spacing:.3px}
.stats{display:flex;gap:12px;font-size:14px;color:var(--muted)}
.container{max-width:980px;margin:24px auto;padding:0 16px;width:100%}
.card{background:var(--card);border:1px solid #22273a;border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
h1,h2,h3{margin:.2em 0 .4em}
p{color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.grid{display:grid;gap:10px}
.grid.shelf{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
.shelf button{font-size:28px;padding:12px 0}
.cart{background:#10131b;border:1px dashed #2a2f44;border-radius:12px;padding:12px;margin-top:10px}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;background:#0e1320;border:1px solid #24365c;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.timer{font-variant-tabular-nums:tabular-nums;font-weight:700}
.progress{height:10px;background:#0f1220;border-radius:999px;overflow:hidden;border:1px solid #1f2540}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));width:0%}


button{appearance:none;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;transition:transform .02s ease,opacity .2s ease;background:#1a2031;color:#e9f2ff;border:1px solid #26304a}
button:hover{opacity:.95}
button:active{transform:translateY(1px)}
.primary{background:linear-gradient(180deg,#1f2a44,#162033);border-color:#2b3a5e}
.success{background:linear-gradient(180deg,#1e3a2f,#14251f);border-color:#204a38;color:#cafee2}
.warn{background:linear-gradient(180deg,#3a2f1e,#251d14);border-color:#4a3820;color:#ffe8bd}
.danger{background:linear-gradient(180deg,#3a1e23,#271418);border-color:#5e2b38;color:#ffd7de}
.ghost{background:transparent}
.hidden{display:none !important}


.bottombar{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid #232634;background:#0e1118;gap:12px;flex-wrap:wrap}
.music{display:flex;align-items:center;gap:8px}
#musicVol{width:120px}


.note{border-left:3px solid var(--accent-2);padding-left:10px;margin:8px 0;color:#c7d7ff}
.offer{display:flex;flex-direction:column;gap:10px}
.bad{color:#ffb4b4}
.good{color:#b0ffcf}