/* Shared by the user portal, administrator console and setup. */
:root {
  color-scheme: light;
  --bg: #f5f7fb; --surface: #ffffff; --surface-strong: #ffffff;
  --surface-muted: #f6f8fc; --sidebar: #ffffff; --chrome: #ffffff;
  --text: #18233c; --text-soft: #4c5b75; --muted: #68758c; --faint: #79869b;
  --border: #e0e6f0; --border-soft: #e8edf5; --border-strong: #c9d3e3; --hover: #eff3fa;
  --accent: #315cff; --accent-hover: #244be0; --accent-strong: #2951da; --accent-tint: #edf2ff; --on-accent: #ffffff;
  --danger: #bc3547; --danger-hover: #a3293b; --danger-tint: #fff0f2;
  --warning: #91630d; --warning-tint: #fff7e5; --info: #315bb5; --info-tint: #edf3ff;
  --success: #16754e; --success-tint: #eaf7ef; --purple: #6853b0; --purple-tint: #f1edff;
  --balance-bg: #315cff; --balance-text: #ffffff; --balance-soft: #e0e7ff;
  --shadow-float: 0 24px 70px rgb(24 35 60 / 16%); --ring: 0 0 0 3px rgb(49 92 255 / 22%);
  --bg-overlay: rgb(15 18 30 / 45%);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101116; --surface: #17191f; --surface-strong: #17191f;
  --surface-muted: #20222b; --sidebar: #14161c; --chrome: #14161c;
  --text: #ededf4; --text-soft: #c2c5d3; --muted: #a2a3b0; --faint: #9295a8;
  --border: #30333e; --border-soft: #2b2d35; --border-strong: #484d60; --hover: #252833;
  --accent: #b2acff; --accent-hover: #c7c2ff; --accent-strong: #bbb5ff; --accent-tint: #2a2742; --on-accent: #171521;
  --danger: #ff98a5; --danger-hover: #ffafba; --danger-tint: #35202a;
  --warning: #edc878; --warning-tint: #302a1d; --info: #9dbfff; --info-tint: #202b40;
  --success: #83d8ad; --success-tint: #1b3028; --purple: #c4b0ff; --purple-tint: #2d2541;
  --balance-bg: #1b1d28; --balance-text: #eeeff8; --balance-soft: #b5b8cb;
  --shadow-float: 0 24px 70px rgb(0 0 0 / 40%); --ring: 0 0 0 3px rgb(178 172 255 / 25%);
  --bg-overlay: rgb(0 0 0 / 65%);
}
/* CSS also follows the system when scripting is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; --bg: #101116; --surface: #17191f; --surface-strong: #17191f; --surface-muted: #20222b; --sidebar: #14161c; --chrome: #14161c; --text: #ededf4; --text-soft: #c2c5d3; --muted: #a2a3b0; --faint: #9295a8; --border: #30333e; --border-soft: #2b2d35; --border-strong: #484d60; --hover: #252833; --accent: #b2acff; --accent-hover: #c7c2ff; --accent-strong: #bbb5ff; --accent-tint: #2a2742; --on-accent: #171521; --danger: #ff98a5; --danger-hover: #ffafba; --danger-tint: #35202a; --warning: #edc878; --warning-tint: #302a1d; --info: #9dbfff; --info-tint: #202b40; --success: #83d8ad; --success-tint: #1b3028; --purple: #c4b0ff; --purple-tint: #2d2541; --balance-bg: #1b1d28; --balance-text: #eeeff8; --balance-soft: #b5b8cb; --shadow-float: 0 24px 70px rgb(0 0 0 / 40%); --ring: 0 0 0 3px rgb(178 172 255 / 25%); --bg-overlay: rgb(0 0 0 / 65%); }
}
:root {
  --card: var(--surface); --panel: var(--surface); --ink: var(--text); --ink2: var(--text-soft); --ink3: var(--muted);
  --line: var(--border); --tint: var(--accent-tint); --accent2: var(--accent); --accent-weak: var(--accent-tint); --accent-border: var(--border);
  --ok: var(--success); --ok-weak: var(--success-tint); --warn: var(--warning); --warn-weak: var(--warning-tint); --bad: var(--danger); --bad-weak: var(--danger-tint);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.theme-picker { position: relative; display: inline-block; flex: none; margin: 0; color: var(--text-soft); font-size: 13px; }
.theme-trigger { display: grid; width: 36px; height: 36px; place-items: center; list-style: none; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; }
.theme-trigger::-webkit-details-marker { display: none; }
.theme-trigger:hover, .theme-picker[open] .theme-trigger { background: var(--hover); color: var(--text); }
.theme-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.theme-trigger svg, .theme-menu svg { display: block; width: 18px; height: 18px; flex: none; }
.theme-trigger [data-theme-icon] { display: none; }
:root:not([data-theme-preference]) .theme-trigger [data-theme-icon="system"],
:root[data-theme-preference="system"] .theme-trigger [data-theme-icon="system"],
:root[data-theme-preference="light"] .theme-trigger [data-theme-icon="light"],
:root[data-theme-preference="dark"] .theme-trigger [data-theme-icon="dark"] { display: block; }
.theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 164px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-float); }
.theme-menu button { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-soft); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.theme-menu button:hover { background: var(--hover); color: var(--text); box-shadow: none; filter: none; }
.theme-menu button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-strong); }
.theme-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.theme-check { margin-left: auto; visibility: hidden; }
.theme-menu button[aria-pressed="true"] .theme-check { visibility: visible; }
.auth-theme { display: flex; justify-content: flex-end; margin-bottom: 26px; }
.login-page > .auth-theme { position: absolute; top: 24px; right: 28px; z-index: 1; }
.login-body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
.setup-start { width: min(780px, calc(100% - 32px)); margin: 36px auto; }
::selection { background: var(--accent-tint); color: var(--text); }
@media (max-width: 680px) {
  .login-page > .auth-theme { top: 16px; right: 16px; }
}

/* Pickers at the start of a row open inward on narrow screens. */
.topbar nav .theme-menu,.topline .theme-menu,.surface > .theme-picker .theme-menu{left:0;right:auto}