:root {
  --bg: #06111e;
  --bg-elev: #0a1828;
  --panel: rgba(13, 27, 45, 0.82);
  --panel-2: rgba(18, 36, 60, 0.78);
  --panel-3: rgba(28, 52, 82, 0.72);
  --panel-4: rgba(43, 75, 112, 0.72);

  --text: #f4f5f8;
  --text-soft: #d6d9e2;
  --muted: #8a90a4;
  --muted-2: #5e6478;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);

  --accent: #00aeef;
  --accent-2: #17d4c1;
  --accent-glow: rgba(0, 174, 239, 0.32);
  --info: #4cb4ff;
  --info-2: #b8e9ff;
  --danger: #ff5c7a;
  --danger-2: #ff89a0;
  --warn: #ffb454;

  --grad-card-a: linear-gradient(135deg, #11375d 0%, #0b1627 62%, #132844 100%);
  --grad-card-b: linear-gradient(135deg, #174c65 0%, #0b1928 62%, #123b50 100%);
  --grad-card-c: linear-gradient(135deg, #0d5b56 0%, #071c23 62%, #0d403e 100%);
  --grad-card-d: linear-gradient(135deg, #284866 0%, #101827 62%, #1a314c 100%);
  --grad-card-e: linear-gradient(135deg, #154466 0%, #071827 62%, #162d49 100%);

  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.38);
  --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.28);
  --ring-focus: 0 0 0 3px rgba(56, 189, 248, 0.22);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* "Light" mode is now a TBC-inspired twilight: deep navy with a soft
   violet/emerald aurora and the same brand accent as the dark theme.
   The card and panel surfaces sit slightly above the page so depth comes
   from layered blue tones rather than pure-white contrast. */
body.light {
  --bg: #f3fbff;
  --bg-elev: #ffffff;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-2: rgba(242, 250, 255, 0.86);
  --panel-3: rgba(225, 244, 255, 0.88);
  --panel-4: rgba(204, 236, 255, 0.90);

  --text: #10243a;
  --text-soft: #294663;
  --muted: #5f7892;
  --muted-2: #7d96ad;
  --line: rgba(20, 91, 135, 0.12);
  --line-strong: rgba(20, 91, 135, 0.22);

  --accent: #00aeef;
  --accent-2: #10c8b5;
  --accent-glow: rgba(0, 174, 239, 0.22);
  --info: #0878c9;
  --info-2: #4cc9f0;
  --danger: #ff5c7a;
  --danger-2: #ff89a0;
  --warn: #ffb454;

  --shadow-lg: 0 24px 50px rgba(49, 113, 160, 0.18);
  --shadow-md: 0 14px 30px rgba(49, 113, 160, 0.14);
  --shadow-sm: 0 6px 18px rgba(49, 113, 160, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(900px 540px at 10% -10%, rgba(0, 174, 239, 0.16), transparent 58%),
    radial-gradient(820px 500px at 96% 4%, rgba(23, 212, 193, 0.10), transparent 54%),
    linear-gradient(180deg, #06111e 0%, #071827 44%, #050b13 100%);
  font-family:
    "Inter",
    "SF Pro Display",
    "Segoe UI Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

body.light {
  background:
    radial-gradient(980px 620px at 50% -12%, rgba(0, 174, 239, 0.24), transparent 58%),
    radial-gradient(740px 520px at 0% 6%, rgba(16, 200, 181, 0.16), transparent 56%),
    linear-gradient(180deg, #f5fcff 0%, #e8f8ff 48%, #ffffff 100%);
}

button,
select,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
  margin: 0;
}

::selection {
  background: rgba(0, 217, 160, 0.32);
  color: #ffffff;
}

/* Atmospheric photo background — sits behind everything in a fixed layer
   so it stays put as the page scrolls. The ::after dark overlay keeps
   the foreground content readable regardless of the photo's exposure.
   If either image is missing the layer simply shows the page bg color
   underneath. Drop assets in miniapp/assets/. */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(7, 8, 12, 0.42) 0%, rgba(7, 8, 12, 0.86) 78%, rgba(7, 8, 12, 0.96) 100%),
    radial-gradient(80% 70% at 50% 110%, rgba(7, 8, 12, 0.85), transparent 60%),
    url("./assets/bg-day.jpg");
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  pointer-events: none;
  filter: saturate(1.05);
}

body.light .bg-photo {
  background-image:
    linear-gradient(180deg, rgba(232, 248, 255, 0.72) 0%, rgba(224, 244, 255, 0.88) 70%, rgba(247, 252, 255, 0.98) 100%),
    radial-gradient(80% 70% at 50% 110%, rgba(217, 240, 255, 0.78), transparent 60%),
    url("./assets/bg-day.jpg");
}