:root {
  color-scheme: dark;
  --mist-bg: #101936;
  --mist-end: #4A2A6A;
  --mist-surface: #1A2147;
  --mist-soft: #252D59;
  --mist-border: #353D6D;
  --mist-text: #F4F6FF;
  --mist-muted: #B7BED8;
  --mist-accent: #6B5AE8;
  --color-bg: var(--mist-bg);
  --color-surface: var(--mist-surface);
  --color-surface-alt: var(--mist-soft);
  --color-border: var(--mist-border);
  --color-text: var(--mist-text);
  --color-text-muted: var(--mist-muted);
  --color-primary-bg: var(--mist-accent);
  --color-primary-bg-hover: #5848D8;
  --color-primary-text: var(--mist-text);
  --color-focus: #C2B9FF;
  --color-link: #D0C9FF;
  --bg: var(--mist-bg);
  --surface: var(--mist-surface);
  --surface-muted: var(--mist-soft);
  --border: var(--mist-border);
  --text: var(--mist-text);
  --muted: var(--mist-muted);
  --accent: var(--mist-accent);
  --accent-text: var(--mist-text);
  --danger: #FF9AA2;
  --danger-bg: #3B1F35;
  --success: #78D6AE;
  --success-bg: #19382F;
  --warning: #FFD68A;
  --warning-bg: #3D3022;
  /* Derived from the accepted palette; shared by all three surfaces. */
  --mist-accent-rgb: 107, 90, 232;
  --mist-end-rgb: 74, 42, 106;
  --mist-bg-rgb: 16, 25, 54;
  --mist-border-lit: #7667BC;
  --mist-line: rgba(var(--mist-accent-rgb), .38);
  --mist-highlight: rgba(244, 246, 255, .07);
  --mist-shade: rgba(var(--mist-bg-rgb), .56);
  --mist-canvas:
    radial-gradient(ellipse at 8% 6%, rgba(var(--mist-accent-rgb), .16), transparent 42%),
    radial-gradient(ellipse at 96% 80%, rgba(var(--mist-end-rgb), .48), transparent 55%),
    linear-gradient(155deg, transparent 18%, rgba(var(--mist-accent-rgb), .08) 18.2%, transparent 18.6%),
    linear-gradient(335deg, transparent 30%, rgba(var(--mist-accent-rgb), .09) 30.2%, transparent 30.7%);
  --mist-depth: linear-gradient(140deg, var(--mist-highlight), transparent 48%, var(--mist-shade));
  --mist-cta: linear-gradient(135deg, transparent, rgba(var(--mist-bg-rgb), .24));
  --mist-shadow: 0 10px 28px rgba(var(--mist-bg-rgb), .4), inset 0 1px 0 var(--mist-highlight);
  --mist-glow: 0 0 0 1px var(--mist-line), 0 0 24px rgba(var(--mist-accent-rgb), .17);
  --mist-inset: inset 0 2px 8px rgba(var(--mist-bg-rgb), .36);
  --mist-radius: 1rem;
}
body { background: var(--mist-canvas) var(--mist-bg) fixed; }
.brand img { width: 144px; height: 48px; object-fit: contain; }
/* Transparent image layers preserve the solid surface as a fallback. */
.card, .sub-card, .goal-card, .login-card, .tariff-card article {
  background-color: var(--mist-surface);
  background-image: var(--mist-depth);
  box-shadow: var(--mist-shadow);
}
.btn-primary, .font-btn[aria-pressed="true"] {
  background-color: var(--mist-accent);
  background-image: var(--mist-cta);
  box-shadow: inset 0 1px 0 rgba(244, 246, 255, .18), 0 4px 12px rgba(var(--mist-bg-rgb), .3);
}
button, .btn, a, input, select, textarea {
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
button:not(:disabled):active, .btn:not(:disabled):active { box-shadow: var(--mist-inset); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { box-shadow: var(--mist-inset); }
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--mist-accent); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
button:disabled, input:disabled, select:disabled, .btn:disabled {
  color: var(--mist-muted); background: var(--mist-soft); opacity: 1; cursor: not-allowed; box-shadow: none;
}
input, select, textarea { color: var(--mist-text); background-color: var(--mist-surface); }
input::placeholder, textarea::placeholder { color: var(--mist-muted); }
option { background: var(--mist-surface); color: var(--mist-text); }
.form-status.bad, .msg.bad, .error { color: var(--danger); }
.form-status.ok, .msg.ok { color: var(--success); }
.muted { color: var(--mist-muted); }
.balance-debt { color: #FF9AA2; }

html { background-color: var(--mist-bg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}