@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(/static/fonts/plus-jakarta-sans.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/static/fonts/inter.woff2) format('woff2')}
/* ============================================================
   Soft Console — design system per dashboard di lavoro
   Un solo file da importare. Nessuna dipendenza.
   Prefisso: --ds-
   ============================================================ */

:root{
  /* ─────────── SUPERFICI ─────────── */
  --ds-bg:#F4F7FB;              /* fondo pagina (freddo) */
  --ds-bg-warm:#F4F6FA;         /* fondo alternativo: base delle ombre morbide */
  --ds-surface:#FFFFFF;         /* schede, pannelli, tabelle */
  --ds-surface-2:#F8FAFD;       /* riquadri interni, righe a riposo */
  --ds-surface-3:#F5F7FA;       /* riempimento campi e pulsanti neutri */
  --ds-surface-inset:#EAEFF7;   /* stato attivo "in incavo" */
  --ds-surface-track:#EEF1F6;   /* fondo di segmented, barre, tracce */
  --ds-surface-row:rgba(255,255,255,.55); /* riga di lista a riposo */
  --ds-handle:#DDE3EC;          /* maniglia dei fogli */
  --ds-dock-edge:rgba(255,255,255,.85);   /* bordo chiaro delle superfici morbide */
  --ds-lens:rgba(255,255,255,.72);        /* vetro della lente del dock */
  --ds-lens-edge:rgba(255,255,255,.92);
  --ds-lens-shadow:0 6px 16px -8px rgba(16,24,40,.45), inset 0 1px 0 rgba(255,255,255,.9);
  --ds-guide:#CBD5E4;           /* linea guida dei grafici */
  --ds-surface-dark:#111827;    /* superfici scure: avvisi, marchio */
  --ds-surface-dark-2:#1F2937;

  /* ─────────── BORDI ─────────── */
  --ds-border:#E7ECF3;          /* bordo standard */
  --ds-border-soft:#EFF2F7;     /* divisori */
  --ds-border-softer:#EDF1F7;   /* bordo riga */
  --ds-border-faint:#F1F4F9;    /* separatore interno */

  /* ─────────── TESTO ─────────── */
  --ds-text:#111827;            /* primario */
  --ds-text-2:#334155;          /* corpo */
  --ds-text-3:#475569;
  --ds-text-4:#5C6779;
  --ds-text-muted:#7A8699;      /* secondario */
  --ds-text-label:#98A4B6;      /* etichette di sezione */
  --ds-text-faint:#B4BECD;      /* suggerimenti */
  --ds-text-ghost:#CBD3DF;      /* separatori inline, disattivo */
  --ds-text-on-dark:#F9FAFB;

  /* ─────────── INTENTI ───────────
     Ognuno: base · gradiente · ink (testo su tinta) · tint · tint-2 · border */

  /* primario — azioni, selezione, link */
  --ds-primary:#1F5FD0;
  --ds-primary-grad:linear-gradient(180deg,#2E6FE0,#1F5FD0);
  --ds-primary-hover:#17479B;
  --ds-primary-ink:#1F5FD0;
  --ds-primary-tint:#EEF4FE;
  --ds-primary-tint-2:#DBEAFE;
  --ds-primary-border:#DCE5F3;
  --ds-primary-deep:linear-gradient(135deg,#12244A,#1F5FD0 78%);

  /* pericolo — urgenza, distruttivo */
  --ds-danger:#E11D48;
  --ds-danger-grad:linear-gradient(180deg,#F0405F,#E11D48);
  --ds-danger-ink:#BE123C;
  --ds-danger-ink-2:#9F1239;
  --ds-danger-ink-3:#7F1D3A;
  --ds-danger-tint:#FFF1F2;
  --ds-danger-tint-2:#FFE4E9;
  --ds-danger-tint-3:#FFF6F7;
  --ds-danger-border:#F3C6CE;
  --ds-danger-border-2:#FBDDE2;

  /* attenzione — soglie, contenuti sensibili */
  --ds-warn:#F59E0B;
  --ds-warn-grad:linear-gradient(180deg,#D08A0F,#B45309);
  --ds-warn-ink:#B45309;
  --ds-warn-ink-2:#8A6A12;
  --ds-warn-ink-3:#7A4A08;
  --ds-warn-tint:#FFFBEB;
  --ds-warn-tint-2:#FFFDF6;
  --ds-warn-tint-3:#FFF7E6;
  --ds-warn-border:#F6E0AE;
  --ds-warn-border-2:#F0DFB6;

  /* successo — esito positivo, stato attivo */
  --ds-success:#0E9F6E;
  --ds-success-2:#12B981;
  --ds-success-grad:linear-gradient(180deg,#12B981,#0E9F6E);
  --ds-success-ink:#0B7F58;
  --ds-success-tint:#ECFDF5;
  --ds-success-tint-2:#F0FDF6;
  --ds-success-tint-3:#DCFCE7;
  --ds-success-border:#C7E8D8;

  /* accento — funzioni speciali, automazione, AI */
  --ds-accent:#7C3AED;
  --ds-accent-grad:linear-gradient(180deg,#8B5CF6,#7C3AED);
  --ds-accent-ink:#4C1D95;
  --ds-accent-ink-2:#3B0764;
  --ds-accent-tint:#F5F0FF;
  --ds-accent-tint-2:#FBF8FF;
  --ds-accent-tint-3:#F9F5FF;
  --ds-accent-border:#E6D9FB;
  --ds-accent-deep:linear-gradient(135deg,#2E1065,#7C3AED 84%);

  /* neutro — informazione senza carica */
  --ds-neutral:#64748B;
  --ds-neutral-tint:#F1F5F9;

  /* ─────────── CATEGORIE (serie, etichette) ───────────
     Usa in ordine: la stessa categoria = lo stesso colore in tutte le viste */
  --ds-cat-1:#1F5FD0;
  --ds-cat-2:#E11D48;
  --ds-cat-3:#7C3AED;
  --ds-cat-4:#0E9F6E;
  --ds-cat-5:#F59E0B;
  --ds-cat-6:#0891B2;
  --ds-cat-7:#64748B;
  --ds-cat-8:#DB2777;

  /* ─────────── TIPOGRAFIA ─────────── */
  /* testo: Plus Jakarta Sans — numeri e metadati: Inter con cifre tabellari.
     --ds-font-num è il nome corretto; --ds-font-mono resta come alias
     per non rompere il codice già scritto. */
  --ds-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ds-font-num:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ds-font-mono:var(--ds-font-num);

  /* scala pronta all'uso: font:var(--ds-t-h1) */
  --ds-t-display:800 30px/1.15 var(--ds-font);
  --ds-t-h1:700 24px/1.2 var(--ds-font);
  --ds-t-h2:700 21px/1.25 var(--ds-font);
  --ds-t-h3:700 19px/1.25 var(--ds-font);
  --ds-t-h4:700 15.5px/1.3 var(--ds-font);
  --ds-t-body:400 15px/1.65 var(--ds-font);
  --ds-t-body-sm:400 13.5px/1.6 var(--ds-font);
  --ds-t-row:600 13.5px/1.25 var(--ds-font);
  --ds-t-preview:400 12.5px/1.45 var(--ds-font);
  --ds-t-label:700 10.5px/1 var(--ds-font);
  --ds-t-btn:700 13px/1 var(--ds-font);
  --ds-t-btn-2:600 12.5px/1 var(--ds-font);
  --ds-t-meta:500 11.5px/1.4 var(--ds-font-num);
  --ds-t-num:500 13.5px/1.3 var(--ds-font-num);
  --ds-t-kpi:700 30px/1 var(--ds-font);
  --ds-ls-tight:-.02em;
  --ds-ls-tighter:-.03em;
  --ds-ls-label:.13em;

  /* ─────────── SPAZIATURE ─────────── */
  --ds-1:4px;   --ds-2:6px;   --ds-3:8px;   --ds-4:10px;
  --ds-5:12px;  --ds-6:14px;  --ds-7:16px;  --ds-8:18px;
  --ds-9:20px;  --ds-10:22px; --ds-11:24px; --ds-12:26px; --ds-13:28px;
  --ds-gutter:14px;             /* gap fra colonne e padding di shell */
  --ds-pad-card:18px;           /* dentro schede di pannello */
  --ds-pad-page:26px;           /* dentro pagine intere */

  /* ─────────── ALTEZZE CONTROLLI ─────────── */
  --ds-h-sm:34px;
  --ds-h-md:40px;
  --ds-h-lg:46px;
  --ds-h-touch:48px;            /* minimo su touch */

  /* ─────────── RAGGI ─────────── */
  --ds-r-chip:7px;
  --ds-r-sm:9px;
  --ds-r-btn:12px;
  --ds-r-field:13px;
  --ds-r-row:15px;
  --ds-r-card:20px;
  --ds-r-panel:22px;
  --ds-r-dock:26px;
  --ds-r-pill:999px;
  --ds-r-sheet:26px 26px 0 0;

  /* ─────────── ELEVAZIONE ───────────
     Ombre larghe, bassissime, con spread negativo. Mai corte e scure. */
  --ds-e-0:none;
  --ds-e-1:0 2px 8px -6px rgba(16,24,40,.35);                                  /* riga */
  --ds-e-2:0 1px 2px rgba(16,24,40,.05), 0 12px 30px -20px rgba(16,24,40,.26); /* scheda */
  --ds-e-3:0 1px 2px rgba(16,24,40,.05), 0 14px 34px -22px rgba(16,24,40,.32); /* pannello */
  --ds-e-4:0 28px 54px -18px rgba(16,24,40,.55);                               /* popover */
  --ds-e-5:0 40px 80px -24px rgba(16,24,40,.6);                                /* modale */
  --ds-e-toast:0 26px 50px -22px rgba(17,24,39,.75);
  --ds-e-sheet:0 -18px 44px -18px rgba(16,24,40,.42);
  --ds-e-nav:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.14);
  --ds-e-nav-open:0 1px 2px rgba(16,24,40,.05), 0 24px 50px -18px rgba(16,24,40,.38);

  /* alone di selezione (non è un'ombra: è un anello) */
  --ds-ring-primary:0 0 0 3px rgba(31,95,208,.16);
  --ds-ring-focus:0 0 0 3px rgba(31,95,208,.28);
  --ds-ring-danger:0 0 0 3px rgba(225,29,72,.18);
  --ds-selected:0 0 0 3px rgba(31,95,208,.16), 0 16px 30px -16px rgba(31,95,208,.55);

  /* ombre dei pulsanti: colorate, sotto l'elemento */
  --ds-e-btn-primary:0 10px 22px -12px rgba(31,95,208,.85);
  --ds-e-btn-danger:0 10px 22px -12px rgba(225,29,72,.8);
  --ds-e-btn-warn:0 10px 22px -12px rgba(138,106,18,.8);
  --ds-e-btn-success:0 10px 22px -12px rgba(14,159,110,.75);
  --ds-e-btn-accent:0 12px 26px -14px rgba(124,58,237,.9);

  /* superfici morbide (dock, pulsanti tondi flottanti) */
  --ds-e-soft:8px 8px 20px rgba(163,177,198,.42), -8px -8px 20px rgba(255,255,255,.95), 0 2px 6px rgba(16,24,40,.06);
  --ds-e-soft-sm:5px 5px 12px rgba(163,177,198,.4), -5px -5px 12px rgba(255,255,255,.95);
  --ds-e-soft-inset:inset 3px 3px 7px rgba(163,177,198,.5), inset -3px -3px 7px rgba(255,255,255,.95);

  /* ─────────── LIVELLI (z-index) ─────────── */
  --ds-z-sticky:20;
  --ds-z-nav:30;
  --ds-z-dropdown:100;
  --ds-z-popover:120;
  --ds-z-sheet:140;
  --ds-z-modal:160;
  --ds-z-toast:180;

  /* ─────────── MOVIMENTO ─────────── */
  --ds-t-fast:.14s;
  --ds-t-base:.16s;
  --ds-t-panel:.18s ease;
  --ds-t-enter:.24s cubic-bezier(.22,.68,.35,1);
  --ds-veil:rgba(11,15,23,.42);
}

/* ─────────── KEYFRAMES ─────────── */
@keyframes ds-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-slide-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-sheet-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes ds-glow{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.45)}50%{box-shadow:0 0 0 7px rgba(225,29,72,0)}}
@keyframes ds-shimmer{0%{background-position:-320px 0}100%{background-position:320px 0}}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ─────────── BASE ─────────── */
html,body{margin:0;padding:0;background:var(--ds-bg);color:var(--ds-text);
  font-family:var(--ds-font);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
*{box-sizing:border-box}
a{color:var(--ds-primary);text-decoration:none}
a:hover{color:var(--ds-primary-hover);text-decoration:underline}
::selection{background:var(--ds-primary-tint-2);color:var(--ds-text)}
input,textarea,select,button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ds-ring-focus)}

/* barre di scorrimento sottili: classe .ds-scroll sul contenitore che scorre */
.ds-scroll{scrollbar-width:thin;scrollbar-color:#D3DCE8 transparent}
.ds-scroll::-webkit-scrollbar{width:10px;height:10px}
.ds-scroll::-webkit-scrollbar-thumb{background:#D3DCE8;border:3px solid transparent;background-clip:content-box;border-radius:10px}
.ds-scroll::-webkit-scrollbar-thumb:hover{background:#B9C6D8;border:3px solid transparent;background-clip:content-box}

/* scheletro di caricamento */
/* Cifre tabellari, davvero.
   La scorciatoia `font:` (che questo sistema usa dovunque) azzera
   font-variant-numeric e font-feature-settings: la regola sotto è l'unico
   modo per tenere le colonne di numeri allineate senza rinunciare a `font:`.
   Per un testo che vuole cifre proporzionali, usa la classe .ds-prop-nums. */
*{font-feature-settings:'tnum' 1 !important}
.ds-prop-nums,.ds-prop-nums *{font-feature-settings:'pnum' 1 !important}

.ds-skeleton{background:linear-gradient(90deg,#EEF1F6 25%,#F7F9FC 50%,#EEF1F6 75%);
  background-size:640px 100%;animation:ds-shimmer 1.4s linear infinite;border-radius:8px}


/* ============================================================
   TEMA SCURO
   Attivalo con <html data-theme="dark"> (o data-theme="light" per forzare
   il chiaro). Stessa struttura di token: nessun componente va riscritto.
   Principio: non è il chiaro invertito — le superfici salgono di luminosità
   con l'elevazione, le ombre diventano più profonde e i colori si
   desaturano leggermente per non vibrare sul fondo scuro.
   ============================================================ */









/* Per seguire il sistema, imposta l'attributo una volta all'avvio:
   document.documentElement.dataset.theme =
     matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';
   Così la scelta dell'utente può sempre sovrascrivere il sistema. */
:root{color-scheme:light}


@media (prefers-color-scheme:dark){
:root{
  /* superfici: più chiare man mano che si alzano */
  --ds-bg:#0B1120;
  --ds-bg-warm:#111827;
  --ds-surface:#161F31;
  --ds-surface-2:#1B2437;
  --ds-surface-3:#202B40;
  --ds-surface-inset:#0E1626;
  --ds-surface-track:#202B40;
  --ds-surface-row:rgba(255,255,255,.035);
  --ds-surface-dark:#060A13;
  --ds-surface-dark-2:#0E1626;

  /* bordi: chiari e trasparenti, non grigi pieni */
  --ds-border:rgba(148,171,204,.20);
  --ds-border-soft:rgba(148,171,204,.14);
  --ds-border-softer:rgba(148,171,204,.12);
  --ds-border-faint:rgba(148,171,204,.08);

  /* testo */
  --ds-text:#F1F5FB;
  --ds-text-2:#DBE3EF;
  --ds-text-3:#C3CEDF;
  --ds-text-4:#A9B6CA;
  --ds-text-muted:#8E9CB3;
  --ds-text-label:#7A89A1;
  --ds-text-faint:#657288;
  --ds-text-ghost:#48566C;
  --ds-text-on-dark:#F9FAFB;

  /* primario */
  --ds-primary:#5B9BFF;
  --ds-primary-grad:linear-gradient(180deg,#6BA6FF,#3E82F0);
  --ds-primary-hover:#8FBBFF;
  --ds-primary-ink:#A8CBFF;
  --ds-primary-tint:rgba(91,155,255,.16);
  --ds-primary-tint-2:rgba(91,155,255,.26);
  --ds-primary-border:rgba(91,155,255,.38);
  --ds-primary-deep:linear-gradient(135deg,#0A1730,#1E4FA8 78%);

  /* pericolo */
  --ds-danger:#FB5C7E;
  --ds-danger-grad:linear-gradient(180deg,#FF6E8D,#E8375C);
  --ds-danger-ink:#FF9CB1;
  --ds-danger-ink-2:#FFB3C3;
  --ds-danger-ink-3:#FFC9D4;
  --ds-danger-tint:rgba(251,92,126,.14);
  --ds-danger-tint-2:rgba(251,92,126,.22);
  --ds-danger-tint-3:rgba(251,92,126,.10);
  --ds-danger-border:rgba(251,92,126,.34);
  --ds-danger-border-2:rgba(251,92,126,.26);

  /* attenzione */
  --ds-warn:#F6B23C;
  --ds-warn-grad:linear-gradient(180deg,#F8BE55,#D9902A);
  --ds-warn-ink:#FBCF7B;
  --ds-warn-ink-2:#F8D89A;
  --ds-warn-ink-3:#FCE4B4;
  --ds-warn-tint:rgba(246,178,60,.14);
  --ds-warn-tint-2:rgba(246,178,60,.09);
  --ds-warn-tint-3:rgba(246,178,60,.20);
  --ds-warn-border:rgba(246,178,60,.32);
  --ds-warn-border-2:rgba(246,178,60,.24);

  /* successo */
  --ds-success:#2BC48A;
  --ds-success-2:#3BD69A;
  --ds-success-grad:linear-gradient(180deg,#3BD69A,#1FA875);
  --ds-success-ink:#7FE3BC;
  --ds-success-tint:rgba(43,196,138,.14);
  --ds-success-tint-2:rgba(43,196,138,.09);
  --ds-success-tint-3:rgba(43,196,138,.22);
  --ds-success-border:rgba(43,196,138,.32);

  /* accento */
  --ds-accent:#A480FF;
  --ds-accent-grad:linear-gradient(180deg,#B08EFF,#8B5CF6);
  --ds-accent-ink:#C9B2FF;
  --ds-accent-ink-2:#DCCCFF;
  --ds-accent-tint:rgba(164,128,255,.16);
  --ds-accent-tint-2:rgba(164,128,255,.10);
  --ds-accent-tint-3:rgba(164,128,255,.22);
  --ds-accent-border:rgba(164,128,255,.34);
  --ds-accent-deep:linear-gradient(135deg,#1A0B3D,#6D3FD4 84%);

  /* neutro */
  --ds-neutral:#94A3B8;
  --ds-neutral-tint:rgba(148,163,184,.14);

  /* categorie: leggermente schiarite per restare distinguibili */
  --ds-cat-1:#5B9BFF;
  --ds-cat-2:#FB5C7E;
  --ds-cat-3:#A480FF;
  --ds-cat-4:#2BC48A;
  --ds-cat-5:#F6B23C;
  --ds-cat-6:#3BB8D9;
  --ds-cat-7:#94A3B8;
  --ds-cat-8:#F472B6;

  /* elevazione: nel buio l'ombra da sola non basta —
     ogni livello alza anche la superficie e aggiunge un filo di luce sul bordo */
  --ds-e-1:0 2px 8px -6px rgba(0,0,0,.7);
  --ds-e-2:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  --ds-e-3:0 1px 2px rgba(0,0,0,.45), 0 18px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  --ds-e-4:0 30px 60px -18px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
  --ds-e-5:0 44px 90px -24px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.07);
  --ds-e-toast:0 28px 56px -22px rgba(0,0,0,.95);
  --ds-e-sheet:0 -20px 48px -18px rgba(0,0,0,.9);
  --ds-e-nav:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.8);
  --ds-e-nav-open:0 1px 2px rgba(0,0,0,.45), 0 28px 56px -18px rgba(0,0,0,.95);

  --ds-ring-primary:0 0 0 3px rgba(91,155,255,.24);
  --ds-ring-focus:0 0 0 3px rgba(91,155,255,.42);
  --ds-ring-danger:0 0 0 3px rgba(251,92,126,.28);
  --ds-selected:0 0 0 3px rgba(91,155,255,.26), 0 18px 34px -18px rgba(0,0,0,.9);

  --ds-e-btn-primary:0 12px 26px -14px rgba(62,130,240,.9);
  --ds-e-btn-danger:0 12px 26px -14px rgba(232,55,92,.85);
  --ds-e-btn-warn:0 12px 26px -14px rgba(217,144,42,.8);
  --ds-e-btn-success:0 12px 26px -14px rgba(31,168,117,.8);
  --ds-e-btn-accent:0 14px 30px -16px rgba(139,92,246,.9);

  /* superfici morbide: nel buio la luce viene solo dall'alto */
  --ds-e-soft:6px 6px 18px rgba(0,0,0,.55), -6px -6px 18px rgba(255,255,255,.045), 0 2px 6px rgba(0,0,0,.4);
  --ds-e-soft-sm:4px 4px 12px rgba(0,0,0,.5), -4px -4px 12px rgba(255,255,255,.04);
  --ds-e-soft-inset:inset 3px 3px 8px rgba(0,0,0,.6), inset -3px -3px 8px rgba(255,255,255,.05);

  --ds-veil:rgba(3,7,15,.66);
  --ds-handle:#3A465C;
  --ds-dock-edge:rgba(255,255,255,.10);
  --ds-lens:rgba(255,255,255,.10);
  --ds-lens-edge:rgba(255,255,255,.20);
  --ds-lens-shadow:0 8px 20px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14);
  --ds-guide:#48566C;
}
:root ::selection{background:rgba(91,155,255,.32);color:#fff}
:root .ds-scroll{scrollbar-color:#2C3A52 transparent}
:root .ds-scroll::-webkit-scrollbar-thumb{background:#2C3A52}
:root .ds-scroll::-webkit-scrollbar-thumb:hover{background:#3C4C68}
:root .ds-skeleton{background:linear-gradient(90deg,#1B2437 25%,#243049 50%,#1B2437 75%);background-size:640px 100%}
:root{color-scheme:dark}
}

body{font:var(--ds-t-body);color:var(--ds-text-2);-webkit-font-smoothing:antialiased}

/* Barra superiore */
.topbar{position:sticky;top:0;z-index:var(--ds-z-nav);background:var(--ds-surface);box-shadow:var(--ds-e-nav)}
.topbar-in{max-width:720px;margin:0 auto;padding:0 18px;height:56px;display:flex;align-items:center;gap:10px}
.topbar.wide .topbar-in{max-width:1080px}
.mark{width:28px;height:28px;flex:none;border-radius:var(--ds-r-sm);background:var(--ds-primary-deep);color:#fff;
  display:grid;place-items:center;font:800 14px/1 var(--ds-font)}
.brand{font:var(--ds-t-row);color:var(--ds-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{max-width:720px;margin:0 auto;padding:22px 18px 48px}
main.wide{max-width:1080px}

/* Testo */
h1{font:var(--ds-t-h1);letter-spacing:var(--ds-ls-tight);color:var(--ds-text);margin:6px 0 12px}
h2{font:var(--ds-t-h3);letter-spacing:var(--ds-ls-tight);color:var(--ds-text);margin:26px 0 10px}
h3{font:var(--ds-t-h4);color:var(--ds-text);margin:16px 0 8px}
p{text-wrap:pretty}
p.lead{font:var(--ds-t-body-sm);color:var(--ds-text-muted);margin:0 0 18px}
.name{font:var(--ds-t-h4);color:var(--ds-text)}
.sub,.muted{font:var(--ds-t-body-sm);color:var(--ds-text-muted)}
.hint{font:var(--ds-t-preview);color:var(--ds-text-muted);margin-top:6px}
.done{text-decoration:line-through;color:var(--ds-text-faint)}
.amount-in,.amount-out{font:var(--ds-t-num);font-weight:700}
.amount-in{color:var(--ds-success-ink)}
.amount-out{color:var(--ds-danger-ink)}

/* Schede: la separazione la fa l'elevazione, non il bordo */
.card{background:var(--ds-surface);border-radius:var(--ds-r-card);box-shadow:var(--ds-e-2);padding:18px;margin-bottom:14px;overflow-wrap:anywhere}
.card>:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.row>*{min-width:0}

/* Pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ds-h-md);padding:0 18px;border:0;
  border-radius:var(--ds-r-btn);background:var(--ds-primary-grad);color:#fff;box-shadow:var(--ds-e-btn-primary);
  font:var(--ds-t-btn);text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .15s,background .15s,color .15s}
.btn:hover{filter:brightness(1.08);color:#fff;text-decoration:none}
.btn.secondary{background:var(--ds-surface-3);border:1px solid var(--ds-border);color:var(--ds-text-2);box-shadow:none}
.btn.secondary:hover{filter:none;color:var(--ds-primary);border-color:var(--ds-primary-border);background:var(--ds-primary-tint)}
.btn.danger{background:var(--ds-surface);border:1.5px solid var(--ds-danger);color:var(--ds-danger-ink);box-shadow:none}
.btn.danger:hover{filter:none;background:var(--ds-danger-grad);color:#fff;box-shadow:var(--ds-e-btn-danger)}
.btn.small{height:var(--ds-h-sm);padding:0 13px;font:var(--ds-t-btn-2)}
.btn:disabled{opacity:.55;cursor:not-allowed}
form.inline{display:inline;margin:0}

/* Moduli */
label{display:block;font:var(--ds-t-label);letter-spacing:var(--ds-ls-label);text-transform:uppercase;color:var(--ds-text-label);margin:16px 0 8px}
label.check{display:flex;gap:10px;align-items:flex-start;font:var(--ds-t-body-sm);letter-spacing:0;text-transform:none;color:var(--ds-text-2);margin:10px 0}
input[type=text],input[type=tel],input[type=url],input[type=email],input[type=password],input[type=number],input[type=time],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%;font:var(--ds-t-body);color:var(--ds-text);background:var(--ds-surface-3);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-field);padding:10px 14px;min-height:var(--ds-h-md);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ds-primary);box-shadow:var(--ds-ring-primary)}
textarea{min-height:96px}
input[type=checkbox],input[type=radio]{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--ds-primary)}
::placeholder{color:var(--ds-text-faint)}

/* Stato */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--ds-r-pill);white-space:nowrap;
  font:var(--ds-t-btn-2);color:var(--ds-success-ink);background:var(--ds-success-tint)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.off{color:var(--ds-text-muted);background:var(--ds-surface-track)}
.badge.warn{color:var(--ds-warn-ink);background:var(--ds-warn-tint-3)}

/* Bande in linea */
.notice{display:flex;align-items:flex-start;gap:10px;border-radius:14px;padding:12px 16px;margin-bottom:14px;border:1px solid;font:var(--ds-t-body-sm);font-weight:600}
.notice::before{content:"";width:7px;height:7px;flex:none;margin-top:7px;border-radius:50%;background:currentColor}
.notice.ok{background:var(--ds-success-tint);border-color:var(--ds-success-border);color:var(--ds-success-ink)}
.notice.error{background:var(--ds-danger-tint);border-color:var(--ds-danger-border);color:var(--ds-danger-ink)}
.notice.warn{background:var(--ds-warn-tint);border-color:var(--ds-warn-border);color:var(--ds-warn-ink)}

/* Liste */
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:12px 0;border-bottom:1px solid var(--ds-border-faint)}
ul.plain li:first-child{padding-top:0}
ul.plain li:last-child{border-bottom:0;padding-bottom:0}

/* Navigazione fra le sezioni: tabs di pagina, scorrevoli sul telefono */
nav.tabs{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ds-border);margin:4px 0 18px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:none;padding:12px 0 11px;border-bottom:2px solid transparent;font:var(--ds-t-btn-2);color:var(--ds-text-muted);text-decoration:none}
nav.tabs a:hover{color:var(--ds-text);text-decoration:none}
nav.tabs a.on{color:var(--ds-text);border-bottom-color:var(--ds-primary)}

/* Tabelle: nessuna griglia */
table{width:100%;border-collapse:collapse;font:var(--ds-t-body-sm)}
th{background:var(--ds-surface-2);font:var(--ds-t-label);letter-spacing:var(--ds-ls-label);text-transform:uppercase;color:var(--ds-text-label);text-align:left;padding:11px 10px}
th:first-child{border-radius:10px 0 0 10px}
th:last-child{border-radius:0 10px 10px 0}
td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--ds-border-faint);vertical-align:top}
tr:last-child td{border-bottom:0}

/* Pagine di lettura */
.prose{max-width:75ch}
.prose h2{margin-top:30px}
.prose p,.prose li{color:var(--ds-text-2)}
.prose code{font:var(--ds-t-meta);background:var(--ds-surface-track);border-radius:6px;padding:1px 5px}

.slots{display:flex;flex-wrap:wrap;gap:8px}
.qr{display:inline-block;background:#fff;border-radius:var(--ds-r-row);padding:12px}
.qr svg{display:block;width:220px;height:220px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.grid2>.card{margin:0}

footer{margin-top:32px;font:var(--ds-t-preview);color:var(--ds-text-muted)}
footer a{color:var(--ds-text-muted);text-decoration:underline}