:root {
  --bg: #0a1320;
  --ink: #e4eff8;
  --muted: #8ca4bb;
  --line: #293e52;
  --green: #83d5ee;
  --mint: #193649;
}
body {
  background:
    radial-gradient(ellipse at 80% 0, #204a6430, transparent 55%),
    radial-gradient(ellipse at 0 80%, #1b415529, transparent 48%), #0a1320;
}
#winter-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.winter-ground {
  position: fixed;
  bottom: -35px;
  left: 0;
  width: 100%;
  height: 130px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background:
    radial-gradient(ellipse at 10% 100%, #cde9f8 0 34%, transparent 35%),
    radial-gradient(ellipse at 66% 100%, #a9d3e9 0 43%, transparent 44%),
    radial-gradient(ellipse at 98% 100%, #e3f4ff 0 39%, transparent 40%);
}
main {
  position: relative;
  z-index: 2;
}
.auth-screen {
  position: relative;
  z-index: 2;
}
.sidebar {
  background: #101c2a;
  border-right-color: #294154;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #355a72 #101c2a;
}
.sidebar nav {
  flex-shrink: 0;
}
.sidebar .help-card {
  margin-top: 18px;
  background: linear-gradient(135deg, #18334a, #152331);
  border-color: #344d62;
}
.help-card strong {
  color: #c8e6f5;
}
.help-card p {
  color: #8fa9bc;
}
.help-card button {
  color: #a2d8ef;
}
.help-icon {
  color: #8ec8e4;
  border-color: #507d96;
}
.workspace {
  background: #17293a;
  border-color: #304a5f;
}
.workspace-icon {
  background: #28495b;
  color: #a4e1f4;
}
.nav-item {
  color: #97b0c5;
}
.nav-item:hover {
  background: #1b3449;
}
.nav-item.active {
  background: #23495e;
  color: #b2e6fc;
}
.nav-item b {
  background: #3c6b7b;
  color: #d3f3ff;
}
.nav-label {
  color: #7a99b2;
}
.topbar {
  background: #0e1c2be8;
  border-color: #293f53;
}
.avatar {
  background: #294251;
  color: #c6e6f6;
}
.logo-mark {
  position: relative;
  background: #94dcec;
  color: #12394c;
  box-shadow: 0 3px 18px #6bbeda18;
}
.logo-mark:before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: -2px;
  height: 6px;
  background: #e9f7ff;
  border-radius: 80% 75% 45% 55%;
  box-shadow: 0 3px 6px #c0edff27;
  pointer-events: none;
}
.sidebar-logo small,
.domain {
  color: #8cc9df;
}
.page-heading h1 {
  color: #e2f0fc;
}
.eyebrow {
  color: #8dcce5;
}
.panel,
.stat-card {
  background: #121f2e;
  border-color: #2a4257;
}
.stat-top {
  color: #9aafc3;
}
.stat-icon.mint {
  background: #213f50;
  color: #9bddf5;
}
.stat-card > small {
  color: #87a0b6;
}
.button.primary {
  background: linear-gradient(115deg, #90d7ee, #6bc5e2);
  border-color: #8bd4ec;
  color: #0c2f44;
  box-shadow: 0 3px 15px #72cae50a;
}
.button.primary:hover {
  background: #b4e9f9;
  border-color: #b4e9f9;
}
.button.white {
  background: #1a2c3d;
  border-color: #3b576b;
  color: #bbd7e8;
}
.button.white:hover {
  background: #254154;
}
.text-button {
  color: #94d2eb;
}
.status.neutral {
  background: #223448;
  color: #9db6cb;
}
.step {
  background: #203a4d;
  border-color: #3d5b71;
  color: #a6d7e8;
}
.content {
  padding-bottom: 28px;
}
.content > footer {
  padding-right: 140px;
  color: #7293ad;
}
.welcome-hero {
  background:
    radial-gradient(ellipse at 85% 80%, #32637a55, transparent 65%),
    linear-gradient(115deg, #193344, #101e31);
  border-color: #3a5a6e;
}
.welcome-hero:after,
.help-winter-hero:after {
  content: "";
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  height: 39px;
  opacity: 0.18;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 5% 100%, #e6f6ff 0 37%, transparent 38%),
    radial-gradient(ellipse at 64% 100%, #c7eafb 0 48%, transparent 49%),
    radial-gradient(ellipse at 100% 100%, #d3eafa 0 35%, transparent 36%);
}
.hero-copy h2 em {
  color: #a3dced;
}
.hero-badge {
  background: #24495844;
  border-color: #47748a;
  color: #abdbea;
}
.hero-copy p {
  color: #96b5c9;
}
.hero-meta {
  color: #80a5bb;
}
.hero-sim {
  background: linear-gradient(130deg, #41798a, #254b62);
  border-color: #86bacc88;
  color: #d1edf4;
}
.sim-chip {
  border-color: #a5cfd5;
}
.sim-chip i {
  background: #92c5c955;
  border-color: #b8e5e444;
}
.hero-float {
  background: #193a4eea;
  border-color: #4f7f93;
}
.hero-float > div {
  color: #c3e7f1;
}
.hero-float small {
  color: #89b5c8;
}
.hero-float > span {
  background: #36687a;
  color: #bee8f2;
}
.hero-star {
  color: #bedfea;
}
.hero-ring {
  border-color: #8cc1d226;
}
.ring-b {
  border-color: #84b4c936;
}
.sim-bottom {
  color: #9bcad6;
}
.sim-bottom > span {
  border-color: #7dacbe;
}
.quick-card {
  background: #142536;
  border-color: #304c62;
}
.quick-card:hover {
  background: #1d3549;
  border-color: #5f8ca3;
}
.quick-icon.green {
  background: #234657;
  color: #9cdbf1;
}
.quick-link {
  color: #92cde6;
}
.home-note {
  background: #14283a;
  border-color: #304c60;
}
.home-note strong {
  color: #badce9;
}
.home-note p {
  color: #8daabb;
}
.auth-story {
  background:
    radial-gradient(ellipse at 20% 63%, #25506a70, transparent 65%), #102334;
  border-color: #345064;
}
.auth-story h1 em {
  color: #93dcef;
}
.auth-story-content > p {
  color: #9db8c9;
}
.auth-perks {
  color: #9ecddd;
}
.auth-story-footer {
  color: #7c9fb5;
}
.auth-form-side {
  background: #0e1c2b;
}
.auth-tabs {
  background: #172a3d;
  border-color: #304c62;
}
.auth-tabs button.selected {
  background: #2a4f64;
  color: #b8e8f8;
}
.art-card {
  background: linear-gradient(125deg, #244c60, #173347);
  border-color: #6890a47d;
}
.art-card > strong {
  color: #d3f3ff;
}
.art-card > span:not(.art-icon) {
  color: #a7cddd;
}
.art-card > .art-icon {
  background: #3d7885;
  color: #c1f4f6;
}
.art-card > div {
  color: #a2cbd9;
}
.art-tag {
  background: #1c3b4d;
  border-color: #427288;
  color: #addde9;
}
.orbit {
  border-color: #5586a242;
}
.snow-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #38556c;
  border-radius: 7px;
  background: #1a3348;
  color: #b3deef;
  font: inherit;
  font-size: 9px;
  white-space: nowrap;
}
.snow-toggle > span:first-child {
  font-size: 16px;
  color: #c0ebfa;
}
.snow-toggle[aria-pressed="false"] {
  background: #182635;
  color: #879faf;
}
.snow-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}
.topbar-right {
  gap: 14px;
}
.snow-enabled .snow-toggle {
  box-shadow: 0 0 14px #9adfff0a;
}
.faq {
  background: #142437;
}
.faq details {
  border-color: #2f485f;
}
.faq summary {
  color: #bed9ea;
}
.faq details p {
  color: #8faac0;
}
.guide-tip {
  position: relative;
}
.support-admin-config {
  margin-top: 0;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: #98d9f4;
}
@media (max-width: 1150px) {
  .sidebar .help-card {
    padding: 14px;
  }
  .topbar-right {
    gap: 10px;
  }
  .snow-toggle {
    font-size: 8px;
  }
}
@media (max-width: 900px) {
  .snow-toggle > span:last-child {
    display: none;
  }
  .snow-toggle {
    width: 31px;
    height: 31px;
    justify-content: center;
    padding: 0;
  }
  .content > footer {
    padding-right: 125px;
  }
}
@media (max-width: 650px) {
  .sidebar {
    overflow: visible;
  }
  .sidebar nav,
  .sidebar nav:has(#admin-nav:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .sidebar .nav-item {
    font-size: 8px;
    gap: 4px;
    padding: 9px 3px;
  }
  .sidebar .nav-item > span {
    font-size: 14px;
  }
  .topbar {
    padding: 0 17px;
  }
  .topbar-right {
    gap: 8px;
  }
  .snow-toggle {
    width: 29px;
    height: 29px;
  }
  .topbar .breadcrumb {
    font-size: 8px;
  }
  .content > footer {
    padding-right: 90px;
    padding-bottom: 40px;
  }
  .winter-ground {
    height: 90px;
    opacity: 0.1;
  }
  .content {
    padding-bottom: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #winter-snow {
    display: none;
  }
  .snow-toggle {
    box-shadow: none;
  }
}