/*
 * Bloom — tema scuro (dal mockup «grafiche diverse per ogni contesto»).
 * Vale quando <html data-theme="dark">, che imposta js/theme.js (scelta in
 * Profilo › Aspetto: Automatico / Chiaro / Scuro). Il tema chiaro resta tutto
 * in styles.css e qui non si tocca.
 *
 * Due livelli:
 * 1. le variabili di ogni legame in versione notte (sfondo, testo, accento);
 * 2. gli elementi che in styles.css hanno il bianco o un colore scritto a mano.
 * Al buio --rose-dark è la variante CHIARA dell'accento: si usa per i testi.
 * Ogni selettore inizia con :root[data-theme="dark"], così batte le regole
 * chiare di stile (body[data-look] …) senza !important.
 */

:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- 1. Variabili: base (giardino, accoglienza) ---------- */

:root[data-theme="dark"] body {
  --bg: #17121a;
  --cream: #231b20;
  --cream-2: #2c2328;
  --ink: #f3e8e7;
  --ink-2: #dccbca;
  --muted: #ac9a99;
  --line: rgba(255, 255, 255, .10);
  --rose: #e29aa0;
  --rose-dark: #f2b9be;
  --rose-soft: rgba(226, 154, 160, .16);
  --title: #fbe9e8;
  --sage: #a9b08a;
  --sage-dark: #c9d1a8;
  --sage-soft: rgba(169, 176, 138, .16);
  --gold: #d8ad72;
  --gold-soft: rgba(214, 168, 99, .17);
  --lilac-soft: rgba(214, 189, 214, .15);
  --danger: #f08a92;
  --second: #d8ad72;
  --surface: rgba(255, 255, 255, .05);
  --surface-line: rgba(255, 255, 255, .09);
  --shadow: 0 10px 30px rgba(0, 0, 0, .32);
  --rose-grad: linear-gradient(180deg, #d98c92 0%, #b2606b 100%);
  --gauge-fill: rgba(255, 255, 255, .04);
  /* Superfici nuove del tema scuro: card e controlli che erano bianchi. */
  --card: rgba(255, 255, 255, .055);
  --card-hi: rgba(255, 255, 255, .085);
  --field: rgba(255, 255, 255, .07);
  --warn-ink: #ecc994;
  --up: #8fd3a6;
  background:
    radial-gradient(circle at 12% 0%, rgba(226, 154, 160, .13), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(201, 154, 92, .08), transparent 38%),
    var(--bg);
}

/* ---------- 1. Variabili: i sei legami ---------- */

:root[data-theme="dark"] body[data-look="couple"] {
  --bg: #1a1116;
  --cream: #251820;
  --cream-2: #2e1f28;
  --ink: #f7e7ea;
  --ink-2: #e3cbd1;
  --muted: #b5979f;
  --line: rgba(236, 125, 147, .20);
  --surface-line: rgba(236, 125, 147, .20);
  --rose: #ec7d93;
  --rose-dark: #f7aabb;
  --rose-soft: rgba(236, 125, 147, .17);
  --title: #ffe4ea;
  --rose-grad: linear-gradient(180deg, #e8768e 0%, #bf4563 100%);
  --second: #d8ad72;
  --shadow: 0 10px 28px rgba(0, 0, 0, .35);
  background:
    radial-gradient(ellipse at 100% 12%, rgba(226, 96, 122, .20), transparent 42%),
    radial-gradient(ellipse at 0% 72%, rgba(160, 60, 90, .16), transparent 44%),
    var(--bg);
}

:root[data-theme="dark"] body[data-look="friends"] {
  --bg: #0d1a19;
  --cream: #132420;
  --cream-2: #182d29;
  --ink: #e4f4f1;
  --ink-2: #c4dcd7;
  --muted: #8eaea8;
  --line: rgba(44, 196, 176, .20);
  --surface-line: rgba(44, 196, 176, .20);
  --rose: #2cc4b0;
  --rose-dark: #7fe3d4;
  --rose-soft: rgba(44, 196, 176, .15);
  --title: #e0faf4;
  --rose-grad: linear-gradient(180deg, #2bb9a6 0%, #0f8576 100%);
  --second: #ffc94d;
  --shadow: 0 10px 28px rgba(0, 0, 0, .35);
  background:
    radial-gradient(ellipse at 100% 12%, rgba(255, 201, 77, .10), transparent 35%),
    radial-gradient(ellipse at 0% 58%, rgba(44, 196, 176, .14), transparent 48%),
    var(--bg);
}

:root[data-theme="dark"] body[data-look="groups"] {
  --bg: #1c1220;
  --cream: #271a2b;
  --cream-2: #302034;
  --ink: #f8e6ea;
  --ink-2: #e4cbd2;
  --muted: #b8979f;
  --line: rgba(255, 122, 107, .22);
  --surface-line: rgba(255, 122, 107, .22);
  --rose: #ff7a6b;
  --rose-dark: #ffab9f;
  --rose-soft: rgba(255, 122, 107, .16);
  --title: #ffe7e2;
  --rose-grad: linear-gradient(180deg, #ff8a5c 0%, #ff4f6d 100%);
  --second: #c77dff;
  --shadow: 0 10px 28px rgba(0, 0, 0, .38);
  background:
    linear-gradient(180deg, rgba(255, 138, 92, .15) 0, rgba(255, 126, 179, .07) 230px, transparent 420px),
    radial-gradient(ellipse at 0% 52%, rgba(199, 125, 255, .10), transparent 46%),
    var(--bg);
}

:root[data-theme="dark"] body[data-look="work"] {
  --bg: #0e1522;
  --cream: #151e2e;
  --cream-2: #1b2638;
  --ink: #e3eaf4;
  --ink-2: #c3cfdf;
  --muted: #8f9fb5;
  --line: rgba(130, 170, 226, .18);
  --surface-line: rgba(130, 170, 226, .18);
  --rose: #5b93d6;
  --rose-dark: #a4c6f0;
  --rose-soft: rgba(91, 147, 214, .16);
  --title: #e6eefa;
  --rose-grad: linear-gradient(180deg, #3a6bb0 0%, #24477c 100%);
  --second: #8fb0dc;
  --work-in: #5b93d6;
  --work-off: #d99a5b;
  --shadow: 0 8px 22px rgba(0, 0, 0, .38);
  background:
    radial-gradient(ellipse at 100% 10%, rgba(91, 147, 214, .18), transparent 40%),
    radial-gradient(ellipse at 0% 70%, rgba(60, 90, 140, .16), transparent 44%),
    var(--bg);
}

:root[data-theme="dark"] body[data-look="family"] {
  --bg: #1b130e;
  --cream: #261b14;
  --cream-2: #2f2219;
  --ink: #f5e7dd;
  --ink-2: #e0cbbd;
  --muted: #b39b8c;
  --line: rgba(224, 138, 95, .20);
  --surface-line: rgba(224, 138, 95, .20);
  --rose: #e08a5f;
  --rose-dark: #f3b48f;
  --rose-soft: rgba(224, 138, 95, .16);
  --title: #fde8da;
  --rose-grad: linear-gradient(180deg, #d5835b 0%, #a8562f 100%);
  --second: #9fb57f;
  --shadow: 0 10px 28px rgba(0, 0, 0, .36);
  background:
    radial-gradient(ellipse at 100% 10%, rgba(224, 138, 95, .17), transparent 42%),
    radial-gradient(ellipse at 0% 75%, rgba(159, 181, 127, .08), transparent 43%),
    var(--bg);
}

:root[data-theme="dark"] body[data-look="relatives"] {
  --bg: #19150d;
  --cream: #241e14;
  --cream-2: #2d2619;
  --ink: #f3eadb;
  --ink-2: #ddd0bb;
  --muted: #b2a48b;
  --line: rgba(214, 171, 112, .20);
  --surface-line: rgba(214, 171, 112, .20);
  --rose: #d6ab70;
  --rose-dark: #ecc994;
  --rose-soft: rgba(214, 171, 112, .16);
  --title: #f8e6c6;
  --rose-grad: linear-gradient(180deg, #d6ab70 0%, #a87a3c 100%);
  --second: #a9b08a;
  --shadow: 0 10px 28px rgba(0, 0, 0, .36);
  --deco: url("../assets/img/photo-relatives-night.webp");
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 171, 112, .15), transparent 40%),
    var(--bg);
}

/* ---------- 2. Struttura: barra, pulsanti, superfici ---------- */

:root[data-theme="dark"] .skip-link { color: var(--bg); }

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] body[data-look] .sidebar {
  border-top-color: var(--line);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
}

@supports (backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .sidebar,
  :root[data-theme="dark"] body[data-look] .sidebar { background: color-mix(in srgb, var(--cream) 84%, transparent); }
}

:root[data-theme="dark"] .nav button.active { color: var(--rose-dark); background: var(--rose-soft); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] body[data-look] .nav button.active { color: #fff; background: var(--rose-grad); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] body[data-look="couple"] .nav button.active,
:root[data-theme="dark"] body[data-look="garden"] .nav button.active { color: var(--rose-dark); background: var(--rose-soft); box-shadow: inset 0 0 0 1px var(--line); }

:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .round-btn,
:root[data-theme="dark"] .context-chip,
:root[data-theme="dark"] .quick-icon { background: var(--field); }
:root[data-theme="dark"] .btn.primary { background: var(--rose-grad); box-shadow: 0 12px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .btn.ghost { background: transparent; }
:root[data-theme="dark"] .btn.danger { background: #c4505a; }
:root[data-theme="dark"] .round-btn { box-shadow: none; }

:root[data-theme="dark"] .section.soft,
:root[data-theme="dark"] body[data-look] .section.soft,
:root[data-theme="dark"] body[data-look] .suggested-message,
:root[data-theme="dark"] .suggested-message { background: var(--rose-soft); }

/* Card e sezioni: in chiaro bianco velato, al buio un velo chiaro sul fondo. */
:root[data-theme="dark"] .main-relation,
:root[data-theme="dark"] body[data-context="work"] .main-relation,
:root[data-theme="dark"] .install-card,
:root[data-theme="dark"] .load-box,
:root[data-theme="dark"] .emerge,
:root[data-theme="dark"] .mood,
:root[data-theme="dark"] .onb-card,
:root[data-theme="dark"] .care,
:root[data-theme="dark"] .read-card,
:root[data-theme="dark"] .since-card.quiet,
:root[data-theme="dark"] .topic-cloud,
:root[data-theme="dark"] .metrics-row .metric,
:root[data-theme="dark"] body[data-look] .section,
:root[data-theme="dark"] body[data-look] .card,
:root[data-theme="dark"] body[data-look] .relation-card,
:root[data-theme="dark"] body[data-look] .trait-card,
:root[data-theme="dark"] body[data-look] .trend-card,
:root[data-theme="dark"] body[data-look] .bloom-card,
:root[data-theme="dark"] body[data-look] .install-card,
:root[data-theme="dark"] body[data-look] .demo-banner,
:root[data-theme="dark"] body[data-look] .person-card,
:root[data-theme="dark"] body[data-look] .report-block,
:root[data-theme="dark"] body[data-look="work"] .report-block { background: var(--card); }

:root[data-theme="dark"] body[data-look] .section.soft { background: var(--rose-soft); }

:root[data-theme="dark"] .main-relation::after { opacity: .28; }
:root[data-theme="dark"] body::before { opacity: .22; }
:root[data-theme="dark"] button.relation-card:hover { background: var(--card-hi); }

/* Punteggio, metriche, report: velo chiaro che sfuma nell'accento del legame. */
:root[data-theme="dark"] .score-card,
:root[data-theme="dark"] body[data-look] .score-card,
:root[data-theme="dark"] body[data-look] .report-score,
:root[data-theme="dark"] body[data-look="couple"] .score-card,
:root[data-theme="dark"] body[data-look="couple"] .report-score,
:root[data-theme="dark"] body[data-look="friends"] .score-card,
:root[data-theme="dark"] body[data-look="friends"] .report-score,
:root[data-theme="dark"] body[data-look="groups"] .score-card,
:root[data-theme="dark"] body[data-look="groups"] .report-score,
:root[data-theme="dark"] body[data-look="work"] .score-card,
:root[data-theme="dark"] body[data-look="work"] .report-score,
:root[data-theme="dark"] body[data-look="family"] .score-card,
:root[data-theme="dark"] body[data-look="family"] .report-score {
  background: linear-gradient(145deg, var(--card-hi) 8%, var(--rose-soft) 100%);
}

:root[data-theme="dark"] body[data-look] .emerge,
:root[data-theme="dark"] body[data-look] .onb-card { background: linear-gradient(145deg, var(--card-hi), var(--card)); }

:root[data-theme="dark"] body[data-look] .metric,
:root[data-theme="dark"] body[data-look="friends"] .metric,
:root[data-theme="dark"] body[data-look="groups"] .metric,
:root[data-theme="dark"] body[data-look="work"] .metric,
:root[data-theme="dark"] body[data-look="family"] .metric {
  border-color: var(--surface-line);
  background: linear-gradient(155deg, var(--card-hi) 10%, var(--card));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

:root[data-theme="dark"] body[data-look="couple"] .report-insight,
:root[data-theme="dark"] body[data-look="friends"] .report-insight,
:root[data-theme="dark"] body[data-look="groups"] .report-insight,
:root[data-theme="dark"] body[data-look="family"] .report-insight {
  border-color: var(--line);
  background: linear-gradient(110deg, var(--card-hi), var(--rose-soft));
}

/* Titoli di sezione: ogni stile li aveva scuri, al buio prendono il titolo. */
:root[data-theme="dark"] body[data-look] .section h3,
:root[data-theme="dark"] body[data-look] .block-title { color: var(--title); }
:root[data-theme="dark"] body[data-look="work"] .report-insight h3 { color: #fff; }

:root[data-theme="dark"] body[data-look] .wordmark { text-shadow: none; }
:root[data-theme="dark"] body[data-look="groups"] .wordmark { color: var(--rose-dark); }

/* ---------- 2. Controlli che erano bianchi ---------- */

:root[data-theme="dark"] .tabs [aria-selected="true"] { background: var(--card-hi); box-shadow: none; }
:root[data-theme="dark"] body[data-look] .tabs button[aria-selected="true"] { color: #fff; background: var(--rose-grad); }

:root[data-theme="dark"] .subnav .chip { color: var(--muted); background: var(--field); }
:root[data-theme="dark"] .subnav .chip.active { color: var(--rose-dark); border-color: var(--line); background: var(--rose-soft); }
:root[data-theme="dark"] body[data-look] .subnav { background: var(--card); }
:root[data-theme="dark"] body[data-look] .subnav .chip { background: transparent; }
:root[data-theme="dark"] body[data-look] .subnav .chip.active { color: #fff; border-color: transparent; background: var(--rose-grad); }

:root[data-theme="dark"] .person-picker button,
:root[data-theme="dark"] body[data-look] .person-picker button,
:root[data-theme="dark"] body[data-look] .onb-option,
:root[data-theme="dark"] body[data-look] .btn.who,
:root[data-theme="dark"] body[data-look] .context-chip,
:root[data-theme="dark"] body[data-look] .quick-actions button,
:root[data-theme="dark"] .onb-row,
:root[data-theme="dark"] .onb-option,
:root[data-theme="dark"] .topic-chip,
:root[data-theme="dark"] .drive-chip,
:root[data-theme="dark"] .helpline,
:root[data-theme="dark"] .since-chip,
:root[data-theme="dark"] .level-badge,
:root[data-theme="dark"] .level-option,
:root[data-theme="dark"] .trait-emoji { background-color: var(--field); }

:root[data-theme="dark"] body[data-look] .quick-actions button { box-shadow: none; }
:root[data-theme="dark"] .onb-row.alt { background: transparent; }

:root[data-theme="dark"] .person-picker [aria-selected="true"] { border-color: var(--rose); background: var(--rose-soft); box-shadow: none; }
:root[data-theme="dark"] body[data-look] .person-picker button[aria-selected="true"],
:root[data-theme="dark"] body[data-look] .onb-option[aria-pressed="true"],
:root[data-theme="dark"] body[data-look] .btn.context-option[aria-pressed="true"],
:root[data-theme="dark"] body[data-look] .btn.who[aria-pressed="true"],
:root[data-theme="dark"] .onb-option[aria-pressed="true"],
:root[data-theme="dark"] .level-option.current { background: var(--rose-soft); }

:root[data-theme="dark"] .dropzone { border-color: color-mix(in srgb, var(--rose) 45%, transparent); background: var(--card); }
:root[data-theme="dark"] .dropzone:hover,
:root[data-theme="dark"] body.dragging .dropzone { background: var(--rose-soft); }

:root[data-theme="dark"] .switch { background: rgba(255, 255, 255, .2); }
:root[data-theme="dark"] .switch:checked { background: var(--rose); }

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

/* Pillole di stato. */
:root[data-theme="dark"] .pill { color: var(--sage-dark); border-color: rgba(169, 176, 138, .3); }
:root[data-theme="dark"] .pill.warn { color: var(--warn-ink); border-color: rgba(214, 168, 99, .32); }
:root[data-theme="dark"] .pill.rose,
:root[data-theme="dark"] body[data-look] .pill.rose,
:root[data-theme="dark"] body[data-look] .report-score .pill { color: var(--rose-dark); border-color: var(--line); background: var(--rose-soft); }
:root[data-theme="dark"] body[data-look="work"] .home-hero .pill,
:root[data-theme="dark"] body[data-look="family"] .home-hero .pill { color: var(--rose-dark); border-color: var(--line); }

/* Amici: il giallo del mockup al posto del bianco. */
:root[data-theme="dark"] body[data-look="friends"] .home-hero .pill,
:root[data-theme="dark"] body[data-look="friends"] .metric .icon,
:root[data-theme="dark"] body[data-look="friends"] .dim-icon,
:root[data-theme="dark"] body[data-look="friends"] .feature-icon,
:root[data-theme="dark"] body[data-look="friends"] .quick-icon { color: #ffd76a; border-color: rgba(255, 201, 77, .35); background: rgba(255, 201, 77, .13); }
:root[data-theme="dark"] body[data-look="family"] .feature-icon,
:root[data-theme="dark"] body[data-look="family"] .quick-icon,
:root[data-theme="dark"] body[data-look="family"] .dim-icon { color: var(--rose-dark); background: var(--rose-soft); }

/* ---------- 2. Testi con colore scritto a mano ---------- */

:root[data-theme="dark"] .kicker { color: #d8a87c; }
:root[data-theme="dark"] body[data-look] .kicker { color: var(--rose-dark); }
:root[data-theme="dark"] .app-version,
:root[data-theme="dark"] .mini-note,
:root[data-theme="dark"] .row-chevron { color: var(--muted); }
:root[data-theme="dark"] body[data-look] .row-chevron { color: var(--rose); }
:root[data-theme="dark"] .flower-score span { color: #f0c9a8; }
:root[data-theme="dark"] .mini-quote,
:root[data-theme="dark"] .trait-card blockquote,
:root[data-theme="dark"] .bubble { color: var(--ink-2); }
:root[data-theme="dark"] .signal-dot { color: var(--warn-ink); }
:root[data-theme="dark"] .read-card .read-warn,
:root[data-theme="dark"] .level-option-note.warn { color: var(--warn-ink); }
:root[data-theme="dark"] .report-change.up,
:root[data-theme="dark"] .garden-foot small.up,
:root[data-theme="dark"] .since-chip.up b,
:root[data-theme="dark"] .change-delta.up { color: var(--up); }
:root[data-theme="dark"] .garden-foot small.down,
:root[data-theme="dark"] .since-chip.down b,
:root[data-theme="dark"] .change-delta.down { color: var(--danger); }

:root[data-theme="dark"] .demo-banner { border-color: rgba(214, 168, 99, .32); background: var(--gold-soft); color: var(--warn-ink); }
:root[data-theme="dark"] .demo-banner .link-btn { color: var(--warn-ink); }
:root[data-theme="dark"] body[data-look] .demo-banner { border-color: var(--line); background: var(--card); color: var(--ink-2); }
:root[data-theme="dark"] body[data-look] .demo-banner .link-btn { color: var(--rose-dark); }

:root[data-theme="dark"] .section.issue { border-color: rgba(214, 168, 99, .32); background: linear-gradient(160deg, rgba(214, 168, 99, .12), rgba(214, 168, 99, .05)); }
:root[data-theme="dark"] .issue-shape { background: rgba(0, 0, 0, .28); }

/* ---------- 2. Icone, tinte e pallini ---------- */

:root[data-theme="dark"] .empty-icon { background: var(--sage-soft); color: var(--sage-dark); }
:root[data-theme="dark"] .dot,
:root[data-theme="dark"] .quote-mark,
:root[data-theme="dark"] .advice-num,
:root[data-theme="dark"] .feature-icon { border-color: var(--line); background: var(--rose-soft); }
:root[data-theme="dark"] .signal-dot { background: var(--gold-soft); }
:root[data-theme="dark"] .moment:nth-child(2) .dot,
:root[data-theme="dark"] .advice:nth-child(2) .advice-num { color: var(--warn-ink); background: var(--gold-soft); }
:root[data-theme="dark"] .moment:nth-child(3) .dot,
:root[data-theme="dark"] .advice:nth-child(3) .advice-num { color: var(--sage-dark); background: var(--sage-soft); }

:root[data-theme="dark"] .relation-icon { background: var(--field); }
:root[data-theme="dark"] body[data-look] .relation-icon { background: var(--rose-soft); }

:root[data-theme="dark"] .tone-rose { background: rgba(226, 154, 160, .18); }
:root[data-theme="dark"] .tone-sage { background: rgba(169, 176, 138, .18); }
:root[data-theme="dark"] .tone-gold { background: rgba(214, 168, 99, .18); }
:root[data-theme="dark"] .tone-lilac { background: rgba(214, 189, 214, .16); }
:root[data-theme="dark"] .avatar.tone-gold { color: #e8bd7d; }
:root[data-theme="dark"] .avatar.tone-lilac { color: #dcb0dc; }
:root[data-theme="dark"] body[data-look]:not([data-look="couple"]) .trait-card.tone-rose,
:root[data-theme="dark"] body[data-look]:not([data-look="couple"]) .person-avatar.tone-rose,
:root[data-theme="dark"] body[data-look]:not([data-look="couple"]) .avatar.tone-rose { background: var(--rose-soft); }

:root[data-theme="dark"] .person-avatar { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .focus-bubble:nth-child(1) { background: rgba(226, 154, 160, .2); }
:root[data-theme="dark"] .focus-bubble:nth-child(2) { background: rgba(169, 176, 138, .2); }
:root[data-theme="dark"] .focus-bubble:nth-child(3) { background: rgba(214, 189, 214, .18); }
:root[data-theme="dark"] body[data-look] .focus-bubble { background-color: var(--rose-soft); }

:root[data-theme="dark"] .b0 { color: var(--rose-dark); background: rgba(226, 154, 160, .2); }
:root[data-theme="dark"] .b1 { background: rgba(169, 176, 138, .18); }
:root[data-theme="dark"] .b2 { background: rgba(214, 168, 99, .18); }
:root[data-theme="dark"] .b3 { background: rgba(214, 189, 214, .16); }
:root[data-theme="dark"] .b4 { background: rgba(255, 255, 255, .07); }

:root[data-theme="dark"] .dots i,
:root[data-theme="dark"] .duel-legend i { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .dots i.a,
:root[data-theme="dark"] .duel-legend i.a { background: var(--rose); }
:root[data-theme="dark"] .dots i.b,
:root[data-theme="dark"] .duel-legend i.b { background: var(--second); }

:root[data-theme="dark"] .bar { background: rgba(255, 255, 255, .10); }
:root[data-theme="dark"] .timeline:before { background: linear-gradient(var(--line), rgba(169, 176, 138, .3)); }

/* Accento chiaro come sfondo sotto testo bianco: qui serve il tono pieno. */
:root[data-theme="dark"] .avatar-stack i { border-color: var(--bg); }
:root[data-theme="dark"] .avatar-stack .tone-1,
:root[data-theme="dark"] .member-list .tone-1 { background: color-mix(in srgb, var(--rose) 62%, #000); }
:root[data-theme="dark"] .change-track b { border-color: var(--bg); }

/* Grafici: il bordo bianco dei pallini diventa il colore del fondo. */
:root[data-theme="dark"] .spark-dot,
:root[data-theme="dark"] .chart-dot,
:root[data-theme="dark"] .radar-dot { stroke: var(--bg); }
:root[data-theme="dark"] .spark-area { opacity: 1; }

/* ---------- 2. Accoglienza ---------- */

:root[data-theme="dark"] .intro-hero { background: var(--bg); }
:root[data-theme="dark"] .intro-hero::before {
  background:
    linear-gradient(180deg, rgba(23, 18, 26, .72) 0%, rgba(23, 18, 26, .5) 55%, rgba(23, 18, 26, .62) 80%, var(--bg) 99%),
    url("../assets/img/bg-intro-mobile.webp") center top / 100% auto no-repeat;
}
:root[data-theme="dark"] .intro-title,
:root[data-theme="dark"] .intro-actions .btn.ghost { color: #f2a7b0; }
:root[data-theme="dark"] .intro-copy { color: var(--ink); }
:root[data-theme="dark"] .intro-app-note,
:root[data-theme="dark"] .intro-privacy,
:root[data-theme="dark"] .intro-privacy svg,
:root[data-theme="dark"] .privacy-line svg { color: var(--muted); }
:root[data-theme="dark"] .maker-badge { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .maker-word { color: #ddcbb6; }

/* ---------- 2. Fogli, avvisi, trascinamento ---------- */

:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] dialog.sheet,
:root[data-theme="dark"] body[data-look] dialog.sheet { background: var(--cream); box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .card-loading { background: linear-gradient(160deg, var(--cream-2), var(--rose-soft)); }
:root[data-theme="dark"] .toast { background: rgba(250, 242, 240, .95); color: #231b20; }
:root[data-theme="dark"] .drop-overlay { background: color-mix(in srgb, var(--bg) 88%, transparent); }
:root[data-theme="dark"] .read-chip { background: var(--cream-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .since-card,
:root[data-theme="dark"] .read-card.done { background: linear-gradient(135deg, var(--rose-soft), var(--card) 62%); }

/* ---------- 2. Storie ---------- */

:root[data-theme="dark"] dialog.stories { background: linear-gradient(160deg, #231b20, #17121a); }
:root[data-theme="dark"] dialog.stories[data-theme="rose"] { background: linear-gradient(160deg, #3a2028, #1d1216); }
:root[data-theme="dark"] dialog.stories[data-theme="sage"] { background: linear-gradient(160deg, #2a2f20, #151810); }
:root[data-theme="dark"] dialog.stories[data-theme="gold"] { background: linear-gradient(160deg, #372a17, #1a140b); }
:root[data-theme="dark"] dialog.stories[data-theme="lilac"] { background: linear-gradient(160deg, #33243a, #18111c); }
:root[data-theme="dark"] dialog.stories[data-theme="teal"] { background: linear-gradient(160deg, #123430, #0b1a18); }
:root[data-theme="dark"] dialog.stories[data-theme="terra"] { background: linear-gradient(160deg, #3a2418, #1b120c); }
:root[data-theme="dark"] dialog.stories[data-theme="slate"] { background: linear-gradient(160deg, #1d2b42, #0e1522); }
:root[data-theme="dark"] dialog.stories[data-theme="coral"] { background: linear-gradient(160deg, #3d1f26, #1c1220); }
:root[data-theme="dark"] .story-kicker { color: #f0c9a8; }
:root[data-theme="dark"] .stories-bars span { background: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .stories-bars i { background: rgba(255, 255, 255, .82); }
:root[data-theme="dark"] .stories-nav button { border-color: rgba(255, 255, 255, .14); background: var(--field); }
:root[data-theme="dark"] .story-split div,
:root[data-theme="dark"] .story-people > div { background: rgba(255, 255, 255, .07); }

/* ---------- 2. Giardino e ingresso a quattro riquadri ---------- */
/* Ogni card ha i colori del suo legame, qualunque sia lo stile della pagina. */

:root[data-theme="dark"] .garden-item[data-look="couple"],
:root[data-theme="dark"] .quad[data-look="couple"],
:root[data-theme="dark"] .quad-cta[data-look="couple"] { --c-dark: #f7aabb; --g-title: #ffe4ea; }
:root[data-theme="dark"] .garden-item[data-look="friends"],
:root[data-theme="dark"] .quad[data-look="friends"],
:root[data-theme="dark"] .quad-cta[data-look="friends"] { --c-dark: #7fe3d4; --g-title: #e0faf4; }
:root[data-theme="dark"] .garden-item[data-look="groups"],
:root[data-theme="dark"] .quad[data-look="groups"],
:root[data-theme="dark"] .quad-cta[data-look="groups"] { --c-dark: #ffab9f; --g-title: #ffe7e2; }
:root[data-theme="dark"] .garden-item[data-look="work"],
:root[data-theme="dark"] .quad[data-look="work"],
:root[data-theme="dark"] .quad-cta[data-look="work"] { --c: #5b93d6; --c-dark: #a4c6f0; --g-title: #e6eefa; }
:root[data-theme="dark"] .garden-item[data-look="family"],
:root[data-theme="dark"] .quad[data-look="family"],
:root[data-theme="dark"] .quad-cta[data-look="family"] { --c: #e08a5f; --c-dark: #f3b48f; --g-title: #fde8da; }
:root[data-theme="dark"] .garden-item[data-look="relatives"],
:root[data-theme="dark"] .quad[data-look="relatives"],
:root[data-theme="dark"] .quad-cta[data-look="relatives"] { --c: #a9b08a; --c-dark: #c9d1a8; --g-title: #f8e6c6; --g-img: url("../assets/img/photo-relatives-night.webp"); }

:root[data-theme="dark"] .garden-row,
:root[data-theme="dark"] .quad {
  border-color: color-mix(in srgb, var(--c) 32%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .garden-row { background: linear-gradient(105deg, rgba(255, 255, 255, .04) 0%, color-mix(in srgb, var(--c) 10%, transparent) 55%, color-mix(in srgb, var(--c) 20%, transparent) 100%); }
:root[data-theme="dark"] .quad { background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, color-mix(in srgb, var(--c) 12%, transparent) 45%, color-mix(in srgb, var(--c) 22%, transparent) 100%); }
:root[data-theme="dark"] .quad.suggested { border-color: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 18px 40px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .btn.primary.quad-cta { background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); }

/* ---------- 2. Desktop ---------- */

@media (min-width: 900px) {
  :root[data-theme="dark"] .brand-mark { background: var(--field); }
  :root[data-theme="dark"] .ico { background: rgba(255, 255, 255, .06); }
  :root[data-theme="dark"] .nav button.active .ico { background: transparent; }
  :root[data-theme="dark"] .intro-hero {
    background:
      linear-gradient(rgba(23, 18, 26, .58), rgba(23, 18, 26, .58)),
      url("../assets/img/bg-intro-wide.webp") 18% center / cover no-repeat,
      var(--bg);
  }
}

/* Gruppi: la pillola di stato in Home resta piena come nel chiaro (va dopo .pill.rose). */
:root[data-theme="dark"] body[data-look="groups"] .home-hero .pill { color: #fff; border-color: transparent; background: var(--rose-grad); }
:root[data-theme="dark"] body[data-look="groups"] .home-hero .pill:before { background: #fff; }