/* Strumento 1.1 — token della suite Deep Marketing dal 14/10/2026.
   Regole: ~/SviluppoVibe/dm-gateway/DESIGN.md. Pagina di riferimento: brandbook.html qui accanto.
   Solo tema chiaro. Sostituisce Focus (design/tokens.css): la seconda metà ridefinisce gli stessi
   nomi di Focus con i valori dello strumento, così un'app che legge --bg, --fg, --accent cambia
   aspetto senza toccare il markup. Le variabili --st-* sono quelle nuove, usate da components.css. */
:root {
  /* ── Fondo e lastre ─────────────────────────────────────────────── */
  --st-ground-1: #cfd0d3;
  --st-ground-2: #b4b6ba;
  --st-rail: #111214;
  --st-rail-ink: #f1f1f2;
  --st-rail-ink-2: #8e9097;
  --st-rail-on: #2b2c30;
  --st-list: #e9eaec;
  --st-stage: #f6f6f7;
  --st-raise: #fbfbfc;
  --st-sunk: #e4e5e8;
  --st-active: rgba(255, 255, 255, .78);

  /* ── Inchiostri ─────────────────────────────────────────────────── */
  --st-ink: #0e0f11;
  --st-ink-2: #45474d;
  --st-ink-3: #63666d;   /* testo secondario: 4,8:1 sul pannello */
  --st-ink-4: #93969d;   /* solo conteggi e etichette di gruppo (scelta del 14/10/2026) */
  --st-faint: #a9abb1;

  /* ── Linee ──────────────────────────────────────────────────────── */
  --st-line: rgba(14, 15, 17, .10);
  --st-line-2: rgba(14, 15, 17, .22);
  --st-groove: rgba(14, 15, 17, .09);   /* divisore inciso: riga scura... */
  --st-hi: rgba(255, 255, 255, .95);    /* ...con la riga bianca sotto */
  --st-hl: rgba(14, 15, 17, .055);
  --st-scrim: rgba(17, 18, 20, .32);

  /* ── Rosso: segno e guasto ──────────────────────────────────────── */
  --st-red: #F71E33;      /* solo segno: adesso, dove sei, soglia; pittogramma */
  --st-sig: #c8102e;      /* guasto scritto */
  --st-sig-bg: #fde4e6;
  --st-sig-ink: #a00c22;

  /* ── Stati ──────────────────────────────────────────────────────── */
  --st-ok: #1f6b45;
  --st-ok-bg: #dcebe2;
  --st-warn: #8a5a12;
  --st-warn-bg: #f4e8d2;
  --st-chip-down-bg: #d9e8df;
  --st-chip-down-ink: #1f5a3a;

  /* ── Dati: ordine fisso, validato il 14/10/2026 sul fondo stage ─── */
  --st-d1: #2f6fb0;  /* acciaio */
  --st-d2: #b07620;  /* ocra */
  --st-d3: #2a9a86;  /* petrolio */
  --st-d4: #8a5cc2;  /* prugna */
  --st-d5: #7a8a2e;  /* oliva */
  --st-d6: #c25f8f;  /* rosa */
  --st-seq-1: #dbe5ef; --st-seq-2: #b9cde2; --st-seq-3: #93b2d3; --st-seq-4: #6d95c2;
  --st-seq-5: #4b78ab; --st-seq-6: #2f6fb0; --st-seq-7: #255a91; --st-seq-8: #1c4673;

  /* ── Caratteri ──────────────────────────────────────────────────── */
  --st-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --st-sans: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --st-mono: "Fragment Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ── Misure ─────────────────────────────────────────────────────── */
  --st-r-slab: 26px;
  --st-r-panel: 20px;
  --st-r-pop: 14px;
  --st-r-item: 13px;
  --st-r-field: 12px;
  --st-r-control: 10px;
  --st-r-small: 8px;
  --st-rail-w: 78px;
  --st-list-w: 290px;
  --st-gap: 12px;
  --st-pad-x: 52px;
  --st-pad-x-m: 18px;
  --st-section-gap: 64px;

  /* ── Ombre ──────────────────────────────────────────────────────── */
  --st-shadow-slab: 0 30px 60px -34px rgba(20, 22, 26, .45), 0 2px 6px -2px rgba(20, 22, 26, .12);
  --st-shadow-rail: 10px 0 26px -10px rgba(10, 11, 13, .5), 3px 0 6px -2px rgba(10, 11, 13, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  --st-shadow-raise: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(14, 15, 17, .06), 0 10px 22px -12px rgba(14, 15, 17, .35);
  --st-shadow-soft: 0 1px 2px rgba(14, 15, 17, .04), 0 6px 16px -10px rgba(14, 15, 17, .14);
  --st-shadow-float: 0 20px 44px -20px rgba(14, 15, 17, .35);
  --st-shadow-dialog: 0 30px 70px -24px rgba(0, 0, 0, .5);

  /* ── Movimento ──────────────────────────────────────────────────── */
  --st-ease: cubic-bezier(.22, 1, .36, 1);
  --st-quick: 160ms;
  --st-slow: 450ms;

  /* ── Livelli ────────────────────────────────────────────────────── */
  --st-z-rail: 70;
  --st-z-pop: 80;
  --st-z-dialog: 88;
  --st-z-toast: 95;
}

/* ── Compatibilità: gli stessi nomi di Focus, con i valori dello strumento ── */
:root {
  --dm-red: var(--st-red);
  --dm-red-hover: #d8152a;
  --dm-red-soft: var(--st-sig-bg);
  --canvas: #c4c6c9;
  --chrome: var(--st-list);
  --surface: var(--st-raise);
  --ink: var(--st-ink);
  --muted: var(--st-ink-3);
  --line: var(--st-line);
  --selection: var(--st-hl);
  --panel-bg: var(--st-list);
  --success: var(--st-ok);
  --success-soft: var(--st-ok-bg);
  --warning: var(--st-warn);
  --warning-soft: var(--st-warn-bg);
  --danger: var(--st-sig);
  --danger-soft: var(--st-sig-bg);
  --info: #255a91;
  --info-soft: #e3ebf4;
  --chart-secondary: var(--st-d2);
  --chart-tertiary: var(--st-d3);
  --ink-950: #0a0b0c;
  --ink-900: var(--st-ink);
  --ink-800: #1f2023;
  --ink-700: var(--st-rail-on);
  --ink-600: var(--st-ink-2);
  --ink-500: var(--st-ink-3);
  --ink-400: var(--st-ink-3);
  --ink-300: var(--st-faint);
  --ink-200: #d6d7da;
  --ink-100: var(--st-list);
  --ink-50: var(--st-stage);
  --bg: var(--canvas);
  --fg: var(--st-ink);
  --fg-muted: var(--st-ink-3);
  /* L'azione principale è nera: il rosso non sta sui comandi. */
  --accent: var(--st-ink);
  --accent-hover: var(--st-rail-on);
  --accent-purple: var(--st-d4);
  --accent-green: var(--st-ok);
  --accent-red: var(--st-sig);
  --accent-orange: var(--st-warn);
  --accent-yellow: var(--st-warn);
  --ink-on-blue: #255a91;
  --ink-on-green: var(--st-ok);
  --ink-on-red: var(--st-sig-ink);
  --ink-on-orange: var(--st-warn);
  --ink-on-amber: var(--st-warn);
  --glass-bg: var(--st-raise);
  --glass-bg-strong: var(--st-raise);
  --glass-border: var(--st-line);
  --blur-glass: 0px;
  --blur-glass-strong: 0px;
  --font-heading: var(--st-display);
  --font-ui: var(--st-sans);
  --font-sans: var(--st-sans);
  --font-mono: var(--st-mono);
  --radius: var(--st-r-panel);
  --control-radius: var(--st-r-field);
  --radius-small: var(--st-r-small);
  --radius-btn: 999px;
  --radius-input: var(--st-r-field);
  --radius-card: var(--st-r-panel);
  --radius-panel: var(--st-r-panel);
  --radius-pill: 999px;
  --shadow: var(--st-shadow-slab);
  --shadow-glass: var(--st-shadow-soft);
  --shadow-panel: var(--st-shadow-float);
  --shadow-glow-blue: none;
  --ease: var(--st-ease);
  --ease-spring: var(--st-ease);
  --ease-out-soft: var(--st-ease);
  --quick: var(--st-quick);
  --panel: 220ms;
  --z-sidebar: var(--st-z-rail);
  --z-sidebar-toggle: 71;
  --z-composer: 85;
  --z-composer-toggle: 86;
  --z-dialog: var(--st-z-dialog);
  --z-loading: 90;
  --z-toast: var(--st-z-toast);
  --sidebar: var(--st-rail-w);
  --sidebar-expanded: var(--st-list-w);
  --sidebar-w: var(--st-rail-w);
  --content-pad: var(--st-pad-x);
  --row-pad: 16px;
}

/* Strumento 1.1 — componenti della suite Deep Marketing. Richiede tokens.css.
   Ogni classe ha il prefisso st- per convivere con Tailwind e con le classi storiche delle app.
   Regole di posizione e d'uso: ~/SviluppoVibe/dm-gateway/DESIGN.md («Dove va cosa»). */

/* ══ Superficie della pagina ═══════════════════════════════════════════ */
.st-body {
  margin: 0; min-height: 100dvh; color: var(--st-ink); font-family: var(--st-sans); font-size: 14px; line-height: 1.45;
  background: var(--st-ground-2) linear-gradient(180deg, var(--st-ground-1), var(--st-ground-2)) fixed;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.st-body ::selection { background: var(--st-red); color: #fff; }
.st-body :focus-visible { outline: 2px solid var(--st-ink); outline-offset: 2px; }
.st-mono { font-family: var(--st-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.st-groove-b { border-bottom: 1px solid var(--st-groove); box-shadow: 0 1px 0 var(--st-hi); }
.st-groove-t { border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }

/* ══ Cornice: barra nera + pannello elenco + stage ══════════════════════ */
.st-device { display: grid; grid-template-columns: var(--st-rail-w) var(--st-list-w) minmax(0, 1fr); height: 100dvh; padding: 18px; box-sizing: border-box; }
.st-device--nolist { grid-template-columns: var(--st-rail-w) minmax(0, 1fr); }
.st-rail {
  background: var(--st-rail); border-radius: var(--st-r-slab); box-shadow: var(--st-shadow-rail); color: var(--st-rail-ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 0 16px; position: relative; z-index: 4; min-height: 0;
}
.st-rail__mark { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; flex-shrink: 0; }
.st-rail__mark svg, .st-rail__mark img { width: 30px; height: 21px; object-fit: contain; }
.st-rail__sep { width: 28px; height: 1px; background: rgba(255,255,255,.1); margin: 6px 0 10px; flex-shrink: 0; }
.st-rail__nav { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.st-rail__item {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; position: relative; flex-shrink: 0;
  color: inherit; background: transparent; border: 0; cursor: pointer; text-decoration: none; transition: background var(--st-quick), color var(--st-quick);
}
.st-rail__item svg { width: 20px; height: 20px; stroke-width: 1.6; }
.st-rail__item:hover { color: var(--st-rail-ink); }
.st-rail__item[aria-current="page"], .st-rail__item.is-on {
  background: var(--st-rail-on); color: var(--st-rail-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 16px -8px rgba(0,0,0,.7);
}
.st-rail__item[aria-current="page"]::after, .st-rail__item.is-on::after {
  content: ""; position: absolute; left: -9px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--st-red);
}
.st-rail__badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--st-rail-ink); color: var(--st-rail); font: 600 10px/16px var(--st-sans); text-align: center; }
.st-rail__tip {
  position: absolute; left: 58px; top: 50%; transform: translateY(-50%); background: var(--st-rail); color: var(--st-rail-ink); font-size: 12px;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5;
}
.st-rail__item:hover .st-rail__tip, .st-rail__item:focus-visible .st-rail__tip { opacity: 1; }
.st-rail__spacer { flex: 1; }
.st-rail__me { width: 40px; height: 40px; border-radius: 50%; background: #26272b; color: var(--st-rail-ink); display: grid; place-items: center; font-size: 12px; font-weight: 500; flex-shrink: 0; }

.st-list {
  background: linear-gradient(90deg, rgba(14,15,17,.07), rgba(14,15,17,0) 46px), var(--st-list);
  border-radius: 0 var(--st-r-slab) var(--st-r-slab) 0; margin-left: -28px; padding: 24px 16px 20px 44px;
  box-shadow: var(--st-shadow-slab); overflow: auto; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.st-list__head { padding: 2px 10px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.st-list__head h2 { margin: 0; font-family: var(--st-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.st-list__head span { font-size: 12.5px; color: var(--st-ink-4); }
.st-grp { flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; padding: 18px 0; border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }
.st-grp:first-of-type, .st-search + .st-grp, .st-ctx + .st-grp { border-top: 0; box-shadow: none; padding-top: 4px; }
.st-grp__lab { font-size: 13px; color: var(--st-ink-4); padding: 0 10px 10px; }
.st-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 11px; border-radius: var(--st-r-item);
  font-size: 14.5px; color: var(--st-ink); text-decoration: none; background: transparent; border: 0; text-align: left; cursor: pointer; width: 100%;
  transition: background .18s, box-shadow .18s;
}
.st-item svg { width: 20px; height: 20px; stroke-width: 1.6; color: var(--st-ink-2); }
.st-item:hover { background: var(--st-hl); }
.st-item[aria-current], .st-item.is-on { background: var(--st-active); box-shadow: var(--st-shadow-soft); }
.st-item__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item__c { font-size: 14px; color: var(--st-ink-4); white-space: nowrap; }
.st-item--bad .st-item__c, .st-item--bad svg { color: var(--st-sig); }
.st-item--dim .st-item__t { color: var(--st-ink-3); }
.st-item--add, .st-item--add svg { color: var(--st-ink-3); }
.st-search {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; margin: 0 0 6px; border-radius: var(--st-r-field);
  background: var(--st-sunk); border: 1px solid var(--st-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.05); color: var(--st-ink-3);
}
.st-search:focus-within { border-color: var(--st-ink); }
.st-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 14px; color: var(--st-ink); }
.st-ctx { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 14px; border-radius: 14px; background: var(--st-raise); box-shadow: var(--st-shadow-soft); border: 0; width: 100%; text-align: left; cursor: pointer; }
.st-ctx__av { width: 32px; height: 32px; border-radius: 9px; background: var(--st-ink); color: var(--st-stage); display: grid; place-items: center; font: 800 12px var(--st-display); flex-shrink: 0; }
.st-ctx__w { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.st-ctx__w b { font-weight: 500; font-size: 14px; }
.st-ctx__w span { font-size: 12px; color: var(--st-ink-3); }

.st-stage { margin-left: var(--st-gap); background: var(--st-stage); border-radius: var(--st-r-slab); box-shadow: var(--st-shadow-slab); overflow: auto; min-width: 0; position: relative; }
.st-device--nolist .st-stage { margin-left: var(--st-gap); }
.st-stage__in { padding: 30px var(--st-pad-x) 72px; display: flex; flex-direction: column; gap: var(--st-section-gap); max-width: 1280px; }
.st-strip { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--st-ink-2); min-height: 38px; }
.st-strip__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.st-title { display: flex; flex-direction: column; gap: 12px; }
.st-title__row { display: flex; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; }
.st-title h1 { flex: 1; margin: 0; font-family: var(--st-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.st-title p { margin: 0; color: var(--st-ink-3); font-size: 15px; max-width: 64ch; }
.st-sect-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.st-sect-h h3 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -.015em; }
.st-sect-h__aside { font-family: var(--st-mono); font-size: 12px; color: var(--st-ink-3); }

/* ══ Comandi ═══════════════════════════════════════════════════════════ */
.st-btn {
  height: 44px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--st-ink); color: var(--st-stage); cursor: pointer;
  font: 700 11px var(--st-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s, transform .15s;
}
.st-btn svg { width: 15px; height: 15px; }
.st-btn:hover { opacity: .88; }
.st-btn:active { transform: translateY(1px); }
.st-btn:disabled, .st-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.st-btn--ghost { background: transparent; color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-line-2); }
.st-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--st-ink); opacity: 1; }
.st-btn--small { height: 32px; padding: 0 14px; font-size: 11px; }
.st-btn--light { background: var(--st-stage); color: var(--st-ink); }
.st-btn--icon { width: 44px; padding: 0; }
.st-btn--small.st-btn--icon { width: 32px; }
.st-linkbtn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: var(--st-raise); box-shadow: var(--st-shadow-raise); font-size: 14px; color: var(--st-ink); text-decoration: none; }
.st-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--st-sunk); box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.st-seg > * { padding: 7px 14px; border-radius: 9px; font-size: 13px; color: var(--st-ink-2); text-decoration: none; border: 0; background: transparent; cursor: pointer; }
.st-seg > [aria-current], .st-seg > [aria-pressed="true"], .st-seg > .is-on { background: var(--st-ink); color: var(--st-stage); }
.st-ctl {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--st-r-control); border: 1px solid var(--st-line);
  background: var(--st-sunk); box-shadow: inset 0 1px 2px rgba(0,0,0,.05); font-size: 13px; color: var(--st-ink-2); white-space: nowrap; cursor: pointer;
}
.st-ctl svg { width: 16px; height: 16px; }
.st-ctl input { border: 0; background: transparent; outline: 0; min-width: 0; width: 150px; font: inherit; color: var(--st-ink); }
.st-chipf { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--st-raise); box-shadow: var(--st-shadow-soft); font-size: 12.5px; color: var(--st-ink-2); border: 0; cursor: pointer; }
.st-chipf b { font-weight: 500; color: var(--st-ink); }
.st-chipf svg { width: 13px; height: 13px; }
.st-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-toolbar__sp { flex: 1; }
.st-toolbar__count { font-family: var(--st-mono); font-size: 12.5px; color: var(--st-ink-3); }

/* ══ Campi ═════════════════════════════════════════════════════════════ */
.st-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.st-field > span { font-size: 12.5px; color: var(--st-ink-2); }
.st-field > em { font-style: normal; font-size: 12px; color: var(--st-ink-3); }
.st-field--err .st-in { border-color: var(--st-sig); }
.st-field--err > em { color: var(--st-sig); }
.st-in {
  width: 100%; box-sizing: border-box; background: var(--st-sunk); border: 1px solid var(--st-line); border-radius: var(--st-r-field); padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05); outline: 0; font: inherit; font-size: 14px; color: var(--st-ink); transition: border-color .15s;
}
.st-in:focus { border-color: var(--st-ink); }
.st-in--mono, textarea.st-in { font-family: var(--st-mono); font-size: 13px; letter-spacing: -.01em; }
textarea.st-in { min-height: 84px; resize: vertical; line-height: 1.75; }
.st-in--num { font-size: 15px; font-variant-numeric: tabular-nums; }
.st-check { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; color: var(--st-ink-2); }
.st-cb { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--st-line-2); background: var(--st-stage); display: inline-grid; place-items: center; vertical-align: middle; accent-color: var(--st-ink); }
.st-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--st-line-2); position: relative; border: 0; cursor: pointer; flex-shrink: 0; }
.st-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.st-switch[aria-checked="true"] { background: var(--st-ink); }
.st-switch[aria-checked="true"]::after { left: 16px; }

/* ══ Numeri e dati ═════════════════════════════════════════════════════ */
.st-lab { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-3); white-space: nowrap; }
.st-big { display: flex; align-items: flex-start; gap: 12px; line-height: .86; }
.st-big__cur { font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; margin-top: .35em; color: var(--st-ink-2); }
.st-big__v { font-size: clamp(76px, 10vw, 150px); font-weight: 200; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.st-big__v span { color: var(--st-ink-3); }
.st-chip { display: inline-flex; align-items: center; font-family: var(--st-mono); font-size: 12px; padding: 5px 9px; border-radius: 8px; background: var(--st-sunk); color: var(--st-ink-2); }
.st-chip--down { background: var(--st-chip-down-bg); color: var(--st-chip-down-ink); }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }
.st-kpi { padding: 20px 20px 4px 0; min-width: 0; }
.st-kpi + .st-kpi { padding-left: 20px; border-left: 1px solid var(--st-groove); box-shadow: inset 1px 0 0 var(--st-hi); }
.st-kpi__n { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.02em; margin-top: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-kpi__n--bad { color: var(--st-sig); }
.st-kpi__d { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-ink-3); margin-top: 6px; }
.st-kpi__d--up { color: var(--st-ok); }
.st-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--st-sunk); color: var(--st-ink-2); }
.st-badge svg { width: 13px; height: 13px; }
.st-badge--ok { background: var(--st-ok-bg); color: var(--st-ok); }
.st-badge--warn { background: var(--st-warn-bg); color: var(--st-warn); }
.st-badge--err { background: var(--st-sig-bg); color: var(--st-sig-ink); }
.st-badge--info { background: #e3ebf4; color: #255a91; }
.st-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--st-ink-2); }
.st-tag i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.st-pos { color: var(--st-ok); }
.st-neg { color: var(--st-ink); }
.st-bad { color: var(--st-sig); }
.st-mut { color: var(--st-ink-3); }

/* Scheda dati (mono, riga che conta con tacca e parentesi) */
.st-sheet { min-width: 0; overflow-x: auto; }
.st-sheet table { width: 100%; border-collapse: collapse; font-family: var(--st-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.st-sheet th { font-family: var(--st-sans); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-ink-3); text-align: left; padding: 0 10px 14px; white-space: nowrap; }
.st-sheet td { padding: 9px 10px; white-space: nowrap; position: relative; }
.st-sheet .st-r, .st-table .st-r { text-align: right; }
.st-sheet tbody tr:hover, .st-sheet tr.is-hl { background: var(--st-hl); }
.st-sheet tbody tr:hover td:first-child::before, .st-sheet tr.is-hl td:first-child::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; transform: translateY(-50%); background: var(--st-ink); }
.st-brk { position: relative; padding: 0 8px; }
.st-sheet tbody tr:hover .st-brk::before, .st-sheet tbody tr:hover .st-brk::after, .st-sheet tr.is-hl .st-brk::before, .st-sheet tr.is-hl .st-brk::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 5px; border: 1px solid var(--st-ink); }
.st-brk::before { left: -2px; border-right: 0 !important; }
.st-brk::after { right: -2px; border-left: 0 !important; }

/* Tabella completa */
.st-table { border: 1px solid var(--st-line); border-radius: 18px; background: var(--st-raise); overflow: hidden; }
.st-table__scroll { overflow-x: auto; }
.st-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.st-table th { position: sticky; top: 0; background: var(--st-raise); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-ink-3); text-align: left; padding: 14px 12px 12px; white-space: nowrap; border-bottom: 1px solid var(--st-groove); box-shadow: 0 1px 0 var(--st-hi); z-index: 1; }
.st-table th button, .st-table th a { display: inline-flex; align-items: center; gap: 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.st-table th [aria-sort="ascending"], .st-table th [aria-sort="descending"], .st-table th .is-on { color: var(--st-ink); }
.st-table th svg { width: 12px; height: 12px; }
.st-table td { padding: 11px 12px; border-bottom: 1px solid var(--st-groove); vertical-align: middle; }
.st-table tbody tr:hover td { background: var(--st-hl); }
.st-table tr.is-sel td { background: rgba(14,15,17,.07); }
.st-table tr.is-off td { color: var(--st-faint); text-decoration: line-through; }
.st-table .st-first { position: sticky; left: 0; background: var(--st-raise); z-index: 1; }
.st-table .st-num { font-family: var(--st-mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
.st-table .st-wrap { white-space: normal; min-width: 180px; }
.st-table tr.st-total td { font-weight: 500; background: var(--st-list); border-bottom: 0; }
.st-table tr.st-expand td { background: var(--st-list); padding: 16px 18px 18px 52px; }
.st-pager { display: flex; align-items: center; gap: 14px; padding: 12px 16px; font-size: 12.5px; color: var(--st-ink-3); border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }
.st-pager__pg { margin-left: auto; display: inline-flex; gap: 2px; }
.st-pager__pg > * { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-family: var(--st-mono); font-size: 12px; color: var(--st-ink-2); text-decoration: none; border: 0; background: none; cursor: pointer; }
.st-pager__pg > [aria-current] { background: var(--st-ink); color: var(--st-stage); }
.st-inline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 8px; border: 1px dashed var(--st-line-2); font-size: 12.5px; color: var(--st-ink-3); background: transparent; cursor: pointer; max-width: 100%; }
.st-inline.is-set { border-style: solid; border-color: transparent; background: var(--st-sunk); color: var(--st-ink); }
.st-inline svg { width: 12px; height: 12px; flex-shrink: 0; }
.st-dots { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--st-ink-3); background: none; border: 0; cursor: pointer; }
.st-dots:hover { background: var(--st-sunk); color: var(--st-ink); }
.st-bulk { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--st-ink); color: var(--st-stage); border-radius: 14px; font-size: 13px; }
.st-bulk .st-btn--ghost { color: var(--st-stage); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); height: 34px; padding: 0 14px; }

/* ══ Strati ════════════════════════════════════════════════════════════ */
.st-menu { min-width: 220px; border: 1px solid var(--st-line); border-radius: var(--st-r-pop); background: var(--st-raise); box-shadow: var(--st-shadow-float); padding: 6px; display: flex; flex-direction: column; z-index: var(--st-z-pop); }
.st-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--st-ink); text-decoration: none; cursor: pointer; border: 0; background: none; text-align: left; outline: 0; }
.st-menu__item:hover, .st-menu__item[data-highlighted] { background: var(--st-hl); }
.st-menu__item svg { width: 16px; height: 16px; color: var(--st-ink-3); }
.st-menu__item--danger, .st-menu__item--danger svg { color: var(--st-sig); }
.st-menu__sep { height: 1px; background: var(--st-groove); box-shadow: 0 1px 0 var(--st-hi); margin: 5px 4px; }
.st-tip { background: var(--st-ink); color: var(--st-stage); border-radius: 10px; padding: 8px 11px; font-size: 12px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); z-index: var(--st-z-pop); max-width: 320px; }
.st-scrim { position: fixed; inset: 0; background: var(--st-scrim); backdrop-filter: blur(3px); z-index: var(--st-z-dialog); }
.st-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; background: var(--st-raise); border-radius: var(--st-r-panel); box-shadow: var(--st-shadow-dialog); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; z-index: calc(var(--st-z-dialog) + 1); }
.st-dialog h2, .st-dialog h3 { margin: 0; font-family: var(--st-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.st-dialog p { margin: 0; font-size: 14px; color: var(--st-ink-2); line-height: 1.55; }
.st-drawer { position: fixed; top: 18px; right: 18px; bottom: 18px; width: min(460px, calc(100vw - 36px)); background: var(--st-raise); border-radius: var(--st-r-panel); box-shadow: -20px 0 50px -24px rgba(0,0,0,.45); padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; z-index: calc(var(--st-z-dialog) + 1); overflow: auto; }
.st-drawer h2, .st-drawer h3 { margin: 0; font-family: var(--st-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.st-pop { border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-raise); box-shadow: var(--st-shadow-float); padding: 16px; z-index: var(--st-z-pop); }
.st-toast { font-family: var(--st-mono); font-size: 12.5px; padding: 10px 14px; border-radius: 4px; background: var(--st-ink); color: var(--st-stage); box-shadow: var(--st-shadow-float); }
.st-toast--err::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--st-red); margin-right: 9px; vertical-align: 1px; }

/* ══ Stati della pagina ════════════════════════════════════════════════ */
.st-alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--st-sig-bg); color: var(--st-sig-ink); font-size: 14px; line-height: 1.5; }
.st-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.st-alert--warn { background: var(--st-warn-bg); color: var(--st-warn); }
.st-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 0; }
.st-empty__ring { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--st-line-2); display: grid; place-items: center; color: var(--st-ink-3); }
.st-empty p { margin: 0; font-size: 14px; color: var(--st-ink-2); max-width: 46ch; }
.st-skel { display: flex; flex-direction: column; gap: 12px; }
.st-skel i { display: block; height: 12px; border-radius: 5px; background: linear-gradient(90deg, var(--st-sunk) 0, #eceef0 40%, var(--st-sunk) 80%); background-size: 300% 100%; animation: st-sk 1.6s ease-in-out infinite; }
@keyframes st-sk { from { background-position: 100% 0 } to { background-position: 0 0 } }
.st-ro { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--st-ink-3); }

/* ══ Contenitori ═══════════════════════════════════════════════════════ */
.st-panel { border: 1px solid var(--st-line); border-radius: var(--st-r-panel); background: var(--st-raise); padding: 30px 34px; display: flex; flex-direction: column; gap: 24px; }
.st-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 56px; }
.st-formrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.st-actions__sp { flex: 1; }
.st-detail { display: grid; grid-template-columns: minmax(240px, .9fr) 46px minmax(0, 1.25fr); border: 1px solid var(--st-line); border-radius: var(--st-r-panel); background: var(--st-raise); min-height: 480px; }
.st-detail__obj { padding: 30px; display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--st-groove); box-shadow: 1px 0 0 var(--st-hi); min-width: 0; }
.st-detail__info { padding: 34px 38px 32px; display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.st-detail__name { margin: 0; font-family: var(--st-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; word-break: break-word; }
.st-vtabs { border-right: 1px solid var(--st-groove); box-shadow: 1px 0 0 var(--st-hi); display: flex; flex-direction: column; align-items: center; padding: 22px 0; gap: 22px; }
.st-vtabs > * { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-ink-3); padding: 6px 4px; font-weight: 500; text-decoration: none; position: relative; background: none; border: 0; cursor: pointer; }
.st-vtabs > [aria-current], .st-vtabs > [aria-selected="true"] { color: var(--st-ink); }
.st-vtabs > [aria-current]::after, .st-vtabs > [aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--st-red); }
.st-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--st-groove); box-shadow: 0 1px 0 var(--st-hi); overflow-x: auto; }
.st-subnav > * { padding: 10px 12px 12px; font-size: 13.5px; color: var(--st-ink-3); text-decoration: none; position: relative; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.st-subnav > [aria-current], .st-subnav > [aria-selected="true"] { color: var(--st-ink); }
.st-subnav > [aria-current]::after, .st-subnav > [aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--st-ink); }

/* ══ Strumenti di misura ═══════════════════════════════════════════════ */
.st-track { position: relative; height: 2px; background: var(--st-line-2); }
.st-track__fill { position: absolute; left: 0; top: -1px; height: 4px; background: var(--st-ink); max-width: 100%; }
.st-track__fill--over { background: var(--st-red); }
.st-track__knob { position: absolute; top: -6px; width: 1px; height: 14px; background: var(--st-ink); }
.st-barcode { display: flex; gap: 3px; align-items: flex-end; height: 34px; }
.st-barcode i { flex: 1; background: var(--st-ink); opacity: .85; min-width: 2px; }
.st-barcode i.is-err { background: var(--st-red); opacity: 1; }
.st-barcode i.is-zero { opacity: .15; }
.st-inst { position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; }
.st-corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--st-ink-2); }
.st-corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.st-corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.st-corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.st-corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.st-label { position: absolute; display: flex; gap: 10px; align-items: center; font-family: var(--st-mono); font-size: 11px; background: var(--st-ink); color: var(--st-stage); padding: 5px 9px; border-radius: 3px; white-space: nowrap; }
.st-label b { font-weight: 400; opacity: .65; }
.st-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--st-ink-2); }
.st-legend span { display: inline-flex; align-items: center; gap: 7px; }
.st-legend i { width: 14px; height: 3px; border-radius: 2px; }
.st-spark { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-spark__h { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.st-spark__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.st-spark__v { margin-left: auto; font-family: var(--st-mono); font-size: 12.5px; color: var(--st-ink-2); }
.st-ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--st-raise); border: 1px solid var(--st-line); }
.st-ai__ic { width: 28px; height: 28px; border-radius: 8px; background: var(--st-ink); color: var(--st-stage); display: grid; place-items: center; }
.st-ai__src { font-family: var(--st-mono); font-size: 11px; color: var(--st-ink-3); margin-top: 8px; }

/* ══ Misure dello schermo ══════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .st-detail { grid-template-columns: 1fr; }
  .st-detail__obj { border-right: 0; box-shadow: none; border-bottom: 1px solid var(--st-groove); }
  .st-vtabs { flex-direction: row; border-right: 0; box-shadow: none; border-bottom: 1px solid var(--st-groove); padding: 0 18px; gap: 4px; }
  .st-vtabs > * { writing-mode: horizontal-tb; transform: none; padding: 12px 10px; }
}
@media (max-width: 900px) {
  .st-device { display: flex; flex-direction: column; height: auto; min-height: 100dvh; padding: 10px; gap: 10px; }
  .st-rail { flex-direction: row; padding: 8px 10px; border-radius: 20px; position: sticky; top: 0; z-index: 10; overflow-x: auto; }
  .st-rail__nav { flex-direction: row; overflow: visible; }
  .st-rail__mark { margin: 0 6px 0 2px; width: 38px; height: 38px; }
  .st-rail__sep, .st-rail__tip, .st-rail__spacer { display: none; }
  .st-rail__item { width: 44px; height: 44px; }
  .st-rail__item[aria-current="page"]::after, .st-rail__item.is-on::after { left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -2px; }
  .st-rail__me { margin-left: auto; }
  .st-list { margin-left: 0; border-radius: 20px; padding: 16px 12px; overflow: visible; background: var(--st-list); }
  .st-grp { padding: 10px 0; }
  .st-grp .st-items { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .st-item { width: auto; flex-shrink: 0; grid-template-columns: 20px auto auto; padding: 8px 12px; font-size: 13.5px; }
  .st-stage { margin-left: 0; border-radius: 20px; overflow: visible; }
  .st-stage__in { padding: 22px var(--st-pad-x-m) 44px; gap: 48px; }
  .st-grid2, .st-formrow { grid-template-columns: 1fr; }
  .st-kpi + .st-kpi { padding-left: 0; border-left: 0; box-shadow: none; }
  .st-panel { padding: 20px; }
  .st-detail__info { padding: 22px 20px; }
  .st-in { font-size: 16px; }
}
.st-items { display: flex; flex-direction: column; gap: 2px; }
@media (prefers-reduced-motion: reduce) {
  .st-skel i { animation: none; }
  .st-btn, .st-item, .st-rail__item { transition: none; }
}

.tr-msgs { display: flex; flex-direction: column; }
.tr-msg { padding: 22px 0; border-top: 1px solid var(--st-groove); box-shadow: inset 0 1px 0 var(--st-hi); }
.tr-msg:first-child { border-top: 0; box-shadow: none; padding-top: 0; }
.tr-msg p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; line-height: 1.55; }
.tr-cmd { display: block; padding: 12px 14px; border-radius: var(--st-r-field); background: var(--st-sunk); border: 1px solid var(--st-line); overflow-x: auto; white-space: pre; }
.tr-inline { margin: 0; display: inline; }
.st-table th.st-num { font-family: var(--st-sans); font-size: 10.5px; letter-spacing: .12em; }
/* I messaggi sono testo da leggere: lo strumento tiene il monospazio per codici e chiavi. */
textarea.st-in.tr-testo { font-family: var(--st-sans); font-size: 14.5px; letter-spacing: 0; line-height: 1.55; }
[data-err][hidden] { display: none; }
.tr-gruppo { display: flex; flex-direction: column; gap: 16px; }
.st-table td { white-space: nowrap; }
.st-table a { color: var(--st-ink); text-decoration: none; font-weight: 500; }
.st-table a:hover { text-decoration: underline; }
.st-table td .st-mut { display: block; font-size: 12.5px; margin-top: 2px; }
.st-panel h3 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -.015em; }
.st-panel p { margin: 0; color: var(--st-ink-2); max-width: 64ch; }
.st-title p a, .st-panel p a { color: var(--st-ink); }
.tr-esci { margin: 0; display: contents; }
.tr-simple { min-height: 100dvh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.tr-simple main { background: var(--st-stage); border-radius: var(--st-r-slab); box-shadow: var(--st-shadow-slab); padding: 40px 44px; width: min(460px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.tr-simple__mark svg { width: 30px; height: 21px; display: block; }
.tr-simple h1 { margin: 0; font-family: var(--st-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.tr-simple p { margin: 0; color: var(--st-ink-2); line-height: 1.5; }
.tr-simple form { display: flex; flex-direction: column; gap: 14px; }
.tr-simple a { color: var(--st-ink); }
.tr-simple label { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--st-ink-2); }
.tr-simple input:not([type=hidden]) { width: 100%; box-sizing: border-box; background: var(--st-sunk); border: 1px solid var(--st-line); border-radius: var(--st-r-field); padding: 10px 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.05); outline: 0; font: inherit; font-size: 15px; color: var(--st-ink); }
.tr-simple input:focus { border-color: var(--st-ink); }
.tr-simple button { height: 44px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--st-ink); color: var(--st-stage); cursor: pointer; font: 700 11px var(--st-display); letter-spacing: .12em; text-transform: uppercase; align-self: flex-start; }
.tr-simple button:hover { opacity: .88; }
@media (max-width: 900px) {
  body .st-device--nolist .st-stage { margin-left: 0; }
  body .st-rail__me { display: none; }
  .tr-esci { display: block; margin-left: auto; }
  .tr-simple main { padding: 28px 24px; }
}