:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#6ee7b7;
  --accent-2:#7c3aed;
  --muted:#9aa6b2;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --pill-bg: rgba(255,255,255,0.03);
  --danger:#ff6b6b;
  --success:#4ade80;
  --radius:14px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, #071023 0%, #081125 45%, #071328 100%), url('https://images.unsplash.com/photo-1483729558449-99ef09a8c325?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat fixed;
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:20px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:16px;
}

.app{
  width:1100px;
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 10px 40px rgba(2,6,23,0.7);
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}
.brand{display:flex;gap:12px;align-items:center}
.brand__icon{font-size:34px; padding:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:10px; box-shadow:0 6px 20px rgba(124,58,237,0.22), 0 2px 6px rgba(0,0,0,0.6)}
.brand h1{margin:0;font-size:20px}
.muted{color:var(--muted);font-size:12px;margin-top:4px}

.controls-header{display:flex;gap:8px;align-items:center}
.btn{
  background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:inherit;cursor:pointer;font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.btn--accent{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#021; border:none}
.btn--ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04)}

.main{display:flex; gap:0; align-items:stretch; padding:18px}
.sidebar{
  width:260px;
  border-right:1px solid rgba(255,255,255,0.03);
  padding-right:18px;
  display:flex;flex-direction:column;gap:12px;
}
.panel{background:var(--glass); padding:12px;border-radius:12px}
.panel.small{font-size:13px;color:var(--muted)}
.panel h3{margin:0 0 10px 0;font-size:13px}
.orientation-row{display:flex;flex-direction:column;gap:8px}
.orientation-row label{font-size:13px;color:var(--muted)}

.play-area{flex:1;padding-left:18px;display:flex;flex-direction:column;gap:12px}
.hud{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hud__left, .hud__right{display:flex;gap:8px;align-items:center}
.pill{background:var(--pill-bg);padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted)}
.mode-badge{background:linear-gradient(90deg,var(--accent-2),var(--accent));padding:8px 14px;border-radius:999px;font-weight:700;color:#021;box-shadow:0 8px 30px rgba(124,58,237,0.12)}
.timer{font-size:20px;font-weight:800;color:#fff;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,0.25)}

.stage{display:flex;justify-content:center;align-items:center;margin-top:6px}
#eq-canvas{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; box-shadow: 0 10px 40px rgba(2,6,23,0.6); width:100%; max-width:760px; height:140px}

.input-row{display:flex;gap:8px;margin-top:12px}
#answer-input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:inherit;font-size:16px}
#answer-input:focus{outline:none;box-shadow:0 6px 30px rgba(124,58,237,0.12)}
.feedback{min-height:26px;margin-top:8px}
.message{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.02);color:var(--muted)}

.progress-row{margin-top:12px}
.glow-track{display:flex;gap:8px;align-items:center}
.bulb{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.03);box-shadow:0 2px 6px rgba(0,0,0,0.5)}
.bulb.on{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px rgba(124,58,237,0.26), 0 0 18px rgba(110,231,183,0.07)}

/* footer */
.foot{display:flex;justify-content:space-between;padding:12px 18px;border-top:1px solid rgba(255,255,255,0.02);font-size:12px;color:var(--muted)}
/* responsive */
@media (max-width:1120px){
  .app{width:100%;margin:8px}
  .sidebar{display:none}
  #eq-canvas{max-width:100%}
}