:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1020;
  --surface: #121a2e;
  --surface-2: #18223a;
  --surface-3: #202c49;
  --ink: #eef2ff;
  --ink-2: #aab5d1;
  --ink-3: #7481a2;
  --line: #243150;
  --brand: #5b84ff;
  --brand-2: #89a6ff;
  --brand-soft: rgba(91, 132, 255, .16);
  --brand-rgb: 91, 132, 255;
  --mint: #2fd08a;
  --mint-soft: rgba(47, 208, 138, .14);
  --gold: #f5c33b;
  --gold-soft: rgba(245, 195, 59, .14);
  --rose: #ff6b72;
  --rose-soft: rgba(255, 107, 114, .14);
  --violet: #9d86ff;
  --violet-soft: rgba(157, 134, 255, .16);
  --orange: #ff8a5c;
  --orange-soft: rgba(255, 138, 92, .15);
  --good: #4ade9a;
  --bad: #ff7d83;
  --sh-1: 0 0 0 1px rgba(255, 255, 255, .055);
  --sh-2: 0 0 0 1px rgba(255, 255, 255, .055), 0 20px 44px -24px rgba(0, 0, 0, .75);
  --sh-3: 0 0 0 1px rgba(255, 255, 255, .08), 0 34px 70px -28px rgba(0, 0, 0, .9);
  --sh-brand: 0 14px 30px -12px rgba(91, 132, 255, .6);
}

:root[data-theme="dark"] body[data-area="admin"] {
  --brand: #8f73ff;
  --brand-2: #b29dff;
  --brand-soft: rgba(143, 115, 255, .18);
  --brand-rgb: 143, 115, 255;
  --sh-brand: 0 14px 30px -12px rgba(143, 115, 255, .6);
}

:root[data-theme="dark"] * {
  scrollbar-color: #2c3a5c transparent;
}

:root[data-theme="dark"] ::selection {
  background: rgba(var(--brand-rgb), .38);
}

:root[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #3f68f0 0%, #6f91ff 100%);
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .22);
}

:root[data-theme="dark"] body[data-area="admin"] .btn-primary {
  background: linear-gradient(135deg, #6a4be6 0%, #9a82ff 100%);
}

:root[data-theme="dark"] .btn-soft {
  background: var(--surface-3);
  color: var(--ink);
}

:root[data-theme="dark"] .btn-soft:hover {
  background: #283658;
}

:root[data-theme="dark"] .btn-danger-soft:hover {
  background: rgba(255, 107, 114, .24);
}

:root[data-theme="dark"] .btn.is-success {
  background: linear-gradient(135deg, #12a86b, #34d399);
}

:root[data-theme="dark"] .fld {
  background: var(--surface-2);
}

:root[data-theme="dark"] .fld:hover {
  background: #1c2742;
}

:root[data-theme="dark"] .fld:focus-within {
  background: #0f1729;
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .2);
}

:root[data-theme="dark"] .fld-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 60px #18223a inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}

:root[data-theme="dark"] .fld.is-invalid {
  background: var(--rose-soft);
}

:root[data-theme="dark"] .switch > i {
  background: #33415f;
}

:root[data-theme="dark"] .switch input:checked + i {
  background: var(--brand);
}

:root[data-theme="dark"] .seg-pill {
  background: #2f3d62;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 16px -8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .card {
  box-shadow: var(--sh-2);
}

:root[data-theme="dark"] .badge-warn,
:root[data-theme="dark"] .tone-gold {
  color: #f5c33b;
}

:root[data-theme="dark"] .tone-orange {
  color: #ff9a70;
}

:root[data-theme="dark"] .tone-violet {
  color: #b9a7ff;
}

:root[data-theme="dark"] .avatar {
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 62%, #0a1020));
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}

:root[data-theme="dark"] .cat-ico {
  color: color-mix(in srgb, var(--c) 68%, #fff);
  background: color-mix(in srgb, var(--c) 24%, #121a2e);
}

:root[data-theme="dark"] .toast {
  background: rgba(32, 44, 73, .97);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .modal-backdrop {
  background: rgba(3, 6, 14, .62);
}

:root[data-theme="dark"] .modal {
  background: #141d33;
  box-shadow: 0 50px 110px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07);
}

:root[data-theme="dark"] .modal-grip {
  background: #33415f;
}

:root[data-theme="dark"] .pop {
  background: #1a2540;
  box-shadow: var(--sh-3);
}

:root[data-theme="dark"] .dp-grid button:hover {
  background: var(--surface-3);
}

:root[data-theme="dark"] .dp-grid button.is-on {
  background: linear-gradient(135deg, #3f68f0, #6f91ff);
  color: #fff;
}

:root[data-theme="dark"] .empty-ico {
  background: linear-gradient(135deg, rgba(91, 132, 255, .2), rgba(157, 134, 255, .16));
}

:root[data-theme="dark"] .skel {
  background: linear-gradient(100deg, #141d33 30%, #1d2944 50%, #141d33 70%);
  background-size: 300% 100%;
}

:root[data-theme="dark"] .app-bg {
  background:
    radial-gradient(900px 620px at 100% -12%, rgba(var(--brand-rgb), .22), transparent 60%),
    radial-gradient(720px 540px at -6% 18%, rgba(18, 183, 106, .12), transparent 60%),
    radial-gradient(640px 520px at 46% 112%, rgba(245, 179, 1, .07), transparent 60%),
    var(--bg);
}

:root[data-theme="dark"] .splash {
  background: var(--bg);
}

:root[data-theme="dark"] .side {
  background: rgba(18, 26, 46, .78);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .07);
}

:root[data-theme="dark"] .nav-item:hover:not(.is-active) {
  background: rgba(255, 255, 255, .055);
}

:root[data-theme="dark"] .nav-ind {
  background: linear-gradient(135deg, #3f68f0, #6f91ff);
}

:root[data-theme="dark"] body[data-area="admin"] .nav-ind {
  background: linear-gradient(135deg, #6a4be6, #9a82ff);
}

:root[data-theme="dark"] .side-install {
  background: linear-gradient(135deg, rgba(91, 132, 255, .18), rgba(47, 208, 138, .12));
}

:root[data-theme="dark"] .side-install-ico {
  background: var(--surface-3);
}

:root[data-theme="dark"] .top {
  background: rgba(10, 16, 32, .78);
}

:root[data-theme="dark"] .top::after {
  background: linear-gradient(rgba(10, 16, 32, .78), rgba(10, 16, 32, 0));
}

:root[data-theme="dark"] .mswitch,
:root[data-theme="dark"] .theme-btn {
  background: var(--surface);
  box-shadow: var(--sh-1), 0 10px 20px -14px rgba(0, 0, 0, .8);
}

:root[data-theme="dark"] .hero {
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .hero-bg {
  background: linear-gradient(135deg, #14267c 0%, #2447c9 50%, #3d68ee 100%);
}

:root[data-theme="dark"] .hero.is-bad .hero-bg {
  background: linear-gradient(135deg, #6f1029 0%, #b92f40 52%, #dd5d68 100%);
}

:root[data-theme="dark"] .hero-admin .hero-bg {
  background: linear-gradient(135deg, #21146a 0%, #4a31bd 50%, #7a5df0 100%);
}

:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .mini,
:root[data-theme="dark"] .cat-card {
  background: var(--surface);
}

:root[data-theme="dark"] .detail .mini {
  background: var(--surface-2);
}

:root[data-theme="dark"] .tile::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--brand-rgb), .2), transparent 65%);
}

:root[data-theme="dark"] .c-grid.is-zero {
  stroke: #3a4a70;
}

:root[data-theme="dark"] .c-band {
  fill: rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .c-dot {
  stroke: var(--surface);
}

:root[data-theme="dark"] .c-cross {
  stroke: #4a5a82;
}

:root[data-theme="dark"] .chart-tip {
  background: rgba(32, 44, 73, .98);
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .insights li:hover {
  background: var(--surface-3);
}

:root[data-theme="dark"] .search:focus-within {
  background: #0f1729;
  box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 5px rgba(var(--brand-rgb), .2);
}

:root[data-theme="dark"] .chip {
  background: var(--surface);
}

:root[data-theme="dark"] .chip .ico {
  color: color-mix(in srgb, var(--c) 68%, #fff);
}

:root[data-theme="dark"] .chip.is-on {
  background: color-mix(in srgb, var(--c) 22%, #121a2e);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 68%, #fff);
}

:root[data-theme="dark"] .table tbody tr:hover {
  background: rgba(255, 255, 255, .03);
}

:root[data-theme="dark"] .cat-card.is-tilting {
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
}

:root[data-theme="dark"] .cat-card::before {
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
}

:root[data-theme="dark"] .cat-lock {
  color: #44527a;
}

:root[data-theme="dark"] .cat-new {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #33415f;
}

:root[data-theme="dark"] .cat-new:hover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

:root[data-theme="dark"] .cat-preview {
  background: color-mix(in srgb, var(--c) 16%, #121a2e);
}

:root[data-theme="dark"] .swatches button.is-on {
  box-shadow: 0 0 0 3px #141d33, 0 0 0 5.5px var(--c);
}

:root[data-theme="dark"] .icon-grid button.is-on {
  background: color-mix(in srgb, var(--c) 82%, #fff);
  color: #0a1020;
}

:root[data-theme="dark"] .seg-type .seg-pill {
  background: linear-gradient(135deg, #d9521f, #f08350);
}

:root[data-theme="dark"] .modal-tx.is-income .seg-type .seg-pill {
  background: linear-gradient(135deg, #3f68f0, #6f91ff);
}

:root[data-theme="dark"] .amount-input::placeholder {
  color: #3d4b70;
}

:root[data-theme="dark"] .quick button:hover {
  background: var(--brand-soft);
  color: var(--brand-2);
}

:root[data-theme="dark"] .cat-opt .cat-ico {
  background: var(--surface-3);
}

:root[data-theme="dark"] .cat-opt.is-on {
  background: color-mix(in srgb, var(--c) 20%, #121a2e);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 68%, #fff);
}

:root[data-theme="dark"] .cat-opt.is-on .cat-ico {
  background: color-mix(in srgb, var(--c) 82%, #fff);
  color: #0a1020;
}

:root[data-theme="dark"] .date-btn:hover {
  background: #1c2742;
}

:root[data-theme="dark"] .txf-acts {
  background: linear-gradient(rgba(20, 29, 51, 0), #141d33 30%);
}

:root[data-theme="dark"] .mp-grid button.is-on {
  background: linear-gradient(135deg, #3f68f0, #6f91ff);
}

:root[data-theme="dark"] .profile-card .avatar {
  box-shadow: 0 0 0 5px var(--surface), 0 18px 30px -14px rgba(0, 0, 0, .9);
}

:root[data-theme="dark"] .bar i {
  background: color-mix(in srgb, var(--c, var(--brand)) 76%, #fff);
}

:root[data-theme="dark"] .meter {
  background: rgba(255, 138, 92, .18);
}

:root[data-theme="dark"] .hero-btn.is-solid {
  background: #fff;
  color: #1c3fc0;
}

:root[data-theme="dark"] .tabbar {
  background: rgba(22, 32, 56, .9);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .tab-fab {
  background: linear-gradient(135deg, #3f68f0, #6f91ff);
  box-shadow: var(--sh-brand), 0 0 0 5px rgba(10, 16, 32, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}

:root[data-theme="dark"] body[data-area="admin"] .tab-fab {
  background: linear-gradient(135deg, #6a4be6, #9a82ff);
}

:root[data-theme="dark"] .you {
  color: var(--brand-2);
}

:root[data-theme="dark"] .delta.is-good,
:root[data-theme="dark"] .badge-good {
  color: var(--good);
}

:root[data-theme="dark"] .strength > div i {
  background: var(--surface-3);
}

:root[data-theme="dark"] .strength[data-score="1"] > div i:nth-child(-n+1) { background: var(--rose); }
:root[data-theme="dark"] .strength[data-score="2"] > div i:nth-child(-n+2) { background: var(--gold); }
:root[data-theme="dark"] .strength[data-score="3"] > div i:nth-child(-n+3) { background: #5cc98a; }
:root[data-theme="dark"] .strength[data-score="4"] > div i { background: var(--mint); }

:root[data-theme="dark"] .coin > b,
:root[data-theme="dark"] .coin > u {
  background: radial-gradient(circle at 32% 28%, #fff1b0 0%, #ffd044 28%, #eba900 62%, #c98500 100%);
}

:root[data-theme="dark"] .auth-bg {
  background: linear-gradient(160deg, #0b1228 0%, #0a1020 45%, #0a1a1c 100%);
}

:root[data-theme="dark"] .orb-a {
  background: radial-gradient(circle, rgba(63, 104, 240, .5), transparent 66%);
}

:root[data-theme="dark"] .orb-b {
  background: radial-gradient(circle, rgba(18, 183, 106, .3), transparent 66%);
}

:root[data-theme="dark"] .orb-c {
  background: radial-gradient(circle, rgba(245, 179, 1, .16), transparent 66%);
}

:root[data-theme="dark"] .auth-grid {
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}

:root[data-theme="dark"] .auth-card {
  background: rgba(18, 26, 46, .78);
  box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .auth-logo::before {
  background: #f4f6ff;
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .5);
}

:root[data-theme="dark"] .auth-head h1,
:root[data-theme="dark"] .stage-copy h2 {
  background: linear-gradient(120deg, #9db4ff, #6f91ff 45%, #3fd69a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-theme="dark"] .theme-fab {
  background: rgba(22, 32, 56, .85);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: #f5c33b;
}

:root[data-theme="dark"] .s-glass {
  background: rgba(26, 37, 64, .96);
  box-shadow: 0 34px 54px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

:root[data-theme="dark"] .s-ring circle {
  stroke: #2a3859;
}

:root[data-theme="dark"] .s-ring .s-ring-val {
  stroke: var(--mint);
}

:root[data-theme="dark"] .s-tx-ico {
  color: color-mix(in srgb, var(--c) 68%, #fff);
  background: color-mix(in srgb, var(--c) 26%, #1a2540);
}

:root[data-theme="dark"] .s-orbit {
  border-color: rgba(111, 145, 255, .32);
}

:root[data-theme="dark"] .s-orbit-2 {
  border-color: rgba(47, 208, 138, .3);
}

:root[data-theme="dark"] .s-card .s-float {
  background: linear-gradient(135deg, #14267c 0%, #2447c9 50%, #3d68ee 100%);
  box-shadow: 0 50px 70px -36px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
}

:root[data-theme="dark"] .otp-boxes span {
  background: var(--surface-2);
}

:root[data-theme="dark"] .otp-boxes span.is-active,
:root[data-theme="dark"] .otp-boxes span.is-filled {
  background: #0f1729;
}

:root[data-theme="dark"] .otp.is-shake .otp-boxes span {
  background: var(--rose-soft);
}

:root[data-theme="dark"] .otp.is-ok .otp-boxes span {
  background: var(--mint-soft);
}

:root[data-theme="dark"] .lang-fab {
  background: rgba(18, 26, 46, .78);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--ink-2);
}

:root[data-theme="dark"] .pwa-logo,
:root[data-theme="dark"] .pwa-guide-logo {
  background: linear-gradient(145deg, #1b2644, #121a2e);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .callout.is-warn .callout-ico {
  color: var(--gold);
}

:root[data-theme="dark"] .rem-dp .dp-grid button:hover {
  background: var(--surface-3);
  box-shadow: none;
}

:root[data-theme="dark"] .rem-item.is-today .rem-date {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 78%, #000), var(--c));
}

:root[data-theme="dark"] .rem-date i {
  background: var(--surface-3);
}

:root[data-theme="dark"] .rem-check:hover {
  color: #06291a;
}

:root[data-theme="dark"] .alarm-bell > span {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #000), var(--c));
}