/*
 * Sphinx Authentication — SuperAgent Platform UI Theme
 *
 * Design tokens derived from the SuperAgent Platform branding spec.
 * Primary: #1a73e8 (Platform blue)
 * Uses a clean, modern aesthetic with clear hierarchy and accessibility.
 */

:root {
  /* Primary palette — 12vectors electric blue */
  --sphinx-primary: #0040df;
  --sphinx-primary-hover: #0035b8;
  --sphinx-primary-light: #e9f0ff;
  --sphinx-primary-dark: #002a8c;
  --sphinx-primary-bright: #2d5bff;

  /* Neutral palette — house "Paper": warm cream (matches the design system's
     page paper, not a cool grey/blue). Surfaces stay white so cards pop on it. */
  --sphinx-bg: #f1ede3;
  --sphinx-surface: #ffffff;
  --sphinx-border: #dfe3ea;
  --sphinx-border-focus: #0040df;
  --sphinx-text-primary: #191c1e;
  --sphinx-text-secondary: #43474e;
  --sphinx-text-disabled: #8a909c;
  --sphinx-text-inverse: #ffffff;
  /* Default 12v auth-page surface: the design system's warm paper with two faint
     radial tints (navy top-right, blue bottom-left) — no scenic image. The 7
     alternate themes override --sphinx-page-bg with their own scenic backdrops. */
  --sphinx-page-bg:
    radial-gradient(1100px 560px at 88% -8%, rgba(39, 56, 74, 0.06), transparent 60%),
    radial-gradient(820px 460px at -8% 108%, rgba(0, 64, 223, 0.05), transparent 55%),
    #f1ede3;

  /* Semantic colors */
  --sphinx-success: #0d904f;
  --sphinx-success-bg: #e6f4ea;
  --sphinx-error: #d93025;
  --sphinx-error-bg: #fce8e6;
  --sphinx-warning: #e37400;
  --sphinx-warning-bg: #fef7e0;
  --sphinx-info: #0040df;
  --sphinx-info-bg: #e9f0ff;

  /* Elevation — hairline-forward: structure from the 1px border, shadow only as a soft far lift */
  --sphinx-shadow-sm: 0 1px 0 rgba(25, 28, 30, 0.02);
  --sphinx-shadow-md: 0 1px 0 rgba(25, 28, 30, 0.03), 0 8px 22px -18px rgba(25, 28, 30, 0.40);
  --sphinx-shadow-lg: 0 1px 0 rgba(25, 28, 30, 0.03), 0 18px 40px -24px rgba(25, 28, 30, 0.45);

  /* Typography — body is Inter; display/wordmark are theme-overridable */
  --sphinx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sphinx-font-display: 'Inter Tight', var(--sphinx-font-family);
  --sphinx-font-wordmark: 'Inter Tight', var(--sphinx-font-family);
  --sphinx-wordmark-weight: 700;
  --sphinx-wordmark-style: normal;
  --sphinx-wordmark-transform: none;
  --sphinx-wordmark-spacing: -0.02em;
  --sphinx-wordmark-size: 30px;
  --sphinx-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Mono', 'Roboto Mono', monospace;

  /* Spacing */
  --sphinx-radius-sm: 4px;
  --sphinx-radius-md: 8px;
  --sphinx-radius-btn: 6px;
  --sphinx-radius-lg: 10px;
  --sphinx-radius-full: 9999px;

  /* Transitions */
  --sphinx-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * === Themes ===
 * The :root values above are the default "12v" theme. Each app may select one of the
 * themes below; the chosen theme is applied via a data-theme attribute on <html>
 * (set by the login/SSO pages). Themes only re-map color tokens — layout is shared.
 */

/* 12v — explicit alias of the default (no overrides needed). */
:root[data-theme="12v"] {}

/* 12v admin/profile pages: warm paper with the same faint radial tints as the
   auth surface, so the whole 12v experience matches the design system's page
   (other themes keep their flat --sphinx-bg body fill). */
:root[data-theme="12v"] body {
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(39, 56, 74, 0.06), transparent 60%),
    radial-gradient(820px 460px at -8% 108%, rgba(0, 64, 223, 0.05), transparent 55%),
    var(--sphinx-bg);
  background-attachment: fixed;
}

/* ── Frost — nordic minimal; grotesque type (Space Grotesk). ── */
:root[data-theme="frost"] {
  --sphinx-primary: #33518a;
  --sphinx-primary-hover: #284174;
  --sphinx-primary-light: #eef2f9;
  --sphinx-primary-dark: #20335c;
  --sphinx-primary-bright: #4a6db0;
  --sphinx-bg: #eef1f5;
  --sphinx-surface: #ffffff;
  --sphinx-border: #dde3ee;
  --sphinx-border-focus: #33518a;
  --sphinx-text-primary: #1c2430;
  --sphinx-text-secondary: #46506a;
  --sphinx-text-disabled: #8a93a8;
  --sphinx-info: #33518a;
  --sphinx-info-bg: #eef2f9;
  --sphinx-page-bg: #eef1f5 url('/ui/bg-frost.svg') center bottom / cover no-repeat;
  --sphinx-font-display: 'Syne', var(--sphinx-font-family);
  --sphinx-font-wordmark: 'Syne', var(--sphinx-font-family);
  --sphinx-wordmark-weight: 700;
  --sphinx-wordmark-spacing: -0.01em;
}

/* ── Nocturne — indigo nebula; ethereal serif wordmark (Cormorant). ── */
:root[data-theme="nocturne"] {
  --sphinx-primary: #6a43e0;
  --sphinx-primary-hover: #5836c4;
  --sphinx-primary-light: #1e1640;
  --sphinx-primary-dark: #4a2da0;
  --sphinx-primary-bright: #a48bff;
  --sphinx-bg: #100c20;
  --sphinx-surface: #161229;
  --sphinx-border: #2c2546;
  --sphinx-border-focus: #6a43e0;
  --sphinx-text-primary: #ece9f7;
  --sphinx-text-secondary: #b1aacf;
  --sphinx-text-disabled: #736c98;
  --sphinx-text-inverse: #ffffff;
  --sphinx-success: #34d399; --sphinx-success-bg: #10241c;
  --sphinx-error: #f87171; --sphinx-error-bg: #2a1414;
  --sphinx-warning: #fbbf24; --sphinx-warning-bg: #2a2210;
  --sphinx-info: #a48bff; --sphinx-info-bg: #1e1640;
  --sphinx-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.6);
  --sphinx-shadow-md: 0 2px 8px 0 rgba(0,0,0,.6);
  --sphinx-shadow-lg: 0 10px 28px 0 rgba(0,0,0,.7);
  --sphinx-page-bg: #0e0a20 url('/ui/bg-nocturne.svg') center top / cover no-repeat;
  --sphinx-font-wordmark: 'Cormorant', Georgia, serif;
  --sphinx-wordmark-weight: 600;
  --sphinx-wordmark-style: italic;
  --sphinx-wordmark-spacing: 0;
  --sphinx-wordmark-size: 40px;
}

/* ── Pinewood — forest; earthy slab serif (Bitter). ── */
:root[data-theme="pinewood"] {
  --sphinx-primary: #2c6440;
  --sphinx-primary-hover: #224f33;
  --sphinx-primary-light: #e8f1ea;
  --sphinx-primary-dark: #173925;
  --sphinx-primary-bright: #3f8a59;
  --sphinx-bg: #eef4ec;
  --sphinx-surface: #f7faf6;
  --sphinx-border: #d9e4d8;
  --sphinx-border-focus: #2c6440;
  --sphinx-text-primary: #1b2a1f;
  --sphinx-text-secondary: #3f5a46;
  --sphinx-text-disabled: #7d9382;
  --sphinx-info: #2c6440;
  --sphinx-info-bg: #e8f1ea;
  --sphinx-page-bg: #eef4ec url('/ui/bg-pinewood.svg') center bottom / cover no-repeat;
  --sphinx-font-display: 'Bitter', Georgia, serif;
  --sphinx-font-wordmark: 'Bitter', Georgia, serif;
  --sphinx-wordmark-weight: 700;
  --sphinx-wordmark-spacing: 0;
  --sphinx-wordmark-size: 31px;
}

/* ── Cinder — warm charcoal + ember; condensed industrial (Oswald). ── */
:root[data-theme="cinder"] {
  --sphinx-primary: #e8902f;
  --sphinx-primary-hover: #d07e20;
  --sphinx-primary-light: #2a1d10;
  --sphinx-primary-dark: #b06a18;
  --sphinx-primary-bright: #f0a850;
  --sphinx-bg: #15110f;
  --sphinx-surface: #1c1917;
  --sphinx-border: #332e29;
  --sphinx-border-focus: #e8902f;
  --sphinx-text-primary: #f1ebe4;
  --sphinx-text-secondary: #bcb1a5;
  --sphinx-text-disabled: #807469;
  --sphinx-text-inverse: #1a1209;
  --sphinx-success: #7ec46b; --sphinx-success-bg: #16240f;
  --sphinx-error: #f87171; --sphinx-error-bg: #2a1414;
  --sphinx-warning: #f0a850; --sphinx-warning-bg: #2a1d10;
  --sphinx-info: #f0a850; --sphinx-info-bg: #2a1d10;
  --sphinx-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.6);
  --sphinx-shadow-md: 0 2px 8px 0 rgba(0,0,0,.6);
  --sphinx-shadow-lg: 0 10px 28px 0 rgba(0,0,0,.7);
  --sphinx-page-bg: #141110 url('/ui/bg-cinder.svg') center bottom / cover no-repeat;
  --sphinx-font-display: 'Oswald', var(--sphinx-font-family);
  --sphinx-font-wordmark: 'Oswald', var(--sphinx-font-family);
  --sphinx-wordmark-weight: 600;
  --sphinx-wordmark-transform: uppercase;
  --sphinx-wordmark-spacing: 0.06em;
  --sphinx-wordmark-size: 34px;
}

/* ── Solstice — warm sunset; warm serif (Fraunces). ── */
:root[data-theme="solstice"] {
  --sphinx-primary: #c43f5a;
  --sphinx-primary-hover: #a8324a;
  --sphinx-primary-light: #fdeef0;
  --sphinx-primary-dark: #8a2740;
  --sphinx-primary-bright: #e0697f;
  --sphinx-bg: #fff1ea;
  --sphinx-surface: #fff6f1;
  --sphinx-border: #f1d8d2;
  --sphinx-border-focus: #c43f5a;
  --sphinx-text-primary: #2c1f28;
  --sphinx-text-secondary: #6a4f5b;
  --sphinx-text-disabled: #94727e;
  --sphinx-info: #c43f5a;
  --sphinx-info-bg: #fdeef0;
  --sphinx-page-bg: #c25e72 url('/ui/bg-solstice.svg') center bottom / cover no-repeat;
  --sphinx-font-wordmark: 'Fraunces', Georgia, serif;
  --sphinx-wordmark-weight: 600;
  --sphinx-wordmark-style: italic;
  --sphinx-wordmark-spacing: 0;
  --sphinx-wordmark-size: 36px;
  --sphinx-logo-color: #ffffff;
}

/* ── Meridian — regal gold + teal; inscriptional caps (Cinzel). ── */
:root[data-theme="meridian"] {
  --sphinx-primary: #cda23f;
  --sphinx-primary-hover: #b78f30;
  --sphinx-primary-light: #2a2310;
  --sphinx-primary-dark: #9a7826;
  --sphinx-primary-bright: #ecc868;
  --sphinx-bg: #0a1c1e;
  --sphinx-surface: #0f2326;
  --sphinx-border: #244a4d;
  --sphinx-border-focus: #cda23f;
  --sphinx-text-primary: #eef3f0;
  --sphinx-text-secondary: #aec4be;
  --sphinx-text-disabled: #6f8a86;
  --sphinx-text-inverse: #15110a;
  --sphinx-success: #5fc6a0; --sphinx-success-bg: #0c2620;
  --sphinx-error: #f08a7a; --sphinx-error-bg: #2a1512;
  --sphinx-warning: #ecc868; --sphinx-warning-bg: #2a2310;
  --sphinx-info: #ecc868; --sphinx-info-bg: #2a2310;
  --sphinx-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.55);
  --sphinx-shadow-md: 0 2px 8px 0 rgba(0,0,0,.55);
  --sphinx-shadow-lg: 0 10px 28px 0 rgba(0,0,0,.65);
  --sphinx-page-bg: #08191b url('/ui/bg-meridian.svg') center / cover no-repeat;
  --sphinx-font-wordmark: 'Cinzel', Georgia, serif;
  --sphinx-wordmark-weight: 700;
  --sphinx-wordmark-transform: uppercase;
  --sphinx-wordmark-spacing: 0.08em;
  --sphinx-wordmark-size: 27px;
}

/* === Base Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sphinx-font-family);
  background-color: var(--sphinx-bg);
  color: var(--sphinx-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Auth Page Layout === */
.sphinx-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--sphinx-page-bg);
}

.sphinx-auth-container {
  width: 100%;
  max-width: 440px;
}

/* === Logo & Header === */
.sphinx-logo {
  text-align: center;
  margin-bottom: 32px;
  text-decoration: none;      /* it is a link to the SSO home; keep the brand undecorated */
  color: inherit;
  cursor: pointer;
}

/* Sphinx mark: a PNG alpha-mask filled with the theme's accent, so the logo
   adopts each theme's colour from one asset (no per-theme image needed). */
.sphinx-logo-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  background-color: var(--sphinx-logo-color, var(--sphinx-primary));
  -webkit-mask: url('/ui/logo-mark.png') center / contain no-repeat;
          mask: url('/ui/logo-mark.png') center / contain no-repeat;
  /* subtle separation so the mark reads on busy/low-contrast backgrounds */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.sphinx-logo h1 {
  font-family: var(--sphinx-font-wordmark);
  font-size: var(--sphinx-wordmark-size, 30px);
  font-weight: var(--sphinx-wordmark-weight);
  font-style: var(--sphinx-wordmark-style);
  text-transform: var(--sphinx-wordmark-transform);
  letter-spacing: var(--sphinx-wordmark-spacing);
  color: var(--sphinx-text-primary);
  line-height: 1.12;
}

.sphinx-logo p {
  font-size: 14px;
  color: var(--sphinx-text-secondary);
  margin-top: 4px;
}

.sphinx-logo .tagline {
  font-family: var(--sphinx-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sphinx-text-disabled);
  margin-top: 6px;
}

/* Inline Lucide icon used in table cells (e.g. access-type column). */
.sphinx-type-icon {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 2px;
  color: var(--sphinx-text-secondary);
}

/* Dashboard stat-group heading. */
.sphinx-stat-group {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sphinx-text-secondary);
  margin: 24px 0 12px;
}

/* Compact icon-only action button for table action columns. */
.sphinx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sphinx-text-secondary);
  border-radius: var(--sphinx-radius-btn);
  transition: all var(--sphinx-transition);
}
.sphinx-icon-btn:hover {
  color: var(--sphinx-text-primary);
  background: var(--sphinx-bg);
}
.sphinx-icon-btn.danger:hover {
  color: var(--sphinx-error, #d23f3f);
}
.sphinx-icon-btn i,
.sphinx-icon-btn svg {
  width: 16px;
  height: 16px;
}

/* === Card === */
.sphinx-card {
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-lg);
  padding: 32px;
  box-shadow: var(--sphinx-shadow-sm);
}

.sphinx-card-header {
  margin-bottom: 24px;
}

.sphinx-card-header h2 {
  font-family: var(--sphinx-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--sphinx-text-primary);
}

.sphinx-card-header p {
  font-size: 14px;
  color: var(--sphinx-text-secondary);
  margin-top: 4px;
}

/* === Form Elements === */
.sphinx-form-group {
  margin-bottom: 20px;
}

.sphinx-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--sphinx-text-primary);
  margin-bottom: 6px;
}

.sphinx-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--sphinx-font-family);
  color: var(--sphinx-text-primary);
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-md);
  outline: none;
  transition: border-color var(--sphinx-transition), box-shadow var(--sphinx-transition);
}

.sphinx-input:focus {
  border-color: var(--sphinx-border-focus);
  box-shadow: 0 0 0 2px var(--sphinx-primary-light);
}

.sphinx-input:disabled {
  background: var(--sphinx-bg);
  color: var(--sphinx-text-disabled);
  cursor: not-allowed;
}

.sphinx-input::placeholder {
  color: var(--sphinx-text-disabled);
}

.sphinx-input.error {
  border-color: var(--sphinx-error);
  box-shadow: 0 0 0 2px var(--sphinx-error-bg);
}

.sphinx-select {
  width: auto;
  min-width: 160px;
  appearance: auto;
}

/* === Buttons === */
.sphinx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sphinx-font-family);
  border-radius: var(--sphinx-radius-btn);
  border: none;
  cursor: pointer;
  transition: all var(--sphinx-transition);
  text-decoration: none;
  gap: 8px;
  white-space: nowrap;
}

.sphinx-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sphinx-btn-primary {
  width: 100%;
  background: var(--sphinx-primary);
  color: var(--sphinx-text-inverse);
}

.sphinx-btn-primary:hover:not(:disabled) {
  background: var(--sphinx-primary-hover);
}

.sphinx-btn-primary:active:not(:disabled) {
  background: var(--sphinx-primary-dark);
}

.sphinx-btn-secondary {
  width: 100%;
  background: var(--sphinx-surface);
  color: var(--sphinx-primary);
  border: 1px solid var(--sphinx-border);
}

.sphinx-btn-secondary:hover:not(:disabled) {
  background: var(--sphinx-primary-light);
  border-color: var(--sphinx-primary);
}

.sphinx-btn-text {
  background: none;
  color: var(--sphinx-primary);
  padding: 0;
  height: auto;
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-family: var(--sphinx-font-family);
}

.sphinx-btn-text:hover {
  text-decoration: underline;
}

.sphinx-btn-loading {
  position: relative;
  color: transparent !important;
}

.sphinx-btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sphinx-spin 0.6s linear infinite;
}

@keyframes sphinx-spin {
  to { transform: rotate(360deg); }
}

.sphinx-btn-warning {
  color: var(--sphinx-warning);
  border-color: var(--sphinx-warning);
}

.sphinx-btn-warning:hover:not(:disabled) {
  background: var(--sphinx-warning-bg);
}

/* === Divider === */
.sphinx-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: var(--sphinx-text-secondary);
  font-size: 13px;
}

.sphinx-divider::before,
.sphinx-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sphinx-border);
}

.sphinx-divider span {
  padding: 0 16px;
}

/* === SSO Buttons === */
.sphinx-sso-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
/* A lone odd button (1 or 3 providers) spans the full row instead of sitting half-width,
   so the grid stays balanced whether there are 1, 2, 3, or 4+ providers. */
.sphinx-sso-buttons > .sphinx-sso-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

.sphinx-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sphinx-text-primary);
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-md);
  cursor: pointer;
  transition: all var(--sphinx-transition);
  text-decoration: none;
  font-family: var(--sphinx-font-family);
}

.sphinx-sso-btn:hover {
  background: var(--sphinx-bg);
  border-color: var(--sphinx-text-secondary);
}
/* Aviary keeps the "continue with" buttons on a clean cool-grey hover: the default
   --sphinx-bg (#f1ede3) is a warm cream left over from the legacy paper scheme and clashes
   with the aviary white card + cool blue accent. */
:root[data-theme="aviary"] .sphinx-sso-btn:hover {
  background: #f5f7fa;
  border-color: #c7cdd7;
}

.sphinx-sso-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* === Alert Messages === */
.sphinx-alert {
  padding: 12px 16px;
  border-radius: var(--sphinx-radius-md);
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sphinx-alert-error {
  background: var(--sphinx-error-bg);
  color: var(--sphinx-error);
}

.sphinx-alert-success {
  background: var(--sphinx-success-bg);
  color: var(--sphinx-success);
}

.sphinx-alert-warning {
  background: var(--sphinx-warning-bg);
  color: var(--sphinx-warning);
}

.sphinx-alert-info {
  background: var(--sphinx-info-bg);
  color: var(--sphinx-info);
}

/* === Links & Footer === */
.sphinx-link {
  color: var(--sphinx-primary);
  text-decoration: none;
  font-size: 14px;
}

.sphinx-link:hover {
  text-decoration: underline;
}

.sphinx-auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--sphinx-text-secondary);
}

.sphinx-auth-footer a {
  color: var(--sphinx-primary);
  text-decoration: none;
  font-weight: 500;
}

.sphinx-auth-footer a:hover {
  text-decoration: underline;
}

/* === Account chooser (SSO multi-account) === */
.sphinx-account-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-md);
  overflow: hidden;
}

.sphinx-account-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--sphinx-text-primary);
  border-bottom: 1px solid var(--sphinx-border);
  transition: background 0.15s ease;
}

.sphinx-account-item:last-child {
  border-bottom: none;
}

.sphinx-account-item:hover {
  background: var(--sphinx-primary-light);
}

.sphinx-account-email {
  font-size: 14px;
  font-weight: 500;
}

/* === MFA Code Input === */
.sphinx-code-input {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 24px 0;
}

.sphinx-code-input input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--sphinx-font-mono);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-md);
  outline: none;
  transition: border-color var(--sphinx-transition);
}

.sphinx-code-input input:focus {
  border-color: var(--sphinx-border-focus);
  box-shadow: 0 0 0 2px var(--sphinx-primary-light);
}

/* === Recovery Codes === */
.sphinx-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  background: var(--sphinx-bg);
  border-radius: var(--sphinx-radius-md);
  border: 1px solid var(--sphinx-border);
}

.sphinx-recovery-codes code {
  font-family: var(--sphinx-font-mono);
  font-size: 14px;
  color: var(--sphinx-text-primary);
  text-align: center;
  padding: 4px 0;
}

/* === Password Strength Indicator === */
.sphinx-password-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.sphinx-password-strength-bar {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--sphinx-border);
  transition: background-color var(--sphinx-transition);
}

.sphinx-password-strength-bar.weak { background: var(--sphinx-error); }
.sphinx-password-strength-bar.fair { background: var(--sphinx-warning); }
.sphinx-password-strength-bar.good { background: #fbbc04; }
.sphinx-password-strength-bar.strong { background: var(--sphinx-success); }

/* === Checkbox === */
.sphinx-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.sphinx-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--sphinx-primary);
}

.sphinx-checkbox-label {
  font-size: 14px;
  color: var(--sphinx-text-secondary);
}

/* === Helper Text === */
.sphinx-helper-text {
  font-size: 12px;
  color: var(--sphinx-text-secondary);
  margin-top: 4px;
}

.sphinx-helper-text.error {
  color: var(--sphinx-error);
}

/* === Inline text actions === */
.sphinx-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* === Platform Branding === */
.sphinx-powered-by {
  text-align: center;
  margin-top: 32px;
  font-size: 12px;
  color: var(--sphinx-text-disabled);
}

.sphinx-powered-by a {
  color: var(--sphinx-text-secondary);
  text-decoration: none;
}

.sphinx-powered-by a:hover {
  text-decoration: underline;
}

/* ============================================================
 * ADMIN LAYOUT
 * ============================================================ */

.sphinx-admin {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Admin Navigation — blends into the page paper (admin/profile are always 12v);
   the hairline bottom border is the only divider, so the bar doesn't read as a
   detached white strip on the warm background. */
.sphinx-admin-nav {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  background: transparent;
  border-bottom: 1px solid var(--sphinx-border);
  gap: 32px;
}

.sphinx-admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--sphinx-text-primary);
  text-decoration: none;
}

.sphinx-admin-nav-links {
  display: flex;
  gap: 4px;
}

.sphinx-admin-nav-links a {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sphinx-text-secondary);
  text-decoration: none;
  border-radius: 0;
  position: relative;
  transition: all var(--sphinx-transition);
}

.sphinx-admin-nav-links a:hover {
  background: rgba(25, 28, 30, 0.05);
  color: var(--sphinx-text-primary);
}

.sphinx-admin-nav-links a.active {
  background: none;
  color: var(--sphinx-text-primary);
}
.sphinx-admin-nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--sphinx-primary);
}

.sphinx-admin-nav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--sphinx-text-secondary);
}

/* Admin Main Content */
.sphinx-admin-main {
  flex: 1;
  padding: 32px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.sphinx-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sphinx-admin-header h1 {
  font-family: var(--sphinx-font-display);
  font-size: 24px;
  font-weight: 600;
}

/* Stats Grid */
.sphinx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.sphinx-stat-card {
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-lg);
  padding: 20px 24px;
  box-shadow: var(--sphinx-shadow-sm);
}

.sphinx-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--sphinx-text-primary);
  line-height: 1.2;
}

.sphinx-stat-label {
  font-size: 13px;
  color: var(--sphinx-text-secondary);
  margin-top: 4px;
}

/* Dashboard — compact summary columns (Users / Applications / Admin actions) */
.sphinx-dash-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.sphinx-dash-group {
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--sphinx-shadow-sm);
}

.sphinx-dash-group h3 {
  font-family: var(--sphinx-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sphinx-text-secondary);
  margin: 0 0 8px;
}

.sphinx-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--sphinx-border);
  font-size: 14px;
}
.sphinx-stat-row:first-of-type { border-top: none; }
.sphinx-stat-row span { color: var(--sphinx-text-secondary); }
.sphinx-stat-row strong { font-size: 18px; font-weight: 600; }

/* Dashboard — growth cards with inline bar charts */
.sphinx-growth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.sphinx-growth-card {
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--sphinx-shadow-sm);
}

.sphinx-growth-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.sphinx-growth-title {
  font-family: var(--sphinx-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sphinx-text-secondary);
}
.sphinx-growth-total {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.sphinx-growth-deltas {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.sphinx-delta-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--sphinx-radius-full);
  background: var(--sphinx-bg);
}
.sphinx-delta-chip em {
  font-style: normal;
  color: var(--sphinx-text-disabled);
  margin-left: 3px;
}

.sphinx-growth-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sphinx-metric-bar {
  display: grid;
  grid-template-columns: 30px 1fr 32px;
  align-items: center;
  gap: 10px;
}
.sphinx-metric-bar-label {
  font-family: var(--sphinx-font-mono);
  font-size: 11px;
  color: var(--sphinx-text-secondary);
}
.sphinx-metric-bar-track {
  height: 6px;
  background: var(--sphinx-bg);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-full);
  overflow: hidden;
}
.sphinx-metric-bar-fill {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--sphinx-primary);
  border-radius: var(--sphinx-radius-full);
  transition: width var(--sphinx-transition);
}
.sphinx-metric-bar-value {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

/* Growth trend chart */
.sphinx-chart-card {
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-lg);
  padding: 16px 18px 12px;
  box-shadow: var(--sphinx-shadow-sm);
}
.sphinx-chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.sphinx-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sphinx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sphinx-border);
  background: var(--sphinx-bg);
  border-radius: var(--sphinx-radius-full);
  padding: 3px 11px 3px 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sphinx-text);
  cursor: pointer;
  transition: opacity var(--sphinx-transition);
}
.sphinx-legend-item.off {
  opacity: 0.4;
}
.sphinx-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.sphinx-chart-modes {
  display: inline-flex;
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-full);
  overflow: hidden;
}
.sphinx-chart-modes button {
  border: 0;
  background: var(--sphinx-surface);
  color: var(--sphinx-text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
}
.sphinx-chart-modes button.active {
  background: var(--sphinx-primary);
  color: #fff;
}
.sphinx-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.sphinx-chart-grid line {
  stroke: var(--sphinx-border);
  stroke-width: 1;
}
.sphinx-chart-axis text {
  fill: var(--sphinx-text-secondary);
  font-family: var(--sphinx-font-mono);
  font-size: 10px;
}
.sphinx-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sphinx-chart-empty {
  padding: 40px 0;
  text-align: center;
}

/* Admin Sections */
.sphinx-admin-section {
  margin-bottom: 32px;
}

.sphinx-admin-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Admin Toolbar */
.sphinx-admin-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.sphinx-search-box {
  flex: 1;
}

/* Table */
.sphinx-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sphinx-surface);
  border: 1px solid var(--sphinx-border);
  border-radius: var(--sphinx-radius-lg);
  overflow: hidden;
}

.sphinx-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--sphinx-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sphinx-text-secondary);
  background: var(--sphinx-bg);
  border-bottom: 1px solid var(--sphinx-border);
}

.sphinx-table td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--sphinx-border);
  vertical-align: middle;
}

.sphinx-table tbody tr:last-child td {
  border-bottom: none;
}

.sphinx-table tbody tr:hover {
  background: var(--sphinx-bg);
}

.sphinx-table-empty {
  text-align: center;
  color: var(--sphinx-text-secondary);
  padding: 32px 16px !important;
}

.sphinx-truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.sphinx-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--sphinx-radius-full);
}

.sphinx-badge-active {
  background: var(--sphinx-success-bg);
  color: var(--sphinx-success);
}

.sphinx-badge-suspended {
  background: var(--sphinx-error-bg);
  color: var(--sphinx-error);
}

.sphinx-badge-pending_verification {
  background: var(--sphinx-warning-bg);
  color: var(--sphinx-warning);
}

.sphinx-badge-deactivated {
  background: var(--sphinx-bg);
  color: var(--sphinx-text-disabled);
}

/* Action Group */
.sphinx-action-group {
  /* This class sits directly on a <td>. Using display:flex here drops the cell
     out of the table row's height sizing, so an empty Action cell (e.g. a row
     with no revoke button) collapses and its bottom border misaligns with its
     neighbours. Keep it a real table-cell and lay the buttons out inline. */
  white-space: nowrap;
}
.sphinx-action-group > * {
  vertical-align: middle;
}
.sphinx-action-group > * + * {
  margin-left: 12px;
}

.sphinx-text-warning {
  color: var(--sphinx-warning) !important;
}

.sphinx-text-success {
  color: var(--sphinx-success) !important;
}

.sphinx-text-secondary {
  color: var(--sphinx-text-secondary);
}

/* Detail Grid */
.sphinx-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}

.sphinx-detail-list {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}

.sphinx-detail-list dt {
  color: var(--sphinx-text-secondary);
  font-weight: 500;
}

.sphinx-detail-list dd {
  color: var(--sphinx-text-primary);
}

.sphinx-detail-list code {
  font-family: var(--sphinx-font-mono);
  font-size: 13px;
  background: var(--sphinx-bg);
  padding: 1px 6px;
  border-radius: var(--sphinx-radius-sm);
}

/* Pagination */
.sphinx-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 0;
}

.sphinx-page-info {
  font-size: 14px;
  color: var(--sphinx-text-secondary);
}

/* Loading */
.sphinx-loading {
  text-align: center;
  padding: 32px;
  color: var(--sphinx-text-secondary);
  font-size: 14px;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* === Responsive === */
/* ════════════════════════════════════════════════════════════════════════════
 * AVIARY — the platform default. A Cloudflare-style split: the auth card on the
 * left, a rotating European-bird photograph on the right (see BirdImages +
 * PageLayout.birdSceneHtml). Inherits the default (:root) palette; ONLY the
 * auth-page layout is re-scoped, so every other theme's centred-card layout is
 * byte-untouched. Collapses to a single centred column (form only) under 860px.
 * ══════════════════════════════════════════════════════════════════════════*/
:root[data-theme="aviary"] body { background: #ffffff; }

:root[data-theme="aviary"] .sphinx-auth-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
  background: #ffffff;                  /* clean white left panel — no paper */
}
/* left column: full height — brand pinned top, form centred, footer pinned bottom */
:root[data-theme="aviary"] .sphinx-auth-container {
  justify-self: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 392px;
  padding: 52px 48px;
  text-align: left;
}

/* ── Brand: a small diamond mark + wordmark + tag, top-left (replaces the griffin) ── */
:root[data-theme="aviary"] .sphinx-logo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 11px;
  text-align: left;
  margin: 0 0 auto;                    /* pin the brand to the top of the panel */
}
:root[data-theme="aviary"] .sphinx-logo-icon {
  grid-row: 1 / 3; grid-column: 1;
  width: 36px; height: 36px; margin: 0;
  -webkit-mask: none; mask: none;      /* drop the griffin mask */
  background: url('/ui/sphinx-mark.svg') center / contain no-repeat;
  filter: none;
  display: block !important;
}
:root[data-theme="aviary"] .sphinx-logo-icon::after { content: none; }
:root[data-theme="aviary"] .sphinx-logo h1 {
  grid-column: 2; align-self: end;
  font-size: 19px; line-height: 1; letter-spacing: -0.02em; margin: 0;
}
:root[data-theme="aviary"] .sphinx-logo .tagline {
  grid-column: 2; align-self: start;
  font-size: 9px; margin-top: 3px;
}
:root[data-theme="aviary"] .sphinx-logo p { display: none; }   /* legacy subtitle hidden */

/* ── Borderless form: sits directly on the white panel (no card chrome) ── */
:root[data-theme="aviary"] .sphinx-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* Footer kept (Secured by Sphinx · BUILD · © · Privacy · Terms) — just re-themed:
   left-aligned under the form, quiet, to match the panel. */
:root[data-theme="aviary"] .sphinx-powered-by {
  text-align: left;
  margin-top: auto;                    /* pin the footer to the bottom of the panel */
  padding-top: 40px;
  font-size: 11px;
  line-height: 1.75;
  color: var(--sphinx-text-disabled);
}

/* Page heading ("Welcome back"), forgot link, and primary button — matched to the mockup. */
:root[data-theme="aviary"] .sphinx-card-header { margin-bottom: 24px; }
:root[data-theme="aviary"] .sphinx-card-header h2 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
}
:root[data-theme="aviary"] .sphinx-card-header p {
  font-size: 14.5px; margin-top: 6px; color: var(--sphinx-text-secondary);
}
:root[data-theme="aviary"] .sphinx-form-actions { justify-content: flex-end; }
:root[data-theme="aviary"] .sphinx-btn-primary {
  box-shadow: 0 10px 24px -14px rgba(0, 64, 223, 0.9);
}
/* right column: the rotating photograph */
:root[data-theme="aviary"] .sphinx-auth-scene {
  position: relative;
  align-self: stretch;
  margin: 0;
  overflow: hidden;
  background: #0c1220;                 /* holds while the image loads */
}
:root[data-theme="aviary"] .sphinx-auth-scene.is-empty {
  background: linear-gradient(180deg, #12224a 0%, #33518a 55%, #6f7fa8 78%, #e6a86a 100%);
}
:root[data-theme="aviary"] .sphinx-scene-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                   /* object-position (focal) set inline per image */
}
:root[data-theme="aviary"] .sphinx-scene-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,12,28,.30) 0%, rgba(6,12,28,0) 30%,
    rgba(6,12,28,.20) 56%, rgba(6,12,28,.86) 100%);
}
/* Strapline — brand kicker + headline, above the credit. */
:root[data-theme="aviary"] .sphinx-scene-brand {
  position: absolute; left: 40px; right: 40px; bottom: 100px; color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
:root[data-theme="aviary"] .sphinx-scene-kicker {
  font-family: var(--sphinx-font-mono);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: .85; margin: 0 0 8px;
}
:root[data-theme="aviary"] .sphinx-scene-line {
  font-family: var(--sphinx-font-display); font-weight: 700;
  font-size: 26px; line-height: 1.14; letter-spacing: -0.015em; margin: 0;
  text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
/* Bird credit — species on the left, photographer/licence on the right. */
:root[data-theme="aviary"] .sphinx-scene-credit {
  position: absolute; left: 40px; right: 40px; bottom: 34px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
:root[data-theme="aviary"] .sphinx-scene-who { display: flex; flex-direction: column; }
:root[data-theme="aviary"] .sphinx-scene-name {
  font-family: var(--sphinx-font-display);
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
}
:root[data-theme="aviary"] .sphinx-scene-sci { font-style: italic; font-size: 13px; opacity: .85; margin-top: 1px; }
:root[data-theme="aviary"] .sphinx-scene-by {
  font-family: var(--sphinx-font-mono);
  font-size: 9.5px; line-height: 1.5; letter-spacing: .03em; opacity: .72;
  text-align: right; max-width: 52%;
}

@media (max-width: 860px) {
  :root[data-theme="aviary"] .sphinx-auth-page { grid-template-columns: 1fr; }
  :root[data-theme="aviary"] .sphinx-auth-scene { display: none; }
  :root[data-theme="aviary"] .sphinx-auth-container { max-width: 448px; padding: 32px 24px; }
}

@media (max-width: 480px) {
  .sphinx-auth-page {
    padding: 16px;
  }

  .sphinx-card {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .sphinx-admin-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }

  .sphinx-admin-main {
    padding: 16px;
  }

  .sphinx-admin-toolbar {
    flex-direction: column;
  }

  .sphinx-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * KOMPUTE — the platform default theme. FULLY SCOPED to [data-theme="kompute"]
 * so :root and every other named theme are byte-untouched. A faithful build of
 * the Kompute design system: retro-hardware / instrument-panel look — cool
 * off-white machine plastic, squared corners, HEAVY ink borders on panels &
 * cards, module-index keycaps, LED-segment meters, LCD readouts, silkscreen
 * legends, emboss-raised nameplates, the red RETURN-key accent. No graphic logo.
 * Component vocabulary reproduced from the Kompute example templates
 * (Panel / Card / MeterBar / Terminal / DataTable / ConsoleShell).
 * ══════════════════════════════════════════════════════════════════════════*/
:root[data-theme="kompute"] {
  /* ── Palette: machine plastic (case), keycaps, ink, accents, LCD ── */
  /* Cool blue-grey Atari-STE case (design-system --lt-* ramp — the beige is
     retired; "not printed paper, not cream"). Accents + LCD are theme-independent. */
  --k-case-0: #F1F3F4; --k-case-1: #E7EBEC; --k-case-2: #D6DCDD;
  --k-case-3: #B5BDBF; --k-case-4: #FFFFFF;
  /* Page canvas — clean white "paper", nudged toward the aviary login look (no speckle grain).
     Applies to every internal page and to the help/privacy/terms doc pages. */
  --k-surface-page: #FFFFFF;
  --k-key-dark: #3E4750; --k-key-dark-hi: #4C5660; --k-key-dark-lo: #30383F;
  --k-key-light: #C4CBCD; --k-key-light-hi: #D8DDDE; --k-key-light-lo: #A8B0B2;
  --k-legend-light: #EEF2F3; --k-legend-dark: #232A2F;
  --k-ink-0: #1C2126; --k-ink-1: #272D33; --k-ink-2: #4E565E; --k-ink-3: #646D74; --k-ink-4: #828B91;
  --k-red: #C62A22; --k-red-lo: #9A1912; --k-red-hi: #E86A5E;
  --k-green: #136B3C; --k-green-lo: #0C4E2B;
  --k-amber: #E8A62C; --k-amber-dk: #9E6F14; --k-blue: #1F567F;
  --k-lcd-bg: #A3B49E; --k-lcd-px: #202C22; --k-lcd-dim: #2F3C2C; --k-lcd-warn: #4A3A08; --k-lcd-err: #5A1410;
  --k-bevel-light: #FBFCFC;
  --k-bevel-out: inset 1px 1px 0 var(--k-bevel-light), inset -1px -2px 0 var(--k-case-3);
  --k-bevel-in: inset 1px 2px 0 var(--k-case-3), inset -1px -1px 0 var(--k-bevel-light);
  --k-bevel-key: inset 1px 1px 0 var(--k-key-dark-hi), inset -1px -2px 0 var(--k-key-dark-lo);
  --k-shadow-key: 0 2px 0 var(--k-case-3);
  --k-shadow-panel: 0 1px 0 var(--k-bevel-light), 0 4px 12px rgba(24,32,40,.16);
  --k-shadow-case: 0 3px 8px rgba(24,32,40,.18);
  --k-well: inset 0 2px 3px rgba(24,32,40,.14);
  --k-emboss-raised: 1px 1px 0 rgba(24,32,40,.35), -1px -1px 0 rgba(255,255,255,.85);
  --k-ribs-slant: repeating-linear-gradient(114deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px, rgba(24,32,40,.14) 3px 4px, transparent 4px 9px);
  --k-grain: radial-gradient(rgba(24,32,40,.07) 1px, transparent 1px);
  --k-scanlines: repeating-linear-gradient(180deg, rgba(32,44,34,.14) 0 1px, transparent 1px 3px);
  /* Chart series + ring track — theme-aware (dark values in the dark-mode block). */
  --k-series-1: #1F567F; --k-series-2: #136B3C; --k-series-3: #C67A12; --k-series-4: #C62A22;
  --k-series-muted: #828B91; --k-ring-track: rgba(24,32,40,.12);
  --k-track-caps: 0.14em; --k-track-label: 0.08em; --k-track-badge: 0.1em;
  --k-font-badge: 'Michroma', 'Eurostile', sans-serif;
  --k-font-legend: 'Barlow Semi Condensed', 'Helvetica Neue', sans-serif;
  --k-font-display: 'Barlow Condensed', 'Helvetica Neue', sans-serif;
  --k-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --k-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --k-font-pixel: 'Silkscreen', var(--k-font-mono);
  --k-font-lcd: 'VT323', var(--k-font-mono);

  /* ── Map the generic Sphinx tokens onto the hardware palette ── */
  --sphinx-primary: var(--k-red); --sphinx-primary-hover: var(--k-red-hi);
  --sphinx-primary-light: #f6ded9; --sphinx-primary-dark: var(--k-red-lo); --sphinx-primary-bright: var(--k-red-hi);
  --sphinx-bg: var(--k-case-0); --sphinx-page-bg: var(--k-case-0);
  --sphinx-surface: var(--k-case-1); --sphinx-surface-raised: var(--k-case-4); --sphinx-sunken: var(--k-case-2);
  --sphinx-border: var(--k-case-3); --sphinx-border-focus: var(--k-blue);
  --sphinx-text-primary: var(--k-ink-0); --sphinx-text-secondary: var(--k-ink-2); --sphinx-text-disabled: var(--k-ink-4);
  --sphinx-text-inverse: var(--k-legend-light);
  --sphinx-success: var(--k-green); --sphinx-success-bg: #e4efe8;
  --sphinx-error: var(--k-red);      --sphinx-error-bg: #f6ddd9;
  --sphinx-warning: var(--k-amber);  --sphinx-warning-bg: #f6ecd4;
  --sphinx-info: var(--k-blue);      --sphinx-info-bg: #e2ebf1;
  --sphinx-shadow-sm: 0 1px 0 var(--k-bevel-light);
  --sphinx-shadow-md: var(--k-shadow-panel);
  --sphinx-shadow-lg: var(--k-shadow-panel);
  --sphinx-font-family: var(--k-font-body);
  --sphinx-font-legend: var(--k-font-legend);
  --sphinx-font-display: var(--k-font-display);
  --sphinx-font-wordmark: var(--k-font-badge);
  --sphinx-font-mono: var(--k-font-mono);
  --sphinx-wordmark-weight: 400; --sphinx-wordmark-style: normal;
  --sphinx-wordmark-transform: uppercase; --sphinx-wordmark-spacing: var(--k-track-badge); --sphinx-wordmark-size: 20px;
  --sphinx-radius-sm: 2px; --sphinx-radius-md: 2px; --sphinx-radius-btn: 2px;
  --sphinx-radius-lg: 2px; --sphinx-radius-full: 999px;
  --sphinx-transition: 80ms linear;
}
:root[data-theme="kompute"] body {
  background: var(--k-surface-page);
  color: var(--k-ink-1);
}

/* No graphical brand mark until a Kompute-fit logo is chosen. */
:root[data-theme="kompute"] .sphinx-logo-icon { display: none !important; }

:root[data-theme="kompute"] h1,
:root[data-theme="kompute"] h2,
:root[data-theme="kompute"] h3,
:root[data-theme="kompute"] h4 { font-family: var(--k-font-display); letter-spacing: 0.01em; }

/* ═══ LOGIN / AUTH ═══════════════════════════════════════════════════════ */
:root[data-theme="kompute"] .sphinx-auth-page { background: transparent; }
:root[data-theme="kompute"] .sphinx-auth-container { max-width: 452px; }

/* The wordmark is an engraved nameplate: uppercase display type, emboss-raised. */
:root[data-theme="kompute"] .sphinx-logo { margin-bottom: 26px; }
:root[data-theme="kompute"] .sphinx-logo h1 {
  font-family: var(--k-font-display); text-transform: uppercase; font-weight: 700;
  letter-spacing: var(--k-track-label); font-size: 40px; line-height: 1.02;
  color: var(--k-ink-1); text-shadow: var(--k-emboss-raised);
}
:root[data-theme="kompute"] .sphinx-logo .tagline {
  font-family: var(--k-font-pixel); text-transform: uppercase;
  letter-spacing: var(--k-track-caps); font-size: 8px; color: var(--k-ink-3); margin-top: 8px;
}
:root[data-theme="kompute"] .sphinx-logo p {
  font-family: var(--k-font-legend); text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 12px; color: var(--k-ink-2);
}
:root[data-theme="kompute"] .sphinx-powered-by {
  font-family: var(--k-font-mono); text-transform: none;
  letter-spacing: 0; font-size: 11px; line-height: 1.7; color: var(--k-ink-2); margin-top: 22px;
}
/* Footer stamp furniture flanking the powered-by line. */
/* (footer left as the plain "Secured by Sphinx Authentication" — no invented
   FORM/SECURED furniture.) */

/* ═══ CARD / PANEL — the moulded module: heavy ink border, bevel, drop ═══ */
:root[data-theme="kompute"] .sphinx-card {
  background: var(--k-case-4); border: 1px solid var(--k-ink-0); border-radius: 0;
  box-shadow: var(--k-bevel-out), var(--k-shadow-panel); padding: 28px; overflow: hidden;
  position: relative;
}
/* The login card is a module: no body padding on the shell, a case-2 header
   strip drawn with ::before, and the form padded via its #app wrapper. */
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card { padding: 0; }
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card > #app { display: block; padding: 24px 28px 28px; }
/* The auth card gets a case-2 module header strip stamped with the page's
   own label ("SIGN IN", "FORGOT PASSWORD", "VERIFY EMAIL", …) via data-stamp. */
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card::before {
  content: attr(data-stamp); display: block;
  padding: 11px 16px; background: var(--k-case-2); border-bottom: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-in);
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-caps); font-size: 12px; color: var(--k-ink-1);
}
/* Vented rib strip down the right edge of the login module. */
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
  background-image: var(--k-ribs-slant); border-left: 1px solid var(--k-case-3); pointer-events: none;
}
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card > #app { padding-right: 44px; }

:root[data-theme="kompute"] .sphinx-card-header { margin-bottom: 22px; }
:root[data-theme="kompute"] .sphinx-card-header h2 {
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 24px; color: var(--k-ink-0);
}
:root[data-theme="kompute"] .sphinx-card-header p {
  font-family: var(--k-font-legend); text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 12px; color: var(--k-ink-2);
}

/* ═══ FORM CONTROLS ═══════════════════════════════════════════════════════ */
:root[data-theme="kompute"] .sphinx-label {
  font-family: var(--k-font-legend); text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-weight: 600; font-size: 11px; color: var(--k-ink-2);
}
/* Inputs — recessed wells. */
:root[data-theme="kompute"] .sphinx-input,
:root[data-theme="kompute"] .sphinx-select {
  border-radius: 2px; border: 1px solid var(--k-case-3);
  background: var(--k-case-4); box-shadow: var(--k-well);
  font-family: var(--k-font-body); color: var(--k-ink-0);
}
:root[data-theme="kompute"] .sphinx-input:focus,
:root[data-theme="kompute"] .sphinx-select:focus {
  border-color: var(--k-blue); box-shadow: var(--k-well), 0 0 0 2px rgba(31,86,127,.30); outline: none;
}

/* ═══ BUTTONS — keycaps; primary is the red RETURN key ═══════════════════ */
:root[data-theme="kompute"] .sphinx-btn {
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-label); border-radius: 2px; transition: var(--sphinx-transition);
}
:root[data-theme="kompute"] .sphinx-btn-primary {
  background: var(--k-red); color: var(--k-legend-light); border: 1px solid var(--k-red-lo);
  box-shadow: inset 1px 1px 0 var(--k-red-hi), inset -1px -2px 0 var(--k-red-lo), 0 2px 0 var(--k-red-lo);
}
:root[data-theme="kompute"] .sphinx-btn-primary:hover:not(:disabled) { background: var(--k-red-hi); }
:root[data-theme="kompute"] .sphinx-btn-primary:active:not(:disabled) {
  transform: translateY(2px); box-shadow: inset 1px 2px 0 var(--k-red-lo);
}
:root[data-theme="kompute"] .sphinx-btn-secondary {
  background: var(--k-key-light); color: var(--k-legend-dark); border: 1px solid var(--k-key-light-lo);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
}
:root[data-theme="kompute"] .sphinx-btn-secondary:hover:not(:disabled) { background: var(--k-key-light-hi); }
:root[data-theme="kompute"] .sphinx-btn-secondary:active:not(:disabled) {
  transform: translateY(2px); box-shadow: var(--k-bevel-in);
}
:root[data-theme="kompute"] .sphinx-btn-text {
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-label); color: var(--k-blue);
}
:root[data-theme="kompute"] .sphinx-btn-warning {
  background: var(--k-amber); color: var(--k-legend-dark); border: 1px solid var(--k-amber-dk);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase; letter-spacing: var(--k-track-label);
}
:root[data-theme="kompute"] .sphinx-btn-warning:hover:not(:disabled) { background: #F0B84E; }
:root[data-theme="kompute"] .sphinx-btn-warning:active:not(:disabled) {
  transform: translateY(2px); box-shadow: var(--k-bevel-in);
}

/* SSO buttons + divider — light keycaps, pixel legend. */
:root[data-theme="kompute"] .sphinx-sso-btn {
  border-radius: 2px; border: 1px solid var(--k-key-light-lo); background: var(--k-key-light);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-label); color: var(--k-legend-dark);
}
:root[data-theme="kompute"] .sphinx-sso-btn:hover { background: var(--k-key-light-hi); }
:root[data-theme="kompute"] .sphinx-divider span {
  font-family: var(--k-font-legend); text-transform: uppercase; font-weight: 600;
  letter-spacing: var(--k-track-label); font-size: 11px; color: var(--k-ink-2);
}

/* ═══ MFA CODE — LCD readout cells ═══════════════════════════════════════ */
:root[data-theme="kompute"] .sphinx-code-input input {
  border-radius: 2px; border: 1px solid var(--k-case-3);
  background: var(--k-lcd-bg); box-shadow: var(--k-well), inset 0 2px 6px rgba(32,44,34,.35);
  font-family: var(--k-font-lcd); font-size: 30px; color: var(--k-lcd-px);
  text-shadow: 0 0 1px rgba(32,44,34,.4);
}
:root[data-theme="kompute"] .sphinx-code-input input:focus {
  border-color: var(--k-blue); box-shadow: var(--k-well), inset 0 2px 6px rgba(32,44,34,.35), 0 0 0 2px rgba(31,86,127,.3);
}

/* ═══ ALERTS — squared, heavy accent edge ════════════════════════════════ */
:root[data-theme="kompute"] .sphinx-alert { border-radius: 2px; border-left-width: 3px; }
:root[data-theme="kompute"] .sphinx-alert-error { border-left-color: var(--k-red); }
:root[data-theme="kompute"] .sphinx-alert-success { border-left-color: var(--k-green); }
:root[data-theme="kompute"] .sphinx-alert-warning { border-left-color: var(--k-amber); }
:root[data-theme="kompute"] .sphinx-alert-info { border-left-color: var(--k-blue); }

:root[data-theme="kompute"] .sphinx-link,
:root[data-theme="kompute"] a.sphinx-link { color: var(--k-blue); text-underline-offset: 2px; }
:root[data-theme="kompute"] .sphinx-link:hover,
:root[data-theme="kompute"] a.sphinx-link:hover { color: var(--k-red-lo); text-decoration-color: var(--k-amber); }

/* ═══ ADMIN SHELL — dark console topbar ══════════════════════════════════ */
:root[data-theme="kompute"] .sphinx-admin { min-height: 100vh; }
:root[data-theme="kompute"] .sphinx-admin-nav {
  height: 46px; padding: 0; gap: 0; background: var(--k-key-dark); color: var(--k-legend-light);
  border-bottom: 1px solid var(--k-key-dark-lo); box-shadow: var(--k-shadow-case);
  position: relative;
}
/* Red engraved SPHINX nameplate at the left of the bar. */
:root[data-theme="kompute"] .sphinx-admin-nav-brand {
  align-self: stretch; display: flex; align-items: center; gap: 0; padding: 0 18px;
  background: var(--k-key-dark); color: var(--k-legend-light);
  box-shadow: inset 0 1px 0 var(--k-key-dark-hi), inset 0 -2px 0 var(--k-key-dark-lo);
  border-right: 1px solid var(--k-key-dark-lo);
  font-family: var(--k-font-badge); font-size: 13px; font-weight: 400;
  letter-spacing: var(--k-track-badge); text-transform: uppercase;
}
/* Sign-out is the red action in the top bar (compact red keycap). */
:root[data-theme="kompute"] .sphinx-admin-nav-user .sphinx-btn-primary {
  width: auto; height: 30px; padding: 0 14px; font-size: 11px;
}
:root[data-theme="kompute"] .sphinx-admin-nav-brand .sphinx-logo-icon { display: none !important; }
:root[data-theme="kompute"] .sphinx-admin-nav-links {
  display: flex; gap: 0; align-self: stretch; margin-left: 14px; counter-reset: k-nav;
}
:root[data-theme="kompute"] .sphinx-admin-nav-links a {
  display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 0;
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 12px; color: rgba(244,240,229,.72);
  border-left: 1px solid var(--k-key-dark-lo);
}
/* Kompute's numbered nav — "01/02/03…" module index prepended via a counter. */
:root[data-theme="kompute"] .sphinx-admin-nav-links a::before {
  counter-increment: k-nav; content: counter(k-nav, decimal-leading-zero);
  font-family: var(--k-font-mono); font-weight: 400; font-size: 10px;
  letter-spacing: 0; color: rgba(244,240,229,.5);
}
:root[data-theme="kompute"] .sphinx-admin-nav-links a.active::before,
:root[data-theme="kompute"] .sphinx-admin-nav-links a:hover::before { color: var(--k-red-hi); }
:root[data-theme="kompute"] .sphinx-admin-nav-links a:hover { background: var(--k-key-dark-hi); color: var(--k-legend-light); }
:root[data-theme="kompute"] .sphinx-admin-nav-links a.active { background: var(--k-key-dark-lo); color: var(--k-legend-light); }
:root[data-theme="kompute"] .sphinx-admin-nav-links a.active::after {
  left: 0; right: 0; bottom: 0; height: 3px; background: var(--k-red);
}
:root[data-theme="kompute"] .sphinx-admin-nav-user {
  align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  border-left: 1px solid var(--k-key-dark-lo); color: rgba(244,240,229,.78);
  font-family: var(--k-font-mono); font-size: 12px;
}
:root[data-theme="kompute"] .sphinx-admin-nav-user .sphinx-link { color: var(--k-legend-light); }
/* On the dark bar the global red hover is invisible — brighten + amber underline instead. */
:root[data-theme="kompute"] .sphinx-admin-nav-user .sphinx-link:hover,
:root[data-theme="kompute"] .sphinx-admin-nav-user .sphinx-link:focus-visible {
  color: #F4F0E5; text-decoration-color: var(--k-amber);
}
:root[data-theme="kompute"] .sphinx-admin-nav-user .sphinx-btn-text { color: rgba(244,240,229,.78); }
/* Textured spacer that fills the bar between links and the user block. */
:root[data-theme="kompute"] .sphinx-admin-nav-links::after {
  content: ""; }

:root[data-theme="kompute"] .sphinx-admin-main { padding: 24px; counter-reset: k-sec; }
:root[data-theme="kompute"] .sphinx-admin-header h1 {
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 26px; color: var(--k-ink-0);
}
/* A machine stamp trailing the page title. */
:root[data-theme="kompute"] .sphinx-admin-header h1::after {
  content: "· REV 4.1"; margin-left: 12px; font-family: var(--k-font-pixel);
  font-size: 9px; letter-spacing: var(--k-track-caps); color: var(--k-ink-4);
  vertical-align: middle;
}

/* ── Section headers are Kompute module headers: a dark index keycap, an
   engraved uppercase title, and a vented rib strip on the right. The section
   number auto-increments per page via a counter (no markup needed). ── */
:root[data-theme="kompute"] .sphinx-admin-section > h2 {
  display: flex; align-items: center; margin: 0 0 14px; height: 40px; padding: 0 40px 0 0;
  background: var(--k-case-1); border: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 17px; color: var(--k-ink-0);
  position: relative; overflow: hidden;
}
:root[data-theme="kompute"] .sphinx-admin-section > h2::before {
  counter-increment: k-sec; content: counter(k-sec, decimal-leading-zero);
  align-self: stretch; display: grid; place-items: center; width: 42px; margin-right: 14px;
  background: var(--k-key-dark); color: var(--k-legend-light);
  font-family: var(--k-font-mono); font-weight: 700; font-size: 13px;
  box-shadow: var(--k-bevel-key);
}
:root[data-theme="kompute"] .sphinx-admin-section > h2::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px;
  background-image: var(--k-ribs-slant); border-left: 1px solid var(--k-case-3);
}
:root[data-theme="kompute"] .sphinx-stat-group,
:root[data-theme="kompute"] .sphinx-dash-group h3,
:root[data-theme="kompute"] .sphinx-growth-title {
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-weight: 600; color: var(--k-ink-2);
}
/* Dash-group panels get a case-2 label strip with a red index tick. */
:root[data-theme="kompute"] .sphinx-dash-group { padding: 0; overflow: hidden; }
:root[data-theme="kompute"] .sphinx-dash-group h3 {
  margin: 0 0 0 0; padding: 9px 16px; background: var(--k-case-2);
  border-bottom: 1px solid var(--k-ink-0); box-shadow: var(--k-bevel-in);
  position: relative; font-size: 11px;
}
:root[data-theme="kompute"] .sphinx-dash-group h3::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k-red);
}
:root[data-theme="kompute"] .sphinx-dash-group .sphinx-stat-row { padding: 7px 16px; }

/* ═══ DASHBOARD — stat cards as Kompute cards ════════════════════════════ */
:root[data-theme="kompute"] .sphinx-stat-card,
:root[data-theme="kompute"] .sphinx-dash-group,
:root[data-theme="kompute"] .sphinx-growth-card,
:root[data-theme="kompute"] .sphinx-chart-card {
  background: var(--k-case-4); border: 1px solid var(--k-ink-0); border-radius: 0;
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
}
/* Stat card: red index tab + big mono value + silkscreen label. */
:root[data-theme="kompute"] .sphinx-stat-card { position: relative; padding: 18px 20px; }
:root[data-theme="kompute"] .sphinx-stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k-red);
}
:root[data-theme="kompute"] .sphinx-stat-value {
  font-family: var(--k-font-mono); font-weight: 600; font-size: 30px; color: var(--k-ink-0); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="kompute"] .sphinx-stat-label {
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-label);
  font-size: 11px; font-weight: 600; color: var(--k-ink-2); margin-top: 5px;
}
:root[data-theme="kompute"] .sphinx-stat-row strong,
:root[data-theme="kompute"] .sphinx-growth-total,
:root[data-theme="kompute"] .sphinx-metric-bar-value {
  font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; color: var(--k-ink-0);
}
:root[data-theme="kompute"] .sphinx-metric-bar-label { font-family: var(--k-font-mono); color: var(--k-ink-2); }

/* ── LED-segment meter: recessed well carved into lit/unlit segments ── */
:root[data-theme="kompute"] .sphinx-metric-bar-track {
  height: 14px; padding: 2px; background: var(--k-case-2); border: 1px solid var(--k-case-3);
  border-radius: 2px; box-shadow: var(--k-bevel-in); overflow: hidden; position: relative;
}
:root[data-theme="kompute"] .sphinx-metric-bar-fill {
  height: 100%; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, transparent 0 0, rgba(255,255,255,.35) 0 1px, transparent 1px 2px),
    var(--k-green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* The gaps between LED segments — a case-2 comb overlaid on the whole track. */
:root[data-theme="kompute"] .sphinx-metric-bar-track::after {
  content: ""; position: absolute; inset: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--k-case-2) 6px 8px);
  pointer-events: none;
}
:root[data-theme="kompute"] .sphinx-delta-chip {
  border-radius: 2px; border: 1px solid var(--k-case-3); background: var(--k-case-1);
  font-family: var(--k-font-mono); font-size: 11px; color: var(--k-ink-1);
}

/* ═══ TABLES — Kompute DataTable: dark stamp header, mono body ═══════════ */
:root[data-theme="kompute"] .sphinx-table {
  background: var(--k-case-4); border: 1px solid var(--k-ink-0); border-radius: 2px;
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
}
:root[data-theme="kompute"] .sphinx-table th {
  background: var(--k-key-dark); color: var(--k-legend-light);
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-caps); font-size: 10px; padding: 9px 16px;
  border-bottom: 1px solid var(--k-ink-0);
}
:root[data-theme="kompute"] .sphinx-table td {
  font-family: var(--k-font-mono); font-size: 12.5px; color: var(--k-ink-1);
  border-bottom: 1px solid var(--k-case-3); padding: 10px 16px;
}
:root[data-theme="kompute"] .sphinx-table tbody tr:nth-child(even) { background: var(--k-case-1); }
:root[data-theme="kompute"] .sphinx-table tbody tr:hover { background: #e6e9df; }
:root[data-theme="kompute"] .sphinx-table-empty {
  font-family: var(--k-font-pixel); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-size: 10px; color: var(--k-ink-3);
}

/* ═══ BADGES — squared, silkscreen, coloured dot ════════════════════════ */
:root[data-theme="kompute"] .sphinx-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; height: 18px;
  border-radius: 2px; border: 1px solid var(--k-case-3); background: var(--k-case-1);
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-weight: 600; font-size: 10px; color: var(--k-ink-1);
}
:root[data-theme="kompute"] .sphinx-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 0; background: var(--k-ink-3); flex: none;
}
:root[data-theme="kompute"] .sphinx-badge-active { background: #e4efe8; color: var(--k-green-lo); border-color: #bcd8c7; }
:root[data-theme="kompute"] .sphinx-badge-active::before { background: var(--k-green); }
:root[data-theme="kompute"] .sphinx-badge-suspended { background: #f6ddd9; color: var(--k-red-lo); border-color: #e6b6b0; }
:root[data-theme="kompute"] .sphinx-badge-suspended::before { background: var(--k-red); }
:root[data-theme="kompute"] .sphinx-badge-pending_verification { background: #f6ecd4; color: var(--k-amber-dk); border-color: #e3cf9a; }
:root[data-theme="kompute"] .sphinx-badge-pending_verification::before { background: var(--k-amber); }
:root[data-theme="kompute"] .sphinx-badge-deactivated { background: var(--k-case-2); color: var(--k-ink-3); }
:root[data-theme="kompute"] .sphinx-badge-deactivated::before { background: var(--k-ink-4); }

/* Inline <code> chips (API-key prefixes, agent ids) — mono on sunken plastic. */
:root[data-theme="kompute"] .sphinx-table code,
:root[data-theme="kompute"] .sphinx-detail-list code {
  font-family: var(--k-font-mono); font-size: 12px; background: var(--k-case-2);
  border: 1px solid var(--k-case-3); border-radius: 2px; padding: 1px 5px; color: var(--k-ink-1);
}

/* ═══ PROFILE — packed panel sections ════════════════════════════════════ */
/* Two-column grid so the actionable areas sit side-by-side, less scrolling. */
:root[data-theme="kompute"] .sphinx-profile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; align-items: start;
}
:root[data-theme="kompute"] .sphinx-profile-grid .sphinx-admin-section { margin-bottom: 0; }
:root[data-theme="kompute"] .sphinx-profile-wide { grid-column: 1 / -1; }
/* An identity panel rendered as recessed spec wells. */
:root[data-theme="kompute"] .sphinx-spec-wells {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  border: 1px solid var(--k-case-3); background: var(--k-case-2); box-shadow: var(--k-bevel-in);
}
:root[data-theme="kompute"] .sphinx-spec-wells > div {
  padding: 10px 14px; border-right: 1px solid var(--k-case-3); border-top: 1px solid var(--k-case-3);
  margin-top: -1px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
:root[data-theme="kompute"] .sphinx-spec-wells dt {
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-size: 10px; font-weight: 600; color: var(--k-ink-2);
}
:root[data-theme="kompute"] .sphinx-spec-wells dd {
  margin: 0; font-family: var(--k-font-mono); font-size: 13px; color: var(--k-ink-0);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* Inside a spec well the identifier wraps rather than ellipsising — the full
   email/value must always be readable in the identity panel. */
:root[data-theme="kompute"] .sphinx-spec-wells .sphinx-truncate {
  max-width: 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere;
}

/* ═══ LCD TERMINAL — grey-green dot-matrix readout (events / audit) ═══════ */
:root[data-theme="kompute"] .sphinx-lcd {
  padding: 8px; background: var(--k-case-1); border: 1px solid var(--k-case-3);
  border-radius: 0; box-shadow: var(--k-bevel-out);
}
:root[data-theme="kompute"] .sphinx-lcd-bar {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px;
  font-family: var(--k-font-pixel); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-size: 8px; color: var(--k-ink-2);
}
:root[data-theme="kompute"] .sphinx-lcd-bar .k-leds { display: flex; gap: 3px; }
:root[data-theme="kompute"] .sphinx-lcd-bar .k-leds i { width: 6px; height: 6px; border-radius: 999px; }
:root[data-theme="kompute"] .sphinx-lcd-bar .k-leds i.red { background: var(--k-red); }
:root[data-theme="kompute"] .sphinx-lcd-bar .k-leds i.green { background: var(--k-green); }
:root[data-theme="kompute"] .sphinx-lcd-screen {
  position: relative; overflow: hidden; padding: 8px 10px;
  background: var(--k-lcd-bg); border: 1px solid var(--k-case-3); border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(32,44,34,.35);
  font-family: var(--k-font-lcd); font-size: 17px; line-height: 1.3; color: var(--k-lcd-px);
}
:root[data-theme="kompute"] .sphinx-lcd-screen::after {
  content: ""; position: absolute; inset: 0; background-image: var(--k-scanlines); pointer-events: none;
}
:root[data-theme="kompute"] .sphinx-lcd-screen .row { white-space: pre-wrap; }
:root[data-theme="kompute"] .sphinx-lcd-screen .row .pre { color: var(--k-lcd-dim); }
:root[data-theme="kompute"] .sphinx-lcd-screen .row.warn { color: var(--k-lcd-warn); }
:root[data-theme="kompute"] .sphinx-lcd-screen .row.err { color: var(--k-lcd-err); }

/* ═══ CODE SCREEN — the edit surface for code (CSS / theme editors). A white-
   phosphor CRT tube: dark screen, cool-white mono text, faint scanline bloom.
   This is the terminal treatment the design system reserves for code/logs. ═══ */
:root[data-theme="kompute"] textarea.sphinx-code-screen {
  position: relative; display: block; width: 100%;
  height: auto; min-height: 220px; resize: vertical;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 50% 40%, #161A1F, #0E1013);
  color: #EAF2F5; caret-color: #9CD2E6;
  border: 1px solid var(--k-ink-0); border-radius: 2px;
  box-shadow: var(--k-bevel-out), inset 0 0 24px rgba(0,0,0,.7);
  font-family: var(--k-font-mono); font-size: 12.5px; line-height: 1.5;
  text-shadow: 0 0 6px rgba(150,210,230,.35); padding: 12px 14px;
}
:root[data-theme="kompute"] textarea.sphinx-code-screen::placeholder { color: #8CA0A8; }
:root[data-theme="kompute"] textarea.sphinx-code-screen:focus {
  outline: none; border-color: var(--k-blue);
  box-shadow: var(--k-bevel-out), inset 0 0 24px rgba(0,0,0,.7), 0 0 0 2px rgba(31,86,127,.35);
}


/* ══════════════════════════════════════════════════════════════════════════
 * KOMPUTE — PURE HARDWARE LAYER (replaces the earlier clean/blend softening).
 * The instrument-panel look the design system actually specifies: cool blue-grey
 * machine plastic, squared corners, HEAVY ink borders + bevels, keycap module
 * headers, LED-segment meters, LCD wedge rings, silkscreen legends, mono data.
 * Cards/tables/buttons/inputs/sections come straight from the base hardware layer
 * above; this section (re)authors the dashboard, profile and dialog to match,
 * carries the utilities, and adds the light/dark switch.
 * ══════════════════════════════════════════════════════════════════════════*/

/* ── ANALYTICS DASHBOARD — instrument panel ──────────────────────────────── */
:root[data-theme="kompute"] .analytics { max-width: 1200px; }
:root[data-theme="kompute"] .an-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 20px; padding: 0 0 12px; border-bottom: 2px solid var(--k-ink-0);
}
:root[data-theme="kompute"] .an-head h1 {
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 28px; line-height: 1; color: var(--k-ink-0);
}
:root[data-theme="kompute"] .an-sub {
  display: block; margin-top: 7px; font-family: var(--k-font-mono); text-transform: uppercase;
  letter-spacing: var(--k-track-caps); font-size: 10px; color: var(--k-ink-3);
}
/* Range picker — a strip of light keycaps; the active one is the red key. */
:root[data-theme="kompute"] .an-range { display: flex; gap: 0; flex: none; }
:root[data-theme="kompute"] .an-range button {
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 11px; padding: 0 13px; height: 30px;
  background: var(--k-key-light); color: var(--k-legend-dark);
  border: 1px solid var(--k-key-light-lo); border-left-width: 0;
  box-shadow: var(--k-bevel-out); cursor: pointer;
}
:root[data-theme="kompute"] .an-range button:first-child { border-left-width: 1px; border-radius: 2px 0 0 2px; }
:root[data-theme="kompute"] .an-range button:last-child { border-radius: 0 2px 2px 0; }
:root[data-theme="kompute"] .an-range button.on {
  background: var(--k-red); color: var(--k-legend-light); border-color: var(--k-red-lo);
  box-shadow: inset 1px 1px 0 var(--k-red-hi), inset -1px -2px 0 var(--k-red-lo);
}

/* KPI tiles — Kompute stat keycaps: red index tab, big mono value, silkscreen label. */
:root[data-theme="kompute"] .kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px;
}
:root[data-theme="kompute"] .kpi {
  position: relative; overflow: hidden; padding: 16px 18px 12px;
  background: var(--k-case-4); border: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key);
}
:root[data-theme="kompute"] .kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k-red);
}
:root[data-theme="kompute"] .kpi-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
:root[data-theme="kompute"] .kpi-label {
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-caps); font-size: 10px; color: var(--k-ink-2);
}
:root[data-theme="kompute"] .kpi-delta { font-family: var(--k-font-mono); font-size: 11px; white-space: nowrap; }
:root[data-theme="kompute"] .kpi-val {
  font-family: var(--k-font-mono); font-weight: 600; font-size: 30px; color: var(--k-ink-0);
  line-height: 1.1; margin: 5px 0 8px; font-variant-numeric: tabular-nums;
}
:root[data-theme="kompute"] .kpi-spark svg { display: block; width: 100%; height: 30px; }

/* Analytics cards — moulded modules: heavy ink edge, bevel, case-2 stamp header. */
:root[data-theme="kompute"] .an-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 16px; margin-bottom: 16px; }
:root[data-theme="kompute"] .an-card {
  background: var(--k-case-4); border: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key); overflow: hidden;
}
:root[data-theme="kompute"] .an-card-h {
  display: flex; justify-content: space-between; align-items: center; padding: 9px 14px;
  background: var(--k-case-2); border-bottom: 1px solid var(--k-ink-0); box-shadow: var(--k-bevel-in);
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-caps); font-size: 11px; color: var(--k-ink-1);
}
:root[data-theme="kompute"] .an-card-b { padding: 16px 14px; }
:root[data-theme="kompute"] .an-legend {
  display: flex; gap: 12px; align-items: center; font-family: var(--k-font-mono);
  font-size: 10px; color: var(--k-ink-2); text-transform: none; letter-spacing: 0;
}
:root[data-theme="kompute"] .an-legend i {
  width: 9px; height: 9px; display: inline-block; margin-right: 4px; vertical-align: -1px;
  border: 1px solid var(--k-ink-0); border-radius: 0;
}
/* Growth-trend inline chart — faint case grid, mono axis, series stroke from tokens. */
:root[data-theme="kompute"] .an-card .sphinx-chart-grid line { stroke: var(--k-case-3); }
:root[data-theme="kompute"] .an-card .sphinx-chart-axis text { font-family: var(--k-font-mono); font-size: 9px; fill: var(--k-ink-3); }
:root[data-theme="kompute"] .an-card .sphinx-chart-line { fill: none; stroke-width: 1.7; }
:root[data-theme="kompute"] .an-card .sphinx-chart-empty { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-ink-3); }
/* Enrolment rings — LCD wedge gauges. */
:root[data-theme="kompute"] .an-rings { display: flex; gap: 26px; justify-content: center; padding: 8px 0 4px; }
:root[data-theme="kompute"] .rc { display: flex; flex-direction: column; align-items: center; gap: 2px; }
:root[data-theme="kompute"] .rc svg { width: 72px; height: 72px; }
:root[data-theme="kompute"] .rc-v { font-family: var(--k-font-mono); font-weight: 600; font-size: 16px; color: var(--k-ink-0); margin-top: 5px; }
:root[data-theme="kompute"] .rc-l { font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-caps); font-size: 9px; color: var(--k-ink-2); }
/* Status breakdown — LED meters (base .sphinx-metric-bar) with mono labels. */
:root[data-theme="kompute"] .an-brk-title {
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-size: 10px; color: var(--k-ink-2); padding: 12px 14px 8px; border-top: 1px solid var(--k-case-3); margin-top: 8px;
}
:root[data-theme="kompute"] .an-brk { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 9px; }
:root[data-theme="kompute"] .brk { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 8px; }
:root[data-theme="kompute"] .brk-l { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-ink-2); }
:root[data-theme="kompute"] .brk-v { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-ink-0); text-align: right; }
:root[data-theme="kompute"] .an-more { font-family: var(--k-font-mono); font-size: 10px; color: var(--k-blue); cursor: pointer; text-transform: none; letter-spacing: 0; }
:root[data-theme="kompute"] .an-card .sphinx-table { border: 0; box-shadow: none; border-radius: 0; }
@media (max-width: 920px) {
  :root[data-theme="kompute"] .kpi-row { grid-template-columns: repeat(2, 1fr); }
  :root[data-theme="kompute"] .an-grid { grid-template-columns: 1fr; }
}

/* Cool table hover (base hover is retuned here for the cool ramp). */
:root[data-theme="kompute"] .sphinx-table tbody tr:hover { background: #E3E8EA; }

/* ── PROFILE — hardware panel cards + spec grid ──────────────────────────── */
:root[data-theme="kompute"] .sphinx-profile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start;
}
:root[data-theme="kompute"] .sphinx-profile-grid .sphinx-admin-section { margin-bottom: 0; }
:root[data-theme="kompute"] .sphinx-profile-wide { grid-column: 1 / -1; }

:root[data-theme="kompute"] .sphinx-pcard {
  background: var(--k-case-4); border: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key); overflow: hidden; margin-bottom: 14px;
}
:root[data-theme="kompute"] .sphinx-pcard-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 10px 16px; background: var(--k-case-2); border-bottom: 1px solid var(--k-ink-0); box-shadow: var(--k-bevel-in);
}
:root[data-theme="kompute"] .sphinx-pcard-head h2 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--k-track-label);
  font-size: 16px; color: var(--k-ink-0);
}
:root[data-theme="kompute"] .sphinx-pcard-head h2::before {
  content: ""; width: 4px; height: 15px; background: var(--k-red); flex: none;
}
:root[data-theme="kompute"] .sphinx-pcard-purpose {
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-label);
  font-size: 10px; color: var(--k-ink-3); margin: 4px 0 0 13px;
}
:root[data-theme="kompute"] .sphinx-pcard-head-actions { flex: none; }
/* Reset any table inside a pcard (incl. one wrapped in .sphinx-pcard-scroll) so the dark
   column header sits flush edge-to-edge instead of clipping into a rounded floating band. */
:root[data-theme="kompute"] .sphinx-pcard .sphinx-table { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
:root[data-theme="kompute"] .sphinx-pcard-pad { padding: 12px 16px; }
:root[data-theme="kompute"] .sphinx-pcard-scroll { max-height: 172px; overflow-y: auto; }
:root[data-theme="kompute"] .sphinx-pcard-scroll thead th { position: sticky; top: 0; z-index: 1; }
:root[data-theme="kompute"] .sphinx-pcard .sphinx-table th,
:root[data-theme="kompute"] .sphinx-pcard .sphinx-table td { padding: 8px 16px; }

/* Identity card — case-2 header strip w/ dark alpha-key avatar + red trim. */
:root[data-theme="kompute"] .sphinx-id {
  background: var(--k-case-4); border: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-out), var(--k-shadow-key); overflow: hidden;
}
:root[data-theme="kompute"] .sphinx-id-head {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px; position: relative;
  background: var(--k-case-2); border-bottom: 1px solid var(--k-ink-0); box-shadow: var(--k-bevel-in);
}
:root[data-theme="kompute"] .sphinx-pcard .sphinx-id-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k-red);
}
:root[data-theme="kompute"] .sphinx-id-av {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 2px;
  background: var(--k-key-dark); color: var(--k-legend-light); box-shadow: var(--k-bevel-key);
  font-family: var(--k-font-legend); font-weight: 700; font-size: 19px; letter-spacing: .04em;
}
:root[data-theme="kompute"] .sphinx-id-name {
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--k-track-label);
  font-size: 19px; color: var(--k-ink-0); display: flex; align-items: center; gap: 10px;
}
:root[data-theme="kompute"] .sphinx-id-sub { font-family: var(--k-font-mono); font-size: 12px; color: var(--k-ink-2); margin-top: 3px; }
:root[data-theme="kompute"] .sphinx-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
:root[data-theme="kompute"] .sphinx-id-grid > div { padding: 11px 18px; border-top: 1px solid var(--k-case-3); min-width: 0; }
:root[data-theme="kompute"] .sphinx-id-grid > div:nth-child(odd) { border-right: 1px solid var(--k-case-3); }
:root[data-theme="kompute"] .sphinx-id-grid dt {
  font-family: var(--k-font-legend); text-transform: uppercase; letter-spacing: var(--k-track-caps);
  font-size: 10px; color: var(--k-ink-3); margin-bottom: 5px;
}
:root[data-theme="kompute"] .sphinx-id-grid dd {
  margin: 0; font-family: var(--k-font-mono); font-size: 13px; color: var(--k-ink-0);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 720px) {
  :root[data-theme="kompute"] .sphinx-id-grid { grid-template-columns: 1fr; }
  :root[data-theme="kompute"] .sphinx-id-grid > div:nth-child(odd) { border-right: 0; }
}

/* ── CONFIRMATION DIALOG — system-alert box: ink border, dark title bar ──── */
:root[data-theme="kompute"] .sphinx-dialog-scrim {
  position: fixed; inset: 0; background: rgba(10,14,20,.6);
  display: grid; place-items: center; z-index: 70; padding: 24px;
}
:root[data-theme="kompute"] .sphinx-dialog {
  width: 460px; max-width: 100%; background: var(--k-case-4); border: 1px solid var(--k-ink-0);
  box-shadow: var(--k-bevel-out), var(--k-shadow-case); border-radius: 2px; overflow: hidden;
}
:root[data-theme="kompute"] .sphinx-dialog-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--k-key-dark); color: var(--k-legend-light);
}
:root[data-theme="kompute"] .sphinx-dialog-index {
  width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 2px;
  background: var(--k-amber); color: var(--k-legend-dark);
  font-family: var(--k-font-mono); font-weight: 700; font-size: 12px;
}
:root[data-theme="kompute"] .sphinx-dialog-head h3 {
  flex: 1; margin: 0; font-family: var(--k-font-legend); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--k-track-caps); font-size: 12px; color: inherit;
}
:root[data-theme="kompute"] .sphinx-dialog-close {
  width: 20px; height: 20px; flex: none; background: var(--k-case-0); color: var(--k-ink-0);
  border: 0; cursor: pointer; font-family: var(--k-font-mono); font-size: 12px; line-height: 1; border-radius: 2px;
}
:root[data-theme="kompute"] .sphinx-dialog-grill {
  height: 8px; background-image: var(--k-ribs-slant); border-bottom: 1px solid var(--k-ink-0); opacity: .55;
}
:root[data-theme="kompute"] .sphinx-dialog-body {
  padding: 18px; font-family: var(--k-font-body); font-size: 14px; line-height: 1.5; color: var(--k-ink-1);
}
:root[data-theme="kompute"] .sphinx-dialog-body .sphinx-form-group { margin-top: 14px; }
:root[data-theme="kompute"] .sphinx-dialog-foot {
  display: flex; justify-content: flex-end; gap: 10px; padding: 13px 18px;
  border-top: 1px solid var(--k-case-3); background: var(--k-case-1);
}
:root[data-theme="kompute"] .sphinx-dialog-foot .sphinx-btn { width: auto; }

/* ── LOGIN nameplate — embossed wordmark beside a slanted-grille vent strip. ── */
:root[data-theme="kompute"] .sphinx-logo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; text-align: left; margin-bottom: 24px;
}
:root[data-theme="kompute"] .sphinx-logo h1 { order: 1; flex: 0 0 auto; font-size: 32px; line-height: 1; white-space: nowrap; }
:root[data-theme="kompute"] .sphinx-logo::after {
  content: ""; order: 2; flex: 1 1 90px; align-self: center; height: 40px;
  background-color: var(--k-case-1); background-image: var(--k-ribs-slant);
  border: 1px solid var(--k-case-3); border-radius: 2px; box-shadow: var(--k-bevel-in);
}
:root[data-theme="kompute"] .sphinx-logo .tagline { display: none; }
:root[data-theme="kompute"] .sphinx-logo p { order: 3; flex: 1 0 100%; margin: 0; }
:root[data-theme="kompute"] .sphinx-logo p:empty { display: none; }
/* Sign-in card only: the wordmark is a Michroma brand PLATE on a dark keycap. */
:root[data-theme="kompute"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Sign in"]) .sphinx-logo {
  display: block; text-align: center; margin-bottom: 26px;
}
:root[data-theme="kompute"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Sign in"]) .sphinx-logo::after { display: none; }
:root[data-theme="kompute"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Sign in"]) .sphinx-logo h1 {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--k-font-badge); font-weight: 400; font-size: 26px;
  letter-spacing: .1em; text-transform: uppercase; text-shadow: none;
  padding: 15px 22px; border-radius: 2px;
  background: var(--k-key-dark); color: var(--k-legend-light); border: 1px solid var(--k-key-dark-lo);
  box-shadow: inset 0 1px 0 var(--k-key-dark-hi), inset 0 -2px 0 var(--k-key-dark-lo),
              0 2px 0 var(--k-key-dark-lo), 0 3px 6px rgba(16,20,26,.28);
}
:root[data-theme="kompute"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Sign in"]) .sphinx-card::before { display: none; }
:root[data-theme="kompute"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Sign in"]) .sphinx-card > #app { padding-top: 28px; }

/* ── UTILITIES (all themes) ──────────────────────────────────────────────── */
.sphinx-powered-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sphinx-powered-by a:hover { text-decoration-thickness: 2px; }
/* Cloudflare Turnstile host on the register page — reserve the widget height to avoid layout shift. */
.sphinx-turnstile-slot { display: flex; min-height: 65px; margin: 0; }
/* Register consent — a single checkbox ("I agree with the Privacy Policy and Terms") between the
   Turnstile widget and the submit button (left-aligned), gating the button. The powered-by footer
   is dropped on this page (below) to keep the aviary split from overflowing. */
/* Equidistant: 12px above (to the widget) and 12px below (to the button). The widget's
   bottom margin is zeroed above so this margin alone defines both gaps (collapse-proof). */
.sphinx-consent { display: flex; justify-content: flex-start; margin: 12px 0; }
.sphinx-consent label { display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; line-height: 1.35; color: var(--sphinx-text-secondary); }
.sphinx-consent input[type="checkbox"] { margin: 0; flex: none; accent-color: var(--sphinx-primary); }
.sphinx-consent a { color: var(--sphinx-primary); text-underline-offset: 2px; }
:root[data-theme="aviary"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Create account"]) .sphinx-powered-by { display: none; }
/* Register: shave the row spacing so the taller form (with the widget + consent) sits tighter. */
:root[data-theme="aviary"] .sphinx-auth-container:has(.sphinx-card[data-stamp="Create account"]) .sphinx-form-group { margin-bottom: 17px; }
.sphinx-input-wrap { position: relative; }
.sphinx-input-wrap .sphinx-input { padding-right: 62px; }
.sphinx-input-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sphinx-text-secondary);
}
.sphinx-input-toggle:hover { color: var(--sphinx-text-primary); }
.sphinx-btn:focus-visible, .sphinx-sso-btn:focus-visible,
.sphinx-input-toggle:focus-visible, .sphinx-link:focus-visible {
  outline: 2px solid var(--sphinx-border-focus, #1F567F); outline-offset: 2px; border-radius: 3px;
}
/* Slanted-rib vent spacer between nav links and the user block. */
.sphinx-admin-nav-fill { flex: 1 1 auto; align-self: stretch; min-width: 24px; }
:root[data-theme="kompute"] .sphinx-admin-nav-fill { background-image: var(--k-ribs-slant); opacity: .5; }

/* ── LIGHT / DARK TOGGLE — a keycap in the console topbar ─────────────────── */
.sphinx-theme-toggle {
  align-self: center; height: 30px; flex: none; margin: 0 8px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--k-key-dark-hi); color: var(--k-legend-light);
  border: 1px solid var(--k-key-dark-lo); border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.08), 0 2px 0 var(--k-key-dark-lo);
}
.sphinx-theme-toggle:hover { background: var(--k-key-dark); }
.sphinx-theme-toggle:active { transform: translateY(2px); box-shadow: inset 0 1px 2px var(--k-key-dark-lo); }
.sphinx-theme-toggle:focus-visible { outline: 2px solid var(--k-amber); outline-offset: 2px; }
.sphinx-theme-toggle .k-ico { font-family: var(--k-font-mono); font-size: 14px; line-height: 1; }
.sphinx-theme-toggle .k-lbl {
  font-family: var(--k-font-legend); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--k-track-label); font-size: 10px; line-height: 1;
}
/* The keycap names the mode it switches TO. */
.sphinx-theme-toggle .k-ico::before { content: "\25D1"; }          /* ◑ */
.sphinx-theme-toggle .k-lbl::before { content: "Dark"; }
:root[data-mode="dark"] .sphinx-theme-toggle .k-ico::before { content: "\25D0"; } /* ◐ */
:root[data-mode="dark"] .sphinx-theme-toggle .k-lbl::before { content: "Light"; }

/* ══════════════════════════════════════════════════════════════════════════
 * DARK MODE — data-mode="dark" on <html>. Re-points the physical ramps to the
 * design-system --dk-* source; everything downstream reads --k-* so it follows.
 * Higher specificity ([data-theme][data-mode]) wins over the light defaults.
 * ══════════════════════════════════════════════════════════════════════════*/
:root[data-theme="kompute"][data-mode="dark"] {
  color-scheme: dark;
  --k-case-0: #181D22; --k-case-1: #20262D; --k-case-2: #2A313A; --k-case-3: #3C4550; --k-case-4: #262E37;
  --k-surface-page: var(--k-case-0);  /* dark page stays the dark case (no grain) */
  --k-key-dark: #0E1216; --k-key-dark-hi: #212932; --k-key-dark-lo: #070A0D;
  --k-key-light: #454E58; --k-key-light-hi: #525C67; --k-key-light-lo: #363E47;
  --k-legend-light: #EEF2F3; --k-legend-dark: #E4EAEC;
  --k-ink-0: #F2F5F6; --k-ink-1: #DEE4E6; --k-ink-2: #A7B0B7; --k-ink-3: #828C93; --k-ink-4: #646D74;
  --k-bevel-light: rgba(255,255,255,.10);
  --k-shadow-key: 0 2px 0 rgba(0,0,0,.5);
  --k-shadow-panel: 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.5);
  --k-shadow-case: 0 3px 10px rgba(0,0,0,.55);
  --k-well: inset 0 2px 3px rgba(0,0,0,.4);
  --k-emboss-raised: 1px 1px 0 rgba(0,0,0,.5), -1px -1px 0 rgba(255,255,255,.08);
  --k-ribs-slant: repeating-linear-gradient(114deg, rgba(255,255,255,.1) 0 1px, transparent 1px 3px, rgba(0,0,0,.25) 3px 4px, transparent 4px 9px);
  --k-grain: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  --k-series-1: #7FB2DE; --k-series-2: #43C07A; --k-series-3: #F0B84E; --k-series-4: #F08A7A;
  --k-series-muted: #828C93; --k-ring-track: rgba(255,255,255,.12);
  /* generic Sphinx alert tints re-mapped for a dark field */
  --sphinx-success-bg: #12261B; --sphinx-error-bg: #2A1512; --sphinx-warning-bg: #2A2410; --sphinx-info-bg: #12222E;
  --sphinx-primary-light: #2A1512;
  /* Brighten link/info blue and success green so text (table email links, deltas,
     badges) clears contrast on the dark field. Deep --k-blue/--k-green read only on light. */
  --k-blue: #7FB2DE; --k-green: #43C07A;
}
/* Link hover is the deep red key on light; brighten it for the dark field. */
:root[data-theme="kompute"][data-mode="dark"] .sphinx-link:hover,
:root[data-theme="kompute"][data-mode="dark"] a.sphinx-link:hover { color: var(--k-red-hi); }
/* Status badge tints (base values are light) → dark-field equivalents. */
:root[data-theme="kompute"][data-mode="dark"] .sphinx-badge-active { background: #12261B; color: #63CE92; border-color: #1F4531; }
:root[data-theme="kompute"][data-mode="dark"] .sphinx-badge-suspended { background: #2A1512; color: #F0A99D; border-color: #4A231C; }
:root[data-theme="kompute"][data-mode="dark"] .sphinx-badge-pending_verification { background: #2A2410; color: #E9C97C; border-color: #4A3F18; }
:root[data-theme="kompute"][data-mode="dark"] .sphinx-badge-deactivated { background: var(--k-case-2); color: var(--k-ink-3); }
:root[data-theme="kompute"][data-mode="dark"] .sphinx-table tbody tr:hover { background: #2A313A; }

/* ══════════════════════════════════════════════════════════════════════════
 * KOMPUTE — SOFT + PILLS (Design-System default nudge toward Aviary)
 * The updated DS turns `soft` and `pills` on BY DEFAULT: Aviary radii (6/8/10px),
 * hairline borders, soft far-lift shadows, clean white header strips, 150ms easing
 * and tinted pill badges — while KEEPING the machine identity (red RETURN key,
 * ribs/grain textures, LCD/CRT screens, uppercase Barlow legends, index keycaps,
 * dark console topbar + DataTable header, Michroma wordmark). Authored as a trailing
 * override layer so it wins by source order in both light and dark, mirroring the
 * DS's own data-look="soft" layer.
 * ══════════════════════════════════════════════════════════════════════════*/

/* Shape + elevation + motion tokens (light): bevels collapse to a top hairline of
   light; shadows become a 1px seat + a soft far lift; motion eases, doesn't snap. */
:root[data-theme="kompute"] {
  --sphinx-radius-sm: 6px; --sphinx-radius-md: 8px; --sphinx-radius-btn: 6px; --sphinx-radius-lg: 10px;
  --sphinx-transition: 150ms cubic-bezier(.4, 0, .2, 1);
  --k-bevel-out: inset 0 1px 0 var(--k-bevel-light);
  --k-bevel-in: inset 0 1px 2px rgba(24,32,40,.10);
  --k-well: inset 0 1px 2px rgba(24,32,40,.10);
  --k-shadow-key: 0 1px 0 rgba(24,32,40,.04), 0 6px 16px -12px rgba(24,32,40,.35);
  --k-shadow-panel: 0 1px 0 rgba(24,32,40,.03), 0 8px 22px -18px rgba(24,32,40,.40);
  --k-shadow-case: 0 1px 0 rgba(24,32,40,.03), 0 18px 40px -24px rgba(24,32,40,.45);
}
:root[data-theme="kompute"][data-mode="dark"] {
  --k-bevel-out: inset 0 1px 0 var(--k-bevel-light);
  --k-bevel-in: inset 0 1px 2px rgba(0,0,0,.30);
  --k-well: inset 0 1px 2px rgba(0,0,0,.40);
  --k-shadow-key: 0 1px 0 rgba(0,0,0,.20), 0 6px 16px -12px rgba(0,0,0,.55);
  --k-shadow-panel: 0 1px 0 rgba(0,0,0,.20), 0 8px 22px -18px rgba(0,0,0,.60);
  --k-shadow-case: 0 1px 0 rgba(0,0,0,.20), 0 18px 40px -24px rgba(0,0,0,.65);
}

/* Modules → 10px radius + hairline (case-3) border instead of heavy ink edges. */
:root[data-theme="kompute"] .sphinx-card,
:root[data-theme="kompute"] .sphinx-stat-card,
:root[data-theme="kompute"] .sphinx-dash-group,
:root[data-theme="kompute"] .sphinx-growth-card,
:root[data-theme="kompute"] .sphinx-chart-card,
:root[data-theme="kompute"] .sphinx-table,
:root[data-theme="kompute"] .kpi,
:root[data-theme="kompute"] .an-card,
:root[data-theme="kompute"] .sphinx-pcard,
:root[data-theme="kompute"] .sphinx-id,
:root[data-theme="kompute"] .sphinx-dialog,
:root[data-theme="kompute"] .sphinx-lcd {
  border-radius: 10px; border-color: var(--k-case-3);
}
/* Section header bar → 8px hairline on white; keep its index keycap + rib vent. */
:root[data-theme="kompute"] .sphinx-admin-section > h2 {
  border-radius: 8px; border-color: var(--k-case-3); background: var(--k-case-4);
}

/* Fields → 8px; controls (keycaps) → 6px. Red RETURN key keeps its moulded bevel. */
:root[data-theme="kompute"] .sphinx-input,
:root[data-theme="kompute"] .sphinx-select { border-radius: 8px; }
:root[data-theme="kompute"] .sphinx-btn,
:root[data-theme="kompute"] .sphinx-sso-btn,
:root[data-theme="kompute"] .sphinx-theme-toggle,
:root[data-theme="kompute"] .sphinx-code-input input,
:root[data-theme="kompute"] .sphinx-metric-bar-track,
:root[data-theme="kompute"] .sphinx-delta-chip,
:root[data-theme="kompute"] .sphinx-table code,
:root[data-theme="kompute"] .sphinx-detail-list code { border-radius: 6px; }
:root[data-theme="kompute"] .an-range button:first-child { border-radius: 6px 0 0 6px; }
:root[data-theme="kompute"] .an-range button:last-child { border-radius: 0 6px 6px 0; }

/* Header strips → clean white (case-4) with a hairline rule (no inset shade).
   Keeps their red index ticks / keycaps. DataTable's dark column header stays. */
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card::before,
:root[data-theme="kompute"] .an-card-h,
:root[data-theme="kompute"] .sphinx-pcard-head,
:root[data-theme="kompute"] .sphinx-id-head,
:root[data-theme="kompute"] .sphinx-dash-group h3 {
  background: var(--k-case-4); border-bottom-color: var(--k-case-3); box-shadow: none;
}
/* Analytics title underline → hairline (was a heavy 2px ink rule). */
:root[data-theme="kompute"] .an-head { border-bottom: 1px solid var(--k-case-3); }

/* Narrower, quieter rib vents. */
:root[data-theme="kompute"] .sphinx-auth-container .sphinx-card::after { width: 14px; }
:root[data-theme="kompute"] .sphinx-admin-section > h2::after { width: 14px; }

/* BADGES → tinted pills: rounded, borderless, round status dot. The pale per-status
   tints (light) and dark-field tints are inherited from the rules above. */
:root[data-theme="kompute"] .sphinx-badge {
  border-radius: 999px; border-color: transparent; height: 20px; padding: 2px 9px;
}
:root[data-theme="kompute"] .sphinx-badge::before { border-radius: 999px; }
:root[data-theme="kompute"][data-mode="dark"] .sphinx-badge { border-color: transparent; }

/* ── INTER (DS look-flag "inter") — Inter for body/UI prose. Legends stay Barlow, data stays
   Plex Mono, headlines Barlow Condensed, wordmark Michroma, LCD/pixel unchanged. --k-font-body
   feeds --sphinx-font-family too, so general copy + inputs + dialog prose pick it up. ── */
:root[data-theme="kompute"] { --k-font-body: 'Inter', system-ui, -apple-system, sans-serif; }

/* ── TABLES nested in a titled panel (profile pcards): the DS's dark DataTable header is for a
   STANDALONE table that is its own titled module. Inside a pcard that already has a header it
   reads as a floating second header — so quiet the column header to a light sub-header that
   belongs to the panel. Standalone tables keep the dark header. ── */
/* Profile panels match the dashboard: keep the base DARK table column header (it reads as the
   header), and slim the panel title to a compact one-line strip like .an-card-h so the dark
   header doesn't stack as a second band. The explanatory "purpose" line moves to /help. */
:root[data-theme="kompute"] .sphinx-pcard-head { align-items: center; padding: 9px 14px; }
:root[data-theme="kompute"] .sphinx-pcard-head h2 {
  font-family: var(--k-font-legend); font-weight: 600; font-size: 11px;
  letter-spacing: var(--k-track-caps); gap: 8px;
}
:root[data-theme="kompute"] .sphinx-pcard-head h2::before { height: 11px; }
:root[data-theme="kompute"] .sphinx-pcard-purpose { display: none; }

/* ── ZEBRA vs PILLS — a pale pill on the pale case-1 stripe is near-invisible (pale-on-pale).
   Drop the persistent stripe (hairline row separators already delineate rows) and use the DS
   case tint only as a hover highlight — no bespoke off-palette greys. ── */
:root[data-theme="kompute"] .sphinx-table tbody tr:nth-child(even) { background: transparent; }
:root[data-theme="kompute"] .sphinx-table tbody tr:hover { background: var(--k-case-1); }
:root[data-theme="kompute"][data-mode="dark"] .sphinx-table tbody tr:hover { background: var(--k-case-2); }