:root {
  --bg: #ffffff;
  --fg: #000000;
  --button-bg: #007bff;
  --button-fg: #ffffff;
}
[data-theme='dark'] {
  --bg: #121212;
  --fg: #ffffff;
  --button-bg: #1e90ff;
  --button-fg: #ffffff;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 400px;
  margin: auto;
  text-align: center;
  padding: 1em;
}
button {
  background: var(--button-bg);
  color: var(--button-fg);
  border: none;
  padding: 0.6em 1em;
  margin: 1em 0;
  cursor: pointer;
  font-size: 1em;
  border-radius: 4px;
}
#meter {
  margin: 1em 0;
}
.spinner {
  width: 60px;
  height: 60px;
  border: 8px solid var(--button-bg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: auto;
}
.hidden {
  display: none;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.container a:link,
.container a:visited {
  color: var(--button-bg);
  text-decoration: none;
}

.container a:hover,
.container a:focus {
  color: var(--button-bg);
  text-decoration: underline;
}

/* Optional darker color override for dark mode */
[data-theme='dark'] .container a:link,
[data-theme='dark'] .container a:visited {
  color: var(--button-bg);
}