:root {
  --accent: #6366f1;
  --bg: #0b1020;
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.18);
  --text: white;
}
body.light {
  --bg: #f1f5f9;
  --glass: rgba(255,255,255,0.7);
  --border: rgba(0,0,0,0.15);
  --text: #020617;
}
body {
  margin:0;
  height:100vh;
  overflow:hidden;
  background: linear-gradient(135deg,var(--bg),#111827);
  color: var(--text);
  font-family: Inter,system-ui;
}
.layout {
  display:grid;
  grid-template-rows: 100px 1fr 150px;
  height:100vh;
  gap:8px;
  padding:8px;
}
.card {
  backdrop-filter: blur(20px);
  background: var(--glass);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
}
.main { display:grid; grid-template-columns: 1fr 300px; gap:8px; }
.footer { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.disk {
  width:110px;
  height:110px;
  border-radius:50%;
  background: linear-gradient(45deg,var(--accent),#06b6d4);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:spin 6s linear infinite;
}
.disk.paused { animation-play-state:paused; }
@keyframes spin { from{transform:rotate(0);} to{transform:rotate(360deg);} }
.wave { width:100%; height:40px; }
.knob {
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--glass);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.graph { width:100%; height:60px; }
.login {
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.loginBox {
  background: var(--glass);
  padding:20px;
  border-radius:16px;
}