:root {
  --bg: #f5f5f5;
  --card: #ffffff;
  --text: #222;
  --accent: #4caf50;
}

[data-theme="dark"] {
  --bg: #121212;
  --card: #1e1e1e;
  --text: #f5f5f5;
  --accent: #81c784;
}

body {
  margin:0;
  font-family: sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  display:flex;
  justify-content:space-between;
  padding:1rem;
}

button {
  padding:0.5rem 1rem;
  cursor:pointer;
}

.dashboard {
  display:flex;
  gap:2rem;
  justify-content:center;
  margin-top:2rem;
}

.gauge-card, .stats-card, .undone-card {
  background:var(--card);
  padding:1.5rem;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.progress-ring circle {
  fill:transparent;
  stroke-width:15;
}

.progress-ring .bg {
  stroke:#ddd;
}

.progress-ring .progress {
  stroke:var(--accent);
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
}

.undone-card {
  margin:2rem;
}

.hidden {
  display:none;
}

@media (max-width:768px){
  .dashboard {
    flex-direction:column;
    align-items:center;
  }
}