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

:root,
[data-theme="dark"] {
  --bg:              #0c1520;
  --bg-gradient-top: #142440;
  --face:            #0e1e30;
  --rim:             #1e4060;
  --hand:            #deeef8;
  --accent:          #f0a500;
  --text:            #deeef8;
  --text-dim:        #4a7090;
  --colon:           #1e4060;
  --sync:            #2a5070;
  --sync-ok:         #1a6040;
  --sync-error:      #703020;
  --clock-glow:      rgba(30, 90, 170, 0.5);
  --clock-glow-end:  rgba(30, 90, 170, 0);
  --clock-shadow:    rgba(20, 80, 160, 0.45);
  --tick-major:      rgba(222, 238, 248, 0.9);
  --tick-minor:      rgba(222, 238, 248, 0.25);
  --clock-number:    rgba(222, 238, 248, 0.55);
  --hand-shadow:     rgba(180, 220, 255, 0.4);
  --second-shadow:   rgba(240, 165, 0, 0.6);
  --toggle-bg:       rgba(20, 40, 64, 0.6);
  --toggle-border:   rgba(30, 64, 96, 0.8);
  --toggle-icon:     #deeef8;
}

[data-theme="light"] {
  --bg:              #f4f6f9;
  --bg-gradient-top: #dce8f4;
  --face:            #ffffff;
  --rim:             #b8c8d8;
  --hand:            #1a3048;
  --accent:          #c87800;
  --text:            #1a3048;
  --text-dim:        #6a8498;
  --colon:           #b8c8d8;
  --sync:            #8aa0b0;
  --sync-ok:         #1a7048;
  --sync-error:      #a04028;
  --clock-glow:      rgba(120, 160, 210, 0.35);
  --clock-glow-end:  rgba(120, 160, 210, 0);
  --clock-shadow:    rgba(100, 140, 190, 0.25);
  --tick-major:      rgba(26, 48, 72, 0.85);
  --tick-minor:      rgba(26, 48, 72, 0.22);
  --clock-number:    rgba(26, 48, 72, 0.5);
  --hand-shadow:     rgba(26, 48, 72, 0.15);
  --second-shadow:   rgba(200, 120, 0, 0.35);
  --toggle-bg:       rgba(255, 255, 255, 0.75);
  --toggle-border:   rgba(184, 200, 216, 0.9);
  --toggle-icon:     #1a3048;
}

html, body {
  height: 100%;
}

body {
  background: radial-gradient(ellipse at 50% 0%, var(--bg-gradient-top) 0%, var(--bg) 70%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── Theme toggle ── */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border: 1px solid var(--toggle-border);
  border-radius: 50%;
  background: var(--toggle-bg);
  backdrop-filter: blur(8px);
  color: var(--toggle-icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  transform: scale(1.05);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-30deg) scale(0.7);
}

[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(30deg) scale(0.7);
}

[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vh, 36px);
  padding: 24px;
}

/* ── Analog clock ── */
#clock {
  display: block;
  width: min(48vmin, 340px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px var(--clock-shadow));
  transition: filter 0.3s ease;
}

/* ── Digital time ── */
.digital {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-row {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-variant-numeric: tabular-nums;
}

.hms {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  color: var(--text);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  transition: color 0.3s ease;
}

.colon {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 100;
  color: var(--colon);
  padding: 0 clamp(2px, 0.4vw, 8px);
  line-height: 1;
  align-self: center;
  margin-bottom: 0.05em;
  transition: color 0.3s ease;
}

.dot {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 100;
  color: var(--accent);
  opacity: 0.6;
  padding: 0 2px;
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 0.1em;
}

.ms {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 300;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  color: var(--accent);
  min-width: 3ch;
  text-align: left;
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 0.12em;
}

/* ── Date ── */
.date-row {
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* ── Sync status ── */
.sync-row {
  font-size: 0.72rem;
  color: var(--sync);
  letter-spacing: 0.06em;
  min-height: 1.2em;
  transition: color 0.3s ease;
}

.sync-row.ok    { color: var(--sync-ok); }
.sync-row.error { color: var(--sync-error); }

/* ── Small phones ── */
@media (max-width: 480px) {
  body {
    align-items: stretch;
  }

  .theme-toggle {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 40px;
    height: 40px;
  }

  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }

  .app {
    width: 100%;
    min-height: 100dvh;
    padding:
      max(40px, calc(env(safe-area-inset-top) + 32px))
      4px
      max(8px, env(safe-area-inset-bottom));
    gap: clamp(8px, 1.4vh, 14px);
    justify-content: space-evenly;
  }

  #clock {
    width: min(98vw, calc(100dvh - 9.5rem));
    flex-shrink: 0;
  }

  .digital {
    width: 100%;
    flex-shrink: 0;
  }

  .time-row {
    width: calc(100vw - 12px);
    max-width: 100%;
    justify-content: center;
    font-size: calc((100vw - 12px) / 6.5);
  }

  .hms {
    font-size: 1em;
    min-width: 1.75ch;
    letter-spacing: -0.03em;
  }

  .colon {
    font-size: 0.78em;
    padding: 0 0.15em;
    margin-bottom: 0.04em;
  }

  .dot {
    font-size: 0.62em;
    padding: 0 0.05em;
  }

  .ms {
    font-size: 0.56em;
    min-width: 2.65ch;
    margin-bottom: 0.14em;
  }

  .date-row {
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    letter-spacing: 0.06em;
    text-align: center;
    padding: 0 4px;
    flex-shrink: 0;
  }

  .sync-row {
    font-size: 0.65rem;
    text-align: center;
    padding: 0 4px;
    flex-shrink: 0;
  }
}