:root {
  --bg-rgb: 250 249 246;
  --surface-rgb: 255 255 255;
  --secondary-rgb: 241 241 243;
  --text-rgb: 26 26 30;
  --muted-rgb: 98 98 108;
  --border-rgb: 235 234 239;
  --accent-rgb: 108 92 231;
  --accent-strong-rgb: 91 76 196;
  --mesh-left: rgb(108 92 231 / 0.10);
  --mesh-right: rgb(108 92 231 / 0.06);
  --mesh-fade: rgb(255 255 255 / 1);
  --glass-panel-fill: linear-gradient(180deg, rgb(255 255 255 / 0.68), rgb(255 255 255 / 0.52));
  --glass-panel-border: rgb(255 255 255 / 0.8);
  --glass-card-fill: linear-gradient(180deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.50));
  --glass-card-border: rgb(255 255 255 / 0.85);
  --glass-inset: rgb(255 255 255 / 0.95);
  --glass-surface-blur: 22px;
  --glass-panel-shadow: 0 22px 56px -18px rgb(26 26 30 / 0.08), inset 0 1px 0 var(--glass-inset);
  --glass-card-shadow: 0 26px 64px -28px rgb(26 26 30 / 0.14), inset 0 1px 0 var(--glass-inset);
  --glass-reflection: linear-gradient(135deg, rgb(255 255 255 / 0.34), transparent 36%);
  --glass-hover-shadow: 0 30px 70px -34px rgb(26 26 30 / 0.18), inset 0 1px 0 var(--glass-inset);
  --glass-control-fill: linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.54));
  --glass-control-border: rgb(255 255 255 / 0.82);
  --glass-control-highlight: rgb(255 255 255 / 0.90);
  --glass-control-shadow: 0 20px 50px -20px rgb(26 26 30 / 0.12), inset 0 1px 0 var(--glass-control-highlight);
  --glass-control-active-bg: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.96), rgb(var(--accent-strong-rgb) / 0.90));
  --glass-control-active-shadow: 0 16px 34px -20px rgb(var(--accent-rgb) / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.24);
  --glass-control-blur: 18px;
  --shadow-rgb: 0 0 0;
  --surface-shadow: rgb(0 0 0 / 0.03);
  --surface-shadow-strong: rgb(0 0 0 / 0.10);
  --theme-option-fill: rgb(255 255 255 / 0.7);
  --theme-option-border: rgb(235 234 239 / 0.9);
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-rgb: 15 17 23;
  --surface-rgb: 26 28 36;
  --secondary-rgb: 32 34 44;
  --text-rgb: 244 241 255;
  --muted-rgb: 177 171 204;
  --border-rgb: 88 90 108;
  --accent-rgb: 108 92 231;
  --accent-strong-rgb: 130 115 245;
  --mesh-left: rgb(108 92 231 / 0.18);
  --mesh-right: rgb(108 92 231 / 0.10);
  --mesh-fade: rgb(37 40 52 / 0.92);
  --glass-panel-fill: linear-gradient(180deg, rgb(32 34 45 / 0.78), rgb(19 21 29 / 0.66));
  --glass-panel-border: rgb(255 255 255 / 0.08);
  --glass-card-fill: linear-gradient(180deg, rgb(31 33 44 / 0.78), rgb(18 20 28 / 0.68));
  --glass-card-border: rgb(255 255 255 / 0.10);
  --glass-inset: rgb(255 255 255 / 0.07);
  --glass-surface-blur: 22px;
  --glass-panel-shadow: 0 22px 58px -22px rgb(0 0 0 / 0.48), inset 0 1px 0 var(--glass-inset);
  --glass-card-shadow: 0 28px 66px -30px rgb(0 0 0 / 0.52), inset 0 1px 0 var(--glass-inset);
  --glass-reflection: linear-gradient(135deg, rgb(255 255 255 / 0.10), transparent 38%);
  --glass-hover-shadow: 0 32px 74px -36px rgb(0 0 0 / 0.58), inset 0 1px 0 var(--glass-inset);
  --glass-control-fill: linear-gradient(180deg, rgb(35 37 48 / 0.72), rgb(20 22 30 / 0.62));
  --glass-control-border: rgb(255 255 255 / 0.11);
  --glass-control-highlight: rgb(255 255 255 / 0.10);
  --glass-control-shadow: 0 22px 54px -24px rgb(0 0 0 / 0.44), inset 0 1px 0 var(--glass-control-highlight);
  --glass-control-active-bg: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.96), rgb(var(--accent-strong-rgb) / 0.88));
  --glass-control-active-shadow: 0 18px 38px -20px rgb(var(--accent-rgb) / 0.54), inset 0 1px 0 rgb(255 255 255 / 0.18);
  --surface-shadow: rgb(0 0 0 / 0.38);
  --surface-shadow-strong: rgb(0 0 0 / 0.32);
  --theme-option-fill: rgb(255 255 255 / 0.04);
  --theme-option-border: rgb(255 255 255 / 0.08);
}

html[data-theme-page="public"] body {
  background-color: rgb(var(--bg-rgb)) !important;
  color: rgb(var(--text-rgb)) !important;
}

html[data-theme-page="public"] .mesh-bg {
  background:
    radial-gradient(circle at 20% 8%, var(--mesh-left), transparent 30%),
    radial-gradient(circle at 80% 18%, var(--mesh-right), transparent 32%),
    radial-gradient(circle at 50% 0%, var(--mesh-fade) 0%, rgb(var(--bg-rgb)) 100%) !important;
}

html[data-theme-page="public"] .glass-panel {
  position: relative;
  isolation: isolate;
  background: var(--glass-panel-fill) !important;
  border: 1px solid var(--glass-panel-border) !important;
  box-shadow: var(--glass-panel-shadow) !important;
  backdrop-filter: blur(var(--glass-surface-blur)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(var(--glass-surface-blur)) saturate(1.08) !important;
}

html[data-theme-page="public"] .glass-card {
  position: relative;
  isolation: isolate;
  background: var(--glass-card-fill) !important;
  border: 1px solid var(--glass-card-border) !important;
  box-shadow: var(--glass-card-shadow) !important;
  backdrop-filter: blur(var(--glass-surface-blur)) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(var(--glass-surface-blur)) saturate(1.06) !important;
}

html[data-theme-page="public"] .glass-panel::before,
html[data-theme-page="public"] .glass-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass-reflection);
  pointer-events: none;
}

html[data-theme-page="public"] .glass-panel > :not(.absolute),
html[data-theme-page="public"] .glass-card > :not(.absolute) {
  position: relative;
  z-index: 1;
}

html[data-theme-page="public"] .glass-panel > .absolute,
html[data-theme-page="public"] .glass-card > .absolute {
  z-index: 1;
}

html[data-theme-page="public"] [data-doc-content],
html[data-theme-page="public"] [data-doc-content] > * {
  min-width: 0;
}

html[data-theme-page="public"] .glass-button-primary {
  background: rgb(var(--accent-rgb)) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgb(var(--accent-rgb) / 0.24) !important;
}

html[data-theme-page="public"] .glass-button-primary:hover {
  background: rgb(var(--accent-strong-rgb)) !important;
  box-shadow: 0 8px 25px rgb(var(--accent-rgb) / 0.30) !important;
}

html[data-theme-page="public"] .glass-button-secondary {
  background: rgb(var(--surface-rgb) / 0.88) !important;
  color: rgb(var(--text-rgb)) !important;
  border-color: rgb(var(--border-rgb) / 0.65) !important;
}

html[data-theme-page="public"] .glass-button-secondary:hover {
  background: rgb(var(--surface-rgb) / 1) !important;
  border-color: rgb(var(--border-rgb) / 0.85) !important;
}

html[data-theme-page="public"] .pricing-toggle {
  background: var(--glass-control-fill) !important;
  border-color: var(--glass-control-border) !important;
  box-shadow: var(--glass-control-shadow) !important;
}

html[data-theme-page="public"] .pricing-toggle-option {
  color: rgb(var(--muted-rgb)) !important;
}

html[data-theme-page="public"] .pricing-toggle-option.is-active {
  background: var(--glass-control-active-bg) !important;
  color: white !important;
  box-shadow: var(--glass-control-active-shadow) !important;
}

html[data-theme-page="public"] .legal-page h1,
html[data-theme-page="public"] .legal-page h2,
html[data-theme-page="public"] .legal-page strong {
  color: rgb(var(--text-rgb)) !important;
}

html[data-theme-page="public"] .legal-page p,
html[data-theme-page="public"] .legal-page li {
  color: rgb(var(--muted-rgb)) !important;
}

html[data-theme-page="public"] .legal-page a {
  color: rgb(var(--accent-rgb)) !important;
}

.theme-option-button {
  min-height: 2.5rem;
  border-radius: 0.9rem;
  border: 1px solid var(--theme-option-border);
  background: var(--theme-option-fill);
  color: rgb(var(--muted-rgb));
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.theme-option-button:hover {
  transform: translateY(-1px);
  color: rgb(var(--text-rgb));
}

.theme-option-button.is-active {
  background: rgb(var(--accent-rgb) / 0.14);
  border-color: rgb(var(--accent-rgb) / 0.32);
  color: rgb(var(--text-rgb));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

html[data-theme-page="dashboard"] .theme-option-button {
  border-color: rgb(255 255 255 / 0.08);
  background: rgb(255 255 255 / 0.04);
  color: rgb(228 225 231 / 0.62);
}

html[data-theme="light"][data-theme-page="dashboard"] .theme-option-button {
  border-color: rgb(26 26 30 / 0.08);
  background: rgb(26 26 30 / 0.04);
  color: rgb(26 26 30 / 0.62);
}

html[data-theme-page="dashboard"] .theme-option-button.is-active {
  background: rgb(var(--accent-rgb) / 0.16);
  border-color: rgb(var(--accent-rgb) / 0.34);
  color: rgb(244 241 255);
}

html[data-theme="light"][data-theme-page="dashboard"] .theme-option-button.is-active {
  color: rgb(26 26 30);
}

html[data-theme-page="dashboard"] [data-theme-settings-panel][hidden] {
  display: none !important;
}

html[data-theme-page="dashboard"] [data-theme-settings-panel] {
  background: rgb(255 255 255 / 0.04);
}

html[data-theme="light"][data-theme-page="dashboard"] [data-theme-settings-panel] {
  background: rgb(26 26 30 / 0.03);
}