:root {
  color-scheme: dark light;
  --night-bg: radial-gradient(circle at 12% 8%, rgba(22,108,196,.22), transparent 60%),
              radial-gradient(circle at 88% 10%, rgba(0,255,213,.2), transparent 66%),
              linear-gradient(180deg,#030712,#071326 48%,#02050d);
  --night-panel: rgba(7,13,24,.9);
  --night-border: rgba(0,255,213,.28);
  --night-text: #f2fffe;
  --night-muted: rgba(190,246,240,.78);
  --night-accent: #00f5d5;
  --night-green: #17d98a;
  --night-red: #ff6b82;
  --night-yellow: #ffd96a;

  --day-bg: radial-gradient(circle at 18% 14%, rgba(146,198,255,.4), transparent 62%),
            radial-gradient(circle at 80% 18%, rgba(255,214,174,.36), transparent 70%),
            linear-gradient(180deg,#fbfcff,#e9f2ff 56%,#f3f7ff);
  --day-panel: rgba(255,255,255,.9);
  --day-border: rgba(40,92,150,.22);
  --day-text: #12395a;
  --day-muted: rgba(40,86,132,.7);
  --day-accent: #1f78d6;
  --day-green: #1f9f75;
  --day-red: #d64a5d;
  --day-yellow: #f2a240;
}

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

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body {
  position: relative;
  color: var(--text-color);
  background: var(--bg-gradient);
  transition: background .6s ease, color .35s ease;
  zoom: .75;
}

@supports not (zoom: 1) {
  body {
    transform: scale(.75);
    transform-origin: top center;
    width: calc(100% / .75);
  }
}

body::before {
  content: "";
  position: fixed;
  inset: -2%;
  z-index: -3;
  background: var(--bg-gradient);
  filter: saturate(125%);
  transform: scale(1.03);
  animation: aurora 32s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), transparent 75%);
  mix-blend-mode: screen;
  opacity: .7;
  animation: drift 36s ease-in-out infinite;
}

@keyframes aurora {
  0% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(1.05) rotate(1.8deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}

@keyframes drift {
  0% { transform: translate3d(-2%, -1%, 0); }
  50% { transform: translate3d(2%, 1.5%, 0); }
  100% { transform: translate3d(-2%, -1%, 0); }
}

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}