/* ==========================================================================
   Tema grafico «Salvia» (scelto il 15/10/2026): verde maturo, sobrio, chiaro e scuro.
   html[data-tema="ardesia"] · html[data-modo="chiaro"|"scuro"] (cookie ppm_modo)
   Si sovrappone a style.css: superfici piene (niente vetro né gradienti), sidebar verde scuro,
   un solo accento verde; i colori semantici di fasi e stati restano quelli della Fase 2.
   ========================================================================== */

/* ---------- Chiaro ---------- */
html[data-tema="ardesia"][data-modo="chiaro"] {
  --bg: #f8fafc; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f1f5f9;
  --border: #e2e8f0; --border-strong: #cbd5e1;
  --fg: #0f172a; --fg-2: #334155; --muted: #64748b;
  --primary: #2563eb; --primary-fg: #ffffff; --accent: #1d4ed8; --accent-bg: #eff6ff;
  --sb-bg: #0f172a; --sb-fg: #e2e8f0; --sb-muted: #94a3b8; --sb-hover: #1e293b; --sb-attivo: #1e293b; --sb-segno: #60a5fa;
  --th-bg: #f1f5f9; --th-fg: #334155; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-pop: 0 10px 28px rgba(15, 23, 42, .14);
}

/* ---------- Scuro ---------- */
html[data-tema="ardesia"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0b1220; --surface: #111a2e; --surface-solido: #111a2e; --surface-2: #0f1729;
  --border: #1e293b; --border-strong: #334155;
  --fg: #e2e8f0; --fg-2: #b6c2d4; --muted: #8a99b0;
  --primary: #3b82f6; --primary-fg: #ffffff; --accent: #60a5fa; --accent-bg: rgba(96, 165, 250, .12);
  --sb-bg: #070b14; --sb-fg: #dbe3ee; --sb-muted: #7c8aa3; --sb-hover: #111a2e; --sb-attivo: #16213a; --sb-segno: #60a5fa;
  --th-bg: #16213a; --th-fg: #b6c8e6; --campo-bg: #0d1526;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .55);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --series-1: #60a5fa; --series-2: #a78bfa; --grid: #243248;
  --zona-1: rgba(96, 165, 250, .16); --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --neutro: #6b7a92; --neutro-chiaro: #2a3750; --neutro-bg: #0f1729; --neutro-testo: #56647c;
}

/* ==========================================================================
   Temi selezionabili da ogni utente (menu «Tema» nell'intestazione, cookie ppm_tema). Predefinito: Prisma sobrio (16/10/2026).
   ========================================================================== */

/* ---------- Grafite: minimale, grigi neutri, accento viola ---------- */
html[data-tema="grafite"][data-modo="chiaro"] {
  --bg: #fafafa; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f4f4f5;
  --border: #e4e4e7; --border-strong: #d4d4d8; --fg: #18181b; --fg-2: #3f3f46; --muted: #71717a;
  --primary: #18181b; --primary-fg: #ffffff; --accent: #6d4aff; --accent-bg: #f1edff;
  --sb-bg: #f4f4f5; --sb-fg: #27272a; --sb-muted: #71717a; --sb-hover: #e4e4e7; --sb-attivo: #ffffff; --sb-segno: #6d4aff; --sb-fg-forte: #18181b;
  --th-bg: #f4f4f5; --th-fg: #3f3f46; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05); --shadow-pop: 0 10px 28px rgba(0, 0, 0, .12);
}
html[data-tema="grafite"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0d0d10; --surface: #16161a; --surface-solido: #16161a; --surface-2: #111114;
  --border: #27272a; --border-strong: #3f3f46; --fg: #f4f4f5; --fg-2: #c4c4cc; --muted: #8b8b95;
  --primary: #fafafa; --primary-fg: #18181b; --accent: #8b72ff; --accent-bg: rgba(139, 114, 255, .14);
  --sb-bg: #111114; --sb-fg: #e4e4e7; --sb-muted: #8b8b95; --sb-hover: #1c1c21; --sb-attivo: #23232a; --sb-segno: #8b72ff;
  --th-bg: #1c1c21; --th-fg: #c4c4cc; --campo-bg: #111114;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #8b72ff; --series-2: #34d399; --grid: #2a2a30; --zona-1: rgba(139, 114, 255, .16);
  --neutro: #71717a; --neutro-chiaro: #2f2f35; --neutro-bg: #121215; --neutro-testo: #5c5c66;
}

/* ---------- Salvia: verde maturo ---------- */
html[data-tema="salvia"][data-modo="chiaro"] {
  --bg: #f6f7f4; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f2f4ef;
  --border: #e3e6dd; --border-strong: #c9cec0; --fg: #17201b; --fg-2: #3b463f; --muted: #66705f;
  --primary: #15803d; --primary-fg: #ffffff; --accent: #15803d; --accent-bg: #e7f4ea;
  --sb-bg: #1f2a24; --sb-fg: #dfe8e1; --sb-muted: #93a598; --sb-hover: #2a3830; --sb-attivo: #33463a; --sb-segno: #4ade80;
  --th-bg: #eef3ea; --th-fg: #2f4a37; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(23, 32, 27, .06), 0 1px 3px rgba(23, 32, 27, .05); --shadow-pop: 0 10px 28px rgba(23, 32, 27, .14);
}
html[data-tema="salvia"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0e1311; --surface: #141b17; --surface-solido: #141b17; --surface-2: #18211c;
  --border: #23302a; --border-strong: #34443b; --fg: #e8eee9; --fg-2: #b9c5bd; --muted: #8a978e;
  --primary: #22c55e; --primary-fg: #0b130e; --accent: #4ade80; --accent-bg: rgba(74, 222, 128, .12);
  --sb-bg: #0a0f0c; --sb-fg: #d5e0d8; --sb-muted: #7d8c82; --sb-hover: #141c17; --sb-attivo: #1b261f; --sb-segno: #4ade80;
  --th-bg: #18221c; --th-fg: #a7c4af; --campo-bg: #101713;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .55);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #4ade80; --series-2: #a78bfa; --grid: #2a3830; --zona-1: rgba(74, 222, 128, .16);
  --neutro: #6f7f74; --neutro-chiaro: #2c3a32; --neutro-bg: #121915; --neutro-testo: #5c6a61;
}

/* ---------- Prisma sobrio: indaco e magenta, senza gradienti né vetro ---------- */
html[data-tema="prisma"][data-modo="chiaro"] {
  --bg: #f7f5ff; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f3f0ff;
  --border: #e9e3ff; --border-strong: #d4c9fb; --fg: #1e1638; --fg-2: #463d66; --muted: #6f6790;
  --primary: #db2777; --primary-fg: #ffffff; --accent: #7c3aed; --accent-bg: #f1ebff;
  --sb-bg: #312e81; --sb-fg: #e7e6ff; --sb-muted: #a5a3d9; --sb-hover: #3b3894; --sb-attivo: #4540a6; --sb-segno: #f472b6;
  --th-bg: #f3f0ff; --th-fg: #4c3d8f; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(49, 46, 129, .07), 0 1px 3px rgba(49, 46, 129, .05); --shadow-pop: 0 10px 28px rgba(49, 46, 129, .15);
}
html[data-tema="prisma"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0f0b1d; --surface: #17122b; --surface-solido: #17122b; --surface-2: #130f24;
  --border: #2a2346; --border-strong: #3d3463; --fg: #f1eeff; --fg-2: #c9c2ea; --muted: #958cbd;
  --primary: #db2777; --primary-fg: #ffffff; --accent: #a78bfa; --accent-bg: rgba(167, 139, 250, .14);
  --sb-bg: #1e1b4b; --sb-fg: #e7e6ff; --sb-muted: #9a97cf; --sb-hover: #27235c; --sb-attivo: #312c70; --sb-segno: #f472b6;
  --th-bg: #1e1838; --th-fg: #c9bdf5; --campo-bg: #130f24;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #a78bfa; --series-2: #f472b6; --grid: #2a2346; --zona-1: rgba(167, 139, 250, .16);
  --neutro: #7d74a3; --neutro-chiaro: #332b55; --neutro-bg: #130f24; --neutro-testo: #625a86;
}

/* ---------- Oceano: blu notte e accento turchese ---------- */
html[data-tema="oceano"][data-modo="chiaro"] {
  --bg: #f3f8fa; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #eaf3f6;
  --border: #d9e7ec; --border-strong: #b9cfd8; --fg: #0c2330; --fg-2: #2f4b59; --muted: #5e7884;
  --primary: #0e7490; --primary-fg: #ffffff; --accent: #0e7490; --accent-bg: #e0f4f8;
  --sb-bg: #0c2330; --sb-fg: #dcecf2; --sb-muted: #8aa9b6; --sb-hover: #133344; --sb-attivo: #17405a; --sb-segno: #22d3ee;
  --th-bg: #eaf3f6; --th-fg: #1f4f63; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(12, 35, 48, .07); --shadow-pop: 0 10px 28px rgba(12, 35, 48, .15);
}
html[data-tema="oceano"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #071820; --surface: #0d222c; --surface-solido: #0d222c; --surface-2: #0a1d26;
  --border: #173341; --border-strong: #24485a; --fg: #e3f1f6; --fg-2: #b3cdd8; --muted: #7f9daa;
  --primary: #06b6d4; --primary-fg: #04161d; --accent: #22d3ee; --accent-bg: rgba(34, 211, 238, .12);
  --sb-bg: #04121a; --sb-fg: #d4e7ee; --sb-muted: #789aa8; --sb-hover: #0b2230; --sb-attivo: #10303f; --sb-segno: #22d3ee;
  --th-bg: #10303f; --th-fg: #a6d4e2; --campo-bg: #081a22;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #22d3ee; --series-2: #a78bfa; --grid: #1d3d4c; --zona-1: rgba(34, 211, 238, .14);
  --neutro: #6c8a96; --neutro-chiaro: #1f3e4c; --neutro-bg: #0a1d26; --neutro-testo: #587581;
}

/* ---------- Terracotta: caldo, accento arancio bruciato ---------- */
html[data-tema="terracotta"][data-modo="chiaro"] {
  --bg: #faf6f2; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f5eee7;
  --border: #ece0d4; --border-strong: #d8c4b1; --fg: #2a1d15; --fg-2: #55413a; --muted: #85705f;
  --primary: #c2410c; --primary-fg: #ffffff; --accent: #b23a0b; --accent-bg: #fdeee5;
  --sb-bg: #3b2a21; --sb-fg: #f1e5dc; --sb-muted: #bba291; --sb-hover: #4a362b; --sb-attivo: #574034; --sb-segno: #fb923c;
  --th-bg: #f5eee7; --th-fg: #6b4330; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(59, 42, 33, .07); --shadow-pop: 0 10px 28px rgba(59, 42, 33, .15);
}
html[data-tema="terracotta"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #15100d; --surface: #1e1713; --surface-solido: #1e1713; --surface-2: #19130f;
  --border: #33271f; --border-strong: #4a3a2f; --fg: #f4ebe4; --fg-2: #d3c3b6; --muted: #a08d7e;
  --primary: #ea580c; --primary-fg: #ffffff; --accent: #fb923c; --accent-bg: rgba(251, 146, 60, .13);
  --sb-bg: #0f0b09; --sb-fg: #ecdfd5; --sb-muted: #9b8576; --sb-hover: #1c1511; --sb-attivo: #271d17; --sb-segno: #fb923c;
  --th-bg: #271d17; --th-fg: #e2c3ad; --campo-bg: #17110e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #fb923c; --series-2: #60a5fa; --grid: #3a2d24; --zona-1: rgba(251, 146, 60, .14);
  --neutro: #8a7869; --neutro-chiaro: #3a2d24; --neutro-bg: #19130f; --neutro-testo: #6f5f52;
}

/* ---------- Carta: chiaro caldo da documento, inchiostro blu, sidebar chiara ---------- */
html[data-tema="carta"][data-modo="chiaro"] {
  --bg: #f7f5ef; --surface: #fffdf8; --surface-solido: #fffdf8; --surface-2: #f2efe6;
  --border: #e6e1d4; --border-strong: #cfc8b6; --fg: #1f2433; --fg-2: #444a5c; --muted: #727787;
  --primary: #1e3a8a; --primary-fg: #ffffff; --accent: #1e40af; --accent-bg: #eaeefb;
  --sb-bg: #efebe0; --sb-fg: #2b3040; --sb-muted: #7a7d88; --sb-hover: #e5e0d2; --sb-attivo: #fffdf8; --sb-segno: #1e40af; --sb-fg-forte: #1f2433;
  --th-bg: #f2efe6; --th-fg: #3b4257; --campo-bg: #fffdf8;
  --shadow: 0 1px 2px rgba(31, 36, 51, .05); --shadow-pop: 0 10px 28px rgba(31, 36, 51, .12);
}
html[data-tema="carta"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #16171b; --surface: #1d1f25; --surface-solido: #1d1f25; --surface-2: #191a1f;
  --border: #2c2f38; --border-strong: #40444f; --fg: #ecebe6; --fg-2: #c7c6bf; --muted: #9a9993;
  --primary: #6d8cf0; --primary-fg: #0f1220; --accent: #93a9f5; --accent-bg: rgba(109, 140, 240, .14);
  --sb-bg: #121317; --sb-fg: #e2e1db; --sb-muted: #8e8d87; --sb-hover: #1b1c21; --sb-attivo: #24262e; --sb-segno: #93a9f5;
  --th-bg: #24262e; --th-fg: #c7cbe0; --campo-bg: #17181d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #93a9f5; --series-2: #fbbf24; --grid: #2f323b; --zona-1: rgba(147, 169, 245, .14);
  --neutro: #7f8089; --neutro-chiaro: #33363f; --neutro-bg: #191a1f; --neutro-testo: #66676f;
}

/* ---------- Rosso corsa: neutro con accento rosso, carattere motoristico ---------- */
html[data-tema="rosso"][data-modo="chiaro"] {
  --bg: #f6f6f7; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f1f1f3;
  --border: #e3e3e7; --border-strong: #c9c9d0; --fg: #141418; --fg-2: #3a3a44; --muted: #6b6b76;
  --primary: #c8102e; --primary-fg: #ffffff; --accent: #b80f2a; --accent-bg: #fdecee;
  --sb-bg: #141418; --sb-fg: #ececf0; --sb-muted: #9a9aa5; --sb-hover: #222228; --sb-attivo: #2a2a31; --sb-segno: #ef4444;
  --th-bg: #f1f1f3; --th-fg: #3a3a44; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(20, 20, 24, .07); --shadow-pop: 0 10px 28px rgba(20, 20, 24, .16);
}
html[data-tema="rosso"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0c0c0e; --surface: #151518; --surface-solido: #151518; --surface-2: #111113;
  --border: #26262c; --border-strong: #3a3a42; --fg: #f2f2f4; --fg-2: #c8c8cf; --muted: #8d8d98;
  --primary: #e11d48; --primary-fg: #ffffff; --accent: #f87171; --accent-bg: rgba(248, 113, 113, .13);
  --sb-bg: #08080a; --sb-fg: #e6e6ea; --sb-muted: #84848f; --sb-hover: #141417; --sb-attivo: #1e1e23; --sb-segno: #ef4444;
  --th-bg: #1e1e23; --th-fg: #d8d8de; --campo-bg: #101012;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .65);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --series-1: #f87171; --series-2: #60a5fa; --grid: #2a2a30; --zona-1: rgba(248, 113, 113, .14);
  --neutro: #7a7a85; --neutro-chiaro: #2c2c33; --neutro-bg: #111113; --neutro-testo: #62626c;
}

/* ---------- Componenti ---------- */
html[data-tema] body { background: var(--bg); }
html[data-tema] .sidebar { background: var(--sb-bg); color: var(--sb-fg); border-right: 0; }
html[data-tema] .sidebar .brand, html[data-tema] .sidebar .nav-item { color: var(--sb-fg); }
html[data-tema] .sidebar .nav-title, html[data-tema] .sidebar-foot, html[data-tema] .brand small { color: var(--sb-muted); }
html[data-tema] .sidebar .nav-item:hover { background: var(--sb-hover); color: var(--sb-fg-forte, #fff); }
html[data-tema] .sidebar .nav-item.active { background: var(--sb-attivo); color: var(--sb-fg-forte, #fff); border: 0; box-shadow: inset 3px 0 0 var(--sb-segno); }
html[data-tema] .brand-mark, html[data-tema] .logo-pm { background: var(--primary); color: var(--primary-fg); }
html[data-tema] .topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); border-image: none; }
html[data-tema] .card, html[data-tema] .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
html[data-tema] .kpi { border-top: 3px solid var(--k, var(--c-green)); }
html[data-tema] .kpi .kpi-value { color: var(--fg); }
html[data-tema] h1 { color: var(--fg); }
html[data-tema] a { color: var(--accent); }
html[data-tema] button, html[data-tema] .button { background: var(--primary); color: var(--primary-fg); border: 0; box-shadow: none; }
html[data-tema] .secondary, html[data-tema] .button.secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); }
html[data-tema] .button:not(.secondary) { color: var(--primary-fg); }
html[data-tema] button.link { background: none; padding: 0; border: 0; color: var(--accent); text-decoration: underline; }
html[data-tema] th { background: var(--th-bg); color: var(--th-fg); }
html[data-tema] input, html[data-tema] select, html[data-tema] textarea { background: var(--campo-bg); color: var(--fg); border-color: var(--border-strong); }
html[data-tema] .notice { background: var(--surface); border-radius: 12px; }
html[data-tema] .sotto-nav { border-bottom-color: var(--border); }
html[data-tema] .sotto-nav a:hover { background: var(--accent-bg); }
html[data-tema] .sotto-nav a.attiva { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-bg); }
html[data-tema] .step.current .step-num { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
html[data-tema] .av-barra i { background: var(--primary); }
html[data-tema] .df-scroll { background: var(--surface-2); }
html[data-tema] .df-etichetta rect { fill: var(--surface); }
html[data-tema] body.pagina-accesso { background: var(--bg); }
html[data-tema] .accesso { background: var(--surface); }

/* ---------- Intestazione compatta e interruttore chiaro / scuro ---------- */
.topbar { flex-wrap: wrap; row-gap: .5rem; padding: .7rem 1.5rem; }
.topbar .breadcrumb { flex: 1 1 220px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-progetti select { width: 230px; }
.utente-header { white-space: nowrap; }
.utente-header span { line-height: 1.2; }
.page-actions { flex-wrap: wrap; }
.selettore-tema { display: flex; align-items: center; gap: .3rem; }
.selettore-tema button { padding: .3rem .55rem; min-width: 2rem; justify-content: center; font-size: .8rem; border-radius: 999px; }
.selettore-tema button[aria-pressed="false"] { background: transparent; color: var(--fg-2); border: 1px solid var(--border-strong); }
.scelta-tema select { width: auto; padding: .3rem .5rem; font-size: .8rem; border-radius: 999px; }

/* ==========================================================================
   «Bento» (16/10/2026): stile strutturale ispirato a Dribbble (project management dashboard):
   app dentro una cornice arrotondata su fondo grigio, sidebar chiara a pillole, card bianche molto
   arrotondate senza bordi, KPI con numeri grandi, pulsanti neri a pillola, accento lime, saluto in testa.
   ========================================================================== */
html[data-tema="bento"][data-modo="chiaro"] {
  --bg: #f4f5f7; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f4f5f7;
  --border: #ebedf0; --border-strong: #d9dce1; --fg: #111316; --fg-2: #3d424a; --muted: #7a808a;
  --primary: #111316; --primary-fg: #ffffff; --accent: #111316; --accent-bg: #eef9cf; --lime: #c8f04a; --lime-fg: #1d2606;
  --sb-bg: #ffffff; --sb-fg: #3d424a; --sb-muted: #9aa0a9; --sb-hover: #f2f3f5; --sb-attivo: #111316; --sb-segno: transparent; --sb-fg-forte: #ffffff;
  --th-bg: transparent; --th-fg: #7a808a; --campo-bg: #f4f5f7; --sfondo-cornice: #e6e8eb;
  --shadow: 0 1px 2px rgba(17, 19, 22, .04); --shadow-pop: 0 18px 40px rgba(17, 19, 22, .12);
}
html[data-tema="bento"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #121316; --surface: #1b1d21; --surface-solido: #1b1d21; --surface-2: #16181b;
  --border: #26292e; --border-strong: #353940; --fg: #f3f4f6; --fg-2: #c3c7cf; --muted: #8b919b;
  --primary: #f3f4f6; --primary-fg: #111316; --accent: #d4f56a; --accent-bg: rgba(200, 240, 74, .12); --lime: #c8f04a; --lime-fg: #1d2606;
  --sb-bg: #16181b; --sb-fg: #c3c7cf; --sb-muted: #6f7580; --sb-hover: #1f2226; --sb-attivo: #f3f4f6; --sb-segno: transparent; --sb-fg-forte: #111316;
  --th-bg: transparent; --th-fg: #8b919b; --campo-bg: #16181b; --sfondo-cornice: #0a0b0c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-pop: 0 18px 40px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --series-1: #c8f04a; --series-2: #a78bfa; --grid: #2a2d33; --zona-1: rgba(200, 240, 74, .14); --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --neutro: #6f7580; --neutro-chiaro: #2c2f35; --neutro-bg: #16181b; --neutro-testo: #5b616b;
}
/* cornice: l'app come finestra arrotondata su fondo grigio */
html[data-tema="bento"] body { background: var(--sfondo-cornice); padding: 14px; }
html[data-tema="bento"] .app { background: var(--bg); border-radius: 28px; overflow: hidden; min-height: calc(100vh - 28px); box-shadow: var(--shadow-pop); }
html[data-tema="bento"] .sidebar { height: calc(100vh - 28px); top: 14px; padding: 18px 14px; border-right: 1px solid var(--border); }
html[data-tema="bento"] .sidebar .nav-title { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 600; }
html[data-tema="bento"] .sidebar .nav-item { border-radius: 999px; padding: .5rem .8rem; font-weight: 500; }
html[data-tema="bento"] .sidebar .nav-item.active { box-shadow: none; }
html[data-tema="bento"] .brand-mark { border-radius: 10px; background: var(--lime); color: var(--lime-fg); }
html[data-tema="bento"] .topbar { background: transparent; border: 0; padding: 1rem 1.6rem .4rem; position: static; }
html[data-tema="bento"] main { padding-top: .6rem; }
html[data-tema="bento"] .saluto { display: block; }
/* card e KPI */
html[data-tema="bento"] .card { border: 0; border-radius: 24px; box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
html[data-tema="bento"] .kpi { border: 0; border-radius: 22px; box-shadow: var(--shadow); padding: 1.1rem 1.2rem; position: relative; }
html[data-tema="bento"] .kpi::before { content: ""; position: absolute; top: 1.15rem; right: 1.2rem; width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--lime)); }
html[data-tema="bento"] .kpi .kpi-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
html[data-tema="bento"] .kpi .kpi-value.small { font-size: 1.2rem; }
html[data-tema="bento"] .kpi .kpi-label { font-weight: 500; }
html[data-tema="bento"] h1 { font-size: 1.9rem; letter-spacing: -.02em; }
html[data-tema="bento"] .card-head h2, html[data-tema="bento"] .card h2 { font-size: 1.05rem; }
html[data-tema="bento"] .card-head h2::before, html[data-tema="bento"] .card > h2::before { display: none; }
/* pulsanti e campi a pillola */
html[data-tema="bento"] button, html[data-tema="bento"] .button { border-radius: 999px; padding: .5rem 1rem; font-weight: 600; }
html[data-tema="bento"] .button.secondary, html[data-tema="bento"] .secondary { background: var(--surface); border: 1px solid var(--border-strong); }
html[data-tema="bento"] input, html[data-tema="bento"] select, html[data-tema="bento"] textarea { border-radius: 12px; border: 1px solid var(--border); }
html[data-tema="bento"] .menu-progetti select, html[data-tema="bento"] .scelta-tema select { border-radius: 999px; background: var(--surface); }
/* tabelle leggere */
html[data-tema="bento"] .table-wrap { border: 0; }
html[data-tema="bento"] th { font-size: .72rem; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--border); }
html[data-tema="bento"] tbody tr:hover td { background: var(--surface-2); }
html[data-tema="bento"] .badge { border-radius: 999px; }
html[data-tema="bento"] .badge.ok { background: var(--lime); color: var(--lime-fg); }
html[data-tema="bento"] .sotto-nav { border: 0; gap: .4rem; }
html[data-tema="bento"] .sotto-nav a { border-radius: 999px; border: 1px solid var(--border-strong); margin: 0; }
html[data-tema="bento"] .sotto-nav a.attiva { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
html[data-tema="bento"] .notice { border-radius: 16px; border: 0; }
html[data-tema="bento"] .av-barra i, html[data-tema="bento"] .step.current .step-num { background: var(--lime); color: var(--lime-fg); }
.saluto { display: none; font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.saluto small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
/* Bento: intestazione su una riga (saluto al posto del percorso, azioni compatte) */
html[data-tema="bento"] .topbar { flex-wrap: nowrap; gap: .7rem; }
html[data-tema="bento"] .topbar .breadcrumb { display: none; }
html[data-tema="bento"] .saluto { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-tema="bento"] .menu-progetti > span { display: none; }
html[data-tema="bento"] .menu-progetti select { width: 200px; }
html[data-tema="bento"] .page-actions { flex-wrap: nowrap; }
html[data-tema="bento"] .page-actions .button, html[data-tema="bento"] .page-actions button { white-space: nowrap; }
html[data-tema="bento"] .utente-header span { display: none; }
html[data-tema="bento"] .kpi .kpi-label { padding-right: 1.1rem; }

/* ==========================================================================
   «Studio» (16/10/2026): ispirato a «Studio – Agency Project Management Dashboard» (Korsa, Dribbble).
   Bianco e grigi neutri, testo nero, nessun accento colorato: il colore resta ai semafori
   (scostamenti rossi/verdi). Sidebar chiara con voce attiva in rilievo, KPI con numeri grandi,
   tabelle fitte senza maiuscoletto, sotto-navigazione a interruttore segmentato.
   ========================================================================== */
html[data-tema="studio"][data-modo="chiaro"] {
  --bg: #fafafa; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f5f5f5;
  --border: #ebebeb; --border-strong: #d6d6d6; --fg: #0a0a0a; --fg-2: #404040; --muted: #737373;
  --primary: #0a0a0a; --primary-fg: #ffffff; --accent: #171717; --accent-bg: #f0f0f0;
  --sb-bg: #fafafa; --sb-fg: #404040; --sb-muted: #a3a3a3; --sb-hover: #f0f0f0; --sb-attivo: #ffffff; --sb-segno: transparent; --sb-fg-forte: #0a0a0a;
  --th-bg: transparent; --th-fg: #737373; --campo-bg: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04); --shadow-pop: 0 12px 32px rgba(0, 0, 0, .12);
}
html[data-tema="studio"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0a0a0a; --surface: #141414; --surface-solido: #141414; --surface-2: #1a1a1a;
  --border: #262626; --border-strong: #3a3a3a; --fg: #fafafa; --fg-2: #d4d4d4; --muted: #8a8a8a;
  --primary: #fafafa; --primary-fg: #0a0a0a; --accent: #e5e5e5; --accent-bg: rgba(255, 255, 255, .08);
  --sb-bg: #0a0a0a; --sb-fg: #c4c4c4; --sb-muted: #6b6b6b; --sb-hover: #171717; --sb-attivo: #1c1c1c; --sb-segno: transparent; --sb-fg-forte: #ffffff;
  --th-bg: transparent; --th-fg: #8a8a8a; --campo-bg: #111111;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-pop: 0 12px 32px rgba(0, 0, 0, .65);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --series-1: #e5e5e5; --series-2: #737373; --grid: #262626; --zona-1: rgba(255, 255, 255, .10); --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --neutro: #737373; --neutro-chiaro: #2a2a2a; --neutro-bg: #121212; --neutro-testo: #5f5f5f;
}
html[data-tema="studio"][data-modo="chiaro"] { --series-1: #171717; --series-2: #a3a3a3; --zona-1: rgba(0, 0, 0, .08); }
html[data-tema="studio"] .sidebar { border-right: 1px solid var(--border); }
html[data-tema="studio"] .sidebar .nav-title { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 500; }
html[data-tema="studio"] .sidebar .nav-item { border-radius: 8px; font-weight: 500; }
html[data-tema="studio"] .sidebar .nav-item.active { box-shadow: var(--shadow), 0 0 0 1px var(--border); font-weight: 600; }
html[data-tema="studio"] .topbar { background: var(--bg); }
html[data-tema="studio"] .card, html[data-tema="studio"] .kpi { border-radius: 12px; box-shadow: none; }
html[data-tema="studio"] .kpi { border-top: 1px solid var(--border); padding: 1rem 1.15rem; }
html[data-tema="studio"] .kpi .kpi-label { font-weight: 500; }
html[data-tema="studio"] .kpi .kpi-value { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; }
html[data-tema="studio"] .kpi .kpi-value.small { font-size: 1.2rem; letter-spacing: -.01em; }
html[data-tema="studio"] h1 { letter-spacing: -.025em; }
html[data-tema="studio"] .card-head h2::before, html[data-tema="studio"] .card > h2::before { display: none; }
html[data-tema="studio"] a { text-decoration-color: var(--border-strong); }
html[data-tema="studio"] button, html[data-tema="studio"] .button { border-radius: 8px; font-weight: 600; }
html[data-tema="studio"] input, html[data-tema="studio"] select, html[data-tema="studio"] textarea { border-radius: 8px; }
html[data-tema="studio"] .table-wrap { border: 0; }
html[data-tema="studio"] th { font-size: .74rem; text-transform: none; letter-spacing: 0; font-weight: 500; border-bottom: 1px solid var(--border); }
html[data-tema="studio"] tbody tr:hover td { background: var(--surface-2); }
html[data-tema="studio"] .badge { border-radius: 6px; }
html[data-tema="studio"] .sotto-nav { display: inline-flex; border: 0; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
html[data-tema="studio"] .sotto-nav a { border: 0; margin: 0; border-radius: 8px; color: var(--muted); }
html[data-tema="studio"] .sotto-nav a:hover { background: transparent; color: var(--fg); }
html[data-tema="studio"] .sotto-nav a.attiva { background: var(--surface); color: var(--fg); box-shadow: var(--shadow), 0 0 0 1px var(--border); }

/* ==========================================================================
   «Stratify» (16/10/2026): ispirato a «Stratify – AI Project Management Dashboard» (Phenomenon Studio, Dribbble).
   Azzurro tenue: l'app è una finestra bianca arrotondata su fondo celeste sfumato, sidebar chiara con
   voce attiva in azzurro, saluto in testa, chat AI con campo di scrittura ampio e suggerimenti a pillola.
   ========================================================================== */
html[data-tema="stratify"][data-modo="chiaro"] {
  --bg: #ffffff; --surface: #ffffff; --surface-solido: #ffffff; --surface-2: #f5f8fd;
  --border: #e6ecf5; --border-strong: #d0daea; --fg: #111827; --fg-2: #374151; --muted: #6b7280;
  --primary: #3b6cf6; --primary-fg: #ffffff; --accent: #2f5ee8; --accent-bg: #eaf0ff;
  --sb-bg: #ffffff; --sb-fg: #374151; --sb-muted: #9aa3b2; --sb-hover: #f2f6fd; --sb-attivo: #eaf0ff; --sb-segno: transparent; --sb-fg-forte: #1d4ed8;
  --th-bg: #f5f8fd; --th-fg: #4b5563; --campo-bg: #ffffff;
  --cornice: linear-gradient(160deg, #dbe7f8 0%, #eef3fb 45%, #e3ecfa 100%);
  --shadow: 0 1px 3px rgba(30, 64, 140, .06); --shadow-pop: 0 20px 50px rgba(30, 64, 140, .14);
  --series-1: #3b6cf6; --series-2: #93b4ff; --zona-1: rgba(59, 108, 246, .12);
}
html[data-tema="stratify"][data-modo="scuro"] {
  color-scheme: dark;
  --bg: #0f1726; --surface: #131c2e; --surface-solido: #131c2e; --surface-2: #0f1828;
  --border: #213049; --border-strong: #31435f; --fg: #e8edf6; --fg-2: #bcc7d9; --muted: #8796ad;
  --primary: #5b8cff; --primary-fg: #ffffff; --accent: #8aaeff; --accent-bg: rgba(91, 140, 255, .15);
  --sb-bg: #0f1726; --sb-fg: #c9d3e3; --sb-muted: #6f7f98; --sb-hover: #172238; --sb-attivo: rgba(91, 140, 255, .18); --sb-segno: transparent; --sb-fg-forte: #b9ceff;
  --th-bg: #16213a; --th-fg: #b6c6e3; --campo-bg: #0d1524;
  --cornice: linear-gradient(160deg, #0a1222 0%, #070c17 60%, #0b1430 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .45); --shadow-pop: 0 20px 50px rgba(0, 0, 0, .6);
  --c-green: #22c55e; --t-green: rgba(34, 197, 94, .14);  --x-green: #86efac;
  --c-violet: #a78bfa; --t-violet: rgba(167, 139, 250, .15); --x-violet: #c4b5fd;
  --c-blue: #60a5fa;  --t-blue: rgba(96, 165, 250, .15);   --x-blue: #93c5fd;
  --c-amber: #fbbf24; --t-amber: rgba(251, 191, 36, .15);  --x-amber: #fcd34d;
  --c-pink: #f472b6;  --t-pink: rgba(244, 114, 182, .15);  --x-pink: #f9a8d4;
  --c-teal: #2dd4bf;  --t-teal: rgba(45, 212, 191, .15);   --x-teal: #5eead4;
  --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13);
  --ko: #f87171; --ko-bg: rgba(248, 113, 113, .13);
  --series-1: #5b8cff; --series-2: #a78bfa; --grid: #22314b; --zona-1: rgba(91, 140, 255, .16); --zona-2: rgba(255, 255, 255, .05); --zona-3: rgba(255, 255, 255, .02);
  --neutro: #6f7f98; --neutro-chiaro: #26344d; --neutro-bg: #101a2b; --neutro-testo: #5b6a82;
}
/* finestra arrotondata su fondo celeste */
html[data-tema="stratify"] body { background: var(--cornice) fixed; padding: 16px; }
html[data-tema="stratify"] .app { background: var(--bg); border-radius: 20px; overflow: hidden; min-height: calc(100vh - 32px); box-shadow: var(--shadow-pop); }
html[data-tema="stratify"] .sidebar { height: calc(100vh - 32px); top: 16px; border-right: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
html[data-tema="stratify"] .sidebar .nav-title { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 500; }
html[data-tema="stratify"] .sidebar .nav-item { border-radius: 10px; font-weight: 500; }
html[data-tema="stratify"] .sidebar .nav-item.active { box-shadow: none; font-weight: 600; }
html[data-tema="stratify"] .brand-mark { border-radius: 10px; }
html[data-tema="stratify"] .topbar { position: static; background: transparent; border: 0; padding: 1rem 1.6rem .3rem; flex-wrap: wrap; gap: .7rem; }
html[data-tema="stratify"] .topbar .breadcrumb { display: none; }
html[data-tema="stratify"] .saluto { display: block; flex: 1 1 auto; min-width: 165px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.15rem; letter-spacing: -.01em; }
html[data-tema="stratify"] .page-actions { flex-wrap: nowrap; }
html[data-tema="stratify"] .page-actions .button, html[data-tema="stratify"] .page-actions button { white-space: nowrap; }
html[data-tema="stratify"] .menu-progetti > span, html[data-tema="stratify"] .utente-header span { display: none; }
html[data-tema="stratify"] .menu-progetti select { width: 170px; }
html[data-tema="stratify"] .card, html[data-tema="stratify"] .kpi { border-radius: 16px; }
html[data-tema="stratify"] .kpi { border-top: 1px solid var(--border); }
html[data-tema="stratify"] .kpi .kpi-value { font-size: 1.75rem; letter-spacing: -.02em; }
html[data-tema="stratify"] .kpi .kpi-value.small { font-size: 1.15rem; }
html[data-tema="stratify"] h1 { letter-spacing: -.02em; }
html[data-tema="stratify"] button, html[data-tema="stratify"] .button { border-radius: 10px; font-weight: 600; }
html[data-tema="stratify"] input, html[data-tema="stratify"] select, html[data-tema="stratify"] textarea { border-radius: 10px; }
html[data-tema="stratify"] .menu-progetti select, html[data-tema="stratify"] .scelta-tema select { border-radius: 999px; }
html[data-tema="stratify"] th { text-transform: none; letter-spacing: 0; font-size: .74rem; }
html[data-tema="stratify"] .badge { border-radius: 999px; }
html[data-tema="stratify"] .sotto-nav { border: 0; gap: .35rem; }
html[data-tema="stratify"] .sotto-nav a { border: 0; margin: 0; border-radius: 999px; }
html[data-tema="stratify"] .sotto-nav a.attiva { background: var(--accent-bg); color: var(--accent); }
html[data-tema="stratify"] .notice { border-radius: 14px; }
/* chat AI: campo ampio con ombra, suggerimenti a pillola, bolle morbide */
html[data-tema="stratify"] .chat-form textarea { border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 4px 18px rgba(30, 64, 140, .08); border-color: var(--border); }
html[data-tema="stratify"] .chat-form textarea:focus { border-color: var(--primary); }
html[data-tema="stratify"] .chat-esempi .chip { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); padding-left: .85rem; padding-right: .85rem; }
html[data-tema="stratify"] .chat-msg { border-radius: 14px; }
html[data-tema="stratify"] .chat-msg.domanda { border-bottom-right-radius: 4px; }
html[data-tema="stratify"] .chat-msg.risposta { border-bottom-left-radius: 4px; background: var(--surface-2); }