/* Tema "Nova" (test): mörkt och blått, inspirerat av moderna analysverktyg.
   Nästan svart bakgrund med en blå glöd uppifrån, tunna ljusa kanter på korten, mindre rundade
   hörn, tunna rubriker med toning, knappar som piller och blå toningar i diagram, ring och staplar.
   Gäller bara mörkt läge; det ljusa läget är orört. Laddas sist på varje sida. */

:root[data-theme="dark"] {
  --bg: #04060B;
  --surface: #0A0F1A;
  --glass: rgba(10, 15, 26, .74);
  --glass-border: rgba(255, 255, 255, .06);
  --field-bg: rgba(255, 255, 255, .03);
  --hover-bg: rgba(255, 255, 255, .04);
  --text: #EEF2F8;
  --text-2: #8E99AD;
  --text-3: #C3CBD8;
  --text-muted: #6F7A8E;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --subtle: rgba(255, 255, 255, .06);
  --grid-dot: transparent;

  --accent: #3D7BFF;
  --accent-2: #38BDF8;
  --accent-hover: #5B91FF;
  --accent-tint: rgba(61, 123, 255, .14);
  --accent-glow: rgba(61, 123, 255, .5);
  --focus-ring: rgba(61, 123, 255, .3);

  --feature-bg: linear-gradient(165deg, #10306F 0%, #0A1836 48%, #060B17 100%);
  --feature-border: rgba(90, 150, 255, .35);
  --on-feature-2: #9FB4DA;

  --aurora-1: rgba(37, 99, 235, .42);
  --aurora-2: transparent;
  --aurora-3: rgba(56, 189, 248, .14);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -24px rgba(0, 0, 0, .9);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);

  --r-sm: 10px;
  --r-md: 12px;
  --r-card-sm: 14px;
  --r-card: 16px;
  --r-card-lg: 18px;
}

/* ---------- Bakgrund: inga prickar, en blå glöd uppifrån som tonar bort ---------- */
[data-theme="dark"] body { background-image: none; }
[data-theme="dark"] body::before {
  inset: 0;
  background:
    radial-gradient(70vmax 38vmax at 50% -10%, var(--aurora-1), transparent 70%),
    radial-gradient(34vmax 22vmax at 50% -6%, var(--aurora-3), transparent 70%);
}

/* ---------- Kort: mörka paneler med tunn ljus kant och en svag blå glöd ---------- */
[data-theme="dark"] :is(.card, .stat:not(.stat-dark), .group, .hero-stat:not(.is-dark), .item-card, .edit-card, .advice, .empty, .pref-card, .table-wrap) {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card), 0 30px 60px -40px rgba(37, 99, 235, .35);
}
[data-theme="dark"] :is(.stat-dark, .hero-stat.is-dark) {
  border: 1px solid var(--feature-border);
  box-shadow: 0 0 0 1px rgba(61, 123, 255, .08), 0 24px 60px -24px rgba(37, 99, 235, .55);
}
[data-theme="dark"] .sidebar { background: rgba(6, 9, 16, .82); box-shadow: inset -1px 0 0 var(--line); }
@media (max-width: 900px) { [data-theme="dark"] .sidebar { background: #060910; } }

/* ---------- Rubriker: tunna, med toning från vitt till grått ---------- */
[data-theme="dark"] :is(.page-title h1, .hero-number strong, .hero-stat.is-dark .hero-value) {
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 35%, rgba(238, 242, 248, .55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .hero-stat.is-dark .hero-value.is-negative { background: none; color: var(--on-feature-negative); }
[data-theme="dark"] :is(.stat-value, .hero-value) { font-weight: 400; }

/* ---------- Knappar: piller. Den viktigaste vit, de andra genomskinliga med tunn ram ---------- */
[data-theme="dark"] .btn {
  border-radius: var(--r-pill);
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
  color: var(--text);
}
[data-theme="dark"] .btn:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); }
[data-theme="dark"] :is(.btn-accent, .btn-dark) {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #05070D;
}
[data-theme="dark"] :is(.btn-accent, .btn-dark):hover { background: #E4ECFF; border-color: #E4ECFF; color: #05070D; }
[data-theme="dark"] .btn-plain { border-color: transparent; }
[data-theme="dark"] .btn-danger { background: var(--warning); border-color: var(--warning); color: #05070D; }

/* ---------- Små piller med tunn ram ---------- */
[data-theme="dark"] :is(.lock-tag, .badge, .month-pill, .status) {
  background: transparent;
  border: 1px solid var(--line-strong);
}
[data-theme="dark"] .status.is-good { border-color: rgba(61, 214, 140, .35); }
[data-theme="dark"] .status.is-bad { border-color: var(--warning-border); }

/* ---------- Menyn: den aktiva sidan får en blå toning och ikonen lyser ---------- */
[data-theme="dark"] .nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(61, 123, 255, .22), rgba(61, 123, 255, .04));
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .22);
}
[data-theme="dark"] .nav a[aria-current="page"] svg { color: var(--accent-2); filter: drop-shadow(0 0 6px rgba(56, 189, 248, .55)); }
[data-theme="dark"] .tabbar a[aria-current="page"] { color: #FFFFFF; }
[data-theme="dark"] .tabbar a[aria-current="page"] svg { color: var(--accent-2); }

/* Ikonrutor med blå toning och glöd */
[data-theme="dark"] .icon-tile {
  background: linear-gradient(145deg, #3D7BFF, #1E4FD8);
  color: #FFFFFF;
  box-shadow: 0 6px 18px -6px rgba(61, 123, 255, .7);
}

/* ---------- Diagram, ring och staplar i blå toning ---------- */
[data-theme="dark"] .chart-area-top { stop-opacity: .38; }
[data-theme="dark"] .chart-glow { stroke-opacity: .75; stroke-width: 5; }
[data-theme="dark"] .chart-line { stroke-width: 2.75; }
[data-theme="dark"] .chart-halo { stroke-width: 1.5; }
[data-theme="dark"] .chart-band { fill: rgba(61, 123, 255, .12); fill-opacity: 1; }
[data-theme="dark"] .chart-grid { stroke: rgba(255, 255, 255, .05); }
[data-theme="dark"] .chart-dot { fill: #FFFFFF; stroke: var(--accent); stroke-width: 2.5; }
[data-theme="dark"] .chart-halo { stroke: var(--accent-2); stroke-opacity: .45; }
[data-theme="dark"] .chart-tooltip {
  background: #0B1222;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .chart-tooltip strong { font-size: 17px; font-weight: 600; color: #FFFFFF; }
[data-theme="dark"] .chart-tooltip-label::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

[data-theme="dark"] .ring-stop-a { stop-color: var(--accent-2); }
[data-theme="dark"] .ring-stop-b { stop-color: var(--accent); }
[data-theme="dark"] .ring-seg.is-costs { stroke: url(#ring-grad); }
[data-theme="dark"] .ring { filter: drop-shadow(0 0 10px rgba(61, 123, 255, .35)); }
[data-theme="dark"] .ring-track { stroke: rgba(255, 255, 255, .06); }

[data-theme="dark"] :is(.progress span, .cat-bar, .segments span.is-on) {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px -2px rgba(56, 189, 248, .5);
}
[data-theme="dark"] .progress span.is-done { background: var(--positive); box-shadow: none; }
[data-theme="dark"] .cat-bars li.is-other .cat-bar { background: var(--text-faint); box-shadow: none; }

/* Insiktsraden och andra tonade rutor: tunn blå kant */
[data-theme="dark"] .insight { background: rgba(61, 123, 255, .08); box-shadow: inset 0 0 0 1px rgba(90, 150, 255, .2); }

/* Fält */
[data-theme="dark"] :is(.field, .amt, .amt-input) { background: rgba(255, 255, 255, .03); border-color: var(--line-strong); }
[data-theme="dark"] :is(.field, .amt, .amt-input):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------- Inloggning och startfrågor ---------- */
[data-theme="dark"] .hero { border-radius: 22px; box-shadow: 0 0 0 1px rgba(61, 123, 255, .08), 0 40px 90px -40px rgba(37, 99, 235, .6); }
[data-theme="dark"] .hero::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(closest-side, rgba(56, 189, 248, .22), transparent);
  pointer-events: none;
}
[data-theme="dark"] .hero > * { position: relative; z-index: 1; }
[data-theme="dark"] :is(.hero h1, .auth-head h2, .ob-intro h1) {
  font-weight: 300;
  background: linear-gradient(180deg, #FFFFFF 40%, rgba(238, 242, 248, .5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .orbit-stop-a { stop-color: var(--accent-2); }
[data-theme="dark"] .orbit-stop-b { stop-color: var(--accent); }
[data-theme="dark"] .orbit-arc { stroke: url(#orbit-grad); } /* ingen filter-glöd: ringen snurrar, och filter ritas om varje bildruta */
[data-theme="dark"] .tabs { background: transparent; border: 1px solid var(--line-strong); }
[data-theme="dark"] .tab[aria-selected="true"] { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #FFFFFF; }
[data-theme="dark"] .ob-progress span.is-done { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px -1px rgba(56, 189, 248, .6); }
[data-theme="dark"] .ob-input { background: rgba(255, 255, 255, .03); border-color: var(--line-strong); }
[data-theme="dark"] :is(.chip, .option) { background: transparent; border-color: var(--line-strong); }
[data-theme="dark"] .option[aria-pressed="true"] { background: rgba(61, 123, 255, .1); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(61, 123, 255, .3), 0 10px 30px -14px rgba(61, 123, 255, .6); }
[data-theme="dark"] .ob-step { color: var(--accent-2); }

/* ==========================================================================
   Ljust läge: mjukt och levande i stället för formellt. En pastellglöd i blått,
   himmelsblått och en aning lavendel bakom allt, frostade vita kort med blåtonade
   skuggor, knappar i blå toning och samma former som det mörka temat.
   ========================================================================== */
:root[data-theme="light"] {
  --bg: #EEF3FB;
  --surface: #FFFFFF;
  --glass: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .9);
  --field-bg: rgba(255, 255, 255, .8);
  --hover-bg: rgba(37, 99, 235, .05);
  --text: #0F1B33;
  --text-2: #56627A;
  --text-3: #26324A;
  --text-muted: #7C88A0;
  --line: rgba(15, 27, 51, .08);
  --line-strong: rgba(15, 27, 51, .14);
  --subtle: rgba(37, 99, 235, .06);
  --grid-dot: transparent;

  --accent: #2F6BFF;
  --accent-2: #22B8F0;
  --accent-hover: #1F56E6;
  --accent-tint: rgba(47, 107, 255, .1);
  --accent-glow: rgba(47, 107, 255, .35);
  --focus-ring: rgba(47, 107, 255, .2);

  --feature-bg: linear-gradient(150deg, #3D7BFF 0%, #2456D8 45%, #1B3FA8 100%);
  --feature-border: rgba(255, 255, 255, .35);
  --on-feature: #FFFFFF;
  --on-feature-2: rgba(255, 255, 255, .78);

  --aurora-1: rgba(47, 107, 255, .22);
  --aurora-2: rgba(34, 184, 240, .16);
  --aurora-3: rgba(139, 124, 255, .14);

  --shadow-card: 0 1px 2px rgba(30, 60, 140, .05), 0 16px 36px -20px rgba(30, 60, 140, .28);
  --shadow-pop: 0 24px 60px -10px rgba(30, 60, 140, .3), 0 0 0 1px rgba(15, 27, 51, .05);

  --r-sm: 10px;
  --r-md: 12px;
  --r-card-sm: 14px;
  --r-card: 16px;
  --r-card-lg: 18px;
}

/* Bakgrund: mjuk pastellglöd som smälter ihop, ingen prickyta */
[data-theme="light"] body { background-image: none; }
[data-theme="light"] body::before {
  inset: 0;
  background:
    radial-gradient(60vmax 34vmax at 50% -8%, var(--aurora-1), transparent 70%),
    radial-gradient(40vmax 30vmax at 100% 10%, var(--aurora-3), transparent 70%),
    radial-gradient(44vmax 34vmax at 0% 60%, var(--aurora-2), transparent 70%),
    radial-gradient(50vmax 36vmax at 90% 100%, rgba(47, 107, 255, .10), transparent 70%);
}

/* Frostade vita kort med vit överkant och blåtonad skugga */
[data-theme="light"] :is(.card, .stat:not(.stat-dark), .group, .hero-stat:not(.is-dark), .item-card, .edit-card, .advice, .empty, .pref-card, .table-wrap) {
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #FFFFFF, var(--shadow-card);
}
[data-theme="light"] .table-wrap { background: rgba(255, 255, 255, .9); }
[data-theme="light"] :is(.stat-dark, .hero-stat.is-dark) {
  border: 1px solid var(--feature-border);
  box-shadow: 0 20px 44px -18px rgba(47, 107, 255, .6);
}
[data-theme="light"] :is(.stat-dark, .hero-stat.is-dark)::before { background: radial-gradient(closest-side, rgba(34, 184, 240, .55), transparent); }
[data-theme="light"] .sidebar { background: rgba(255, 255, 255, .6); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .9), 1px 0 0 var(--line); }
@media (max-width: 900px) { [data-theme="light"] .sidebar { background: #F6F9FF; } }

/* Rubriker: tunna, från mörkblått till blått */
[data-theme="light"] :is(.page-title h1, .hero-number strong, .auth-head h2, .ob-intro h1) {
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #0F1B33 30%, #2F6BFF 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] :is(.hero-stat.is-dark .hero-value, .hero h1) {
  font-weight: 300;
  background: linear-gradient(180deg, #FFFFFF 40%, rgba(255, 255, 255, .7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .hero-stat.is-dark .hero-value.is-negative { background: none; color: #FFD2C2; }

/* Knappar: huvudknappen i blå toning med mjuk skugga, de andra frostade piller */
[data-theme="light"] .btn { border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); border-color: rgba(15, 27, 51, .1); color: var(--text); }
[data-theme="light"] .btn:hover { background: #FFFFFF; border-color: rgba(47, 107, 255, .3); }
[data-theme="light"] :is(.btn-accent, .btn-dark) {
  background: linear-gradient(135deg, #3D7BFF, #2456D8);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -10px rgba(47, 107, 255, .8);
}
[data-theme="light"] :is(.btn-accent, .btn-dark):hover { background: linear-gradient(135deg, #4F88FF, #2B60E6); color: #FFFFFF; }
[data-theme="light"] .btn-plain { background: transparent; border-color: transparent; box-shadow: none; }

[data-theme="light"] :is(.lock-tag, .badge, .month-pill, .status) { background: rgba(255, 255, 255, .6); border: 1px solid var(--line-strong); }

/* Menyn */
[data-theme="light"] .nav a[aria-current="page"] {
  background: #FFFFFF;
  color: var(--accent);
  box-shadow: 0 6px 16px -10px rgba(47, 107, 255, .5), inset 0 0 0 1px rgba(47, 107, 255, .14);
}
[data-theme="light"] .nav a[aria-current="page"] svg { color: var(--accent); }
[data-theme="light"] .icon-tile { background: linear-gradient(145deg, #4F88FF, #2456D8); color: #FFFFFF; box-shadow: 0 6px 16px -6px rgba(47, 107, 255, .6); }

/* Diagram, ring och staplar */
[data-theme="light"] .chart-area-top { stop-opacity: .28; }
[data-theme="light"] .chart-glow { stroke-opacity: .4; stroke-width: 5; }
[data-theme="light"] .chart-dot { fill: #FFFFFF; stroke: var(--accent); stroke-width: 2.5; }
[data-theme="light"] .chart-band { fill: var(--accent); fill-opacity: .07; }
[data-theme="light"] .chart-tooltip { background: #0F1B33; color: #FFFFFF; border: 0; border-radius: 12px; box-shadow: 0 16px 36px -12px rgba(15, 27, 51, .5); }
[data-theme="light"] .chart-tooltip strong { color: #FFFFFF; font-size: 17px; }
[data-theme="light"] .chart-tooltip-label { color: #AEBBD6; }
[data-theme="light"] .ring-stop-a { stop-color: var(--accent-2); }
[data-theme="light"] .ring-stop-b { stop-color: var(--accent); }
[data-theme="light"] .ring-seg.is-costs { stroke: url(#ring-grad); }
[data-theme="light"] .ring { filter: drop-shadow(0 6px 12px rgba(47, 107, 255, .25)); }
[data-theme="light"] :is(.progress span, .cat-bar, .segments span.is-on) { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
[data-theme="light"] .progress span.is-done { background: var(--positive); }
[data-theme="light"] .cat-bars li.is-other .cat-bar { background: var(--text-faint); }
[data-theme="light"] .insight { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(47, 107, 255, .16), 0 8px 20px -14px rgba(47, 107, 255, .5); }
[data-theme="light"] :is(.field, .amt, .amt-input) { background: rgba(255, 255, 255, .85); border-color: var(--line-strong); }
[data-theme="light"] :is(.field, .amt, .amt-input):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Inloggning och startfrågor */
[data-theme="light"] .hero { border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(47, 107, 255, .65); }
[data-theme="light"] .hero::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(closest-side, rgba(125, 211, 252, .45), transparent);
  pointer-events: none;
}
[data-theme="light"] .hero > * { position: relative; z-index: 1; }
[data-theme="light"] .orbit-stop-a { stop-color: #BAE6FD; }
[data-theme="light"] .orbit-stop-b { stop-color: #FFFFFF; }
[data-theme="light"] .orbit-arc { stroke: url(#orbit-grad); }
[data-theme="light"] .tabs { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-card); }
[data-theme="light"] .tab[aria-selected="true"] { background: #FFFFFF; box-shadow: 0 6px 16px -10px rgba(47, 107, 255, .5), inset 0 0 0 1px rgba(47, 107, 255, .14); color: var(--accent); }
[data-theme="light"] .ob-progress span.is-done { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
[data-theme="light"] :is(.chip, .option) { background: rgba(255, 255, 255, .7); }
[data-theme="light"] .option[aria-pressed="true"] { background: #FFFFFF; border-color: var(--accent); box-shadow: 0 10px 24px -14px rgba(47, 107, 255, .6); }

/* Pilknappar (byt månad m.m.): samma genomskinliga piller som de andra knapparna */
[data-theme="dark"] .icon-btn { background: transparent; border-color: rgba(255, 255, 255, .2); color: var(--text); }
[data-theme="dark"] .icon-btn:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); }
[data-theme="light"] .icon-btn { background: rgba(255, 255, 255, .7); border-color: rgba(15, 27, 51, .1); color: var(--text); }
[data-theme="light"] .icon-btn:hover { background: #FFFFFF; border-color: rgba(47, 107, 255, .3); }