* { box-sizing: border-box; }

html, body {
  background: var(--bg-paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--d-state) var(--ease), color var(--d-state) var(--ease);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

body { zoom: var(--ui-scale, 1); }
@supports not (zoom: 1) {
  body {
    transform: scale(var(--ui-scale, 1));
    transform-origin: 0 0;
    width: calc(100% / var(--ui-scale, 1));
    min-height: calc(100vh / var(--ui-scale, 1));
  }
}

body.aurora {
  position: relative;
  background:
    radial-gradient(ellipse 75% 55% at 12% 8%,  var(--bg-aurora-1), transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 92%, var(--bg-aurora-2), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 30%, var(--bg-aurora-3), transparent 70%),
    var(--bg-paper);
  background-attachment: fixed;
  background-size: 180% 180%;
  animation: auroraShift 22s ease-in-out infinite;
}

body.dark.aurora {
  background:
    radial-gradient(ellipse 60% 50% at 92% 95%, rgba(245, 220, 170, 0.18), transparent 60%),
    radial-gradient(ellipse 65% 45% at 8% 5%,   rgba(180, 150, 220, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255, 200, 100, 0.10), transparent 70%),
    linear-gradient(125deg, #0a0a0a 0%, #14110d 55%, #1f1a14 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: auroraShift 22s ease-in-out infinite;
}

@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

body.aurora::before {
  content: '';
  position: fixed;
  inset: -20vh -20vw;
  background: radial-gradient(
    ellipse 38% 30% at 50% 50%,
    rgba(248, 220, 200, 0.22),
    transparent 65%
  );
  pointer-events: none;
  z-index: -1;
  animation: auroraSpotlight 22s ease-in-out infinite alternate;
  will-change: transform;
}
body.dark.aurora::before {
  background: radial-gradient(
    ellipse 35% 28% at 50% 50%,
    rgba(255, 200, 120, 0.18),
    transparent 65%
  );
}
@keyframes auroraSpotlight {
  0%   { transform: translate(-25%, -15%) rotate(0deg); }
  50%  { transform: translate(20%, 10%)   rotate(180deg); }
  100% { transform: translate(-15%, 25%)  rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.aurora, body.aurora::before { animation: none !important; }
}

.glass {
  background: var(--surface);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--sh-inset), var(--sh-md);
}

.glass-strong {
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--sh-inset), var(--sh-md);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass-strong { background: var(--surface-strong); }
}

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }

body.is-navigating { opacity: 0.45; filter: blur(3px) saturate(0.8); transition: none !important; }

.t-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.t-display-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: -0.015em; }
.t-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.05em; }

.eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-4); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.card-sh:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--text), 0 0 24px -4px var(--text); }

.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-strong) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  border-radius: var(--r-input);
}

@keyframes itemIn { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes liveIn { from { transform: translateY(16px) scale(0.96); } to { transform: translateY(0) scale(1); } }
@keyframes scalein { from { transform: scale(0.96) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

@keyframes hotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}
.hot-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); animation: hotPulse 1.4s var(--ease) infinite; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: hotPulse 1.6s var(--ease) infinite; }

.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: rgba(255, 255, 255, 0.4); animation: rippleScale 600ms var(--ease) forwards; }
@keyframes rippleScale { to { transform: scale(4); opacity: 0; } }

.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; }