:root {
  --bg: #f4f5f7;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --text: #15171c;
  --muted: rgba(21, 23, 28, 0.62);
  --hairline: rgba(21, 23, 28, 0.12);
  --shadow: 0 12px 30px rgba(16, 18, 24, 0.08);
  --shadow-sm: 0 8px 18px rgba(16, 18, 24, 0.08);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --accent: #2563eb;
  --pos: #0f766e;
  --neg: #b42318;
  --pos-bg: rgba(15, 118, 110, 0.10);
  --neg-bg: rgba(180, 35, 24, 0.10);
  --focus: rgba(37, 99, 235, 0.35);
  --btn: rgba(21, 23, 28, 0.06);
  --btn-hover: rgba(21, 23, 28, 0.10);
  --toast-bg: rgba(255, 255, 255, 0.92);
  --toast-border: rgba(21, 23, 28, 0.12);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12;
    --panel: rgba(18, 22, 30, 0.72);
    --panel-solid: #12161e;
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.60);
    --hairline: rgba(255, 255, 255, 0.12);
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.35);
    --pos-bg: rgba(15, 118, 110, 0.18);
    --neg-bg: rgba(180, 35, 24, 0.18);
    --btn: rgba(255, 255, 255, 0.08);
    --btn-hover: rgba(255, 255, 255, 0.12);
    --toast-bg: rgba(18, 22, 30, 0.92);
    --toast-border: rgba(255, 255, 255, 0.12);
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
html {
  /* Ensure background paints behind safe-area (viewport-fit=cover) */
  background: radial-gradient(1200px 700px at 20% 0%, rgba(37, 99, 235, 0.12), transparent 55%),
    radial-gradient(1000px 600px at 85% 20%, rgba(15, 118, 110, 0.10), transparent 55%), var(--bg);
}
body {
  margin: 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  background: transparent;
  color: var(--text);
}

/* Avoid double-tap zoom on interactive controls without disabling pinch zoom globally. */
button {
  touch-action: manipulation;
}

a,
button,
input {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}