/* =====================================================================
   Strike UI 2030
   Sistema d'interfaccia per le applicazioni dei clienti.
   Si applica quando <html data-theme="strike2030">.

   NON dipende dal CSS di Bootstrap: il layout 2030 non lo carica.
   Il solo JS di Bootstrap resta disponibile (dropdown, modal).

   Le regole di questo sistema stanno in STRIKE-UI-2030.md, nella radice
   del pacchetto. Leggilo prima di aggiungere o modificare componenti.
   L'identita del marchio (logo, carattere, voce) sta in STRIKE-BRAND.md.
   ===================================================================== */

/* ==========================================================
   00 · CARATTERE
   Montserrat, l'unica famiglia del marchio, in quattro pesi:
   300 titoli e numeri, 400 testo, 500 etichette, 600 totali.
   I file stanno nel pacchetto, non su Google Fonts: il tema non
   dipende da una rete esterna, e l'anteprima offline resta uguale.
   Due sottoinsiemi per peso, come li divide Google Fonts: il
   latino di base e quello esteso, che il browser scarica solo
   se nella pagina compare un carattere che ne ha bisogno.
   Licenza: SIL Open Font License, in fonts/montserrat/OFL.txt.
   ========================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================
   01 · TOKEN
   Cinque neutri, tre stati. Nient'altro.
   Il colore comunica un esito, non decora.
   ========================================================== */

[data-theme="strike2030"] {
  /* — I cinque neutri — */
  --s-black: #111111;        /* testo, azione principale */
  --s-charcoal: #1F1F1F;     /* superfici del tema scuro */
  --s-graphite: #3A3A3A;     /* testo secondario */
  --s-stone: #BFC1C2;        /* bordi, stati inattivi */
  --s-white: #F7F7F5;        /* sfondo applicazione */

  /* — Stati di sistema: solo per comunicare un esito — */
  --s-success: #2F6B4F;
  --s-warning: #8A6A1F;
  --s-danger: #A23B2C;

  /* — Ruoli, tema chiaro — */
  --s-bg: #F7F7F5;
  --s-surface: #FFFFFF;
  --s-soft: rgba(17, 17, 17, 0.05);       /* fondo di controlli raggruppati */
  --s-sel: rgba(17, 17, 17, 0.07);        /* voce scelta, riga selezionata */
  --s-fg: #111111;                         /* testo primario */
  --s-fg2: #3A3A3A;                        /* testo secondario */
  --s-muted: #5E6061;                      /* didascalie */
  --s-line: rgba(17, 17, 17, 0.08);        /* bordo di card e separatori */
  --s-line-strong: rgba(17, 17, 17, 0.16); /* bordo di controlli */
  --s-hover: rgba(17, 17, 17, 0.04);       /* riga al passaggio del mouse */
  --s-press: rgba(17, 17, 17, 0.07);       /* superficie premuta */
  --s-primary: #111111;
  --s-on-primary: #F7F7F5;

  /* — Interruttore: la traccia spenta e il pomello — */
  --s-switch-off: var(--s-stone);
  --s-switch-knob: var(--s-surface);
  --s-switch-knob-on: var(--s-surface);

  /* — Vetro: solo per cio che fluttua — */
  --s-glass: rgba(255, 255, 255, 0.30);
  /* Vetro piu corposo, per cio che copre il contenuto mentre scorre:
     la barra laterale e la navigazione inferiore. */
  --s-glass-solid: rgba(255, 255, 255, 0.30);
  --s-glass-line: rgba(17, 17, 17, 0.08);
  /* Sul chiaro il vetro sfoca poco e scurisce appena. Con blur(14px) e
     brightness(.92) la pagina bianca diventava un velo grigio uniforme: il
     menu sembrava pieno, e cio che passava sotto una macchia. Questi valori
     sono tarati a schermo: sfocatura contenuta, brightness vicino a 1, e il
     menu senza saturazione. Nel tema scuro invece il vetro schiarisce. */
  --s-blur: blur(7px) saturate(1.4) brightness(0.95);
  --s-blur-pop: blur(7px) saturate(1) brightness(0.94);   /* menu e pannelli sovrapposti */
  --s-shadow: 0 16px 48px rgba(17, 17, 17, 0.10), 0 1px 2px rgba(17, 17, 17, 0.04);
  --s-shadow-pop: 0 16px 48px rgba(17, 17, 17, 0.12), 0 1px 2px rgba(17, 17, 17, 0.04);

  /* — Stati su fondo: tinte tenui, mai sature — */
  --s-success-bg: rgba(47, 107, 79, 0.10);
  --s-success-line: rgba(47, 107, 79, 0.24);
  --s-warning-bg: rgba(138, 106, 31, 0.10);
  --s-warning-line: rgba(138, 106, 31, 0.24);
  --s-danger-bg: rgba(162, 59, 44, 0.09);
  --s-danger-line: rgba(162, 59, 44, 0.22);

  /* — Raggi: una scala, quattro gradini — */
  --s-r-control: 10px;
  --s-r-card: 16px;
  --s-r-panel: 20px;
  --s-r-pill: 999px;

  /* — Movimento: parte deciso, arriva morbido — */
  --s-ease: cubic-bezier(.2, 0, 0, 1);
  --s-fast: .12s;      /* pressione, hover */
  --s-normal: .2s;     /* menu, cambio stato */
  --s-wide: .32s;      /* pannelli, sheet */

  /* — Tipografia — */
  --s-font: 'Montserrat', Arial, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* — Layout — */
  --s-nav-w: 240px;      /* larghezza della barra laterale */
  --s-gap: 16px;         /* distacco della barra dai bordi */
  --s-topbar-h: 64px;

  /* ---- Ponte verso i nomi del tema classico ----------------------
     I template scritti per il tema precedente continuano a prendere
     colori sensati senza essere riscritti. */
  --sidebar-width: var(--s-nav-w);
  --sidebar-bg: var(--s-glass);
  --sidebar-color: var(--s-fg);
  --sidebar-hover: var(--s-hover);
  --sidebar-active: var(--s-sel);
  --sidebar-border: var(--s-line);
  --content-bg: var(--s-bg);
  --card-bg: var(--s-surface);
  --card-radius: var(--s-r-card);
  --card-shadow: none;
  --card-shadow-hover: none;
  --border-color: var(--s-line);
  --border-input: var(--s-line-strong);
  --text-primary: var(--s-fg);
  --text-secondary: var(--s-fg2);
  --text-muted: var(--s-muted);
  --accent: var(--s-black);
  --accent-hover: var(--s-graphite);
  --accent-light: var(--s-soft);
  --highlight: var(--s-graphite);
  --highlight-light: var(--s-soft);
  --success: var(--s-success);
  --success-light: var(--s-success-bg);
  --warning: var(--s-warning);
  --warning-light: var(--s-warning-bg);
  --danger: var(--s-danger);
  --danger-light: var(--s-danger-bg);
  --info: var(--s-graphite);
  --info-light: var(--s-soft);
  --transition: var(--s-normal) var(--s-ease);
  --font-family: var(--s-font);

  /* ---- Ponte verso i nomi di Eurocomponents ----------------------
     I template portano ancora centinaia di var(--ec-*) negli stili
     inline. Senza questi alias quelle regole cadono sul valore
     predefinito del browser, e la pagina si riempie di bordi neri e
     testi fuori scala. Qui prendono i colori del tema: i template non
     si toccano, e quando saranno riscritti questi alias si tolgono. */
  --ec-bg: var(--s-bg);
  --ec-side: var(--s-primary);
  --ec-side-fg: var(--s-on-primary);
  --ec-text: var(--s-fg);
  --ec-text2: var(--s-fg2);
  --ec-muted: var(--s-muted);
  --ec-muted2: var(--s-muted);
  --ec-muted3: var(--s-stone);
  --ec-accent: var(--s-fg);
  --ec-accent-h: var(--s-fg2);
  --ec-accent-l: var(--s-soft);
  --ec-accent-bd: var(--s-line-strong);
  --ec-teal: var(--s-fg2);
  --ec-border: var(--s-line);
  --ec-border-in: var(--s-line-strong);
  --ec-border-l: var(--s-line);
  --ec-border-h: var(--s-line);
  --ec-head-bg: transparent;
  --ec-hover: var(--s-hover);
  --ec-hover2: var(--s-hover);
  --ec-neutral-bg: var(--s-soft);
  --ec-ok: var(--s-success);
  --ec-ok-fg: var(--s-success);
  --ec-ok-bg: var(--s-success-bg);
  --ec-warn-fg: var(--s-warning);
  --ec-warn-bg: var(--s-warning-bg);
  --ec-warn-bd: var(--s-warning-line);
  --ec-warn-card: var(--s-warning-bg);
  --ec-danger: var(--s-danger);
  --ec-danger-bg: var(--s-danger-bg);
  --ec-danger-bd: var(--s-danger-line);
  --ec-sans: var(--s-font);
  --ec-mono: var(--s-mono);
  --ec-shadow: none;
  --ec-shadow-pop: var(--s-shadow-pop);
  --ec-radius: var(--s-r-control);
}

/* ==========================================================
   Tema scuro
   Segue le preferenze di sistema da se; si forza con
   data-scheme="dark", si blocca con data-scheme="light".
   ========================================================== */

[data-theme="strike2030"][data-scheme="dark"] {
  --s-bg: #111111;
  --s-surface: #1F1F1F;
  --s-soft: rgba(247, 247, 245, 0.06);
  --s-sel: rgba(247, 247, 245, 0.10);
  --s-fg: #F7F7F5;
  --s-fg2: #BFC1C2;
  --s-muted: #8E9091;
  --s-line: rgba(247, 247, 245, 0.08);
  --s-line-strong: rgba(247, 247, 245, 0.18);
  --s-hover: rgba(247, 247, 245, 0.05);
  --s-press: rgba(247, 247, 245, 0.10);
  --s-primary: #F7F7F5;
  --s-on-primary: #111111;
  --s-switch-off: var(--s-graphite);
  --s-switch-knob: var(--s-white);
  --s-switch-knob-on: var(--s-black);

  --s-glass: rgba(31, 31, 31, 0.30);
  --s-glass-solid: rgba(31, 31, 31, 0.30);
  --s-glass-line: rgba(247, 247, 245, 0.10);
  --s-blur: blur(12px) saturate(1.4) brightness(1.5);
  --s-blur-pop: blur(14px) saturate(1.4) brightness(1.7);
  --s-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --s-shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.45);

  --s-success: #6FB48E;
  --s-warning: #D6AC55;
  --s-danger: #E08576;
  --s-success-bg: rgba(111, 180, 142, 0.14);
  --s-success-line: rgba(111, 180, 142, 0.28);
  --s-warning-bg: rgba(214, 172, 85, 0.14);
  --s-warning-line: rgba(214, 172, 85, 0.28);
  --s-danger-bg: rgba(217, 122, 104, 0.14);
  --s-danger-line: rgba(217, 122, 104, 0.28);
}

@media (prefers-color-scheme: dark) {
  [data-theme="strike2030"]:not([data-scheme="light"]) {
    --s-bg: #111111;
    --s-surface: #1F1F1F;
    --s-soft: rgba(247, 247, 245, 0.06);
    --s-sel: rgba(247, 247, 245, 0.10);
    --s-fg: #F7F7F5;
    --s-fg2: #BFC1C2;
    --s-muted: #8E9091;
    --s-line: rgba(247, 247, 245, 0.08);
    --s-line-strong: rgba(247, 247, 245, 0.18);
    --s-hover: rgba(247, 247, 245, 0.05);
    --s-press: rgba(247, 247, 245, 0.10);
    --s-primary: #F7F7F5;
    --s-on-primary: #111111;
    --s-switch-off: var(--s-graphite);
    --s-switch-knob: var(--s-white);
    --s-switch-knob-on: var(--s-black);

    --s-glass: rgba(31, 31, 31, 0.30);
    --s-glass-solid: rgba(31, 31, 31, 0.30);
    --s-glass-line: rgba(247, 247, 245, 0.10);
    --s-blur: blur(12px) saturate(1.4) brightness(1.5);
    --s-blur-pop: blur(14px) saturate(1.4) brightness(1.7);
    --s-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    --s-shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.45);

    --s-success: #6FB48E;
    --s-warning: #D6AC55;
    --s-danger: #E08576;
    --s-success-bg: rgba(111, 180, 142, 0.14);
    --s-success-line: rgba(111, 180, 142, 0.28);
    --s-warning-bg: rgba(214, 172, 85, 0.14);
    --s-warning-line: rgba(214, 172, 85, 0.28);
    --s-danger-bg: rgba(217, 122, 104, 0.14);
    --s-danger-line: rgba(217, 122, 104, 0.28);
  }
}

/* ==========================================================
   02 · FONDAMENTA
   ========================================================== */

[data-theme="strike2030"] *,
[data-theme="strike2030"] *::before,
[data-theme="strike2030"] *::after { box-sizing: border-box; }

[data-theme="strike2030"] body {
  margin: 0;
  font-family: var(--s-font);
  font-size: 15px;
  line-height: 24px;
  color: var(--s-fg);
  background: var(--s-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--s-wide) var(--s-ease), color var(--s-wide) var(--s-ease);
}

[data-theme="strike2030"] a { color: var(--s-fg); text-decoration: none; }
[data-theme="strike2030"] a:hover { color: var(--s-fg2); }
[data-theme="strike2030"] button,
[data-theme="strike2030"] input,
[data-theme="strike2030"] select,
[data-theme="strike2030"] textarea { font-family: inherit; font-size: inherit; }
[data-theme="strike2030"] ul,
[data-theme="strike2030"] ol { list-style: none; margin: 0; padding: 0; }
[data-theme="strike2030"] hr { border: 0; border-top: 1px solid var(--s-line); margin: 24px 0; }
[data-theme="strike2030"] ::selection { background: rgba(17, 17, 17, 0.14); }
[data-theme="strike2030"][data-scheme="dark"] ::selection { background: rgba(247, 247, 245, 0.20); }

/* La messa a fuoco si vede sempre, e prende il colore di cio su cui sta. */
[data-theme="strike2030"] :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================
   03 · TIPOGRAFIA
   Sei gradini, nessuno in piu.
   ========================================================== */

[data-theme="strike2030"] .s-display {
  font-size: 48px; line-height: 56px; font-weight: 300; letter-spacing: -0.02em; margin: 0;
}
/* Titoli in Light: il peso visivo lo porta il simbolo, non il testo. */
[data-theme="strike2030"] h1,
[data-theme="strike2030"] .s-h1 {
  font-size: 32px; line-height: 40px; font-weight: 300; letter-spacing: -0.01em; margin: 0;
}
[data-theme="strike2030"] h2,
[data-theme="strike2030"] .s-h2 {
  font-size: 22px; line-height: 30px; font-weight: 300; letter-spacing: -0.005em; margin: 0;
}
[data-theme="strike2030"] h3,
[data-theme="strike2030"] .s-h3 {
  font-size: 17px; line-height: 26px; font-weight: 500; margin: 0;
}
[data-theme="strike2030"] h4,
[data-theme="strike2030"] h5,
[data-theme="strike2030"] h6 {
  font-size: 15px; line-height: 24px; font-weight: 500; margin: 0;
}
[data-theme="strike2030"] p { margin: 0 0 12px; }
[data-theme="strike2030"] p:last-child { margin-bottom: 0; }

[data-theme="strike2030"] .s-body { font-size: 15px; line-height: 24px; color: var(--s-fg2); }
[data-theme="strike2030"] .s-small { font-size: 13px; line-height: 20px; color: var(--s-muted); }

/* L'etichetta: maiuscoletto spaziato, per intestare una sezione o una colonna. */
[data-theme="strike2030"] .s-label {
  font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--s-muted);
}

/* I numeri si incolonnano: cifre di larghezza uguale. */
[data-theme="strike2030"] .s-num,
[data-theme="strike2030"] .num { font-variant-numeric: tabular-nums; }
[data-theme="strike2030"] .s-mono,
[data-theme="strike2030"] .mono { font-family: var(--s-mono); font-variant-numeric: tabular-nums; }

[data-theme="strike2030"] .s-muted { color: var(--s-muted); }
[data-theme="strike2030"] .s-fg2 { color: var(--s-fg2); }
[data-theme="strike2030"] .s-success-fg { color: var(--s-success); }
[data-theme="strike2030"] .s-warning-fg { color: var(--s-warning); }
[data-theme="strike2030"] .s-danger-fg { color: var(--s-danger); }

/* ==========================================================
   04 · MOVIMENTO
   Si muove solo cio che cambia.
   ========================================================== */

@keyframes s-up     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes s-pop    { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes s-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes s-drawer { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes s-sheet  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes s-dot    { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes s-spin   { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  [data-theme="strike2030"] *,
  [data-theme="strike2030"] *::before,
  [data-theme="strike2030"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   05 · LAYOUT
   La barra laterale fluttua: staccata dai bordi, in vetro,
   sopra il contenuto che le scorre sotto.
   ========================================================== */

[data-theme="strike2030"] #sidebar {
  position: fixed;
  left: var(--s-gap);
  top: var(--s-gap);
  bottom: var(--s-gap);
  width: var(--s-nav-w);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 12px;
  border-radius: var(--s-r-panel);
  /* Superficie piena. La barra sta sempre a schermo e regge il contenuto:
     non e una cosa che si apre. A farla fluttuare bastano il distacco dai
     bordi, il raggio e l'ombra. */
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  box-shadow: var(--s-shadow);
  transition: transform var(--s-wide) var(--s-ease), opacity var(--s-wide) var(--s-ease);
}

/* Il contenuto si ferma un distacco prima della barra superiore e lo
   recupera con il suo padding (vedi .content-wrapper): cosi i bordi del
   contenuto coincidono con quelli della barra, con la barra laterale
   aperta e con quella chiusa. */
[data-theme="strike2030"] #main-content {
  margin-left: calc(var(--s-nav-w) + var(--s-gap));
  min-height: 100vh;
  transition: margin-left var(--s-wide) var(--s-ease);
}

/* Barra nascosta: il contenuto si prende tutta la larghezza. */
[data-theme="strike2030"] #sidebar.collapsed {
  transform: translateX(calc(-100% - var(--s-gap) * 2));
  opacity: 0;
  pointer-events: none;
}
[data-theme="strike2030"] #main-content.expanded { margin-left: 0; }

/* — Intestazione della barra: il marchio — */
[data-theme="strike2030"] .sidebar-header {
  padding: 0 10px 20px;
  border: 0;
  height: auto;
}
[data-theme="strike2030"] .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--s-fg);
  min-width: 0;
}
[data-theme="strike2030"] .sidebar-brand svg { flex-shrink: 0; }
[data-theme="strike2030"] .sidebar-brand > span { min-width: 0; }

/* — Voci di navigazione — */
[data-theme="strike2030"] .sidebar-menu {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-theme="strike2030"] .sidebar-menu::-webkit-scrollbar { width: 6px; }
[data-theme="strike2030"] .sidebar-menu::-webkit-scrollbar-thumb {
  background: var(--s-line-strong);
  border-radius: var(--s-r-pill);
}

[data-theme="strike2030"] .sidebar-menu-item { margin: 0; }

[data-theme="strike2030"] .sidebar-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--s-r-control);
  background: transparent;
  color: var(--s-fg2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .sidebar-menu-link:hover {
  background: var(--s-hover);
  color: var(--s-fg);
}
[data-theme="strike2030"] .sidebar-menu-link.active {
  background: var(--s-press);
  color: var(--s-fg);
}
[data-theme="strike2030"] .sidebar-menu-link i,
[data-theme="strike2030"] .sidebar-menu-link svg {
  flex-shrink: 0;
  font-size: 17px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* L'etichetta prende lo spazio; il contatore resta a destra. */
[data-theme="strike2030"] .sidebar-menu-link > span:not([class]),
[data-theme="strike2030"] .sidebar-menu-link .s-nav-label {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titolo di gruppo dentro la barra. */
[data-theme="strike2030"] .sidebar-group-header,
[data-theme="strike2030"] .s-nav-group {
  padding: 14px 10px 6px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-muted);
}
[data-theme="strike2030"] .sidebar-divider {
  height: 1px;
  background: var(--s-line);
  margin: 8px 10px;
  border: 0;
  opacity: 1;
}

/* Contatore accanto a una voce: informa, non allarma. */
[data-theme="strike2030"] .s-nav-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}

/* — Piede della barra: la persona — */
[data-theme="strike2030"] .sidebar-footer {
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--s-line);
  background: transparent;
}
[data-theme="strike2030"] .user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--s-r-control);
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .user-menu:hover { background: var(--s-hover); }
[data-theme="strike2030"] .user-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--s-r-pill);
  background: var(--s-primary);
  color: var(--s-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
[data-theme="strike2030"] .user-info { min-width: 0; flex-grow: 1; }
[data-theme="strike2030"] .user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--s-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="strike2030"] .user-role {
  font-size: 12px;
  color: var(--s-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — Barra superiore —
   Fluttua come la barra laterale: staccata dai bordi, in vetro, con lo
   stesso raggio. Non e una fascia attaccata in cima. */
[data-theme="strike2030"] .topbar {
  position: fixed;
  left: calc(var(--s-nav-w) + var(--s-gap) * 2);
  right: var(--s-gap);
  top: var(--s-gap);
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--s-topbar-h);
  padding: 0 12px 0 20px;
  border-radius: var(--s-r-panel);
  /* Piena come la barra laterale, e per lo stesso motivo. */
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  box-shadow: var(--s-shadow);
  transition: left var(--s-wide) var(--s-ease);
}
/* Con la barra laterale chiusa la barra superiore si allarga fino al bordo. */
[data-theme="strike2030"] #main-content.expanded .topbar,
[data-theme="strike2030"] #sidebar.collapsed ~ #main-content .topbar { left: var(--s-gap); }
/* Tre zone di pari peso: a sinistra dove sei, al centro la ricerca,
   a destra chi sei. La ricerca resta centrata perche le due fasce
   laterali hanno la stessa larghezza minima. */
[data-theme="strike2030"] .topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  font-size: 14px;
  color: var(--s-muted);
}
[data-theme="strike2030"] .topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 200px;
  justify-content: flex-end;
}
[data-theme="strike2030"] .topbar h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--s-fg);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La ricerca: al centro, larga al massimo 480 px. */
[data-theme="strike2030"] .topbar .s-search,
[data-theme="strike2030"] .topbar .ec-search {
  flex-grow: 1;
  max-width: 480px;
  margin: 0 auto;
  height: 40px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--s-line);
  border-radius: 12px;
  background: var(--s-soft);
  color: var(--s-muted);
  gap: 10px;
}
[data-theme="strike2030"] .topbar .s-search input,
[data-theme="strike2030"] .topbar .ec-search input { font-size: 14px; }
[data-theme="strike2030"] .topbar .s-search:focus-within,
[data-theme="strike2030"] .topbar .ec-search:focus-within {
  border-color: var(--s-line-strong);
  background: var(--s-surface);
}

/* La scorciatoia incisa nel campo. */
[data-theme="strike2030"] .topbar .s-kbd {
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid var(--s-line);
  background: transparent;
  font-size: 12px;
}

/* Le azioni della barra: quadrate, senza contorno, 40 px. */
[data-theme="strike2030"] .topbar-right .s-iconbtn,
[data-theme="strike2030"] .topbar-right .ec-iconbtn,
[data-theme="strike2030"] .topbar .s-topbar-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--s-fg);
}
[data-theme="strike2030"] .topbar-right .s-iconbtn:hover,
[data-theme="strike2030"] .topbar .s-topbar-btn:hover { background: var(--s-soft); }

/* Il segno di una notifica non letta: un punto, non un numero. */
[data-theme="strike2030"] .s-topbar-btn { position: relative; }
[data-theme="strike2030"] .s-topbar-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: var(--s-r-pill);
  background: var(--s-fg);
}

/* L'avatar: l'ultima cosa a destra, e apre il menu della persona. */
[data-theme="strike2030"] .topbar .user-avatar,
[data-theme="strike2030"] .s-avatar-btn {
  margin-left: 4px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--s-r-pill);
  background: var(--s-primary);
  color: var(--s-on-primary);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-avatar-btn[aria-expanded="true"],
[data-theme="strike2030"] .s-avatar-btn.show {
  box-shadow: 0 0 0 3px var(--s-sel);
}

[data-theme="strike2030"] .sidebar-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--s-r-control);
  background: transparent;
  color: var(--s-fg2);
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .sidebar-toggle:hover { background: var(--s-hover); color: var(--s-fg); }

/* — Contenuto —
   La barra superiore fluttua sopra: il contenuto comincia sotto di essa,
   e ai lati sta a filo con i suoi bordi. Il padding laterale e lo stesso
   distacco della barra dai bordi dello schermo: se cambia l'uno, cambia
   l'altro. */
[data-theme="strike2030"] .content-wrapper {
  padding: calc(var(--s-gap) * 2 + var(--s-topbar-h)) var(--s-gap) 40px;
}

/* — Velo sotto la barra, su schermi stretti — */
[data-theme="strike2030"] .sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1025;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--s-wide) var(--s-ease), visibility var(--s-wide);
}
[data-theme="strike2030"] .sidebar-overlay.show { opacity: 1; visibility: visible; }

/* ==========================================================
   06 · ADATTIVITA
   Desktop oltre 1024: barra fluttuante da 240 px.
   Tablet 640-1024: barra fuori campo, richiamabile.
   Mobile fino a 640: navigazione in basso, dettagli in sheet.
   ========================================================== */

@media (max-width: 1024px) {
  [data-theme="strike2030"] #sidebar {
    transform: translateX(calc(-100% - var(--s-gap) * 2));
    opacity: 0;
    pointer-events: none;
  }
  [data-theme="strike2030"] #sidebar.show {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  [data-theme="strike2030"] #main-content { margin-left: 0; }
  [data-theme="strike2030"] .topbar { left: var(--s-gap); padding: 0 10px 0 14px; }
  [data-theme="strike2030"] .content-wrapper {
    padding: calc(var(--s-gap) * 2 + var(--s-topbar-h)) var(--s-gap) 40px;
  }
}

@media (max-width: 640px) {
  [data-theme="strike2030"] .topbar {
    left: 12px; right: 12px; top: 12px;
    height: 56px;
    padding: 0 8px 0 12px;
    border-radius: 18px;
  }
  /* A filo con la barra, che qui sta a 12 px dai bordi. */
  [data-theme="strike2030"] .content-wrapper { padding: 80px 12px 96px; }
  [data-theme="strike2030"] h1, [data-theme="strike2030"] .s-h1 { font-size: 26px; line-height: 34px; }
  [data-theme="strike2030"] .s-display { font-size: 34px; line-height: 42px; }
}

/* — Navigazione inferiore: fluttuante, solo su mobile — */
[data-theme="strike2030"] .mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1035;
  padding: 6px;
  border-radius: var(--s-r-panel);
  /* Qui il vetro si ferma: la barra sta sopra righe fitte di dati, e anche
     al 92% le etichette si leggevano sovrapposte al testo sottostante. Su
     uno schermo piccolo la leggibilita viene prima dell'effetto: la
     superficie e piena, e a farla fluttuare bastano il distacco dai bordi,
     il raggio e l'ombra. */
  background: var(--s-surface);
  border: 1px solid var(--s-line-strong);
  box-shadow: var(--s-shadow);
}
@media (max-width: 640px) {
  [data-theme="strike2030"] .mobile-bottom-nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
  }
}
[data-theme="strike2030"] .mobile-bottom-nav .nav-item { flex: 1 1 0; min-width: 0; }
[data-theme="strike2030"] .mobile-bottom-nav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 6px 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--s-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .mobile-bottom-nav .nav-link i,
[data-theme="strike2030"] .mobile-bottom-nav .nav-link svg { font-size: 18px; }
[data-theme="strike2030"] .mobile-bottom-nav .nav-link.active {
  background: var(--s-press);
  color: var(--s-fg);
}
[data-theme="strike2030"] .mobile-bottom-nav .nav-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* — Sheet dal basso: su mobile il dettaglio sale da sotto — */
[data-theme="strike2030"] .mobile-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--s-wide) var(--s-ease), visibility var(--s-wide);
}
[data-theme="strike2030"] .mobile-more-overlay.show { opacity: 1; visibility: visible; }

[data-theme="strike2030"] .mobile-more-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  max-height: 84vh;
  overflow-y: auto;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--s-surface);
  border-top: 1px solid var(--s-line);
  box-shadow: var(--s-shadow);
  transform: translateY(100%);
  transition: transform var(--s-wide) var(--s-ease);
}
[data-theme="strike2030"] .mobile-more-drawer.show { transform: none; }
[data-theme="strike2030"] .mobile-more-drawer-handle {
  width: 36px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: var(--s-r-pill);
  background: var(--s-stone);
}
[data-theme="strike2030"] .drawer-section { margin-bottom: 18px; }
[data-theme="strike2030"] .drawer-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin-bottom: 8px;
}
[data-theme="strike2030"] .drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--s-r-control);
  color: var(--s-fg);
  font-size: 15px;
  transition: background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .drawer-link:hover { background: var(--s-hover); }

/* ==========================================================
   07 · PULSANTI
   Una schermata, un pulsante pieno. Il resto e secondario.
   Altezze 32 · 40 · 48. Su mobile il tocco non scende sotto 44.
   ========================================================== */

[data-theme="strike2030"] .s-btn,
[data-theme="strike2030"] .ec-btn,
[data-theme="strike2030"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
  color: var(--s-fg);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--s-fast) var(--s-ease),
              background-color var(--s-normal) var(--s-ease),
              border-color var(--s-normal) var(--s-ease),
              color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-btn:hover,
[data-theme="strike2030"] .ec-btn:hover,
[data-theme="strike2030"] .btn:hover { background: var(--s-hover); color: var(--s-fg); }
[data-theme="strike2030"] .s-btn:active,
[data-theme="strike2030"] .ec-btn:active,
[data-theme="strike2030"] .btn:active { transform: scale(.98); }

[data-theme="strike2030"] .s-btn:disabled,
[data-theme="strike2030"] .ec-btn:disabled,
[data-theme="strike2030"] .btn:disabled,
[data-theme="strike2030"] .s-btn.disabled,
[data-theme="strike2030"] .ec-btn.disabled,
[data-theme="strike2030"] .btn.disabled {
  color: var(--s-stone);
  border-color: var(--s-line);
  background: var(--s-surface);
  cursor: not-allowed;
  transform: none;
}

/* L'azione principale: piena, una sola per schermata. */
[data-theme="strike2030"] .s-btn.primary,
[data-theme="strike2030"] .ec-btn.primary,
[data-theme="strike2030"] .btn-primary,
[data-theme="strike2030"] .btn-success {
  background: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--s-on-primary);
}
[data-theme="strike2030"] .s-btn.primary:hover,
[data-theme="strike2030"] .ec-btn.primary:hover,
[data-theme="strike2030"] .btn-primary:hover,
[data-theme="strike2030"] .btn-success:hover {
  background: var(--s-graphite);
  border-color: var(--s-graphite);
  color: var(--s-on-primary);
}
[data-theme="strike2030"][data-scheme="dark"] .s-btn.primary:hover,
[data-theme="strike2030"][data-scheme="dark"] .ec-btn.primary:hover,
[data-theme="strike2030"][data-scheme="dark"] .btn-primary:hover {
  background: var(--s-stone);
  border-color: var(--s-stone);
}

/* Senza contorno: per azioni di terzo piano. */
[data-theme="strike2030"] .s-btn.ghost,
[data-theme="strike2030"] .ec-btn.ghost,
[data-theme="strike2030"] .btn-ghost,
[data-theme="strike2030"] .btn-link {
  border-color: transparent;
  background: transparent;
  color: var(--s-fg2);
}
[data-theme="strike2030"] .s-btn.ghost:hover,
[data-theme="strike2030"] .ec-btn.ghost:hover,
[data-theme="strike2030"] .btn-ghost:hover { background: var(--s-hover); color: var(--s-fg); }

/* Distruttiva: il colore avverte, non decora. */
[data-theme="strike2030"] .s-btn.danger,
[data-theme="strike2030"] .ec-btn.danger,
[data-theme="strike2030"] .btn-danger,
[data-theme="strike2030"] .btn-outline-danger {
  border-color: var(--s-danger-line);
  background: var(--s-surface);
  color: var(--s-danger);
}
[data-theme="strike2030"] .s-btn.danger:hover,
[data-theme="strike2030"] .ec-btn.danger:hover,
[data-theme="strike2030"] .btn-danger:hover,
[data-theme="strike2030"] .btn-outline-danger:hover {
  background: var(--s-danger-bg);
  color: var(--s-danger);
}
[data-theme="strike2030"] .btn-danger i,
[data-theme="strike2030"] .ec-btn.danger i { color: inherit; }

[data-theme="strike2030"] .btn-outline-primary,
[data-theme="strike2030"] .btn-outline-secondary,
[data-theme="strike2030"] .btn-secondary {
  background: var(--s-surface);
  border-color: var(--s-line-strong);
  color: var(--s-fg);
}

/* Misure. */
[data-theme="strike2030"] .s-btn.sm,
[data-theme="strike2030"] .ec-btn.sm,
[data-theme="strike2030"] .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
[data-theme="strike2030"] .s-btn.xs,
[data-theme="strike2030"] .ec-btn.xs { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; border-radius: 8px; }
[data-theme="strike2030"] .s-btn.lg,
[data-theme="strike2030"] .ec-btn.lg,
[data-theme="strike2030"] .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }

@media (max-width: 640px) {
  [data-theme="strike2030"] .s-btn,
  [data-theme="strike2030"] .ec-btn,
  [data-theme="strike2030"] .btn { min-height: 44px; }
  [data-theme="strike2030"] .s-btn.xs,
  [data-theme="strike2030"] .ec-btn.xs { min-height: 36px; }
}

/* Pulsante di sola icona: quadrato. */
[data-theme="strike2030"] .s-iconbtn,
[data-theme="strike2030"] .ec-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--s-r-control);
  background: transparent;
  color: var(--s-fg2);
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-iconbtn:hover,
[data-theme="strike2030"] .ec-iconbtn:hover { background: var(--s-hover); color: var(--s-fg); }
[data-theme="strike2030"] .ec-iconbtn.sm { width: 30px; height: 30px; }

[data-theme="strike2030"] .btn:has(> i:only-child),
[data-theme="strike2030"] .ec-btn:has(> i:only-child) {
  width: 40px; padding: 0;
}
[data-theme="strike2030"] .btn-sm:has(> i:only-child),
[data-theme="strike2030"] .ec-btn.sm:has(> i:only-child) { width: 32px; }

/* Gruppo di pulsanti che si escludono: un solo acceso. */
[data-theme="strike2030"] .s-segmented,
[data-theme="strike2030"] .ec-pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--s-r-control);
  background: var(--s-soft);
}
[data-theme="strike2030"] .s-segmented > *,
[data-theme="strike2030"] .ec-pills > .ec-pill {
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s-fg2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-segmented > *:hover,
[data-theme="strike2030"] .ec-pills > .ec-pill:hover { color: var(--s-fg); }
[data-theme="strike2030"] .s-segmented > .active,
[data-theme="strike2030"] .ec-pills > .ec-pill.active {
  background: var(--s-surface);
  color: var(--s-fg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08);
}

/* ==========================================================
   08 · CAMPI
   L'errore si spiega a parole, sotto il campo.
   ========================================================== */

[data-theme="strike2030"] .s-input,
[data-theme="strike2030"] .ec-input,
[data-theme="strike2030"] .form-control,
[data-theme="strike2030"] .form-select,
[data-theme="strike2030"] input[type="text"],
[data-theme="strike2030"] input[type="search"],
[data-theme="strike2030"] input[type="email"],
[data-theme="strike2030"] input[type="password"],
[data-theme="strike2030"] input[type="number"],
[data-theme="strike2030"] input[type="date"],
[data-theme="strike2030"] input[type="tel"],
[data-theme="strike2030"] input[type="url"],
[data-theme="strike2030"] select,
[data-theme="strike2030"] textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
  color: var(--s-fg);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--s-normal) var(--s-ease), box-shadow var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] textarea {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  line-height: 22px;
  resize: vertical;
}
[data-theme="strike2030"] .s-input::placeholder,
[data-theme="strike2030"] .ec-input::placeholder,
[data-theme="strike2030"] .form-control::placeholder,
[data-theme="strike2030"] input::placeholder,
[data-theme="strike2030"] textarea::placeholder { color: var(--s-muted); }

[data-theme="strike2030"] .s-input:focus,
[data-theme="strike2030"] .ec-input:focus,
[data-theme="strike2030"] .form-control:focus,
[data-theme="strike2030"] .form-select:focus,
[data-theme="strike2030"] input:focus,
[data-theme="strike2030"] select:focus,
[data-theme="strike2030"] textarea:focus {
  border-color: var(--s-fg);
  box-shadow: 0 0 0 3px var(--s-soft);
  outline: none;
}
[data-theme="strike2030"] .s-input.error,
[data-theme="strike2030"] .ec-input.error,
[data-theme="strike2030"] .form-control.is-invalid,
[data-theme="strike2030"] .is-invalid { border-color: var(--s-danger); }
[data-theme="strike2030"] .s-error,
[data-theme="strike2030"] .invalid-feedback {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--s-danger);
  margin-top: 6px;
}

[data-theme="strike2030"] .s-field-label,
[data-theme="strike2030"] .form-label,
[data-theme="strike2030"] .ec-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--s-fg2);
  margin-bottom: 6px;
}
[data-theme="strike2030"] .s-hint,
[data-theme="strike2030"] .ec-hint,
[data-theme="strike2030"] .form-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--s-muted);
}

[data-theme="strike2030"] .form-control-sm,
[data-theme="strike2030"] .ec-input.sm { height: 32px; font-size: 13px; padding: 0 10px; }

/* Campo di ricerca con icona a sinistra. */
[data-theme="strike2030"] .s-search,
[data-theme="strike2030"] .ec-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
  color: var(--s-muted);
  min-width: 0;
  transition: border-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-search:focus-within,
[data-theme="strike2030"] .ec-search:focus-within { border-color: var(--s-fg); }
[data-theme="strike2030"] .s-search input,
[data-theme="strike2030"] .ec-search input {
  height: auto;
  flex-grow: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--s-fg);
  font-size: 13px;
}
[data-theme="strike2030"] .s-search input:focus,
[data-theme="strike2030"] .ec-search input:focus { box-shadow: none; border: 0; }

/* Un campo dentro un contenitore che ha gia il suo bordo non ne porta un
   secondo: il riquadro e uno solo. Vale per qualunque involucro con bordo,
   non solo per quelli del tema. */
[data-theme="strike2030"] .s-search input,
[data-theme="strike2030"] .ec-search input,
[data-theme="strike2030"] .cat-cerca input,
[data-theme="strike2030"] .input-group > input {
  border: 0;
  background: transparent;
  height: auto;
  padding: 0;
  box-shadow: none;
}
[data-theme="strike2030"] .cat-cerca {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
  transition: border-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .cat-cerca:focus-within { border-color: var(--s-fg); }

/* La scorciatoia, incisa nel campo. */
[data-theme="strike2030"] .s-kbd {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--s-line);
  border-radius: 6px;
  background: var(--s-soft);
  color: var(--s-muted);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--s-font);
}

/* Il cambio fra chiaro e scuro: l'onda (strikeScheme con un punto di partenza).
   La pagina nuova sta sopra la vecchia e la scopre una maschera che cresce dal clic (--ink-x, --ink-y,
   --ink-r, aggiornato frame per frame). Il bordo non e una sfumatura: si sgrana in punti, prima grandi poi
   piccoli, come il campo di punti del marchio. Gli strati della maschera, dall'alto:
     disco pieno  +  ( punti grandi  ∩  ( disco medio  +  ( punti piccoli  ∩  disco intero ) ) )
   Sul bordo della parte piena corre un filo di luce (.s-ink-ring), in un suo strato sopra le due pagine. */
[data-theme="strike2030"].scheme-switching *,
[data-theme="strike2030"].scheme-switching *::before,
[data-theme="strike2030"].scheme-switching *::after { transition-property: background-color, border-color, transform, opacity, clip-path !important; }
[data-theme="strike2030"].scheme-inking *,
[data-theme="strike2030"].scheme-inking *::before,
[data-theme="strike2030"].scheme-inking *::after { transition: none !important; }
[data-theme="strike2030"]::view-transition-old(root),
[data-theme="strike2030"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
[data-theme="strike2030"]::view-transition-old(root) { z-index: 1; }
[data-theme="strike2030"]::view-transition-new(root) {
  z-index: 2;
  -webkit-mask-image:
    radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%), #000 calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) - 1px), transparent max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px)))),
    radial-gradient(circle at center, #000 4.4px, transparent 5.2px),
    radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%), #000 calc(max(0px, calc(var(--ink-r, 0px) - var(--ink-b, 56px))) - 1px), transparent max(0px, calc(var(--ink-r, 0px) - var(--ink-b, 56px)))),
    radial-gradient(circle at center, #000 2px, transparent 2.8px),
    radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%), #000 calc(max(0px, var(--ink-r, 0px)) - 1px), transparent max(0px, var(--ink-r, 0px)));
  mask-image:
    radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%), #000 calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) - 1px), transparent max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px)))),
    radial-gradient(circle at center, #000 4.4px, transparent 5.2px),
    radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%), #000 calc(max(0px, calc(var(--ink-r, 0px) - var(--ink-b, 56px))) - 1px), transparent max(0px, calc(var(--ink-r, 0px) - var(--ink-b, 56px)))),
    radial-gradient(circle at center, #000 2px, transparent 2.8px),
    radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%), #000 calc(max(0px, var(--ink-r, 0px)) - 1px), transparent max(0px, var(--ink-r, 0px)));
  -webkit-mask-size: 100% 100%, 12px 12px, 100% 100%, 12px 12px, 100% 100%;
  mask-size: 100% 100%, 12px 12px, 100% 100%, 12px 12px, 100% 100%;
  -webkit-mask-repeat: no-repeat, repeat, no-repeat, repeat, no-repeat;
  mask-repeat: no-repeat, repeat, no-repeat, repeat, no-repeat;
  -webkit-mask-composite: source-over, source-in, source-over, source-in, source-over;
  mask-composite: add, intersect, add, intersect, add;
}
[data-theme="strike2030"] .s-ink-ring {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  view-transition-name: s-ink-ring;
  opacity: var(--ink-o, 1);
  /* Il filo di luce corre sul bordo della parte piena, dove la pagina nuova e gia arrivata: ha il colore
     del suo testo, quindi si legge sempre, e dietro lascia una scia che si spegne verso l'interno. */
  background: radial-gradient(circle at var(--ink-x, 50%) var(--ink-y, 50%),
    transparent max(0px, calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) - 140px)),
    color-mix(in srgb, var(--s-fg) 5%, transparent) max(0px, calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) - 60px)),
    color-mix(in srgb, var(--s-fg) 16%, transparent) max(0px, calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) - 5px)),
    color-mix(in srgb, var(--s-fg) 70%, transparent) max(0px, calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) - 1.5px)),
    color-mix(in srgb, var(--s-fg) 70%, transparent) max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))),
    transparent calc(max(0px, calc(var(--ink-r, 0px) - 2 * var(--ink-b, 56px))) + 1.5px));
}
::view-transition-group(s-ink-ring) { animation: none; z-index: 3; }
::view-transition-new(s-ink-ring) { animation: none; mix-blend-mode: normal; }
::view-transition-old(s-ink-ring) { display: none; }

/* Interruttore.
   Sta in fondo alla riga di cio che accende, centrato in altezza, e non ha testo accanto: la sua
   etichetta e il titolo della riga. Acceso prende il colore dell'azione principale, spento quello
   degli stati inattivi. Lo stato si dichiara con .on oppure con aria-checked="true". */
[data-theme="strike2030"] .s-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: var(--s-r-pill);
  background: var(--s-switch-off);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-switch::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--s-r-pill);
  background: var(--s-switch-knob);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.25);
  transition: transform var(--s-normal) var(--s-ease), background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-switch.on,
[data-theme="strike2030"] .s-switch[aria-checked="true"],
[data-theme="strike2030"] .s-toggle-row.on .s-switch,
[data-theme="strike2030"] .s-toggle-row[aria-pressed="true"] .s-switch { background: var(--s-primary); }
[data-theme="strike2030"] .s-switch.on::after,
[data-theme="strike2030"] .s-switch[aria-checked="true"]::after,
[data-theme="strike2030"] .s-toggle-row.on .s-switch::after,
[data-theme="strike2030"] .s-toggle-row[aria-pressed="true"] .s-switch::after {
  background: var(--s-switch-knob-on);
  transform: translateX(18px);
}
[data-theme="strike2030"] .s-switch:focus-visible { outline: 2px solid var(--s-fg); outline-offset: 2px; }
/* Bloccato: si vede com'e, non si cambia. */
[data-theme="strike2030"] .s-switch:disabled,
[data-theme="strike2030"] .s-switch.locked { opacity: 0.62; cursor: default; }
/* In una riga che ha gia il suo contenuto l'interruttore va in fondo. */
[data-theme="strike2030"] .s-switch.end { margin-left: auto; align-self: center; }

/* Funzioni attivabili.
   Un elenco di cose che si accendono e si spengono: a sinistra l'icona, che si riempie quando la
   funzione e attiva; al centro il titolo e una riga che dice cosa fa; in fondo l'interruttore.
   La riga intera e il pulsante (button.s-toggle-row, con aria-pressed). Se la riga porta anche altre
   azioni e un div, e il pulsante e il solo interruttore. */
[data-theme="strike2030"] .s-toggle-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: var(--s-surface);
}
[data-theme="strike2030"] .s-toggle-row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border: 0;
  border-top: 1px solid var(--s-line);
  border-radius: 12px;
  background: transparent;
  color: var(--s-fg);
  font: inherit;
  text-align: left;
  transition: background-color var(--s-fast) var(--s-ease);
}
[data-theme="strike2030"] .s-toggle-row:first-child { border-top-color: transparent; }
[data-theme="strike2030"] button.s-toggle-row { cursor: pointer; }
[data-theme="strike2030"] button.s-toggle-row:hover { background: var(--s-hover); }
[data-theme="strike2030"] button.s-toggle-row:focus-visible { outline: 2px solid var(--s-fg); outline-offset: -2px; }
[data-theme="strike2030"] .s-toggle-row:disabled,
[data-theme="strike2030"] .s-toggle-row.locked { opacity: 0.62; cursor: default; background: transparent; }
[data-theme="strike2030"] .s-toggle-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--s-soft);
  color: var(--s-fg2);
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-toggle-row.on .s-toggle-icon,
[data-theme="strike2030"] .s-toggle-row[aria-pressed="true"] .s-toggle-icon { background: var(--s-primary); color: var(--s-on-primary); }
[data-theme="strike2030"] .s-toggle-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
[data-theme="strike2030"] .s-toggle-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 500; }
[data-theme="strike2030"] .s-toggle-desc { font-size: 13px; line-height: 20px; color: var(--s-muted); }
[data-theme="strike2030"] .s-toggle-row .s-switch { margin-left: auto; }

/* L'intestazione di un gruppo: nome in maiuscoletto, un filo, e il conto a destra («3 di 5 attive»). */
[data-theme="strike2030"] .s-group-head { display: flex; align-items: baseline; gap: 12px; padding: 0 4px; }
[data-theme="strike2030"] .s-group-head .t { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--s-muted); }
[data-theme="strike2030"] .s-group-head .rule { flex: 1 1 auto; height: 1px; background: var(--s-line); }
[data-theme="strike2030"] .s-group-head .n { font-size: 12px; color: var(--s-muted); font-variant-numeric: tabular-nums; }

/* Elenchi che si compilano una voce per volta (strikeList).
   Ogni voce ha la sua riga con il suo «togli»; sotto, il pulsante che apre i campi di UNA voce.
   Mai una casella di testo con «una per riga» o valori separati da virgole. */
[data-theme="strike2030"] .s-list { display: flex; flex-direction: column; gap: 8px; }
[data-theme="strike2030"] .s-list-items {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
}
[data-theme="strike2030"] .s-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  border-top: 1px solid var(--s-line);
  font-size: 14px;
  line-height: 22px;
}
[data-theme="strike2030"] .s-list-item:first-child { border-top: 0; }
[data-theme="strike2030"] .s-list-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-fg); }
[data-theme="strike2030"] .s-list-text.mono { font-family: var(--s-mono); font-size: 13px; }
[data-theme="strike2030"] .s-list-x {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: var(--s-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
[data-theme="strike2030"] .s-list-x:hover { background: var(--s-hover); color: var(--s-danger); }
[data-theme="strike2030"] .s-list-x:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--s-muted); }
[data-theme="strike2030"] .s-list-empty { padding: 10px 12px; font-size: 13px; color: var(--s-muted); }
[data-theme="strike2030"] .s-list-add { align-self: flex-start; }
[data-theme="strike2030"] .s-list-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-theme="strike2030"] .s-list-form .s-input { flex: 1 1 130px; width: auto; min-width: 0; height: 36px; }
[data-theme="strike2030"] .s-list-form .s-btn { flex-shrink: 0; }

/* Scegliere scrivendo (strikePicker).
   Un campo in cui si scrive un nome; sotto si apre un menu in vetro con chi corrisponde, e un clic lo
   aggiunge all'elenco sopra. Il menu e quello di tutti i menu (.s-menu), attaccato alla pagina. */
[data-theme="strike2030"] .s-picker-menu {
  position: fixed;
  z-index: 1080;
  max-height: 296px;
  overflow-y: auto;
  min-width: 0;
}
[data-theme="strike2030"] .s-picker-menu[hidden] { display: none; }
[data-theme="strike2030"] .s-picker-menu .s-menu-item { min-height: 48px; }
[data-theme="strike2030"] .s-picker-menu .s-menu-item.active { background: var(--s-press); }
[data-theme="strike2030"] .s-picker-av {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--s-r-pill);
  background: var(--s-soft);
  color: var(--s-fg2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
[data-theme="strike2030"] .s-picker-text { display: flex; flex-direction: column; min-width: 0; }
[data-theme="strike2030"] .s-picker-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="strike2030"] .s-picker-detail { font-size: 12px; line-height: 16px; color: var(--s-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="strike2030"] .s-list-text .s-picker-detail { margin-left: 8px; }
[data-theme="strike2030"] .s-picker-none { padding: 10px; font-size: 13px; color: var(--s-muted); }

/* Casella e scelta singola. */
[data-theme="strike2030"] input[type="checkbox"],
[data-theme="strike2030"] input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--s-primary);
  cursor: pointer;
  flex-shrink: 0;
}
[data-theme="strike2030"] .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

/* ==========================================================
   09 · CARD E SUPERFICI
   Le card restano piene: il bordo le separa, non l'ombra.
   ========================================================== */

[data-theme="strike2030"] .s-card,
[data-theme="strike2030"] .ec-card,
[data-theme="strike2030"] .card {
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 16px;
}
[data-theme="strike2030"] .s-card:last-child,
[data-theme="strike2030"] .ec-card:last-child,
[data-theme="strike2030"] .card:last-child { margin-bottom: 0; }

[data-theme="strike2030"] .s-card-h,
[data-theme="strike2030"] .ec-card-h,
[data-theme="strike2030"] .card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--s-line);
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--s-fg);
}
[data-theme="strike2030"] .s-card-b,
[data-theme="strike2030"] .ec-card-b,
[data-theme="strike2030"] .card-body { --s-card-pad: 20px; padding: var(--s-card-pad); }
/* Le utilita di Bootstrap che cambiano il padding lo dicono anche alla variabile. */
[data-theme="strike2030"] .card-body.p-0 { --s-card-pad: 0px; }
[data-theme="strike2030"] .card-body.p-1 { --s-card-pad: 4px; }
[data-theme="strike2030"] .card-body.p-2 { --s-card-pad: 8px; }
[data-theme="strike2030"] .card-body.p-3 { --s-card-pad: 16px; }
[data-theme="strike2030"] .card-body.p-4 { --s-card-pad: 24px; }
@media (min-width: 768px) {
  [data-theme="strike2030"] .card-body.p-md-3 { --s-card-pad: 16px; }
  [data-theme="strike2030"] .card-body.p-md-4 { --s-card-pad: 24px; }
}
[data-theme="strike2030"] .s-card-f,
[data-theme="strike2030"] .ec-card-f,
[data-theme="strike2030"] .card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--s-line);
  background: transparent;
}
[data-theme="strike2030"] .card-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}
/* Un titolo dentro l'intestazione di una card e l'intestazione stessa: prende
   la misura di quella, non quella che avrebbe in mezzo alla pagina. */
[data-theme="strike2030"] .s-card-h h1,
[data-theme="strike2030"] .s-card-h h2,
[data-theme="strike2030"] .s-card-h h3,
[data-theme="strike2030"] .s-card-h h4,
[data-theme="strike2030"] .ec-card-h h1,
[data-theme="strike2030"] .ec-card-h h2,
[data-theme="strike2030"] .ec-card-h h3,
[data-theme="strike2030"] .ec-card-h h4,
[data-theme="strike2030"] .card-header h1,
[data-theme="strike2030"] .card-header h2,
[data-theme="strike2030"] .card-header h3,
[data-theme="strike2030"] .card-header h4 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}

/* Una card cliccabile lo dichiara al passaggio del mouse. */
[data-theme="strike2030"] .s-card.clickable,
[data-theme="strike2030"] .ec-card.clickable,
[data-theme="strike2030"] .card-clickable {
  cursor: pointer;
  transition: border-color var(--s-normal) var(--s-ease), background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-card.clickable:hover,
[data-theme="strike2030"] .ec-card.clickable:hover,
[data-theme="strike2030"] .card-clickable:hover { border-color: var(--s-line-strong); }

/* Intestazione di pagina: titolo, conteggio, una sola azione piena. */
[data-theme="strike2030"] .s-page-head,
[data-theme="strike2030"] .ec-page-head,
[data-theme="strike2030"] .ec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}
[data-theme="strike2030"] .s-page-title,
[data-theme="strike2030"] .ec-page-title,
[data-theme="strike2030"] .ec-h1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
}
[data-theme="strike2030"] .s-page-sub,
[data-theme="strike2030"] .ec-page-sub,
[data-theme="strike2030"] .ec-page-desc,
[data-theme="strike2030"] .ec-sub {
  font-size: 14px;
  line-height: 22px;
  color: var(--s-muted);
  margin-top: 6px;
}
[data-theme="strike2030"] .s-page-actions,
[data-theme="strike2030"] .ec-head-act {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  [data-theme="strike2030"] .ec-h1,
  [data-theme="strike2030"] .ec-page-title,
  [data-theme="strike2030"] .s-page-title { font-size: 26px; line-height: 34px; }
}

/* Sezione numerata dentro una pagina lunga. */
[data-theme="strike2030"] .ec-sec {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 28px 0 14px;
}
[data-theme="strike2030"] .ec-sec-num,
[data-theme="strike2030"] .ec-sec-side {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}
[data-theme="strike2030"] .ec-sec-tit {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
[data-theme="strike2030"] .ec-sec-hint {
  font-size: 13px;
  line-height: 20px;
  color: var(--s-muted);
}

/* Coppia chiave/valore: l'unita di lettura dei dati. */
[data-theme="strike2030"] .ec-kv,
[data-theme="strike2030"] .ec-kv2 { min-width: 0; }
[data-theme="strike2030"] .ec-kv-k {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin-bottom: 4px;
}
[data-theme="strike2030"] .ec-kv-v {
  font-size: 15px;
  line-height: 24px;
  color: var(--s-fg);
  font-variant-numeric: tabular-nums;
}
[data-theme="strike2030"] .ec-kv-m { font-size: 13px; color: var(--s-muted); }
[data-theme="strike2030"] .ec-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 24px;
}

/* Vuoto: dice cosa manca e cosa fare. */
[data-theme="strike2030"] .s-empty,
[data-theme="strike2030"] .ec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: var(--s-muted);
  font-size: 14px;
  line-height: 22px;
}
[data-theme="strike2030"] .s-empty-title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--s-fg);
}

/* ==========================================================
   10 · TABELLE
   Righe da 56 px, separatori all'8%, riga al passaggio
   del mouse al 6%. I numeri stanno a destra e si incolonnano.
   ========================================================== */

[data-theme="strike2030"] .s-table-wrap,
[data-theme="strike2030"] .ec-table-wrap,
[data-theme="strike2030"] .table-responsive {
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

[data-theme="strike2030"] .s-table,
[data-theme="strike2030"] .ec-table,
[data-theme="strike2030"] .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--s-fg);
  margin: 0;
  background: transparent;
}

[data-theme="strike2030"] .s-table thead th,
[data-theme="strike2030"] .ec-table thead th,
[data-theme="strike2030"] .table thead th,
[data-theme="strike2030"] .ec-head-row {
  padding: 14px 16px;
  text-align: left;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--s-line);
  white-space: nowrap;
}

[data-theme="strike2030"] .s-table tbody td,
[data-theme="strike2030"] .ec-table tbody td,
[data-theme="strike2030"] .table tbody td {
  height: 56px;
  padding: 8px 16px;
  border: 0;
  border-top: 1px solid var(--s-line);
  vertical-align: middle;
  color: var(--s-fg);
  background: transparent;
}
[data-theme="strike2030"] .s-table tbody tr:first-child td,
[data-theme="strike2030"] .ec-table tbody tr:first-child td,
[data-theme="strike2030"] .table tbody tr:first-child td { border-top: 0; }

[data-theme="strike2030"] .s-table tbody tr,
[data-theme="strike2030"] .ec-table tbody tr,
[data-theme="strike2030"] .table tbody tr {
  transition: background-color var(--s-fast) var(--s-ease);
}
[data-theme="strike2030"] .s-table tbody tr:hover,
[data-theme="strike2030"] .ec-table tbody tr:hover,
[data-theme="strike2030"] .table-hover tbody tr:hover,
[data-theme="strike2030"] tr.tr-detail-click:hover { background: var(--s-hover); }

/* I numeri a destra: si leggono per confronto, incolonnati. */
[data-theme="strike2030"] .s-table .num,
[data-theme="strike2030"] .ec-table .num,
[data-theme="strike2030"] .table .num,
[data-theme="strike2030"] .s-table td.text-end,
[data-theme="strike2030"] .ec-table td.text-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-theme="strike2030"] .s-table th.num,
[data-theme="strike2030"] .ec-table th.num,
[data-theme="strike2030"] .table th.num { text-align: right; }

/* Il codice: carattere a larghezza fissa, tono attenuato. */
[data-theme="strike2030"] .ec-code,
[data-theme="strike2030"] .s-code {
  font-family: var(--s-mono);
  font-size: 13px;
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}

[data-theme="strike2030"] tr.tr-detail-click,
[data-theme="strike2030"] .row-clickable { cursor: pointer; }

/* Ordinamento delle colonne. */
[data-theme="strike2030"] th.sortable { cursor: pointer; user-select: none; }
[data-theme="strike2030"] th.sortable:hover { color: var(--s-fg); }
[data-theme="strike2030"] .sort-icon { opacity: .4; margin-left: 4px; font-size: 10px; }
[data-theme="strike2030"] th.sort-asc .sort-icon,
[data-theme="strike2030"] th.sort-desc .sort-icon { opacity: 1; }

@media (max-width: 640px) {
  [data-theme="strike2030"] .s-table tbody td,
  [data-theme="strike2030"] .ec-table tbody td,
  [data-theme="strike2030"] .table tbody td { height: auto; min-height: 48px; padding: 10px 12px; }
  [data-theme="strike2030"] .s-table thead th,
  [data-theme="strike2030"] .ec-table thead th,
  [data-theme="strike2030"] .table thead th { padding: 10px 12px; }
}

/* Una tabella larga non sfonda la pagina: scorre dentro un involucro. Quando
   il template non ne mette uno, lo aggiunge strike-2030.js (.scrollable-x-auto,
   senza bordo). Non si usa display:block sulla tabella: thead e tbody
   diventerebbero due tabelle separate, ognuna con le sue colonne, e le
   intestazioni non starebbero piu sopra le celle. */

/* Dentro una card la tabella riempie la card: un riquadro solo, non una
   cornice dentro la cornice. Come figlia diretta della card perde solo il
   suo bordo; dentro il corpo della card sporge di quanto vale il padding,
   che il corpo dichiara in una variabile. */
[data-theme="strike2030"] .card > .table-responsive,
[data-theme="strike2030"] .card > .s-table-wrap,
[data-theme="strike2030"] .card > .scrollable-x-auto,
[data-theme="strike2030"] .s-card > .s-table-wrap,
[data-theme="strike2030"] .s-card > .scrollable-x-auto,
[data-theme="strike2030"] .ec-card > .ec-table-wrap,
[data-theme="strike2030"] .ec-card > .scrollable-x-auto,
[data-theme="strike2030"] .card-body > .table-responsive:only-child,
[data-theme="strike2030"] .card-body > .s-table-wrap:only-child,
[data-theme="strike2030"] .card-body > .scrollable-x-auto:only-child,
[data-theme="strike2030"] .s-card-b > .s-table-wrap:only-child,
[data-theme="strike2030"] .s-card-b > .scrollable-x-auto:only-child,
[data-theme="strike2030"] .ec-card-b > .ec-table-wrap:only-child,
[data-theme="strike2030"] .ec-card-b > .scrollable-x-auto:only-child {
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-theme="strike2030"] .card-body > .table-responsive:only-child,
[data-theme="strike2030"] .card-body > .s-table-wrap:only-child,
[data-theme="strike2030"] .card-body > .scrollable-x-auto:only-child,
[data-theme="strike2030"] .s-card-b > .s-table-wrap:only-child,
[data-theme="strike2030"] .s-card-b > .scrollable-x-auto:only-child,
[data-theme="strike2030"] .ec-card-b > .ec-table-wrap:only-child,
[data-theme="strike2030"] .ec-card-b > .scrollable-x-auto:only-child {
  margin: calc(var(--s-card-pad, 20px) * -1);
}

/* ==========================================================
   11 · STATI, BADGE, PILLOLE
   Una pillola dice uno stato. Il colore solo quando c'e
   un esito da comunicare.
   ========================================================== */

[data-theme="strike2030"] .s-badge,
[data-theme="strike2030"] .ec-badge,
[data-theme="strike2030"] .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--s-r-pill);
  border: 1px solid var(--s-line-strong);
  background: var(--s-surface);
  color: var(--s-fg2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

[data-theme="strike2030"] .s-badge.ok,
[data-theme="strike2030"] .ec-badge.ok,
[data-theme="strike2030"] .badge.bg-success,
[data-theme="strike2030"] .s-badge.success {
  background: var(--s-success-bg);
  border-color: var(--s-success-line);
  color: var(--s-success);
}
[data-theme="strike2030"] .s-badge.warn,
[data-theme="strike2030"] .ec-badge.warn,
[data-theme="strike2030"] .badge.bg-warning,
[data-theme="strike2030"] .s-badge.warning {
  background: var(--s-warning-bg);
  border-color: var(--s-warning-line);
  color: var(--s-warning);
}
[data-theme="strike2030"] .s-badge.danger,
[data-theme="strike2030"] .ec-badge.danger,
[data-theme="strike2030"] .badge.bg-danger {
  background: var(--s-danger-bg);
  border-color: var(--s-danger-line);
  color: var(--s-danger);
}
[data-theme="strike2030"] .s-badge.primary,
[data-theme="strike2030"] .ec-badge.primary,
[data-theme="strike2030"] .badge.bg-primary {
  background: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--s-on-primary);
}
[data-theme="strike2030"] .ec-badge.sep,
[data-theme="strike2030"] .s-badge.quiet {
  background: transparent;
  border-color: var(--s-line);
  color: var(--s-muted);
}
[data-theme="strike2030"] .ec-badge.sm,
[data-theme="strike2030"] .s-badge.sm { height: 20px; padding: 0 8px; font-size: 11px; }

/* Il punto: uno stato senza parole, accanto a cio che descrive. */
[data-theme="strike2030"] .s-dot,
[data-theme="strike2030"] .ec-nav-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--s-r-pill);
  background: var(--s-stone);
}
[data-theme="strike2030"] .s-dot.ok,
[data-theme="strike2030"] .ec-nav-dot.ok { background: var(--s-success); }
[data-theme="strike2030"] .s-dot.warn { background: var(--s-warning); }
[data-theme="strike2030"] .s-dot.danger { background: var(--s-danger); }

/* Etichetta rimovibile. */
[data-theme="strike2030"] .ec-chip,
[data-theme="strike2030"] .s-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--s-r-pill);
  border: 1px solid var(--s-line-strong);
  background: var(--s-surface);
  color: var(--s-fg2);
  font-size: 13px;
  white-space: nowrap;
}
[data-theme="strike2030"] .ec-chips,
[data-theme="strike2030"] .s-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-theme="strike2030"] .ec-chip-add,
[data-theme="strike2030"] .ec-chipbtn {
  cursor: pointer;
  border-style: dashed;
  color: var(--s-muted);
  transition: border-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-chip-add:hover,
[data-theme="strike2030"] .ec-chipbtn:hover { border-color: var(--s-fg); color: var(--s-fg); }

/* Avanzamento: la barra dice quanto, la cifra quanto esatto. */
[data-theme="strike2030"] .s-progress,
[data-theme="strike2030"] .ec-progress,
[data-theme="strike2030"] .progress {
  position: relative;
  height: 6px;
  border-radius: var(--s-r-pill);
  background: var(--s-soft);
  overflow: hidden;
}
[data-theme="strike2030"] .s-progress > span,
[data-theme="strike2030"] .ec-progress > span,
[data-theme="strike2030"] .progress-bar {
  display: block;
  height: 100%;
  border-radius: var(--s-r-pill);
  background: var(--s-primary);
  transition: width var(--s-wide) var(--s-ease);
}
[data-theme="strike2030"] .ec-progress-m { height: 8px; }

/* ==========================================================
   12 · AVVISI
   Un avviso dice cosa e successo e cosa si puo fare.
   ========================================================== */

[data-theme="strike2030"] .s-alert,
[data-theme="strike2030"] .ec-alert,
[data-theme="strike2030"] .ec-avviso,
[data-theme="strike2030"] .ec-nota,
[data-theme="strike2030"] .alert {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: var(--s-surface);
  color: var(--s-fg2);
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 16px;
}
[data-theme="strike2030"] .s-alert.ok,
[data-theme="strike2030"] .ec-alert.ok,
[data-theme="strike2030"] .alert-success {
  background: var(--s-success-bg);
  border-color: var(--s-success-line);
  color: var(--s-success);
}
[data-theme="strike2030"] .s-alert.warn,
[data-theme="strike2030"] .ec-alert.warn,
[data-theme="strike2030"] .ec-avviso,
[data-theme="strike2030"] .alert-warning {
  background: var(--s-warning-bg);
  border-color: var(--s-warning-line);
  color: var(--s-warning);
}
[data-theme="strike2030"] .s-alert.danger,
[data-theme="strike2030"] .ec-alert.danger,
[data-theme="strike2030"] .alert-danger {
  background: var(--s-danger-bg);
  border-color: var(--s-danger-line);
  color: var(--s-danger);
}
[data-theme="strike2030"] .alert-info {
  background: var(--s-soft);
  border-color: var(--s-line);
  color: var(--s-fg2);
}
[data-theme="strike2030"] .btn-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--s-r-control);
  background: transparent;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: opacity var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .btn-close:hover { opacity: 1; }
[data-theme="strike2030"] .btn-close::before { content: "\00d7"; }

/* La fonte: ogni risposta dice da dove viene. */
[data-theme="strike2030"] .ec-fonte,
[data-theme="strike2030"] .s-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--s-muted);
}

/* ==========================================================
   13 · MENU FLUTTUANTE
   ========================================================== */

/* Tutto cio che si apre sopra il contenuto e vetro: menu a tendina,
   menu contestuali, elenchi che compaiono. Un solo aspetto per tutti,
   anche per quelli che i template hanno dichiarato bianchi a mano. */
[data-theme="strike2030"] .s-menu,
[data-theme="strike2030"] .ec-pop,
[data-theme="strike2030"] .ec-drop,
[data-theme="strike2030"] .ec-menu-pop,
[data-theme="strike2030"] .ec-ver-pop,
[data-theme="strike2030"] #chat-conv,
[data-theme="strike2030"] .s-account-menu,
[data-theme="strike2030"] .dropdown-menu {
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--s-glass-line);
  border-radius: 14px;
  /* Un menu copre il contenuto solo per il tempo in cui e aperto, ma deve
     restare leggibile: vetro corposo e sfocatura piu forte delle barre. */
  background: var(--s-glass-solid);
  backdrop-filter: var(--s-blur-pop);
  -webkit-backdrop-filter: var(--s-blur-pop);
  box-shadow: var(--s-shadow-pop);
  color: var(--s-fg);
  font-size: 14px;
  animation: s-pop var(--s-normal) var(--s-ease);
}
/* Il menu a tendina sta chiuso finche qualcuno non lo apre: senza il CSS di
   Bootstrap questa regola manca, e il pannello resterebbe sempre a schermo.
   La classe .show la mette il JS di Bootstrap. */
[data-theme="strike2030"] .dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1055;
  margin: 0;
}
[data-theme="strike2030"] .dropdown-menu.show { display: block; }
[data-theme="strike2030"] .dropdown-menu[data-bs-popper] { top: 100%; left: 0; }
[data-theme="strike2030"] .dropdown-menu-end[data-bs-popper] { right: 0; left: auto; }
/* Il piede della barra ancora il menu che gli si apre sopra. */
[data-theme="strike2030"] .sidebar-footer { position: relative; }

[data-theme="strike2030"] .s-menu-item,
[data-theme="strike2030"] .ec-menu-pop button,
[data-theme="strike2030"] .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--s-fg);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--s-fast) var(--s-ease);
}
[data-theme="strike2030"] .s-menu-item:hover,
[data-theme="strike2030"] .ec-menu-pop button:hover,
[data-theme="strike2030"] .dropdown-item:hover,
[data-theme="strike2030"] .dropdown-item:focus {
  background: var(--s-press);
  color: var(--s-fg);
}
[data-theme="strike2030"] .s-menu-item.danger,
[data-theme="strike2030"] .ec-menu-pop button.dang,
[data-theme="strike2030"] .dropdown-item.danger { color: var(--s-danger); }
[data-theme="strike2030"] .s-menu-shortcut {
  margin-left: auto;
  font-size: 12px;
  color: var(--s-muted);
}
/* Il menu della persona: si apre sotto l'avatar, in alto a destra.
   Porta in testa chi sei, poi le voci, e l'uscita in fondo. */
/* Il menu della persona si ancora da se: sta fuori dalla barra (vedi il
   guscio), quindi nessuno lo posiziona al posto suo. Si appoggia sotto la
   barra, allineato al bordo destro come l'avatar che lo apre. */
[data-theme="strike2030"] .s-account-menu {
  position: fixed;
  top: calc(var(--s-gap) + var(--s-topbar-h) + 8px);
  right: var(--s-gap);
  z-index: 1055;
  width: 280px;
  padding: 6px;
  border-radius: var(--s-r-panel);
  transform-origin: top right;
  margin: 0;
}
[data-theme="strike2030"] .s-account-menu[hidden] { display: none; }
[data-theme="strike2030"] .s-account-menu li { list-style: none; }
[data-theme="strike2030"] .s-account-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px 14px;
}
[data-theme="strike2030"] .s-account-head .user-avatar,
[data-theme="strike2030"] .s-account-head .s-avatar-btn {
  margin: 0;
  width: 40px;
  height: 40px;
  cursor: default;
}
[data-theme="strike2030"] .s-account-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--s-fg);
}
[data-theme="strike2030"] .s-account-role {
  font-size: 12px;
  color: var(--s-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* L'uscita e l'unica voce che cambia colore: e l'unica che interrompe. */
[data-theme="strike2030"] .s-menu-item.danger,
[data-theme="strike2030"] .ec-menu-pop button.dang,
[data-theme="strike2030"] .dropdown-item.danger { color: var(--s-danger); }
[data-theme="strike2030"] .s-menu-item.danger:hover,
[data-theme="strike2030"] .ec-menu-pop button.dang:hover,
[data-theme="strike2030"] .dropdown-item.danger:hover {
  background: var(--s-danger-bg);
  color: var(--s-danger);
}

[data-theme="strike2030"] .dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  border: 0;
  background: var(--s-line);
  opacity: 1;
}

/* ==========================================================
   14 · DIALOGO DI CONFERMA
   Dice cosa succede e come si torna indietro.
   ========================================================== */

[data-theme="strike2030"] .s-modal,
[data-theme="strike2030"] .ec-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: s-fade var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-modal.open,
[data-theme="strike2030"] .ec-modal.open { display: flex; }

[data-theme="strike2030"] .s-modal-card,
[data-theme="strike2030"] .ec-modal-card {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-panel);
  background: var(--s-surface);
  box-shadow: var(--s-shadow);
  animation: s-up var(--s-wide) var(--s-ease);
  overflow: hidden;
}
[data-theme="strike2030"] .s-modal-h,
[data-theme="strike2030"] .ec-modal-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
[data-theme="strike2030"] .s-modal-b,
[data-theme="strike2030"] .ec-modal-b {
  padding: 10px 24px 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 22px;
  color: var(--s-fg2);
}
[data-theme="strike2030"] .s-modal-f,
[data-theme="strike2030"] .ec-modal-f {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--s-line);
}

/* Su mobile il dialogo sale da sotto. */
@media (max-width: 640px) {
  [data-theme="strike2030"] .s-modal,
  [data-theme="strike2030"] .ec-modal { padding: 0; align-items: flex-end; }
  [data-theme="strike2030"] .s-modal-card,
  [data-theme="strike2030"] .ec-modal-card {
    max-width: none;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    animation: s-sheet var(--s-wide) var(--s-ease);
  }
  [data-theme="strike2030"] .s-modal-f,
  [data-theme="strike2030"] .ec-modal-f { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   15 · PASSAGGI
   Tre al massimo. Se ne servono di piu, sono due flussi.
   ========================================================== */

[data-theme="strike2030"] .s-steps,
[data-theme="strike2030"] .ec-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
/* Cio che segue i passaggi (il pannello del passaggio scelto) prende una riga
   tutta sua: dentro lo stesso contenitore dei passaggi si contenderebbe lo
   spazio con loro, schiacciandoli. */
[data-theme="strike2030"] .ec-steps-extra {
  flex: 1 0 100%;
  min-width: 0;
  margin-top: 20px;
}
/* Ogni passaggio e una colonna: il segno e la linea in alto, sotto il nome e
   cosa manca. Le colonne si dividono lo spazio in parti uguali, cosi la linea
   che le unisce corre dritta. */
[data-theme="strike2030"] .s-step,
[data-theme="strike2030"] .ec-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 16px;
  color: var(--s-muted);
  font-size: 14px;
  text-decoration: none;
}
[data-theme="strike2030"] .ec-step:last-child { padding-right: 0; }
/* Il segno e la linea stanno sulla stessa riga: la linea riempie cio che resta. */
[data-theme="strike2030"] .ec-step-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="strike2030"] .s-step-dot,
[data-theme="strike2030"] .ec-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--s-r-pill);
  border: 1px solid var(--s-line-strong);
  background: var(--s-surface);
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
[data-theme="strike2030"] .s-step.active,
[data-theme="strike2030"] .ec-step.active { color: var(--s-fg); font-weight: 500; }
[data-theme="strike2030"] .s-step.active .s-step-dot,
[data-theme="strike2030"] .ec-step.active .ec-step-dot,
[data-theme="strike2030"] .ec-step.active .ec-step-badge,
[data-theme="strike2030"] .s-step.done .s-step-dot,
[data-theme="strike2030"] .ec-step.done .ec-step-dot {
  background: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--s-on-primary);
}
[data-theme="strike2030"] .s-step-line,
[data-theme="strike2030"] .ec-step-line {
  flex: 1 1 24px;
  min-width: 16px;
  height: 1px;
  background: var(--s-line-strong);
}
[data-theme="strike2030"] .ec-step-tit {
  font-size: 14px;
  font-weight: 500;
  color: var(--s-fg);
}
[data-theme="strike2030"] .ec-step-sub {
  font-size: 12px;
  line-height: 18px;
  color: var(--s-muted);
}
/* L'esito del passaggio: una pillola sotto, non accanto. */
[data-theme="strike2030"] .ec-step-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--s-r-pill);
  border: 1px solid var(--s-line-strong);
  background: var(--s-surface);
  color: var(--s-muted);
  font-size: 11px;
  font-weight: 500;
}
[data-theme="strike2030"] .ec-step.done .ec-step-badge {
  background: var(--s-success-bg);
  border-color: var(--s-success-line);
  color: var(--s-success);
}
[data-theme="strike2030"] .ec-step.warn .ec-step-dot,
[data-theme="strike2030"] .ec-step.warn .ec-step-badge {
  background: var(--s-warning-bg);
  border-color: var(--s-warning-line);
  color: var(--s-warning);
}
/* Il passaggio in corso e quello che chiede attenzione ora. */
[data-theme="strike2030"] .ec-step.now .ec-step-dot {
  background: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--s-on-primary);
}
[data-theme="strike2030"] .ec-step.todo { opacity: .6; }

@media (max-width: 860px) {
  [data-theme="strike2030"] .s-steps,
  [data-theme="strike2030"] .ec-steps { flex-wrap: wrap; gap: 16px; }
  [data-theme="strike2030"] .ec-step { flex: 1 1 160px; padding-right: 0; }
  [data-theme="strike2030"] .ec-step-line { display: none; }
}

/* ==========================================================
   16 · NOTIFICA BREVE
   Compare in basso, si spiega e offre di annullare.
   ========================================================== */

[data-theme="strike2030"] .s-toast,
[data-theme="strike2030"] .ec-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1060;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--s-r-pill);
  background: rgba(31, 31, 31, 0.86);
  backdrop-filter: var(--s-blur);
  -webkit-backdrop-filter: var(--s-blur);
  border: 1px solid rgba(247, 247, 245, 0.10);
  color: #F7F7F5;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--s-shadow);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--s-wide) var(--s-ease),
              transform var(--s-wide) var(--s-ease),
              visibility var(--s-wide);
}
[data-theme="strike2030"] .s-toast.open,
[data-theme="strike2030"] .ec-toast.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
[data-theme="strike2030"] .ec-toast .ok { color: #6FB48E; }
[data-theme="strike2030"] .ec-toast .err { color: #D97A68; }

@media (max-width: 640px) {
  [data-theme="strike2030"] .s-toast,
  [data-theme="strike2030"] .ec-toast { bottom: 84px; max-width: calc(100vw - 32px); }
}

/* ==========================================================
   17 · PANNELLO LATERALE
   Il dettaglio si apre accanto, senza lasciare la pagina.
   ========================================================== */

[data-theme="strike2030"] .s-drawer,
[data-theme="strike2030"] .ec-drawer {
  position: fixed;
  top: calc(var(--s-gap) * 2 + var(--s-topbar-h));
  right: var(--s-gap);
  bottom: var(--s-gap);
  z-index: 1048;
  width: min(560px, calc(100vw - var(--s-gap) * 2));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-panel);
  background: var(--s-surface);
  box-shadow: var(--s-shadow);
  transform: translateX(calc(100% + var(--s-gap) * 2));
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: transform var(--s-wide) var(--s-ease),
              opacity var(--s-wide) var(--s-ease),
              visibility var(--s-wide);
}
[data-theme="strike2030"] .s-drawer.open,
[data-theme="strike2030"] .ec-drawer.open {
  transform: none;
  opacity: 1;
  visibility: visible;
}
[data-theme="strike2030"] .ec-drawer-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--s-line);
}
[data-theme="strike2030"] .ec-drawer-h .t { font-size: 17px; font-weight: 500; }
[data-theme="strike2030"] .ec-drawer-h .s { font-size: 13px; color: var(--s-muted); }
[data-theme="strike2030"] .ec-drawer-b { flex-grow: 1; min-height: 0; background: var(--s-bg); }
[data-theme="strike2030"] .ec-drawer-b iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
[data-theme="strike2030"] .ec-drawer-f {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--s-line);
}
[data-theme="strike2030"] .ec-drawer-x {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: var(--s-r-control);
  background: transparent;
  color: var(--s-muted);
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-drawer-x:hover { background: var(--s-hover); color: var(--s-fg); }

@media (max-width: 640px) {
  [data-theme="strike2030"] .s-drawer,
  [data-theme="strike2030"] .ec-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
}

/* ==========================================================
   18 · ASSISTENTE
   L'AI assiste, non invade: sempre con la fonte e con
   la possibilita di annullare.
   ========================================================== */

[data-theme="strike2030"] .s-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
  animation: s-up var(--s-wide) var(--s-ease);
}
[data-theme="strike2030"] .s-chat-msg.user { margin-left: auto; align-items: flex-end; }

[data-theme="strike2030"] .s-bubble {
  padding: 12px 16px;
  border-radius: var(--s-r-card);
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  font-size: 15px;
  line-height: 24px;
  color: var(--s-fg);
}
[data-theme="strike2030"] .s-chat-msg.user .s-bubble {
  background: var(--s-primary);
  border-color: var(--s-primary);
  color: var(--s-on-primary);
}

/* Suggerimenti sopra il campo. */
[data-theme="strike2030"] .s-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme="strike2030"] .s-suggestion {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-pill);
  background: var(--s-surface);
  color: var(--s-fg2);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-suggestion:hover { background: var(--s-hover); color: var(--s-fg); }

/* Sta pensando. */
[data-theme="strike2030"] .s-typing { display: inline-flex; align-items: center; gap: 4px; }
[data-theme="strike2030"] .s-typing > span {
  width: 6px;
  height: 6px;
  border-radius: var(--s-r-pill);
  background: var(--s-muted);
  animation: s-dot 1.4s infinite;
}
[data-theme="strike2030"] .s-typing > span:nth-child(2) { animation-delay: .2s; }
[data-theme="strike2030"] .s-typing > span:nth-child(3) { animation-delay: .4s; }

/* ==========================================================
   19 · BRICIOLE E MINUTERIA
   ========================================================== */

[data-theme="strike2030"] .s-crumbs,
[data-theme="strike2030"] .ec-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--s-muted);
}
[data-theme="strike2030"] .ec-crumbs a,
[data-theme="strike2030"] .ec-crumb { color: var(--s-muted); white-space: nowrap; }
[data-theme="strike2030"] .ec-crumbs a:hover { color: var(--s-fg); }
[data-theme="strike2030"] .ec-crumbs .last {
  color: var(--s-fg);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Il separatore lo mette il markup: aggiungerne un altro qui lo
   raddoppierebbe. Qui si decide solo che aspetto ha. */
[data-theme="strike2030"] .ec-crumbs .sep,
[data-theme="strike2030"] .s-crumbs .sep { color: var(--s-stone); }

[data-theme="strike2030"] .ec-link,
[data-theme="strike2030"] .s-link {
  color: var(--s-fg);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--s-line-strong);
  transition: border-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-link:hover,
[data-theme="strike2030"] .s-link:hover { border-bottom-color: var(--s-fg); }

[data-theme="strike2030"] .ec-version,
[data-theme="strike2030"] .s-version {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--s-muted);
}

[data-theme="strike2030"] .ec-dashed {
  border: 1px dashed var(--s-line-strong);
  border-radius: var(--s-r-card);
}

[data-theme="strike2030"] .ec-tile,
[data-theme="strike2030"] .s-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: var(--s-surface);
  transition: border-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-tile:hover { border-color: var(--s-line-strong); }
[data-theme="strike2030"] .ec-tile-tit { font-size: 17px; font-weight: 500; }
[data-theme="strike2030"] .ec-tile-desc { font-size: 13px; line-height: 20px; color: var(--s-muted); }
[data-theme="strike2030"] .ec-tile-ico { color: var(--s-fg2); font-size: 20px; }

/* Attesa. */
[data-theme="strike2030"] .spinner-border,
[data-theme="strike2030"] .s-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--s-line-strong);
  border-top-color: var(--s-fg);
  border-radius: var(--s-r-pill);
  animation: s-spin .8s linear infinite;
  vertical-align: middle;
}

/* Il numero che conta: grande, tabellare. */
[data-theme="strike2030"] .ec-num,
[data-theme="strike2030"] .s-metric {
  font-size: 22px;
  line-height: 30px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--s-fg);
}
[data-theme="strike2030"] .ec-count,
[data-theme="strike2030"] .ec-nav-n {
  font-size: 12px;
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}

[data-theme="strike2030"] .ec-totbar,
[data-theme="strike2030"] .ec-selbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: var(--s-soft);
  font-size: 14px;
}

[data-theme="strike2030"] .ec-lowconf { color: var(--s-warning); }
/* Il pulsante che manda nel cestino: sta zitto finche non lo si sfiora, e
   solo allora si colora del rosso di sistema. */
[data-theme="strike2030"] .ec-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--s-r-control);
  background: transparent;
  color: var(--s-muted);
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-del:hover { background: var(--s-danger-bg); color: var(--s-danger); }
/* Una colonna di sole azioni sta stretta, a destra, e non va a capo. */
[data-theme="strike2030"] .s-table td.chev,
[data-theme="strike2030"] .ec-table td.chev {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
[data-theme="strike2030"] .ec-saved { color: var(--s-success); }

/* Il contenuto entra dal basso, una volta sola. */
[data-theme="strike2030"] .s-enter { animation: s-up var(--s-wide) var(--s-ease); }

/* ==========================================================
   20 · UTILITA
   Il minimo indispensabile, con i nomi di Bootstrap: i
   template scritti prima continuano a disporsi come si deve
   senza che il CSS di Bootstrap venga caricato.
   Per comporre una pagina nuova si usano i componenti sopra,
   non queste classi.
   ========================================================== */

/* L'attributo hidden vince su qualunque display: una riga filtrata via deve
   sparire davvero, anche quando porta una classe che la disporrebbe. */
[data-theme="strike2030"] [hidden] { display: none !important; }

/* — Disposizione — */
[data-theme="strike2030"] .d-flex { display: flex !important; }
[data-theme="strike2030"] .d-inline-flex { display: inline-flex !important; }
[data-theme="strike2030"] .d-block { display: block !important; }
[data-theme="strike2030"] .d-inline { display: inline !important; }
[data-theme="strike2030"] .d-inline-block { display: inline-block !important; }
[data-theme="strike2030"] .d-grid { display: grid !important; }
[data-theme="strike2030"] .d-none { display: none !important; }

[data-theme="strike2030"] .flex-column { flex-direction: column !important; }
[data-theme="strike2030"] .flex-row { flex-direction: row !important; }
[data-theme="strike2030"] .flex-wrap { flex-wrap: wrap !important; }
[data-theme="strike2030"] .flex-nowrap { flex-wrap: nowrap !important; }
[data-theme="strike2030"] .flex-grow-1 { flex-grow: 1 !important; }
[data-theme="strike2030"] .flex-shrink-0 { flex-shrink: 0 !important; }
[data-theme="strike2030"] .flex-fill { flex: 1 1 auto !important; }

[data-theme="strike2030"] .align-items-center { align-items: center !important; }
[data-theme="strike2030"] .align-items-start { align-items: flex-start !important; }
[data-theme="strike2030"] .align-items-end { align-items: flex-end !important; }
[data-theme="strike2030"] .align-items-baseline { align-items: baseline !important; }
[data-theme="strike2030"] .align-items-stretch { align-items: stretch !important; }
[data-theme="strike2030"] .align-self-center { align-self: center !important; }
[data-theme="strike2030"] .align-self-start { align-self: flex-start !important; }
[data-theme="strike2030"] .align-self-end { align-self: flex-end !important; }

[data-theme="strike2030"] .justify-content-center { justify-content: center !important; }
[data-theme="strike2030"] .justify-content-between { justify-content: space-between !important; }
[data-theme="strike2030"] .justify-content-end { justify-content: flex-end !important; }
[data-theme="strike2030"] .justify-content-start { justify-content: flex-start !important; }
[data-theme="strike2030"] .justify-content-around { justify-content: space-around !important; }

/* — Distanze: la griglia di base e 4 px — */
[data-theme="strike2030"] .gap-0 { gap: 0 !important; }
[data-theme="strike2030"] .gap-1 { gap: 4px !important; }
[data-theme="strike2030"] .gap-2 { gap: 8px !important; }
[data-theme="strike2030"] .gap-3 { gap: 16px !important; }
[data-theme="strike2030"] .gap-4 { gap: 24px !important; }
[data-theme="strike2030"] .gap-5 { gap: 48px !important; }

[data-theme="strike2030"] .m-0 { margin: 0 !important; }
[data-theme="strike2030"] .m-1 { margin: 4px !important; }
[data-theme="strike2030"] .m-2 { margin: 8px !important; }
[data-theme="strike2030"] .m-3 { margin: 16px !important; }
[data-theme="strike2030"] .m-4 { margin: 24px !important; }
[data-theme="strike2030"] .m-5 { margin: 48px !important; }
[data-theme="strike2030"] .mx-auto { margin-left: auto !important; margin-right: auto !important; }
[data-theme="strike2030"] .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
[data-theme="strike2030"] .my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
[data-theme="strike2030"] .my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
[data-theme="strike2030"] .my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }

[data-theme="strike2030"] .mt-0 { margin-top: 0 !important; }
[data-theme="strike2030"] .mt-1 { margin-top: 4px !important; }
[data-theme="strike2030"] .mt-2 { margin-top: 8px !important; }
[data-theme="strike2030"] .mt-3 { margin-top: 16px !important; }
[data-theme="strike2030"] .mt-4 { margin-top: 24px !important; }
[data-theme="strike2030"] .mt-5 { margin-top: 48px !important; }
[data-theme="strike2030"] .mb-0 { margin-bottom: 0 !important; }
[data-theme="strike2030"] .mb-1 { margin-bottom: 4px !important; }
[data-theme="strike2030"] .mb-2 { margin-bottom: 8px !important; }
[data-theme="strike2030"] .mb-3 { margin-bottom: 16px !important; }
[data-theme="strike2030"] .mb-4 { margin-bottom: 24px !important; }
[data-theme="strike2030"] .mb-5 { margin-bottom: 48px !important; }
[data-theme="strike2030"] .ms-0 { margin-left: 0 !important; }
[data-theme="strike2030"] .ms-1 { margin-left: 4px !important; }
[data-theme="strike2030"] .ms-2 { margin-left: 8px !important; }
[data-theme="strike2030"] .ms-3 { margin-left: 16px !important; }
[data-theme="strike2030"] .ms-auto { margin-left: auto !important; }
[data-theme="strike2030"] .me-0 { margin-right: 0 !important; }
[data-theme="strike2030"] .me-1 { margin-right: 4px !important; }
[data-theme="strike2030"] .me-2 { margin-right: 8px !important; }
[data-theme="strike2030"] .me-3 { margin-right: 16px !important; }
[data-theme="strike2030"] .me-auto { margin-right: auto !important; }

[data-theme="strike2030"] .p-0 { padding: 0 !important; }
[data-theme="strike2030"] .p-1 { padding: 4px !important; }
[data-theme="strike2030"] .p-2 { padding: 8px !important; }
[data-theme="strike2030"] .p-3 { padding: 16px !important; }
[data-theme="strike2030"] .p-4 { padding: 24px !important; }
[data-theme="strike2030"] .p-5 { padding: 48px !important; }
[data-theme="strike2030"] .pt-0 { padding-top: 0 !important; }
[data-theme="strike2030"] .pt-2 { padding-top: 8px !important; }
[data-theme="strike2030"] .pt-3 { padding-top: 16px !important; }
[data-theme="strike2030"] .pb-0 { padding-bottom: 0 !important; }
[data-theme="strike2030"] .pb-2 { padding-bottom: 8px !important; }
[data-theme="strike2030"] .pb-3 { padding-bottom: 16px !important; }
[data-theme="strike2030"] .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
[data-theme="strike2030"] .px-2 { padding-left: 8px !important; padding-right: 8px !important; }
[data-theme="strike2030"] .px-3 { padding-left: 16px !important; padding-right: 16px !important; }
[data-theme="strike2030"] .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
[data-theme="strike2030"] .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
[data-theme="strike2030"] .py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }

/* — Griglia a 12 colonne — */
[data-theme="strike2030"] .container,
[data-theme="strike2030"] .container-fluid {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
[data-theme="strike2030"] .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
[data-theme="strike2030"] .row > * {
  /* Una colonna che a questa larghezza non dichiara una misura prende
     tutta la riga (col-md-6 sotto i 768 px): senza, si stringerebbe al
     suo contenuto. E la regola di Bootstrap, che qui non c'e. */
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  min-width: 0;
  box-sizing: border-box;
}
/* Le colonne che vanno a capo si distanziano da sole: senza, sul telefono
   due card affiancate sul desktop si toccherebbero una sopra l'altra. Le
   righe con g-* portano gia il loro spazio. */
[data-theme="strike2030"] .row:not([class*="g-"]) { row-gap: 16px; }
/* Una card sola nella sua colonna prende l'altezza della riga: le card
   affiancate finiscono alla stessa quota. */
[data-theme="strike2030"] .row > [class*="col"] > .card:only-child:not([class*="mb-"]),
[data-theme="strike2030"] .row > [class*="col"] > .s-card:only-child:not([class*="mb-"]) { height: 100%; }
[data-theme="strike2030"] .row.g-0 { margin: 0; }
[data-theme="strike2030"] .row.g-0 > * { padding: 0; }
[data-theme="strike2030"] .row.g-2 { margin-bottom: -8px; }
[data-theme="strike2030"] .row.g-2 > * { margin-bottom: 8px; }
[data-theme="strike2030"] .row.g-3 { margin-bottom: -16px; }
[data-theme="strike2030"] .row.g-3 > * { margin-bottom: 16px; }
[data-theme="strike2030"] .row.g-4 { margin-bottom: -24px; }
[data-theme="strike2030"] .row.g-4 > * { margin-bottom: 24px; }

[data-theme="strike2030"] .col { flex: 1 0 0%; }
[data-theme="strike2030"] .col-auto { flex: 0 0 auto; width: auto; }
[data-theme="strike2030"] .col-1 { flex: 0 0 auto; width: 8.3333%; }
[data-theme="strike2030"] .col-2 { flex: 0 0 auto; width: 16.6667%; }
[data-theme="strike2030"] .col-3 { flex: 0 0 auto; width: 25%; }
[data-theme="strike2030"] .col-4 { flex: 0 0 auto; width: 33.3333%; }
[data-theme="strike2030"] .col-5 { flex: 0 0 auto; width: 41.6667%; }
[data-theme="strike2030"] .col-6 { flex: 0 0 auto; width: 50%; }
[data-theme="strike2030"] .col-7 { flex: 0 0 auto; width: 58.3333%; }
[data-theme="strike2030"] .col-8 { flex: 0 0 auto; width: 66.6667%; }
[data-theme="strike2030"] .col-9 { flex: 0 0 auto; width: 75%; }
[data-theme="strike2030"] .col-10 { flex: 0 0 auto; width: 83.3333%; }
[data-theme="strike2030"] .col-11 { flex: 0 0 auto; width: 91.6667%; }
[data-theme="strike2030"] .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  [data-theme="strike2030"] .col-sm-1 { flex: 0 0 auto; width: 8.3333%; }
  [data-theme="strike2030"] .col-sm-2 { flex: 0 0 auto; width: 16.6667%; }
  [data-theme="strike2030"] .col-sm-3 { flex: 0 0 auto; width: 25%; }
  [data-theme="strike2030"] .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
  [data-theme="strike2030"] .col-sm-5 { flex: 0 0 auto; width: 41.6667%; }
  [data-theme="strike2030"] .col-sm-6 { flex: 0 0 auto; width: 50%; }
  [data-theme="strike2030"] .col-sm-7 { flex: 0 0 auto; width: 58.3333%; }
  [data-theme="strike2030"] .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
  [data-theme="strike2030"] .col-sm-9 { flex: 0 0 auto; width: 75%; }
  [data-theme="strike2030"] .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
  [data-theme="strike2030"] .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
  [data-theme="strike2030"] .col-md-3 { flex: 0 0 auto; width: 25%; }
  [data-theme="strike2030"] .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  [data-theme="strike2030"] .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  [data-theme="strike2030"] .col-md-6 { flex: 0 0 auto; width: 50%; }
  [data-theme="strike2030"] .col-md-7 { flex: 0 0 auto; width: 58.3333%; }
  [data-theme="strike2030"] .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  [data-theme="strike2030"] .col-md-9 { flex: 0 0 auto; width: 75%; }
  [data-theme="strike2030"] .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
  [data-theme="strike2030"] .col-xl-3 { flex: 0 0 auto; width: 25%; }
  [data-theme="strike2030"] .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
  [data-theme="strike2030"] .col-xl-6 { flex: 0 0 auto; width: 50%; }
  [data-theme="strike2030"] .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
  [data-theme="strike2030"] .col-xl-9 { flex: 0 0 auto; width: 75%; }
}

/* — Comparse e sparizioni per larghezza — */
@media (max-width: 575.98px) {
  [data-theme="strike2030"] .d-sm-none { display: none !important; }
}
@media (min-width: 576px) {
  [data-theme="strike2030"] .d-sm-block { display: block !important; }
  [data-theme="strike2030"] .d-sm-flex { display: flex !important; }
  [data-theme="strike2030"] .d-sm-inline { display: inline !important; }
}
@media (max-width: 767.98px) {
  [data-theme="strike2030"] .d-md-block,
  [data-theme="strike2030"] .d-md-flex,
  [data-theme="strike2030"] .d-md-inline,
  [data-theme="strike2030"] .d-md-inline-block,
  [data-theme="strike2030"] .d-md-inline-flex { display: none !important; }
}
@media (min-width: 768px) {
  [data-theme="strike2030"] .d-md-block { display: block !important; }
  [data-theme="strike2030"] .d-md-flex { display: flex !important; }
  [data-theme="strike2030"] .d-md-inline { display: inline !important; }
  [data-theme="strike2030"] .d-md-inline-block { display: inline-block !important; }
  [data-theme="strike2030"] .d-md-inline-flex { display: inline-flex !important; }
  [data-theme="strike2030"] .d-md-none { display: none !important; }
}
@media (max-width: 991.98px) {
  [data-theme="strike2030"] .d-lg-block,
  [data-theme="strike2030"] .d-lg-flex,
  [data-theme="strike2030"] .d-lg-inline,
  [data-theme="strike2030"] .d-lg-inline-flex { display: none !important; }
}
@media (min-width: 992px) {
  [data-theme="strike2030"] .d-lg-block { display: block !important; }
  [data-theme="strike2030"] .d-lg-flex { display: flex !important; }
  [data-theme="strike2030"] .d-lg-inline { display: inline !important; }
  [data-theme="strike2030"] .d-lg-inline-flex { display: inline-flex !important; }
  [data-theme="strike2030"] .d-lg-none { display: none !important; }
}

/* — Misure — */
[data-theme="strike2030"] .w-100 { width: 100% !important; }
[data-theme="strike2030"] .w-auto { width: auto !important; }
[data-theme="strike2030"] .h-100 { height: 100% !important; }
[data-theme="strike2030"] .min-w-0 { min-width: 0 !important; }
[data-theme="strike2030"] .mw-100 { max-width: 100% !important; }

/* — Testo — */
[data-theme="strike2030"] .text-center { text-align: center !important; }
[data-theme="strike2030"] .text-start { text-align: left !important; }
[data-theme="strike2030"] .text-end { text-align: right !important; }
[data-theme="strike2030"] .text-muted { color: var(--s-muted) !important; }
[data-theme="strike2030"] .text-danger { color: var(--s-danger) !important; }
[data-theme="strike2030"] .text-success { color: var(--s-success) !important; }
[data-theme="strike2030"] .text-warning { color: var(--s-warning) !important; }
[data-theme="strike2030"] .text-reset { color: inherit !important; }
[data-theme="strike2030"] .text-nowrap { white-space: nowrap !important; }
[data-theme="strike2030"] .text-decoration-none { text-decoration: none !important; border-bottom: 0 !important; }
[data-theme="strike2030"] .text-uppercase { text-transform: uppercase !important; }
[data-theme="strike2030"] .text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0;
}
[data-theme="strike2030"] .small { font-size: 13px !important; line-height: 20px !important; }
[data-theme="strike2030"] .fw-medium { font-weight: 500 !important; }
[data-theme="strike2030"] .fw-semibold { font-weight: 600 !important; }
[data-theme="strike2030"] .fw-bold { font-weight: 600 !important; }
[data-theme="strike2030"] .fw-normal { font-weight: 400 !important; }
[data-theme="strike2030"] .fst-italic { font-style: italic !important; }

/* — Fondi e bordi — */
[data-theme="strike2030"] .bg-transparent { background: transparent !important; }
[data-theme="strike2030"] .bg-body { background: var(--s-bg) !important; }
[data-theme="strike2030"] .bg-white { background: var(--s-surface) !important; }
[data-theme="strike2030"] .border-0 { border: 0 !important; }
[data-theme="strike2030"] .border { border: 1px solid var(--s-line) !important; }
[data-theme="strike2030"] .border-top { border-top: 1px solid var(--s-line) !important; }
[data-theme="strike2030"] .border-bottom { border-bottom: 1px solid var(--s-line) !important; }
[data-theme="strike2030"] .rounded { border-radius: var(--s-r-control) !important; }
[data-theme="strike2030"] .rounded-pill { border-radius: var(--s-r-pill) !important; }

/* — Posizione e scorrimento — */
[data-theme="strike2030"] .position-relative { position: relative !important; }
[data-theme="strike2030"] .position-absolute { position: absolute !important; }
[data-theme="strike2030"] .position-fixed { position: fixed !important; }
[data-theme="strike2030"] .position-sticky { position: sticky !important; }
[data-theme="strike2030"] .overflow-auto { overflow: auto !important; }
[data-theme="strike2030"] .overflow-hidden { overflow: hidden !important; }
[data-theme="strike2030"] .scrollable-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  min-width: 0;
}
[data-theme="strike2030"] .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   21 · ASSISTENTE — IL PANNELLO
   Fluttua come tutto cio che si sovrappone: staccato dai
   bordi, in vetro, sotto la barra superiore. Non e una
   colonna attaccata al lato dello schermo.
   Le regole valgono anche per i pannelli che i template
   hanno dichiarato bianchi e a tutta altezza.
   ========================================================== */

[data-theme="strike2030"] .s-assistant,
[data-theme="strike2030"] #chat-pan {
  position: fixed;
  right: var(--s-gap);
  top: calc(var(--s-gap) * 2 + var(--s-topbar-h));
  bottom: var(--s-gap);
  left: auto;
  width: min(480px, calc(100vw - var(--s-gap) * 2));
  z-index: 1046;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--s-glass-line);
  border-radius: var(--s-r-panel);
  background: var(--s-glass-solid);
  backdrop-filter: var(--s-blur-pop);
  -webkit-backdrop-filter: var(--s-blur-pop);
  box-shadow: var(--s-shadow);
  overflow: hidden;
}
[data-theme="strike2030"] .s-assistant.open,
[data-theme="strike2030"] #chat-pan.open {
  display: flex;
  animation: s-drawer var(--s-wide) var(--s-ease);
}

/* Intestazione: chi sta rispondendo, e le azioni sulla conversazione. */
[data-theme="strike2030"] #chat-pan .chat-h {
  gap: 10px;
  padding: 16px 12px 16px 18px;
  border-bottom: 1px solid var(--s-line);
  background: transparent;
}
[data-theme="strike2030"] #chat-pan .chat-h .ico {
  width: 32px;
  height: 32px;
  border-radius: var(--s-r-control);
  background: var(--s-soft);
  color: var(--s-fg2);
}
[data-theme="strike2030"] #chat-pan .chat-h .t {
  font-size: 14px;
  font-weight: 500;
  color: var(--s-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="strike2030"] #chat-pan .chat-h .s {
  font-size: 12px;
  color: var(--s-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Il pannello e stretto: i pulsanti della conversazione tengono l'icona e
   lasciano andare la parola, che resta nel titolo del pulsante. */
[data-theme="strike2030"] #chat-pan .chat-h .az button span { display: none; }
[data-theme="strike2030"] #chat-pan .chat-h .az button { padding: 0; width: 32px; }
[data-theme="strike2030"] #chat-pan .chat-h .az button {
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
  color: var(--s-fg2);
  font-size: 13px;
  gap: 6px;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] #chat-pan .chat-h .az button:hover {
  background: var(--s-hover);
  border-color: var(--s-line-strong);
  color: var(--s-fg);
}

/* Il corpo lascia vedere il vetro: niente fondo proprio. */
[data-theme="strike2030"] #chat-pan .chat-b {
  padding: 18px;
  background: transparent;
  gap: 14px;
}

/* La domanda sta a destra, piena. La risposta a sinistra, su una card. */
[data-theme="strike2030"] #chat-pan .chat-m { font-size: 15px; line-height: 24px; color: var(--s-fg); }
[data-theme="strike2030"] #chat-pan .chat-m.u {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--s-r-card) var(--s-r-card) 4px var(--s-r-card);
  background: var(--s-primary);
  color: var(--s-on-primary);
  font-size: 15px;
}
/* La card della risposta e appena velata, non piena: il vetro del pannello
   deve restare visibile anche dietro il testo. Un fondo opaco qui
   spegnerebbe l'effetto proprio dove si guarda di piu. */
[data-theme="strike2030"] #chat-pan .chat-m.a {
  padding: 14px 16px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}
[data-theme="strike2030"][data-scheme="dark"] #chat-pan .chat-m.a {
  background: rgba(247, 247, 245, 0.07);
}
@media (prefers-color-scheme: dark) {
  [data-theme="strike2030"]:not([data-scheme="light"]) #chat-pan .chat-m.a {
    background: rgba(247, 247, 245, 0.07);
  }
}
[data-theme="strike2030"] #chat-pan .chat-m.a.err {
  border-color: var(--s-danger-line);
  background: var(--s-danger-bg);
  color: var(--s-danger);
}
[data-theme="strike2030"] #chat-pan .chat-m.a a {
  color: var(--s-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--s-line-strong);
}
[data-theme="strike2030"] #chat-pan .chat-m.a code {
  font-family: var(--s-mono);
  font-size: 13px;
  background: var(--s-soft);
  border-radius: 4px;
}
[data-theme="strike2030"] #chat-pan .chat-m.a pre {
  background: var(--s-charcoal);
  color: var(--s-white);
  border-radius: var(--s-r-control);
  font-size: 12px;
}
[data-theme="strike2030"] #chat-pan .chat-m.a blockquote {
  border-left: 2px solid var(--s-line-strong);
  color: var(--s-fg2);
}
[data-theme="strike2030"] #chat-pan .chat-m.a h3,
[data-theme="strike2030"] #chat-pan .chat-m.a h4,
[data-theme="strike2030"] #chat-pan .chat-m.a h5,
[data-theme="strike2030"] #chat-pan .chat-m.a h6 {
  font-size: 15px;
  font-weight: 500;
  color: var(--s-fg);
}

/* Le tabelle dentro una risposta seguono le regole delle altre. */
[data-theme="strike2030"] #chat-pan .chat-tab {
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-control);
}
[data-theme="strike2030"] #chat-pan .chat-tab th {
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--s-muted);
  border-bottom: 1px solid var(--s-line);
}
[data-theme="strike2030"] #chat-pan .chat-tab td { border-bottom: 1px solid var(--s-line); }
[data-theme="strike2030"] #chat-pan .chat-tab td + td,
[data-theme="strike2030"] #chat-pan .chat-tab th + th { border-left: 0; }
[data-theme="strike2030"] #chat-pan .chat-tab tbody tr:nth-child(even) td { background: transparent; }
[data-theme="strike2030"] #chat-pan .chat-tab tbody tr:hover td { background: var(--s-hover); }

[data-theme="strike2030"] #chat-pan .chat-card {
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: var(--s-surface);
}
[data-theme="strike2030"] #chat-pan .chat-card-img {
  border-radius: var(--s-r-control);
  background: var(--s-soft);
  color: var(--s-stone);
}
[data-theme="strike2030"] #chat-pan .chat-card-t { font-weight: 500; }

/* Il campo del messaggio, con i suggerimenti sopra. */
[data-theme="strike2030"] #chat-pan .chat-f {
  flex-shrink: 0;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--s-line);
  background: transparent;
}
[data-theme="strike2030"] #chat-pan .chat-f .riga {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
[data-theme="strike2030"] #chat-pan .chat-f textarea {
  flex-grow: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 11px 14px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-control);
  background: var(--s-surface);
  color: var(--s-fg);
  font-size: 14px;
  line-height: 22px;
  resize: none;
}
[data-theme="strike2030"] #chat-pan .chat-f textarea:focus {
  border-color: var(--s-fg);
  box-shadow: 0 0 0 3px var(--s-soft);
}
/* Inviare e l'azione principale del pannello: e l'unico pieno. */
[data-theme="strike2030"] #chat-pan .chat-f .invia {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--s-r-control);
  background: var(--s-primary);
  color: var(--s-on-primary);
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--s-fast) var(--s-ease), background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] #chat-pan .chat-f .invia:hover { background: var(--s-graphite); }
[data-theme="strike2030"][data-scheme="dark"] #chat-pan .chat-f .invia:hover { background: var(--s-stone); }
[data-theme="strike2030"] #chat-pan .chat-f .invia:active { transform: scale(.98); }
/* La nota dice il perimetro dell'assistente: sta sotto, in piccolo. */
[data-theme="strike2030"] #chat-pan .chat-f .nota {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--s-muted);
}
/* Il corpo e l'unico che scorre: cosi il piede resta dentro al pannello. */
[data-theme="strike2030"] #chat-pan .chat-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
[data-theme="strike2030"] #chat-pan .chat-h { flex-shrink: 0; }
[data-theme="strike2030"] #chat-pan .chat-sugg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-theme="strike2030"] #chat-pan .chat-sugg button,
[data-theme="strike2030"] #chat-pan .chat-sugg .sug {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-pill);
  background: var(--s-surface);
  color: var(--s-fg2);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] #chat-pan .chat-sugg button:hover,
[data-theme="strike2030"] #chat-pan .chat-sugg .sug:hover {
  background: var(--s-hover);
  color: var(--s-fg);
}

/* Come ha proceduto: sta chiuso, e si apre solo se lo si chiede. */
[data-theme="strike2030"] #chat-pan .chat-proc,
[data-theme="strike2030"] #chat-pan .chat-proc-done {
  font-size: 13px;
  color: var(--s-muted);
}
[data-theme="strike2030"] #chat-pan .chat-proc-done summary {
  cursor: pointer;
  color: var(--s-muted);
  font-size: 13px;
}
[data-theme="strike2030"] #chat-pan .chat-strum,
[data-theme="strike2030"] #chat-pan .chat-att {
  font-size: 12px;
  color: var(--s-muted);
}
[data-theme="strike2030"] #chat-pan .chat-strum .k {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  margin-left: 6px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-pill);
  background: var(--s-soft);
  font-size: 11px;
}

/* La maniglia per allargare il pannello: si vede quando serve. */
[data-theme="strike2030"] #chat-grip { width: 8px; left: -4px; }
[data-theme="strike2030"] #chat-grip:hover,
[data-theme="strike2030"] #chat-pan.ridim #chat-grip { background: var(--s-press); }

/* Il pulsante che apre l'assistente: pieno, come ogni azione principale. */
[data-theme="strike2030"] #chat-fab,
[data-theme="strike2030"] .s-assistant-fab {
  right: var(--s-gap);
  bottom: var(--s-gap);
  height: 48px;
  padding: 0 20px 0 16px;
  border-radius: var(--s-r-pill);
  background: var(--s-primary);
  color: var(--s-on-primary);
  font-family: var(--s-font);
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  box-shadow: var(--s-shadow);
  transition: transform var(--s-fast) var(--s-ease), background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] #chat-fab:hover,
[data-theme="strike2030"] .s-assistant-fab:hover {
  background: var(--s-graphite);
  transform: none;
}
[data-theme="strike2030"][data-scheme="dark"] #chat-fab:hover { background: var(--s-stone); }
[data-theme="strike2030"] #chat-fab i { font-size: 18px; }
/* Con il pannello aperto il pulsante sparisce: il pannello ha gia la sua
   croce per chiudersi, e un secondo comando accanto non aggiunge nulla. */
[data-theme="strike2030"] #chat-fab.attivo,
[data-theme="strike2030"] .s-assistant-fab.attivo { display: none; }

/* L'elenco delle conversazioni: vetro, come ogni cosa che si apre sopra. */
[data-theme="strike2030"] #chat-conv {
  top: 62px;
  right: 12px;
  width: 320px;
  padding: 6px;
  border-radius: var(--s-r-card);
}
[data-theme="strike2030"] #chat-conv .tit {
  padding: 10px 10px 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--s-muted);
  background: transparent;
  border: 0;
}
[data-theme="strike2030"] #chat-conv .conv {
  padding: 8px 10px;
  border: 0;
  border-radius: var(--s-r-control);
  transition: background-color var(--s-fast) var(--s-ease);
}
[data-theme="strike2030"] #chat-conv .conv:hover { background: var(--s-hover); }
[data-theme="strike2030"] #chat-conv .conv.att { background: var(--s-sel); }
[data-theme="strike2030"] #chat-conv .conv .c .n { font-size: 14px; color: var(--s-fg); }
[data-theme="strike2030"] #chat-conv .conv .c .d {
  font-size: 12px;
  color: var(--s-muted);
  font-family: var(--s-font);
}
[data-theme="strike2030"] #chat-conv .conv .x {
  border-radius: var(--s-r-control);
  color: var(--s-muted);
}
[data-theme="strike2030"] #chat-conv .conv .x:hover {
  background: var(--s-danger-bg);
  color: var(--s-danger);
}
[data-theme="strike2030"] #chat-conv .conv-vuoto { font-size: 13px; color: var(--s-muted); }

/* Su schermo stretto l'assistente sale dal basso, a tutta larghezza. */
@media (max-width: 640px) {
  [data-theme="strike2030"] .s-assistant,
  [data-theme="strike2030"] #chat-pan {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 88vh;
    border-radius: 24px 24px 0 0;
  }
  [data-theme="strike2030"] #chat-fab { bottom: 84px; }
  [data-theme="strike2030"] #chat-grip { display: none; }
}

/* ==========================================================
   22 · IMPAGINAZIONE A COLONNE
   Il contenuto a sinistra, il contorno a destra: avvisi,
   documenti, tutto cio che si consulta mentre si lavora.
   La colonna di destra ha una larghezza fissa perche deve
   restare leggibile, non adattarsi a quello che avanza.
   ========================================================== */

[data-theme="strike2030"] .ec-cols,
[data-theme="strike2030"] .s-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 22px;
  align-items: start;
}
[data-theme="strike2030"] .ec-cols.w396 { grid-template-columns: minmax(0, 1fr) 396px; }
[data-theme="strike2030"] .ec-cols.w440 { grid-template-columns: minmax(0, 1fr) 440px; }

[data-theme="strike2030"] .ec-col,
[data-theme="strike2030"] .s-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
/* Una colonna che resta a schermo mentre l'altra scorre. */
[data-theme="strike2030"] .ec-col.sticky {
  position: sticky;
  top: calc(var(--s-gap) * 2 + var(--s-topbar-h) + 8px);
}

[data-theme="strike2030"] .ec-stack,
[data-theme="strike2030"] .s-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Su schermo stretto le due colonne diventano una sola. */
@media (max-width: 1250px) {
  [data-theme="strike2030"] .ec-cols,
  [data-theme="strike2030"] .ec-cols.w396,
  [data-theme="strike2030"] .ec-cols.w440,
  [data-theme="strike2030"] .s-cols { grid-template-columns: minmax(0, 1fr); }
  [data-theme="strike2030"] .ec-col.sticky { position: static; }
}

/* Cio che sta in fondo a un'intestazione, spinto a destra. */
[data-theme="strike2030"] .ec-sec-side {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================
   23 · SCHEDE
   Una fila di linguette sopra un riquadro: la scelta si
   vede perche la linguetta e attaccata al contenuto, non
   perche e colorata.
   ========================================================== */

[data-theme="strike2030"] .ec-tabbar,
[data-theme="strike2030"] .s-tabbar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--s-line);
  background: transparent;
}

/* Le linguette non sono pulsanti del tema: niente contorno, niente
   altezza fissa, e gli angoli arrotondati solo in alto. */
[data-theme="strike2030"] .ec-tabbar button,
[data-theme="strike2030"] .s-tabbar button {
  height: auto;
  min-height: 0;
  padding: 9px 13px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-radius: var(--s-r-control) var(--s-r-control) 0 0;
  background: transparent;
  color: var(--s-muted);
  font-size: 13px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-tabbar button:hover,
[data-theme="strike2030"] .s-tabbar button:hover {
  background: transparent;
  color: var(--s-fg);
  transform: none;
}
/* La scheda scelta si unisce al riquadro: stesso fondo, e il bordo
   inferiore sparisce. */
[data-theme="strike2030"] .ec-tabbar button.on,
[data-theme="strike2030"] .s-tabbar button.on {
  background: var(--s-surface);
  color: var(--s-fg);
  font-weight: 500;
  border-color: var(--s-line) var(--s-line) var(--s-surface);
}
/* Il numero della scheda, e il conteggio. */
[data-theme="strike2030"] .ec-tabbar button .k,
[data-theme="strike2030"] .s-tabbar button .k {
  font-size: 11px;
  color: var(--s-stone);
  font-variant-numeric: tabular-nums;
}
[data-theme="strike2030"] .ec-tabbar button .n,
[data-theme="strike2030"] .s-tabbar button .n {
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-pill);
  background: var(--s-soft);
  color: var(--s-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
[data-theme="strike2030"] .ec-tabbar button.on .n,
[data-theme="strike2030"] .s-tabbar button.on .n { color: var(--s-fg2); }

/* Il riquadro sotto le linguette: la card che lo contiene ha gia il
   bordo, quindi qui non se ne aggiunge un altro. */
[data-theme="strike2030"] .ec-tabpane,
[data-theme="strike2030"] .s-tabpane { min-height: 0; position: relative; }
[data-theme="strike2030"] .ec-tabpane > .ec-card,
[data-theme="strike2030"] .ec-tabpane > .s-card,
[data-theme="strike2030"] .s-tabpane > .ec-card,
[data-theme="strike2030"] .s-tabpane > .s-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}
/* L'intestazione della scheda resta a vista mentre il contenuto scorre. */
[data-theme="strike2030"] .ec-tabpane > .ec-card > .ec-card-h,
[data-theme="strike2030"] .s-tabpane > .s-card > .s-card-h {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--s-surface);
}

/* ==========================================================
   24 · AVVISI DA VERIFICARE
   Un avviso dice cosa non torna e offre i modi per chiuderlo.
   Il testo sopra, i comandi sotto su una riga che va a capo:
   sono comandi, non etichette di stato.
   ========================================================== */

[data-theme="strike2030"] .ec-avviso {
  display: block;
  padding: 12px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--s-warning-line);
  border-radius: 0;
  background: transparent;
  color: var(--s-fg2);
}
[data-theme="strike2030"] .ec-avviso:last-child { border-bottom: 0; }

[data-theme="strike2030"] .ec-avviso .t {
  font-size: 13px;
  line-height: 20px;
  color: var(--s-fg);
  cursor: default;
}

/* La riga dei comandi: in fila, e va a capo quando non ci stanno. */
[data-theme="strike2030"] .ec-avviso .m {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
[data-theme="strike2030"] .ec-avviso .m button {
  height: 28px;
  min-height: 0;
  padding: 0 10px;
  border: 1px solid var(--s-warning-line);
  border-radius: 8px;
  background: var(--s-surface);
  color: var(--s-warning);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .ec-avviso .m button:hover {
  background: var(--s-success-bg);
  border-color: var(--s-success-line);
  color: var(--s-success);
  transform: none;
}
[data-theme="strike2030"] .ec-avviso .m button i { font-size: 12px; opacity: .5; }
[data-theme="strike2030"] .ec-avviso .m button:hover i { opacity: 1; }
[data-theme="strike2030"] .ec-avviso .m button.ver-elimina:hover {
  background: var(--s-danger-bg);
  border-color: var(--s-danger-line);
  color: var(--s-danger);
}

/* Il rimando a una pagina: un legame, non un pulsante. */
[data-theme="strike2030"] .ec-avviso .m .act {
  font-size: 12px;
  font-weight: 500;
  color: var(--s-fg);
  white-space: nowrap;
  border-bottom: 1px solid var(--s-line-strong);
}
[data-theme="strike2030"] .ec-avviso .m .act:hover { border-bottom-color: var(--s-fg); }

/* La fonte chiude la riga, spinta a destra. */
[data-theme="strike2030"] .ec-avviso .m .f {
  margin-left: auto;
  font-size: 11px;
  color: var(--s-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* «Leggi tutto»: apre il testo troncato, e non e un pulsante del tema. */
[data-theme="strike2030"] .ec-avviso .piu {
  height: auto;
  min-height: 0;
  padding: 0;
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--s-muted);
  font-size: 12px;
  cursor: pointer;
}
[data-theme="strike2030"] .ec-avviso .piu:hover { background: transparent; color: var(--s-fg); transform: none; }

/* ==========================================================
   25 · RITMO DEI TEMPLATE EREDITATI
   Le pagine scritte prima del 2030 usano un h1 nudo, una riga di
   pulsanti, un hr, elenchi dl. Qui prendono le distanze del
   sistema senza essere riscritte: titolo staccato da cio che
   segue, sezioni separate, niente rientri del browser.
   Per una pagina nuova si usano .s-page-head, .s-card e .s-stack.
   ========================================================== */

/* I titoli fuori da un'intestazione (di card, di pagina, di dialogo) e fuori
   da una riga flessibile, dove l'allineamento lo decide la riga. :where()
   tiene bassa la specificita: le utilita mb-0 e simili vincono ancora. */
[data-theme="strike2030"] .content-wrapper h1:where(:not(.card-header *, .s-card-h *, .ec-card-h *, .s-page-head *, .ec-page-head *, .ec-head *, .modal-header *, .s-modal-h *, .ec-modal-h *, .alert *, .kpi-card *, .s-tile *, .ec-tile *, .ec-sec *, .list-group-item *, .dropdown-menu *, .s-menu *, .d-flex > *, .d-inline-flex > *, .card-title, .modal-title)) {
  margin-bottom: 16px;
}
[data-theme="strike2030"] .content-wrapper :is(h2, h3, h4, h5, h6):where(:not(.card-header *, .s-card-h *, .ec-card-h *, .s-page-head *, .ec-page-head *, .ec-head *, .modal-header *, .s-modal-h *, .ec-modal-h *, .alert *, .kpi-card *, .s-tile *, .ec-tile *, .ec-sec *, .list-group-item *, .dropdown-menu *, .s-menu *, .d-flex > *, .d-inline-flex > *, .card-title, .modal-title)) {
  margin-bottom: 12px;
}
/* Dentro il corpo di una card un h2 o un h3 e quasi sempre un numero
   grande, non l'inizio di una sezione: sta vicino alla sua etichetta. */
[data-theme="strike2030"] :is(.card-body, .s-card-b, .ec-card-b) :is(h2, h3):where(:not(.card-header *, .s-card-h *, .ec-card-h *, .s-page-head *, .ec-page-head *, .ec-head *, .modal-header *, .s-modal-h *, .ec-modal-h *, .alert *, .kpi-card *, .s-tile *, .ec-tile *, .ec-sec *, .list-group-item *, .dropdown-menu *, .s-menu *, .d-flex > *, .d-inline-flex > *, .card-title, .modal-title)) {
  margin-bottom: 8px;
}
/* Un titolo di sezione che segue altro contenuto se ne stacca sopra. Dopo un
   hr no, lo spazio lo ha gia messo la riga; e un fratello che non si vede
   (un campo nascosto, uno script) non conta. */
[data-theme="strike2030"] .content-wrapper :where(:not(hr, [hidden], .d-none, input[type="hidden"], script, style, template)) + :is(h2, h3):where(:not(.card-header *, .s-card-h *, .ec-card-h *, .s-page-head *, .ec-page-head *, .ec-head *, .modal-header *, .s-modal-h *, .ec-modal-h *, .alert *, .kpi-card *, .s-tile *, .ec-tile *, .ec-sec *, .list-group-item *, .dropdown-menu *, .s-menu *, .d-flex > *, .d-inline-flex > *, .card-title, .modal-title, .card-body *, .s-card-b *, .ec-card-b *)) {
  margin-top: 32px;
}
[data-theme="strike2030"] .content-wrapper :where(:not(hr, [hidden], .d-none, input[type="hidden"], script, style, template)) + :is(h4, h5, h6):where(:not(.card-header *, .s-card-h *, .ec-card-h *, .s-page-head *, .ec-page-head *, .ec-head *, .modal-header *, .s-modal-h *, .ec-modal-h *, .alert *, .kpi-card *, .s-tile *, .ec-tile *, .ec-sec *, .list-group-item *, .dropdown-menu *, .s-menu *, .d-flex > *, .d-inline-flex > *, .card-title, .modal-title)) {
  margin-top: 24px;
}

/* Elenco di definizioni: il browser rientra dd di 40 px, qui no. Il termine
   e un'etichetta, la definizione il valore. */
[data-theme="strike2030"] dl { margin: 0; }
[data-theme="strike2030"] dt {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--s-muted);
}
[data-theme="strike2030"] dd { margin: 0 0 12px; }
[data-theme="strike2030"] dd:last-child { margin-bottom: 0; }
/* Nella griglia (dl.row con dt/dd in colonna) termine e valore stanno sulla
   stessa riga: lo spazio va a entrambi, e il termine si allinea al valore. */
[data-theme="strike2030"] dl.row > dt,
[data-theme="strike2030"] dl.row > dd { margin-bottom: 8px; }
[data-theme="strike2030"] dl.row > dt { line-height: 24px; }
[data-theme="strike2030"] dl.row > dt:nth-last-child(2),
[data-theme="strike2030"] dl.row > dd:last-child { margin-bottom: 0; }

/* Un'etichetta senza classe, dentro un modulo, e un'etichetta di campo. */
[data-theme="strike2030"] form label:where(:not(.form-check-label, .form-label, .s-field-label, .ec-label, .btn, .s-switch, .dropdown-item, .list-group-item, .visually-hidden)) {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--s-fg2);
  margin-bottom: 6px;
}
[data-theme="strike2030"] .form-check + .form-check { margin-top: 8px; }
[data-theme="strike2030"] .form-text,
[data-theme="strike2030"] .s-hint,
[data-theme="strike2030"] .ec-hint { display: block; margin-top: 6px; }

/* ==========================================================
   26 · ACCESSO
   Una schermata sola, senza guscio: il marchio in alto, il claim
   a sinistra sopra un campo di punti che si ricompone, il modulo
   in vetro a destra. Il vetro e quello del tema (stessi valori
   dei menu), non uno suo. Su schermo stretto il modulo scende
   sotto il claim e prende tutta la larghezza.
   ========================================================== */

[data-theme="strike2030"] .s-login {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top" "claim card" "foot foot";
  column-gap: 48px;
  padding: 44px 80px 36px;
}

/* Le forme dietro: tre macchie appena percettibili che si muovono piano.
   Prendono il colore del testo a bassissima opacita, cosi seguono il tema. */
[data-theme="strike2030"] .s-login-sky { position: absolute; inset: 0; pointer-events: none; }
[data-theme="strike2030"] .s-login-blob { position: absolute; display: block; border-radius: var(--s-r-pill); }
[data-theme="strike2030"] .s-login-blob.a {
  right: 180px; top: -180px; width: 620px; height: 620px;
  background: color-mix(in srgb, var(--s-fg) 5%, transparent);
  animation: s-login-float-a 14s ease-in-out infinite alternate;
}
[data-theme="strike2030"] .s-login-blob.b {
  right: -140px; bottom: -220px; width: 540px; height: 540px;
  background: color-mix(in srgb, var(--s-fg) 7%, transparent);
  animation: s-login-float-b 18s ease-in-out infinite alternate;
}
[data-theme="strike2030"] .s-login-blob.c {
  right: 520px; bottom: 90px; width: 180px; height: 180px;
  border-radius: 40px;
  background: color-mix(in srgb, var(--s-fg) 4%, transparent);
  transform: rotate(18deg);
  animation: s-login-float-c 12s ease-in-out infinite alternate;
}
@keyframes s-login-float-a { from { transform: translate(0, 0); } to { transform: translate(-20px, 26px); } }
@keyframes s-login-float-b { from { transform: translate(0, 0); } to { transform: translate(26px, -18px); } }
@keyframes s-login-float-c { from { transform: rotate(18deg) translate(0, 0); } to { transform: rotate(13deg) translate(-16px, -22px); } }

/* Il campo di punti sta dietro il claim, in alto a sinistra; lo disegna
   strike-login.js con il colore del testo. */
[data-theme="strike2030"] .s-login-dots {
  position: absolute;
  left: 7.6%; top: 4.9%;
  width: 54%; height: 69%;
  pointer-events: none;
}

[data-theme="strike2030"] .s-login-top,
[data-theme="strike2030"] .s-login-claim,
[data-theme="strike2030"] .s-login-panel,
[data-theme="strike2030"] .s-login-foot { position: relative; z-index: 1; }

[data-theme="strike2030"] .s-login-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
[data-theme="strike2030"] .s-login-mark { display: inline-flex; align-items: center; gap: 7px; color: var(--s-fg); }
[data-theme="strike2030"] .s-login-top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--s-fg2);
}
[data-theme="strike2030"] .s-login-pill { border-radius: var(--s-r-pill); background: transparent; }
[data-theme="strike2030"] .s-login-scheme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-pill);
  background: transparent;
  color: var(--s-fg);
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-login-scheme:hover { background: var(--s-hover); }

/* Il claim: etichetta e titolo grande, leggero come tutti i titoli. */
[data-theme="strike2030"] .s-login-claim {
  grid-area: claim;
  align-self: end;
  max-width: 560px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
}
[data-theme="strike2030"] .s-login-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s-muted);
}
[data-theme="strike2030"] .s-login-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--s-muted); }
[data-theme="strike2030"] .s-login-headline {
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.13;
  font-weight: 300;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
[data-theme="strike2030"] .s-login-note { font-size: 13px; line-height: 20px; color: var(--s-muted); }
[data-theme="strike2030"] .s-login-note:empty { display: none; }

/* Il modulo: una card di vetro. Fluttua sul campo, quindi ha ombra. */
[data-theme="strike2030"] .s-login-panel { grid-area: card; display: flex; align-items: center; justify-content: flex-end; }
[data-theme="strike2030"] .s-login-card {
  width: 100%;
  max-width: 460px;
  padding: 40px;
  border: 1px solid var(--s-glass-line);
  border-radius: var(--s-r-panel);
  background: var(--s-glass-solid);
  backdrop-filter: var(--s-blur-pop);
  -webkit-backdrop-filter: var(--s-blur-pop);
  box-shadow: var(--s-shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
[data-theme="strike2030"] .s-login-head { display: flex; flex-direction: column; gap: 6px; }
[data-theme="strike2030"] .s-login-title { font-size: 28px; line-height: 36px; font-weight: 300; letter-spacing: -0.02em; margin: 0; }
[data-theme="strike2030"] .s-login-desc { margin: 0; font-size: 14px; line-height: 22px; color: var(--s-fg2); }
[data-theme="strike2030"] .s-login-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  margin-bottom: 4px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-r-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--s-fg2);
}

[data-theme="strike2030"] .s-login-form { display: flex; flex-direction: column; gap: 24px; }
[data-theme="strike2030"] .s-login-fields { display: flex; flex-direction: column; gap: 14px; }
[data-theme="strike2030"] .s-login-field { display: flex; flex-direction: column; gap: 6px; }
[data-theme="strike2030"] .s-login-field .s-field-label { margin: 0; color: var(--s-fg); }
[data-theme="strike2030"] .s-login-field .s-input { height: 48px; padding: 0 14px; font-size: 15px; }
[data-theme="strike2030"] .s-login-pwd { position: relative; }
[data-theme="strike2030"] .s-login-pwd .s-input { padding-right: 50px; }
[data-theme="strike2030"] .s-login-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--s-fg2);
  cursor: pointer;
  transition: background-color var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-login-eye:hover { background: var(--s-hover); color: var(--s-fg); }

[data-theme="strike2030"] .s-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
/* La casella: la nativa resta per la tastiera e il modulo, si vede la nostra. */
[data-theme="strike2030"] .s-login-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 14px;
  color: var(--s-fg);
  cursor: pointer;
}
[data-theme="strike2030"] .s-login-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
[data-theme="strike2030"] .s-login-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--s-muted);
  border-radius: 6px;
  color: var(--s-on-primary);
  transition: background-color var(--s-normal) var(--s-ease), border-color var(--s-normal) var(--s-ease);
}
[data-theme="strike2030"] .s-login-box svg { opacity: 0; transition: opacity var(--s-fast) var(--s-ease); }
[data-theme="strike2030"] .s-login-check input:checked + .s-login-box { background: var(--s-primary); border-color: var(--s-primary); }
[data-theme="strike2030"] .s-login-check input:checked + .s-login-box svg { opacity: 1; }
[data-theme="strike2030"] .s-login-check input:focus-visible + .s-login-box { outline: 2px solid currentColor; outline-offset: 2px; }
[data-theme="strike2030"] .s-login-quiet { font-size: 13px; color: var(--s-fg2); }
[data-theme="strike2030"] .s-login-quiet:hover { color: var(--s-fg); }

[data-theme="strike2030"] .s-login-actions { display: flex; flex-direction: column; gap: 12px; }
[data-theme="strike2030"] .s-login-actions .s-btn { height: 48px; font-size: 15px; gap: 10px; }
[data-theme="strike2030"] .s-login-actions .s-btn:not(.primary) { background: transparent; }
[data-theme="strike2030"] .s-login-actions .s-btn:not(.primary):hover { background: var(--s-hover); }
[data-theme="strike2030"] .s-login-or {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--s-muted);
}
[data-theme="strike2030"] .s-login-or::before,
[data-theme="strike2030"] .s-login-or::after { content: ""; flex: 1; height: 1px; background: var(--s-line); }
[data-theme="strike2030"] .s-login-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 20px;
  color: var(--s-muted);
}
[data-theme="strike2030"] .s-login-hint svg { flex-shrink: 0; margin-top: 2px; }
[data-theme="strike2030"] .s-login-sep { height: 1px; background: var(--s-line); }
[data-theme="strike2030"] .s-login-help { margin: 0; font-size: 13px; line-height: 20px; color: var(--s-muted); }
[data-theme="strike2030"] .s-login-help a { color: var(--s-fg2); }
[data-theme="strike2030"] .s-login-help a:hover { color: var(--s-fg); }

/* L'errore sta sopra i pulsanti, in una riga: dice cosa non va e basta. */
[data-theme="strike2030"] .s-login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--s-danger);
}
[data-theme="strike2030"] .s-login-error svg { flex-shrink: 0; }
[data-theme="strike2030"] .s-login-card .s-alert { margin: 0; }

/* Attesa: il pulsante mostra il cerchio al posto dell'icona, e non si
   ripreme. Il cerchio prende il colore del pulsante su cui sta. */
[data-theme="strike2030"] .s-login-card .s-btn .s-spinner { display: none; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
[data-theme="strike2030"] .s-login-card .s-btn.is-loading .s-spinner { display: inline-block; }
[data-theme="strike2030"] .s-login-card .s-btn.is-loading .s-login-ico { display: none; }
[data-theme="strike2030"] .s-login-card .s-btn.is-loading { pointer-events: none; }

[data-theme="strike2030"] .s-login-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--s-muted);
}
[data-theme="strike2030"] .s-login-foot nav { display: flex; gap: 24px; }
[data-theme="strike2030"] .s-login-foot a { color: var(--s-muted); }
[data-theme="strike2030"] .s-login-foot a:hover { color: var(--s-fg); }
[data-theme="strike2030"] .s-login-foot nav:empty { display: none; }

@media (max-width: 1180px) {
  [data-theme="strike2030"] .s-login { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 32px; padding: 32px 48px 28px; }
  [data-theme="strike2030"] .s-login-claim { padding-bottom: 56px; }
  [data-theme="strike2030"] .s-login-blob.c { display: none; }
}

/* Sotto i 900 px il modulo scende sotto il claim; il campo di punti resta
   dietro il claim, in alto, e le macchie si ritirano ai bordi. */
@media (max-width: 900px) {
  [data-theme="strike2030"] .s-login {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "claim" "card" "foot";
    padding: 24px 24px 24px;
  }
  [data-theme="strike2030"] .s-login-claim { align-self: start; max-width: none; padding: 40px 0 32px; gap: 16px; }
  [data-theme="strike2030"] .s-login-headline { font-size: clamp(36px, 7vw, 48px); }
  [data-theme="strike2030"] .s-login-panel { align-items: start; justify-content: stretch; }
  [data-theme="strike2030"] .s-login-card { max-width: none; }
  [data-theme="strike2030"] .s-login-dots { left: -6%; top: -2%; width: 112%; height: 44%; opacity: .85; }
  [data-theme="strike2030"] .s-login-blob.a { right: -160px; top: -240px; width: 440px; height: 440px; }
  [data-theme="strike2030"] .s-login-blob.b { right: -200px; bottom: -200px; width: 400px; height: 400px; }
  [data-theme="strike2030"] .s-login-foot { padding-top: 32px; }
}

@media (max-width: 640px) {
  [data-theme="strike2030"] .s-login { padding: 16px 16px 20px; }
  [data-theme="strike2030"] .s-login-ask { display: none; }
  [data-theme="strike2030"] .s-login-claim { padding: 32px 0 24px; }
  [data-theme="strike2030"] .s-login-card { padding: 24px; gap: 20px; }
  [data-theme="strike2030"] .s-login-title { font-size: 24px; line-height: 32px; }
  [data-theme="strike2030"] .s-login-foot { flex-direction: column; align-items: flex-start; }
}