*{margin:0;padding:0;box-sizing:border-box}

/* ── EVOL THEME (default) ── */
:root{
  --bg:#050709;--panel:#0c0f12;--amber:#ffb700;--green:#00ff41;
  --gdim:rgba(0,255,65,.2);--purple:#d040fb;--text:#b8c4ce;--dim:#4a5868;
  --fd:'Orbitron',monospace;--fb:'Share Tech Mono',monospace;
  --border-color:#182030;--canvas-bg:#020304;--overlay-bg:rgba(5,7,9,.94);
  --btn-text:#000;--btn-primary:var(--green);--btn-bg-hover:rgba(0,255,65,.08);
}

/* ── QUANTUM SPACE THEME ── */
body.theme-quantum{
  --bg:#0a0a1e;--panel:rgba(15,15,35,.9);--amber:#ffff80;--green:#00ffff;
  --gdim:rgba(0,255,255,.25);--purple:#ff00ff;--text:#e0e0ff;--dim:#6070a0;
  --border-color:rgba(0,255,255,.3);--canvas-bg:#000010;--overlay-bg:rgba(0,0,20,.92);
  --btn-text:#0a0a1e;--btn-primary:var(--green);--btn-bg-hover:rgba(0,255,255,.1);
}

html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--fb);
  display:flex;flex-direction:column;align-items:center;overflow-x:hidden;user-select:none;
  transition:background .4s,color .4s}

/* header */
.hdr{width:100%;max-width:640px;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 8px;border-bottom:1px solid var(--gdim)}
.hdr-t{font-family:var(--fd);font-size:14px;font-weight:900;color:var(--green);
  letter-spacing:2px;text-shadow:0 0 8px color-mix(in srgb,var(--green) 50%,transparent)}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-b{font-family:var(--fd);font-size:9px;color:var(--dim);text-decoration:none;
  letter-spacing:1px;border:1px solid #1a2535;padding:3px 10px;transition:.2s}
.hdr-b:hover{color:var(--green);border-color:var(--gdim)}
.theme-btn{font-family:var(--fd);font-size:9px;letter-spacing:1px;color:var(--amber);
  background:transparent;border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  padding:3px 10px;cursor:pointer;transition:.25s}
.theme-btn:hover{background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:var(--amber)}

/* layout */
.ga{display:flex;align-items:flex-start;justify-content:center;gap:12px;padding:12px 16px;
  width:100%;max-width:600px;flex:1}
.pnl{background:var(--panel);border:1px solid var(--border-color);padding:8px 10px;transition:background .4s}
.pt{font-family:var(--fd);font-size:8px;letter-spacing:2px;color:var(--dim);margin-bottom:5px}
.pv{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--amber);
  text-shadow:0 0 8px color-mix(in srgb,var(--amber) 50%,transparent);letter-spacing:1px}
.ps{font-size:9px;color:var(--dim);letter-spacing:1px;margin-top:2px}
.cl{font-size:9px;color:var(--dim);line-height:2.1;letter-spacing:.4px}
.cl span{color:var(--text);font-family:var(--fb)}
.cw{position:relative;flex-shrink:0}
#gc{display:block;border:1px solid var(--gdim);background:var(--canvas-bg);image-rendering:pixelated;transition:background .4s}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:var(--overlay-bg);gap:14px;padding:20px;z-index:50;transition:background .4s}
.ov-t{font-family:var(--fd);font-size:26px;font-weight:900;color:var(--green);
  text-shadow:0 0 12px color-mix(in srgb,var(--green) 50%,transparent);letter-spacing:3px;text-align:center;line-height:1.25}
.ov-s{font-size:10px;color:var(--dim);letter-spacing:2px;text-align:center}
.om{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{font-family:var(--fd);font-size:12px;letter-spacing:2px;color:var(--btn-text);background:var(--btn-primary);
  border:none;padding:9px 20px;cursor:pointer;box-shadow:0 0 8px color-mix(in srgb,var(--green) 40%,transparent);transition:.15s}
.btn:hover{transform:scale(1.04);box-shadow:0 0 14px color-mix(in srgb,var(--green) 60%,transparent)}
.btn:active{transform:scale(.97)}
.bq{background:var(--purple);color:#fff;box-shadow:0 0 8px color-mix(in srgb,var(--purple) 40%,transparent)}
.bq:hover{box-shadow:0 0 14px color-mix(in srgb,var(--purple) 60%,transparent)}
.bo{background:transparent;color:var(--green);border:1px solid var(--gdim);box-shadow:none}
.bo:hover{background:var(--btn-bg-hover)}
.hs{font-size:10px;color:var(--dim);letter-spacing:1px}
.hs span{color:var(--amber);text-shadow:0 0 5px color-mix(in srgb,var(--amber) 40%,transparent)}
.qp{background:rgba(208,64,251,.07);border:1px solid rgba(208,64,251,.3);padding:8px 10px}
body.theme-quantum .qp{background:rgba(255,0,255,.07);border-color:rgba(255,0,255,.4)}
.qp .pt{color:#d040fb}
body.theme-quantum .qp .pt{color:#ff00ff}
#qst{font-size:10px;color:#d040fb;text-shadow:0 0 6px rgba(208,64,251,.5);min-height:22px;line-height:1.5}
body.theme-quantum #qst{color:#ff00ff;text-shadow:0 0 6px rgba(255,0,255,.5)}
#qtm{font-family:var(--fd);font-size:11px;color:#d040fb;margin-top:3px}
body.theme-quantum #qtm{color:#ff00ff}
#hc,#nc{display:block;background:var(--canvas-bg);border:1px solid var(--border-color)}
.ftr{width:100%;text-align:center;padding:10px;font-size:9px;color:var(--dim);
  letter-spacing:2px;border-top:1px solid rgba(0,255,65,.08)}
body.theme-quantum .ftr{border-top:1px solid rgba(0,255,255,.08)}

/* Quantum-space glow extras when that theme is active */
body.theme-quantum .hdr{border-bottom-color:rgba(0,255,255,.2)}
body.theme-quantum #gc{box-shadow:0 0 20px rgba(0,255,255,.15),inset 0 0 15px rgba(0,255,255,.1)}
body.theme-quantum .ov-t{animation:quantumPulse 3s ease-in-out infinite alternate}
@keyframes quantumPulse{
  from{text-shadow:0 0 10px #00ffff,0 0 20px #00ffff}
  to{text-shadow:0 0 15px #ff00ff,0 0 30px #ff00ff,0 0 8px #fff}
}