:root {
  --bg-0: #0b0f14;
  --bg-1: #0f151f;
  --bg-2: #131b27;
  --panel: rgba(19, 26, 36, 0.82);
  --panel-solid: #18212d;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.18);
  --text-1: #f2f6ff;
  --text-2: #b9c4d8;
  --text-3: #7f8ba1;
  --accent: #44d2c7;
  --accent-2: #f0c36a;
  --shadow: 0 18px 40px rgba(6, 10, 16, 0.5);
  --panel-width: 320px;
  --scrollbar-thumb: rgba(210, 224, 238, 0.32);
  --scrollbar-thumb-hover: rgba(210, 224, 238, 0.46);
  --scrollbar-thumb-stroke: rgba(255, 255, 255, 0.18);
  --scrollbar-thumb-shadow: rgba(0, 0, 0, 0.3);
  --scrollbar-track: transparent;
  --scrollbar-track-stroke: transparent;
}

body[data-theme="dark"] {
  --scrollbar-track: rgba(7, 10, 16, 0.65);
  --scrollbar-track-stroke: rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] {
  --bg-0: #f7f6f3;
  --bg-1: #f1ede6;
  --bg-2: #ebe4da;
  --panel: rgba(255, 255, 255, 0.76);
  --panel-solid: #ffffff;
  --stroke: rgba(15, 20, 28, 0.14);
  --stroke-strong: rgba(15, 20, 28, 0.24);
  --text-1: #0f141c;
  --text-2: rgba(15, 20, 28, 0.72);
  --text-3: rgba(15, 20, 28, 0.52);
  --shadow: 0 18px 40px rgba(20, 24, 30, 0.12);
  --scrollbar-thumb: rgba(15, 20, 28, 0.32);
  --scrollbar-thumb-hover: rgba(15, 20, 28, 0.48);
  --scrollbar-thumb-stroke: rgba(255, 255, 255, 0.85);
  --scrollbar-thumb-shadow: rgba(15, 20, 28, 0.14);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 10px;
  background: transparent;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-stroke), 0 10px 18px var(--scrollbar-thumb-shadow);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Main page scrollbar (root). */
html,
body {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html {
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  box-shadow: inset 0 0 0 1px var(--scrollbar-track-stroke);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-stroke), 0 10px 18px var(--scrollbar-thumb-shadow);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Spline Sans", sans-serif;
  color: var(--text-1);
  background:
    radial-gradient(900px 500px at 6% -10%, rgba(68, 210, 199, 0.2), transparent 60%),
    radial-gradient(1000px 600px at 95% 10%, rgba(240, 195, 106, 0.22), transparent 58%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
  overflow-x: hidden;
}

body[data-theme="light"] {
  background:
    radial-gradient(900px 500px at 6% -10%, rgba(68, 210, 199, 0.18), transparent 60%),
    radial-gradient(1000px 600px at 95% 10%, rgba(240, 195, 106, 0.18), transparent 58%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="light"]::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 20, 28, 0.10) 1px, transparent 0);
  opacity: 0.08;
}

body[data-theme="light"]::after {
  opacity: 0.28;
}

body::after {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  right: 6%;
  bottom: -160px;
  background: radial-gradient(circle, rgba(68, 210, 199, 0.25), transparent 70%);
  filter: blur(20px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

button {
  font-family: inherit;
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px 0;
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}