/* Console — Mini App. Tema dalle themeParams di Telegram (vedi app.js), con fallback.
   UX "app-in-app": home a lista sectioned, navigazione col BackButton nativo, safe-area. */
:root {
  --bg: #ffffff; --text: #111111; --hint: #7d7d7d; --card: #f2f2f2;
  --accent: #2ea6ff; --accent-text: #ffffff; --link: #2ea6ff;
  --radius: 14px; --gap: 10px; --pad-x: 16px;
  --safe-top: 0px; --safe-bottom: 0px;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
/* il fondo sta sull'html: su viewport larghi (Telegram Desktop massimizzato, browser)
   il contenuto resta a misura di pollice e centrato, senza righe sconfinate */
html { background: var(--bg); }
body {
  margin: 0 auto; max-width: 640px;
  padding: max(env(safe-area-inset-top), var(--safe-top)) env(safe-area-inset-right)
           max(env(safe-area-inset-bottom), var(--safe-bottom)) env(safe-area-inset-left);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}

/* ============================================================================
   DESIGN SYSTEM (2026-08-05) — token + componenti `ds-*`
   ----------------------------------------------------------------------------
   REGOLA DI SPECIFICITÀ (nasce da un bug vero: `.btn`, definito più sotto nel
   foglio, vinceva su `.shead-btn` a parità di specificità e imponeva width:100%,
   mandando un tasto fuori schermo):
     1. i componenti `ds-*` sono SEMPRE selettori a UNA classe, definiti qui;
     2. una sezione non ridefinisce MAI `.ds-x`: aggiunge un proprio modificatore
        sullo stesso elemento (`.ds-stat.res-hero`), che ha specificità maggiore
        e quindi non dipende dall'ordine nel file;
     3. un componente non impone mai `width`/`margin` esterni: li decide il
        contenitore. Così due componenti accostati non litigano.
   Nessun valore fuori scala: spazi e corpi tipografici vengono da queste var.
   ============================================================================ */
:root {
  /* SPAZIO — base 4px. Ogni nuovo padding/margine usa uno di questi gradini. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* TIPOGRAFIA — 7 gradini e basta (prima: valori a occhio da 11px a 34px) */
  --t-micro: 11px;    /* etichetta di tile, unità di misura */
  --t-small: 12.5px;  /* sotto-riga, nota, motivo */
  --t-body: 14px;     /* corpo delle righe dati */
  --t-lead: 16px;     /* titolo di riga */
  --t-title: 20px;    /* titolo di sezione */
  --t-num: 26px;      /* numero dentro una tile */
  --t-hero: 34px;     /* il numero che risponde alla domanda della pagina */
  --fw-med: 600; --fw-bold: 700;
  /* COLORE SEMANTICO: verde = va, ambra = attenzione, rosso = rotto. Nient'altro.
     Il colore non decora: se una cosa è colorata, quel colore significa qualcosa. */
  --ok: #34c759; --warn: #f5a623; --bad: #e8483c;
  /* la versione da TESTO dei semafori. Non è una costante: si mescola verso il
     colore del testo del tema, quindi scurisce su fondo chiaro e schiarisce su
     fondo scuro. I valori fissi di prima (#2a9d4a, #c77d00) erano leggibili solo
     in tema chiaro — su fondo scuro un verde scuro su antracite non si legge.
     Le percentuali sono diverse per colore perché i tre pigmenti non hanno la
     stessa luminanza: sono tarate sul caso PEGGIORE (tema chiaro) per stare a
     4,5:1 sul fondo, e nel tema scuro il mix va da solo nella direzione giusta.
     NB questo commento è stato per un periodo SPEZZATO in due (un *\/ orfano a
     metà): il recovery del parser CSS si mangiava la riga di --ok-ink e ogni
     numero verde della Console perdeva il colore. Un commento rotto qui non è
     cosmetica: è un token che sparisce in silenzio. */
  --ok-ink: color-mix(in srgb, var(--ok) 58%, var(--text));
  --warn-ink: color-mix(in srgb, var(--warn) 54%, var(--text));
  --bad-ink: color-mix(in srgb, var(--bad) 74%, var(--text));
  /* il TESTO SECONDARIO informativo (sotto-righe, etichette di tile, note): il grigio
     `--hint` puro dei temi Telegram sta a ~2,5:1 sulla card in tema chiaro — sotto AA.
     Stesso principio di ds-missing: si mescola verso il testo per restare leggibile in
     entrambi i temi. `--hint` puro resta per il DECORATIVO (chevron, pallini, tracce). */
  --hint-ink: color-mix(in srgb, var(--hint) 55%, var(--text));
  /* superfici DERIVATE dal tema (che continua ad arrivare dalle themeParams) */
  --line: color-mix(in srgb, var(--hint) 14%, transparent);
  --line-2: color-mix(in srgb, var(--hint) 24%, transparent);
  --wash: color-mix(in srgb, var(--hint) 8%, transparent);
}

/* -- etichetta di gruppo (iOS: la scritta piccola sopra una card) -- */
.ds-group { font-size: var(--t-small); font-weight: var(--fw-bold); color: var(--hint);
  text-transform: uppercase; letter-spacing: .04em; margin: var(--s5) 0 var(--s2); }
.ds-group-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.ds-group-act { font-size: var(--t-small); font-weight: var(--fw-med); color: var(--link);
  text-transform: none; letter-spacing: 0; }
/* bersaglio di tocco ≥36px senza spostare il testo: il padding si compensa col margine
   negativo. La doppia classe vince su `.linkbtn` (definito più sotto) senza guerre d'ordine. */
.ds-group-act.linkbtn { margin: -10px -6px; padding: var(--s3) var(--s2) var(--s3) var(--s3);
  min-width: 36px; text-align: center; }
.ds-group-act.danger { color: var(--bad-ink); }
/* l'UNICO modo di staccare un blocco dal precedente: niente margini ad-hoc sparsi */
.ds-gap { margin-top: var(--s3); }

/* -- superficie: la card è UNA, con o senza padding -- */
.ds-panel { background: var(--card); border-radius: var(--radius); }
.ds-pad { padding: var(--s3) var(--s4); }

/* -- TILE statistica: numero grande, etichetta sotto, eventuale terza riga -- */
/* minmax(0, 1fr): una tile con un numero lungo non allarga la colonna (e non spinge le
   altre fuori schermo) — si stringe lei. Pulizia 2026-09-02. */
.ds-stats { display: grid; gap: var(--s2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-stats.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-stat { background: var(--card); border-radius: var(--radius); padding: var(--s3) var(--s2);
  text-align: center; min-width: 0; }
.ds-stat-v { font-size: var(--t-num); font-weight: var(--fw-bold); line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* tre tile affiancate su 375px: «105,75€» a 26px non ci sta e andava a capo fra cifra e
   simbolo (Resa). In una griglia a 3 colonne il numero scende di un gradino: 20px leggibili
   e sempre su una riga. Le griglie a 2 e l'hero (che occupa tutta la riga) restano. */
.ds-stats:not(.c2) .ds-stat:not(.hero) .ds-stat-v { font-size: var(--t-title); }
.ds-stat-l { font-size: var(--t-micro); color: var(--hint-ink); margin-top: var(--s1); line-height: 1.25; }
.ds-stat-s { font-size: var(--t-micro); color: var(--hint-ink); margin-top: 2px; }
.ds-stat-v.ok { color: var(--ok-ink); } .ds-stat-v.warn { color: var(--warn-ink); }
.ds-stat-v.bad { color: var(--bad-ink); }
/* la tile che porta LA risposta della pagina: più grande, larga quanto la griglia */
.ds-stat.hero { grid-column: 1 / -1; text-align: left; padding: var(--s4); }
.ds-stat.hero .ds-stat-v { font-size: var(--t-hero); }
.ds-stat.hero .ds-stat-l { font-size: var(--t-body); margin-top: var(--s1); }

/* -- RIGHE dati: una sola specie di riga in tutta la Console.
      Prima erano tre quasi-uguali (.irow, .drow, .res-band, .arc-file). -- */
.ds-rows { background: var(--card); border-radius: var(--radius); overflow: hidden; }
/* Il separatore è un'OMBRA INTERNA, non un border, e sta sul contenitore: le righe
   possono essere <div> o <button> (NavRow, Alert cliccabile) e un <button> porta un
   bordo suo dallo user-agent. Con `border-top` bisognava azzerarlo nella variante
   .nav, e quell'azzeramento — a specificità pari e definito dopo — si mangiava anche
   il separatore: esattamente il tipo di guerra d'ordine che questo sistema esiste per
   evitare. Un box-shadow non è azzerabile da un reset di border, quindi non c'è più
   niente da coordinare. */
.ds-rows > * + * { box-shadow: inset 0 1px 0 var(--line); }
.ds-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  min-width: 0; border: 0; background: none; }
.ds-row-ico { flex: 0 0 auto; font-size: var(--t-lead); line-height: 1; }
.ds-row-main { flex: 1; min-width: 0; }
.ds-row-t { font-size: var(--t-body); line-height: 1.3; }
.ds-row-s { font-size: var(--t-small); color: var(--hint-ink); line-height: 1.35; margin-top: 2px; }
.ds-row-v { flex: 0 0 auto; text-align: right; font-size: var(--t-body); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums; }
.ds-row-v.ok { color: var(--ok-ink); } .ds-row-v.warn { color: var(--warn-ink); }
.ds-row-v.bad { color: var(--bad-ink); }
.ds-row-v-wrap { flex: 0 0 auto; text-align: right; min-width: 0; }
.ds-row-v2 { font-size: var(--t-micro); color: var(--hint); font-weight: 400; margin-top: 2px; }
/* riga di NAVIGAZIONE (porta a una pagina): stessa riga + chevron, tap su tutto */
.ds-row.nav { cursor: pointer; -webkit-tap-highlight-color: transparent; width: 100%;
  font: inherit; color: inherit; text-align: left; }
.ds-row.nav:active { background: var(--wash); }
.ds-row-chev { flex: 0 0 auto; color: var(--hint); font-size: var(--t-title); line-height: 1; opacity: .55; }

/* -- BARRA di proporzione: un solo meter per tutta la Console -- */
.ds-meter { height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--hint) 16%, transparent); }
.ds-meter-f { height: 100%; border-radius: 3px; min-width: 2px; background: var(--accent);
  transition: width .25s; }
.ds-meter-f.ok { background: var(--ok); } .ds-meter-f.warn { background: var(--warn); }
.ds-meter-f.bad { background: var(--bad); }
.ds-meter-f.mute { background: color-mix(in srgb, var(--hint) 50%, transparent); }

/* -- ONESTÀ DEL DATO (il componente più importante del sistema) --------------
   Un dato che non c'è NON è uno zero, e non deve poter essere scambiato per uno:
   niente numero, niente barra, un trattino e il MOTIVO. Sta su fondo neutro con
   un filetto laterale: si distingue da una riga di dati senza gridare (non è un
   errore, è un'assenza).  `.ds-missing.warn` per le assenze che vanno sanate. */
.ds-missing { display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--wash); border-left: 3px solid var(--line-2); border-radius: var(--radius);
  padding: var(--s3) var(--s4); font-size: var(--t-small); line-height: 1.45;
  /* NON `--hint` puro: col grigio secondario di Telegram sta a 4,23:1 sul fondo scuro,
     sotto AA. Questo è il componente che spiega PERCHÉ un dato non c'è — se c'è un
     testo che dev'essere leggibile in questa app, è questo. */
  color: color-mix(in srgb, var(--hint) 65%, var(--text)); }
.ds-missing.warn { border-left-color: var(--warn); }
.ds-missing-d { flex: 0 0 auto; font-size: var(--t-lead); font-weight: var(--fw-bold);
  color: var(--line-2); line-height: 1.2; }
.ds-missing b { color: var(--text); font-weight: var(--fw-med); }
/* marchio di PARZIALITÀ: un numero che copre solo una parte lo dichiara accanto */
.ds-partial { display: inline-block; font-size: var(--t-micro); font-weight: var(--fw-med);
  color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-radius: 6px; padding: 1px var(--s1); margin-left: var(--s1); vertical-align: 2px; }

/* -- confronto di DUE proporzioni sulla stessa etichetta (slot liberati contro
      resa persa; segnalazioni contro post; nostro mix contro tabella Amazon).
      Il DIVARIO fra le due barre È l'informazione, quindi vanno IMPILATE e con
      la stessa scala: affiancate, l'occhio non lo misura. -- */
.ds-dual { padding: var(--s3) 0; }
.ds-dual + .ds-dual { border-top: 1px solid var(--line); }
.ds-dual-top { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2); font-size: var(--t-body); }
.ds-dual-l { font-weight: var(--fw-med); flex: 0 0 auto; }
.ds-dual-n { color: var(--hint-ink); font-size: var(--t-small); text-align: right;
  font-variant-numeric: tabular-nums; }
.ds-dual-n b { color: var(--text); font-weight: var(--fw-bold); }
.ds-dual-n b.alt { color: var(--ok-ink); }
.ds-dual .ds-meter { margin-top: var(--s1); }

/* -- AVVISO: qualcosa non va, o va saputo prima di leggere il resto. Il fondo
      colorato è riservato a QUESTO (le tile tingono solo il numero), così un
      riquadro colorato in pagina significa sempre la stessa cosa. `tap` lo rende
      un bersaglio con chevron. -- */
.ds-alert { display: flex; gap: var(--s3); align-items: flex-start; width: 100%;
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  border: 0 solid; border-left-width: 3px;
  font-size: var(--t-small); line-height: 1.45; color: var(--hint-ink);
  text-align: left; font-family: inherit; }
.ds-alert.warn { background: color-mix(in srgb, var(--warn) 13%, var(--card)); border-color: var(--warn); }
.ds-alert.bad { background: color-mix(in srgb, var(--bad) 13%, var(--card)); border-color: var(--bad); }
.ds-alert.ok { background: color-mix(in srgb, var(--ok) 12%, var(--card)); border-color: var(--ok); }
.ds-alert.info { background: var(--card); border-color: var(--accent); }
.ds-alert.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ds-alert.tap:active { opacity: .75; }
.ds-alert-ico { flex: 0 0 auto; font-size: var(--t-lead); line-height: 1.2; }
.ds-alert-b { flex: 1; min-width: 0; }
.ds-alert-t { font-size: var(--t-body); font-weight: var(--fw-bold); color: var(--text); }
.ds-alert-s { margin-top: 3px; }
.ds-alert-act { margin-top: var(--s2); border: 0; border-radius: 9px; padding: var(--s3) var(--s4);
  font-size: var(--t-small); font-weight: var(--fw-med); font-family: inherit;
  background: var(--accent); color: var(--accent-text); cursor: pointer; }

/* -- BARRA IMPILATA + legenda: una composizione (il mix per fascia, i canali).
      I colori li decide il chiamante perché codificano un dominio (l'aliquota),
      non uno stato. -- */
.ds-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.ds-stack-seg { min-width: 6px; }
.ds-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2);
  font-size: var(--t-small); color: var(--hint-ink); font-variant-numeric: tabular-nums; }
.ds-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: var(--s1); }

/* -- CHIP di conteggio (le nostre categorie dentro una fascia, i filtri di un
      elenco). Non è il `.chip` cliccabile dei filtri: questo è un'etichetta. -- */
.ds-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.ds-tag { background: var(--wash); border-radius: 9px; padding: var(--s1) var(--s3); font-size: var(--t-small); }
.ds-tag b { margin-left: var(--s1); font-variant-numeric: tabular-nums; }

/* -- nota di contesto sotto un titolo (sostituisce i muri di prosa grigia) -- */
.ds-note { font-size: var(--t-small); color: var(--hint-ink); line-height: 1.45; margin: var(--s1) 0 var(--s2); }

/* ---- Home ---- */
.home-header { padding: 20px var(--pad-x) 6px; }
.home-header h1 { margin: 0; font-size: var(--t-num); font-weight: var(--fw-bold); }
.home-header p { margin: var(--s1) 0 0; color: var(--hint); font-size: var(--t-body); }
/* la lista della home è la STESSA dei .ds-rows delle sezioni: prima `.list` era definita
   DUE volte nel foglio (card raggruppata qui, lista a gap altrove) e la home si prendeva
   entrambe — raggruppamento e spaziatura insieme. Un nome, un significato. */
.home-list { margin: var(--s3) var(--pad-x); }
.ds-row .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: var(--t-title); flex: 0 0 auto; }
.ds-row.soon { opacity: .6; }
.tag-soon { font-size: var(--t-micro); font-weight: var(--fw-med); color: var(--hint);
  background: color-mix(in srgb, var(--hint) 16%, transparent); padding: 2px var(--s2); border-radius: 7px; }

/* ---- Caricamento FUORI dal flusso (2026-09-02, NN/g + web.dev CLS) ---- */
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-spin { display: inline-block; border-radius: 50%; box-sizing: border-box;
  border: 3px solid color-mix(in srgb, var(--hint) 22%, transparent); border-top-color: var(--link);
  animation: ds-spin .8s linear infinite; flex: 0 0 auto; }
/* overlay: scheda centrata sopra la UI, position fixed = zero spazio nel flusso; entra
   con un fade solo quando `.on` (ritardo NN/g: chi carica in meno di 300ms non la vede) */
.ds-loading-overlay { position: fixed; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 40; }
.ds-loading-overlay.on { opacity: 1; }
.ds-loading-card { display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s5); border-radius: 16px; background: var(--card);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 18%, transparent); }
.ds-loading-l { font-size: var(--t-small); color: var(--hint-ink); }
/* box inline: RISERVA l'altezza del pannello in arrivo (min-height, mai 0 che poi cresce) */
.ds-loading-box { min-height: 120px; display: grid; place-items: center; gap: var(--s2); }
/* la vista senza dati tiene un'altezza credibile sotto l'overlay */
.view-loading { min-height: 60vh; }
/* pill dello stale (cache SWR): FLOTTANTE in basso come un toast, fuori dal flusso —
   compare e sparisce senza spostare la sezione e non copre i comandi in testa */
.ds-note.swr-pill { position: fixed; bottom: calc(max(env(safe-area-inset-bottom), var(--safe-bottom)) + var(--s3));
  left: 50%; transform: translateX(-50%); margin: 0; z-index: 30; display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: 999px; background: var(--card); font-size: var(--t-micro);
  box-shadow: 0 4px 16px color-mix(in srgb, #000 14%, transparent); white-space: nowrap; }
/* ---- Schermata di blocco (gate accesso globale) ---- */
.lock-screen {
  min-height: 82vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: var(--s6) var(--s6); gap: var(--s2);
}
.lock-ico {
  width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center;
  font-size: 42px; background: color-mix(in srgb, var(--hint) 12%, transparent); margin-bottom: var(--s3);
}
.lock-ico.spin { animation: lock-pulse 1.2s ease-in-out infinite; }
@keyframes lock-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.94); } }
.lock-title { font-size: var(--t-title); font-weight: 700; }
.lock-sub { color: var(--hint); font-size: var(--t-body); line-height: 1.5; max-width: 320px; }
.lock-who { margin-top: var(--s2); font-size: var(--t-small); color: var(--hint); background: var(--card); padding: var(--s1) var(--s3); border-radius: 9px; }
.lock-retry { margin-top: var(--s4); min-width: 180px; }

/* ---- Empty-state CONDIVISO (Review, Resa, "in arrivo", …) ---- */
.empty-state { text-align: center; padding: 48px var(--s5); }
.es-ico {
  width: 64px; height: 64px; margin: 0 auto var(--s3); border-radius: 20px;
  display: grid; place-items: center; font-size: 32px;
  background: color-mix(in srgb, var(--hint) 12%, transparent);
}
.es-ico.ok {
  width: 56px; height: 56px; border-radius: 50%; font-size: var(--t-num); font-weight: 700;
  color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.es-t { font-size: var(--t-lead); font-weight: 700; }
.es-s { color: var(--hint-ink); font-size: var(--t-body); margin-top: var(--s1); line-height: 1.45; }

/* ---- Testata di sezione CONDIVISA (titolo + sottotitolo + azione a destra) ---- */
.shead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: 2px 0 0; }
.shead h2 { margin: 0; font-size: var(--t-title); font-weight: 700; white-space: nowrap; }
.shead-sub { margin: var(--s2) 0 var(--s3); font-size: var(--t-small); line-height: 1.45; }
/* Il tasto in testata è un tasto PICCOLO accanto al titolo, non un bottone a piena
   larghezza. La specificità doppia (.shead .shead-btn) è necessaria, non cosmetica: `.btn`
   e `.btn-ghost` sono definiti PIÙ SOTTO nel foglio e, a parità di specificità, vincevano
   loro — il tasto prendeva `width:100%` e usciva dallo schermo a destra di ~42px
   (visto in produzione il 2026-08-05). Legandolo alla testata l'ordine non conta più. */
.shead .shead-btn { margin: 0; padding: var(--s2) var(--s3); font-size: var(--t-small); flex: 0 0 auto;
  width: auto; max-width: 60%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* ---- Vista con contenuto ---- */
.view { padding: var(--s3) var(--pad-x) var(--s6); }

/* ---- Controlli di ricerca (Offerte) ---- */
.controls { position: sticky; top: 0; background: var(--bg); padding-bottom: var(--s3); z-index: 5; }
input[type=search], select {
  width: 100%; padding: var(--s3) var(--s3); border-radius: var(--radius);
  border: none; background: var(--card); color: var(--text); font-size: var(--t-lead);
  -webkit-appearance: none; appearance: none;
}
.row { display: flex; gap: var(--s2); margin-top: var(--s2); }
.row > * { flex: 1; min-width: 0; }
.seg { display: flex; background: var(--card); border-radius: var(--radius); padding: 3px; }
.seg button {
  flex: 1; border: none; background: transparent; color: var(--hint-ink);
  padding: var(--s3) var(--s1); border-radius: 11px; font-size: var(--t-small); cursor: pointer;
}
.seg button.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* -- MARKETPLACE (2026-09-02): selettore segmentato Amazon / AliExpress coi loghi --
   Stessa famiglia del `.seg`, ma il segmento attivo è una "card" bianca in rilievo (iOS
   segmented) e non il colore accent: dentro ci sono i MARCHI, che hanno i loro colori e
   non vanno tinti. I non selezionati restano leggibili ma attenuati. */
.mkt { display: flex; background: var(--wash); border-radius: var(--radius); padding: 3px; gap: 3px; }
.mkt-btn { flex: 1; min-width: 0; height: 40px; border: none; border-radius: 11px; background: transparent;
  color: var(--text); opacity: .55; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s2); transition: opacity .15s, background .15s; }
.mkt-btn.on { background: var(--card); opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 1px var(--line); }
.mkt-logo { height: 22px; width: auto; max-width: 100%; display: block; }
.mkt.compact .mkt-btn { height: 34px; }
.mkt.compact .mkt-logo { height: 18px; }
.home-mkt { padding: var(--s2) var(--pad-x) 0; }
.view-mkt { padding: var(--s3) var(--pad-x) 0; }
/* sezione che vale solo per l'altro marketplace: attenuata in home, dice "Solo Amazon" */
.ds-row.mkt-off .ico, .ds-row.mkt-off .ds-row-t { opacity: .5; }

.ctrlbar > .seg { flex: 1; }
.iconbtn { flex: 0 0 46px !important; height: 44px; border: none; border-radius: var(--radius); background: var(--card); color: var(--text); font-size: var(--t-title); cursor: pointer; }
.pager { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.pg { flex: 1 1 0; max-width: 52px; height: 40px; border: none; border-radius: 10px; background: var(--card); color: var(--text); font-size: var(--t-body); cursor: pointer; font-variant-numeric: tabular-nums; }
.pg.on { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.pg-ell { flex: 0 0 auto; color: var(--hint); padding: 0 2px; }

.lthumb { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; flex: 0 0 auto; }
/* riga di prezzi dentro la timeline */
.lmeta { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }


/* ---- Griglia card prodotto ---- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.thumb { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; }
.card .body { padding: var(--s2) var(--s2) var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card .title { font-size: var(--t-small); line-height: 1.3; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Dettaglio deal + genera post */
.deal-view .deal-img { width: 100%; max-height: 260px; object-fit: contain; background: #fff; border-radius: 14px; }
.deal-title { font-size: var(--t-lead); line-height: 1.35; margin-top: var(--s3); }
.deal-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.deal-actions > .btn { margin-top: 0; }
.deal-actions a.btn { text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; }
.btn-done { background: #34c759 !important; color: #fff !important; }
.btn-warn { background: #f5a623 !important; color: #111 !important; }
.btn-error { background: #e8483c !important; color: #fff !important; }
.btn-amazon { background: #ff9900; color: #fff; }
.badges { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: auto; }
.badge { font-size: var(--t-small); font-weight: 700; padding: 2px var(--s2); border-radius: 8px; }
.badge.disc { background: #e8483c; color: #fff; }
.badge.coupon { background: #2e7d32; color: #fff; }
.badge.lampo { background: #f5a623; color: #111; }
.deal-info { margin-top: var(--s3); background: var(--card); border-radius: 12px; padding: var(--s1) var(--s3); }
/* riga "etichetta: valore" GLOBALE (audit coerenza 2026-08-04): una sola definizione,
   la usano deal-info, le card della Resa e ovunque serva quella specie di riga */
.irow { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; font-size: var(--t-body); }
.irow + .irow { border-top: 1px solid color-mix(in srgb, var(--hint) 14%, transparent); }
.il { color: var(--hint); flex: 0 0 auto; }
.iv { text-align: right; font-variant-numeric: tabular-nums; }
.chart-note { font-size: var(--t-small); margin: var(--s2) 2px 0; }
.stars { color: var(--hint); font-size: var(--t-small); }
.dealprice { display: flex; gap: var(--s2); align-items: baseline; margin: 2px 0; }
.deal-detail-price { margin-top: var(--s2); }
.deal-detail-price .price-now { font-size: var(--t-title); }
.basis-hint { font-size: var(--t-micro); color: var(--hint); }

.empty { text-align: center; color: var(--hint); padding: 40px var(--s3); grid-column: 1 / -1; }

/* ---- Dashboard: le due forme che nessun'altra sezione ha ---- */
/* HERO: lo stato del motore. Il filetto a sinistra prende il colore semantico
   (verde attivo / ambra in pausa / rosso spento): il colore risponde prima del testo. */
.dash-hero { background: var(--card); border-radius: 16px; border-left: 4px solid var(--accent);
  padding: var(--s4); }
.dash-hero-top { display: flex; justify-content: space-between; align-items: baseline; }
.dash-hero-st { font-size: var(--t-lead); font-weight: var(--fw-bold); }
.dash-hero-row { display: flex; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s2); font-size: var(--t-body); }
/* "quiet when green" (2026-08-20): quando non c'è nulla da controllare la Dashboard lo
   dice con una RIGA quieta, non con un riquadro verde — il fondo colorato resta
   riservato a ciò che chiede attenzione, così quando c'è un riquadro si vede subito */
.ds-note.dash-allok { text-align: center; margin: 0; padding: var(--s1) 0; }

/* PIPELINE: dove finiscono i deal di oggi, un bersaglio solo verso le decisioni */
.pipe { width: 100%; display: flex; align-items: center; gap: 2px; background: var(--card);
  border: none; border-radius: var(--radius); padding: var(--s4) var(--s2); cursor: pointer;
  font-family: inherit; }
.pipe-node { flex: 1; text-align: center; min-width: 0; }
.pipe-v { font-size: var(--t-num); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pipe-l { font-size: var(--t-micro); color: var(--hint); margin-top: 2px; }
.pipe-arrow { flex: 0 0 auto; color: var(--hint); font-size: var(--t-lead); opacity: .5; }

/* ---- forme ancora condivise da piu' sezioni (in migrazione verso ds-*) ---- */
.chips { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2);
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
/* la riga di chip scorre a dito: la barra grigia sotto (Log, Review) era rumore, non un
   controllo — pulizia 2026-09-02 */
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; border: none; background: var(--card); color: var(--text);
  padding: var(--s3) var(--s4); border-radius: 999px; font-size: var(--t-small); font-family: inherit;
  cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--accent); color: var(--accent-text); font-weight: var(--fw-med); }
/* pastiglia di posizione in classifica (riserva) */
.dtag.rank { width: 22px; height: 22px; border-radius: 50%; background: var(--wash);
  color: var(--text); font-size: var(--t-small); font-weight: var(--fw-bold);
  display: grid; place-items: center; }
/* link inline: il padding non sposta il testo (inline box) ma allarga il bersaglio */
.alink { color: var(--link); text-decoration: none; padding: var(--s2) 2px; margin: -8px -2px; }
.state { text-align: center; color: var(--text); padding: 56px var(--s5); line-height: 1.6; }
/* testo informativo, non decorazione: usa la versione leggibile del grigio */
.hint { color: var(--hint-ink); }
.bar-track { flex: 1; height: 10px; background: color-mix(in srgb, var(--hint) 18%, transparent);
  border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 6px; min-width: 2px;
  transition: width .3s; }

/* ---- Prezzi (storico) ---- */
.chart-wrap { background: var(--card); border-radius: 14px; padding: var(--s3); margin-top: var(--s3); }
.pchart { width: 100%; height: auto; display: block; overflow: visible; }
.pline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.parea { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.pdot { fill: var(--accent); }
.plabel { fill: var(--hint); font-size: 9px; }
.chart-empty { text-align: center; color: var(--hint); padding: 40px var(--s3); }

/* ---- Prodotti ---- */
.price-now { font-size: var(--t-body); font-weight: 700; color: #e8483c; }
.price-old { font-size: var(--t-small); color: var(--hint); text-decoration: line-through; }

/* Calendario */
.cal-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.cal-title { flex: 1; text-align: center; font-size: var(--t-lead); font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); }
.cal-wd { text-align: center; font-size: var(--t-micro); color: var(--hint); padding-bottom: 2px; }
.cal-day { aspect-ratio: 1; border: none; border-radius: 10px; background: var(--card); color: var(--text); font-size: var(--t-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cal-day:disabled { opacity: 1; }
.cal-day.has { background: var(--accent); color: var(--accent-text); font-weight: 600; cursor: pointer; }
.cal-count { font-size: var(--t-micro); opacity: .9; }

/* Timeline verticale */
.timeline { position: relative; }
.tl-row { display: flex; gap: var(--s3); align-items: flex-start; padding-bottom: var(--s4); position: relative; }
.tl-time { width: 42px; flex: 0 0 auto; font-size: var(--t-small); color: var(--hint); text-align: right; padding-top: var(--s4); font-variant-numeric: tabular-nums; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: var(--s4); flex: 0 0 auto; z-index: 1; }
.tl-row::before { content: ""; position: absolute; left: 56px; top: 22px; bottom: -8px; width: 2px; background: color-mix(in srgb, var(--hint) 22%, transparent); }
.tl-row:last-child::before { display: none; }
.tl-card { flex: 1; min-width: 0; display: flex; gap: var(--s3); background: var(--card); border-radius: 12px; padding: var(--s2) var(--s3); text-decoration: none; color: inherit; }
.tl-card img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; flex: 0 0 auto; }
.tl-body { min-width: 0; }

/* ---- Statistiche ---- */
.sbar { fill: var(--accent); }
.bval { fill: var(--text); font-size: 10px; font-weight: 700; text-anchor: middle; }
.bday { fill: var(--hint); font-size: 9px; text-anchor: middle; }
.pie-wrap { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.pie { width: 130px; height: 130px; flex: 0 0 auto; }
.pie-legend { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-body); }
.pie-leg { display: flex; align-items: center; gap: var(--s2); }
.pie-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.spark-cur { margin-top: var(--s2); }

/* ---- Sistema ---- */
.sysbars { background: var(--card); border-radius: 14px; padding: var(--s3) var(--s4); margin-top: var(--s3); }
.sysbar { margin: var(--s3) 0; }
.sysbar:first-child { margin-top: 2px; }
.sysbar-top { display: flex; justify-content: space-between; font-size: var(--t-body); margin-bottom: var(--s1); }

/* ---- Log ---- */
/* le linguette dei file sono CHIP standard (audit coerenza 2026-08-04): stessa faccia
   dei filtri di Dashboard/Review, con due modificatori propri */
.chip.dim { opacity: .5; }
.chip .lsize { opacity: .7; font-size: var(--t-micro); }
.logview {
  background: var(--card); border-radius: 12px; padding: var(--s3); margin: var(--s1) 0;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-height: 70vh; overflow-y: auto;
}

/* ---- Log strutturato (structlog): più recente in alto, livelli colorati ---- */
.logbar { align-items: center; margin: 2px 0 var(--s2); }
.logsend { margin: var(--s2) 0 var(--s3); }
.loglist { display: flex; flex-direction: column; gap: var(--s2); }
.logday { text-align: center; color: var(--hint); font-size: var(--t-micro); font-weight: 700; letter-spacing: .05em; margin: var(--s2) 0 2px; }
.logrow {
  display: flex; gap: var(--s2); align-items: baseline; background: var(--card);
  border-radius: 10px; padding: var(--s2) var(--s3); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.logrow .ltime { flex: 0 0 auto; color: var(--hint); font: 11px ui-monospace, Menlo, monospace; }
.logrow .ldot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.logrow.lvl-info .ldot { background: color-mix(in srgb, var(--hint) 55%, transparent); }
.logrow.lvl-warn .ldot { background: var(--warn); }
.logrow.lvl-error .ldot { background: var(--bad); }
.logrow.lvl-warn { border-left: 3px solid var(--warn); }
.logrow.lvl-error { border-left: 3px solid var(--bad); }
.logrow .lmain { flex: 1; min-width: 0; }
.logrow .levt { font-size: var(--t-small); font-weight: 600; }
.logrow .lkv {
  color: var(--hint-ink); font: 11.5px/1.4 ui-monospace, Menlo, monospace;
  overflow-wrap: anywhere; margin-top: 2px;
}
.logrow .lkv.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.logrow .lmore { display: block; color: var(--link); font-size: var(--t-micro); margin-top: 3px; }
.logrow .lcopy {
  flex: 0 0 auto; align-self: flex-start; border: none; background: transparent;
  font-size: var(--t-body); padding: var(--s3) var(--s3); margin: -8px -10px 0 0; cursor: pointer; opacity: .55;
  -webkit-tap-highlight-color: transparent;
}
.logrow .lcopy:active { opacity: 1; }
.lcopyall { margin: 0 0 var(--s2); }
.btn.btn-ghost { background: var(--card); color: var(--text); }
.logrow .lextra {
  margin: var(--s2) 0 0; padding: var(--s2); background: color-mix(in srgb, var(--hint) 10%, transparent);
  border-radius: 8px; font: 11px/1.4 ui-monospace, Menlo, monospace;
  white-space: pre; overflow-x: auto; max-height: 40vh; overflow-y: auto;
}

/* ---- PANNELLO MOTORE in cima alla home (2026-07-26) ----
   Due riquadri affiancati, tap su tutta l'area: lo stato si legge dal colore PRIMA che
   dal testo (verde = sta lavorando, ambra = fermo). Sostituiscono la sezione "Controlli". */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 14px var(--pad-x) 2px; }
.qtile {
  background: var(--card); border-radius: 16px; padding: var(--s3) var(--s3) var(--s3); cursor: pointer;
  border: 1.5px solid transparent; transition: background .18s, border-color .18s, opacity .18s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.qtile.on { background: color-mix(in srgb, var(--ok) 12%, var(--card)); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.qtile.off { background: color-mix(in srgb, var(--warn) 12%, var(--card)); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
.qtile:active { opacity: .72; }
.qtile.busy { opacity: .55; pointer-events: none; }
.qhead { display: flex; align-items: center; gap: var(--s2); }
.qhead .qico { font-size: var(--t-lead); line-height: 1; }
.qhead .qt { font-size: var(--t-lead); font-weight: 600; }
.qfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); }
.qfoot .qs { font-size: var(--t-small); color: var(--hint); font-weight: 500; }
/* testo di stato coi token -ink (2026-08-16): i fissi #2a9d4a/#b8791a stavano
   sotto 4,5:1 sul tema scuro — lo stesso difetto che i token esistono per chiudere */
.qtile.on .qfoot .qs { color: var(--ok-ink); }
.qtile.off .qfoot .qs { color: var(--warn-ink); }
/* l'interruttore qui è un INDICATORE: il tap è su tutto il riquadro */
.qtile .switch { pointer-events: none; width: 40px; height: 24px; }
.qtile .switch .knob { width: 18px; height: 18px; }
.qtile .switch.on .knob { transform: translateX(16px); }
.quick-note {
  grid-column: 1 / -1; font-size: var(--t-small); line-height: 1.35; color: var(--hint);
  background: color-mix(in srgb, #f5a623 10%, transparent); border-radius: 12px; padding: var(--s2) var(--s3);
}

/* ---- PANNELLO SCANSIONE DEAL (in cima a Offerte, 2026-07-26) ----
   La scansione è UNA per tutti: questo pannello e il messaggio in chat rendono lo STESSO
   stato del server, quindi mostra anche CHI l'ha avviata e da dove. */
.scanbox { background: var(--card); border-radius: 16px; padding: var(--s3) var(--s3); margin-bottom: var(--s3); }
.scanbox.running { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.scanhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.scantitle { font-size: var(--t-lead); font-weight: 600; }
.scanfound { font-size: var(--t-small); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.scanstart {
  border: none; border-radius: 10px; padding: var(--s2) var(--s4); font-size: var(--t-body); font-weight: 600;
  background: var(--accent); color: var(--accent-text); cursor: pointer; flex: 0 0 auto;
}
.scanstart:disabled { opacity: .6; }
.scanlast { margin-top: var(--s2); line-height: 1.35; }
.scanbar { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.scanbar .bar-track { height: 8px; }
.scanpct { font-size: var(--t-small); color: var(--hint); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 30px; text-align: right; }
.scanfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.scanfoot .hint { font-size: var(--t-small); }
.scancancel {
  border: none; background: transparent; color: var(--bad-ink); font-size: var(--t-small); font-weight: 600;
  padding: var(--s3) var(--s2); margin: -6px -6px; cursor: pointer; flex: 0 0 auto;
}

/* Riga di ricerca con il tasto filtri accanto (la testata di Offerte era di 4 righe fisse) */
.searchrow { align-items: stretch; }
.searchrow input { flex: 1; min-width: 0; }
.iconbtn.onmark { position: relative; }
.iconbtn.onmark::after {
  content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}

/* ---- Controlli (azioni) ---- */
.switch { width: 46px; height: 28px; border-radius: 999px; border: none; flex: 0 0 auto; position: relative; cursor: pointer; background: color-mix(in srgb, var(--hint) 32%, transparent); transition: background .2s; }
/* area di tocco estesa oltre il disegno (l'interruttore visivo resta 46×28) */
.switch::after { content: ""; position: absolute; inset: -10px; }
.switch.on { background: var(--ok); }
.switch.busy { opacity: .55; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch.on .knob { transform: translateX(18px); }
.btn { display: block; width: 100%; border: none; border-radius: 12px; padding: var(--s3); font-size: var(--t-lead); font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--accent); margin-top: var(--s2); }

/* ---- Regolazioni: quadrante orario + riga con slider ---- */
/* le descrizioni vanno A CAPO: sono frasi, non sotto-righe da troncare */
.tune-help { white-space: normal; overflow: visible; text-overflow: clip; }
.tune-label { font-size: var(--t-body); }
/* Quadrante finestra oraria (stile sveglia iOS) */
.dial-wrap { display: flex; justify-content: center; padding: var(--s2) 0 2px; }
.dial-wrap.busy { opacity: .55; pointer-events: none; }
svg.dial { touch-action: none; -webkit-user-select: none; user-select: none; display: block; }
.dial-track { fill: none; stroke: color-mix(in srgb, var(--hint) 18%, transparent); stroke-width: 34; }
.dial-arc { fill: none; stroke: var(--ok); stroke-width: 34; stroke-linecap: round; cursor: grab; }
.dial-arc.dirty { stroke: #ff9f0a; }
.dial-tick { stroke: color-mix(in srgb, var(--hint) 55%, transparent); stroke-width: 1.5; }
.dial-num { fill: var(--hint); font-size: var(--t-small); font-weight: var(--fw-med); }
.dial-knob { fill: #fff; stroke: rgba(0,0,0,.18); stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); cursor: grab; }
.dial-handle { cursor: grab; }
.dial-ico { font-size: 15px; pointer-events: none; }
.dial-time { fill: var(--text); font-size: 17px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; }
.dial-sub { fill: var(--hint); font-size: var(--t-small); }
/* riga con slider: è una ds-row che si sviluppa in verticale */
.tune-row { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); }
.tune-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.tune-val { font-variant-numeric: tabular-nums; font-weight: var(--fw-med); white-space: nowrap; }
.tune-val.dirty { color: #ff9f0a; }
.tune-def { font-weight: 400; }
/* la fascia di tocco dello slider è più alta del binario disegnato: si regola col pollice */
.tune-row input[type=range] { width: 100%; margin: 2px 0 0; height: 32px; accent-color: #ff9f0a; }
.tune-reset { margin: var(--s4) 0 6px; display: flex; flex-direction: column; gap: var(--s2);
  align-items: flex-start; }
.tune-reset .btn[disabled] { opacity: .5; }

/* ---- Audit UI 2026-07-12: rifiniture cross-sezione ---- */
.tl-cat { font-size: var(--t-small); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* log: il pallino di livello allineato alla PRIMA riga, non centrato sull'entry */
.logrow .ldot { align-self: flex-start; margin-top: var(--s1); }

/* --- Canali sorgente (2026-07-14) --- */
.chavatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.chavatar-fallback { display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; }
.chname { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.chfactor { flex: 0 0 auto; font-size: var(--t-lead); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hint); }
/* -ink e non pigmento puro: #2e7d32 stava a 2,95:1 sul tema scuro (audit 2026-08-16) */
.chfactor.chf-good, .chmeter-val.chf-good, .iv.chf-good { color: var(--ok-ink); font-weight: 700; }
.chfactor.chf-bad, .chmeter-val.chf-bad, .iv.chf-bad { color: var(--bad-ink); font-weight: 700; }
.badge.chb-trust { background: color-mix(in srgb, #2ea6ff 18%, transparent); color: #2ea6ff; }
.badge.chb-mute { background: color-mix(in srgb, #e8483c 16%, transparent); color: #e8483c; }
/* dettaglio canale */
.chdet-head { display: flex; align-items: center; gap: var(--s4); margin: var(--s2) 0 var(--s3); }
.chdet-name { font-size: var(--t-title); font-weight: 700; margin-bottom: var(--s1); }
.chdet-hero { background: var(--card); border-radius: 14px; padding: var(--s4); text-align: center; margin-bottom: var(--s3); }
.chdet-factor { font-size: var(--t-hero); font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: var(--s1); }
.chdet-meters { background: var(--card); border-radius: 14px; padding: var(--s1) var(--s4); margin-bottom: var(--s4); }
.chmeter { padding: var(--s3) 0; }
.chmeter + .chmeter { border-top: 1px solid color-mix(in srgb, var(--hint) 14%, transparent); }
.chmeter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-body); }
.chmeter-title { font-weight: 600; }
.chmeter-val { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hint); }
.chmeter-track { position: relative; height: 8px; border-radius: 4px; margin: var(--s2) 0 var(--s2);
  background: color-mix(in srgb, var(--hint) 16%, transparent); }
.chmeter-zero { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--hint) 45%, transparent); }
.chmeter-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.chmeter-fill.good { background: var(--ok); }
.chmeter-fill.bad { background: var(--bad); }
.chmeter-desc { font-size: var(--t-small); }
/* grafico attività */
.chact { background: var(--card); border-radius: 14px; padding: var(--s3) var(--s4) var(--s3); }
.chact-bars { display: flex; align-items: flex-end; gap: 3px; height: 84px; }
.chact-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.chact-bar { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.chact-sight { width: 100%; border-radius: 3px 3px 0 0; display: flex; align-items: flex-end;
  background: color-mix(in srgb, #00c7be 38%, transparent); }
.chact-post { width: 100%; border-radius: 0; background: #00c7be; }
.chact-axis { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--hint); margin-top: var(--s1); }
.chact-legend { margin-top: var(--s2); font-size: var(--t-small); }
.chact-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: baseline; }
.chact-dot.sight { background: color-mix(in srgb, #00c7be 38%, transparent); }
.chact-dot.post { background: #00c7be; }

/* --- Notizie Programma Affiliazione (icona home + lista/dettaglio) --- */
.home-head-row { display: flex; align-items: center; justify-content: space-between; }
.news-btn {
  position: relative; border: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); color: var(--text); font-size: var(--t-title); line-height: 1;
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.news-btn:active { background: color-mix(in srgb, var(--hint) 18%, var(--card)); transform: scale(0.94); }
.news-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  padding: 0 var(--s1); box-sizing: border-box; border-radius: 999px;
  background: #e8483c; color: #fff; font-size: var(--t-micro); font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--bg);
}
.news-unread { font-weight: 700; }
.news-dot { width: 9px; height: 9px; border-radius: 50%; background: #e8483c; flex: 0 0 auto; }
.newsdet-head { display: flex; align-items: center; gap: var(--s3); margin: 2px 0 var(--s3); }
.newsdet-head .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: var(--t-title); flex: 0 0 auto; }
.newsdet-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.newsdet-meta .chip { cursor: default; }
.news-when { color: var(--hint); font-size: var(--t-small); }
.newsdet-title { margin: 0 0 var(--s3); font-size: var(--t-title); line-height: 1.3; }
.newsdet-body { padding: var(--s4) var(--s4); }
.newsdet-body p { margin: 0 0 var(--s3); font-size: var(--t-lead); line-height: 1.55; }
.newsdet-body p:last-child { margin-bottom: 0; }
.news-open { width: 100%; }

/* --- Commissioni: il poco che il design system non copre ---
   (barra impilata, legenda e chip di categoria sono passati a .ds-stack/.ds-legend/.ds-tag;
   il banner "quale tabella" e gli avvisi sulle fasce a vuoto sono .ds-alert) */
.comm-group-head { display: flex; align-items: baseline; gap: var(--s3); }
.comm-group-rate { font-size: var(--t-title); font-weight: 800; font-variant-numeric: tabular-nums; }
.comm-group-meta { color: var(--hint); font-size: var(--t-body); }
.ds-panel.comm-empty { opacity: .55; }
.comm-official { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line);
  color: var(--hint); font-size: var(--t-small); line-height: 1.45; }
/* nota QUIETA sul catch-all: cadere lì è la destinazione giusta, non un'anomalia —
   l'allarme sta sulle fasce che non pescano niente (.ds-alert), non qui */
.comm-catchall { border-top: none; padding-top: var(--s1); margin-top: var(--s1);
  font-style: italic; opacity: .8; }

/* Editor della tabella d'account */
.comm-ed-h { font-weight: var(--fw-bold); font-size: var(--t-lead); }
.comm-ed-row { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.comm-ed-names, .comm-ed-rate { background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 9px; padding: var(--s2) var(--s3);
  font-size: var(--t-body); font-family: inherit; min-width: 0; }
.comm-ed-names { flex: 1; }
.comm-ed-rate { width: 78px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.comm-ed-rate.bad { border-color: var(--bad); }
.comm-ed-x { flex: none; width: 38px; height: 38px; border: none; border-radius: 8px;
  background: var(--wash); color: var(--text); font-size: var(--t-small); cursor: pointer; }
.comm-ed-add { margin-top: 2px; }
.comm-ed-save { margin-top: var(--s3); }
.comm-ed-clear { color: var(--bad-ink); }

/* calibrazione: nominale → in uso, col nominale attenuato (è la promessa, non il fatto) */
.comm-cal-rates { display: inline-flex; align-items: baseline; gap: var(--s1); }
.comm-cal-nom { font-size: var(--t-small); color: var(--hint); text-decoration: line-through; }
.comm-cal-arrow { font-size: var(--t-small); color: var(--hint); }
.comm-cal-eff { font-size: var(--t-lead); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* --- Indizi di qualità (sospetto slop) + Venditori --- */
.quality-box { margin-top: var(--s3); padding: var(--s3) var(--s4); }
.quality-box.quality-suspect { border: 1px solid color-mix(in srgb, #e8483c 55%, transparent); }
.quality-head { font-size: var(--t-body); font-weight: 700; margin-bottom: var(--s2); }
.quality-suspect .quality-head { color: #e8483c; }
.quality-row { font-size: var(--t-body); line-height: 1.5; }
.quality-seller { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid color-mix(in srgb, var(--hint) 14%, transparent); }

/* --- Review (scarti + esiti, 2026-07-20) + scheda Venditore --- */
.rev-chips { margin-bottom: 2px; }
.badge.rev-w { background: color-mix(in srgb, #ff375f 16%, transparent); color: #ff375f; }
.badge.rev-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink); flex: 0 0 auto; }
.badge.rev-wait { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-ink); flex: 0 0 auto; }
.lthumb-empty { display: grid; place-items: center; font-size: var(--t-title); background: color-mix(in srgb, var(--hint) 12%, transparent); }
.sell-amazon { color: #ff9900; font-weight: 700; }
.badge.sell-amz-badge { background: color-mix(in srgb, #ff9900 18%, transparent); color: #ff9900; }
.badge.sell-third { background: color-mix(in srgb, #bf5af2 16%, transparent); color: #bf5af2; }

/* Consigliere di tuning (Regolazioni): la riga con "Applica" */
.sugg-row { background: rgba(46, 166, 255, .08); }
.sugg-why { margin-bottom: var(--s2); }
.sugg-act { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sugg-apply { flex: 0 0 auto; background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* --- Home a gruppi (2026-07-22) --- */
.home-group { color: var(--hint); font-size: var(--t-small); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin: 18px var(--pad-x) 7px; }

/* --- Sezione Categorie: solo la pastiglia del conteggio ---
   (le due barre di proporzione, .catbar e .catbreak-bar, erano due implementazioni
   della stessa idea: ora sono il meter della riga) */
.catcount { flex: 0 0 auto; min-width: 26px; text-align: center; font-weight: var(--fw-bold);
  font-size: var(--t-body); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 9px; padding: 3px var(--s2); }
/* timeline della categoria: card cliccabile (-> scheda prodotto globale) + separatore-giorno */
.tl-day { font-size: var(--t-small); font-weight: var(--fw-bold); color: var(--hint);
  margin: 2px 0 var(--s3) 56px; }
.tl-body { flex: 1; }
.tl-card { align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-noimg { width: 48px; height: 48px; border-radius: 8px; flex: 0 0 auto; display: grid;
  place-items: center; font-size: var(--t-title); background: var(--wash); }

/* --- Badge di attenzione riusabile sulle sezioni della home (2026-07-22) --- */
.section-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 var(--s2); box-sizing: border-box;
  border-radius: 999px; background: #e8483c; color: #fff; font-size: var(--t-small); font-weight: 700;
  display: grid; place-items: center; }

/* --- Review: scarta inline dalla coda (2026-08-20) --- */
/* il 🚫 sulla riga: bersaglio ≥44px senza gonfiare la riga (padding + margine negativo) */
.rev-drop { flex: 0 0 auto; border: 0; background: transparent; font-size: var(--t-lead);
  padding: var(--s3) var(--s3); margin: -12px -6px; cursor: pointer; opacity: .6;
  -webkit-tap-highlight-color: transparent; }
.rev-drop:active { opacity: 1; }
/* riga in attesa di conferma: attenuata, con l'Annulla come unica azione */
.rev-dropped { background: var(--wash); }
.rev-dropped .ds-row-ico { opacity: .8; }

/* --- Review ridisegnata (2026-07-22): coda unica prioritaria --- */
.rev-seg { margin: var(--s3) 0; }
.rev-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: 3px; }
.rev-age { flex: 0 0 auto; font-size: var(--t-small); color: var(--hint); }
.rev-w { margin-top: var(--s1); font-size: var(--t-small); font-weight: 600; color: var(--accent); }
/* chip del TIPO di escalation, color-coded via --k */
.kind-chip { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-small); font-weight: 700;
  padding: 2px var(--s2); border-radius: 999px; color: var(--k, var(--hint));
  background: color-mix(in srgb, var(--k, var(--hint)) 15%, transparent); white-space: nowrap; }
.kind-chip-lg { font-size: var(--t-small); padding: var(--s1) var(--s3); margin: var(--s2) 0 2px; }
.k-error  { --k: #ff375f; }
.k-cons   { --k: #2ea6ff; }
.k-slop   { --k: #ff9f0a; }
.k-dedup  { --k: #8e8e93; }
.k-other  { --k: #8e8e93; }
.lthumb-empty.k-error, .lthumb-empty.k-cons, .lthumb-empty.k-slop,
.lthumb-empty.k-dedup, .lthumb-empty.k-other {
  background: color-mix(in srgb, var(--k) 16%, transparent); }
/* scheda "perché è in review" nel dettaglio */
.rev-whycard { padding: var(--s3) var(--s3); margin: var(--s2) 0; display: flex; flex-direction: column; gap: var(--s1); cursor: default;
  border-left: 3px solid var(--k, var(--hint)); }
.rev-whycard-h { font-size: var(--t-small); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--k, var(--hint)); }
.dl-btn { flex: 0 0 auto; border: 0; border-radius: 9px; padding: var(--s3) var(--s4); font-size: var(--t-small); font-weight: 600;
  background: color-mix(in srgb, var(--hint) 16%, transparent); color: var(--text); cursor: pointer; }
.dl-btn.dl-retry { background: var(--accent); color: var(--accent-text); }
.dl-btn:disabled { opacity: .5; }
.linkbtn { margin-top: var(--s4); border: 0; background: transparent; color: var(--link, var(--accent));
  font-size: var(--t-body); font-weight: 600; cursor: pointer; }

/* --- Sezione RESA (2026-08-03, ridisegnata 2026-08-04) --- */
/* pannello import (dietro il tasto in testata): scegli file, leggi il rilevamento, POI importa */
.res-import { padding: var(--s3); margin-bottom: var(--s3); cursor: default; }
.res-imp-t { font-size: var(--t-lead); font-weight: 700; margin-bottom: 2px; }
.res-imp-head .hint { font-size: var(--t-small); line-height: 1.4; }
.res-file { display: block; margin-top: var(--s3); text-align: center; padding: var(--s3) var(--s4); border-radius: 11px;
  background: var(--accent); color: var(--accent-text); font-size: var(--t-lead); font-weight: 600; cursor: pointer; }
.res-file input { display: none; }
.res-det { margin-top: var(--s3); padding: var(--s1) var(--s3) var(--s2); cursor: default;
  background: color-mix(in srgb, var(--hint) 8%, var(--card)); }
.res-det-h { font-size: var(--t-body); font-weight: 700; margin: var(--s2) 0 2px; }
.res-det .irow { font-size: var(--t-small); padding: var(--s2) 0; }
.res-warn { margin-top: var(--s1); font-size: var(--t-small); line-height: 1.4; color: var(--warn-ink); }
.res-imp-actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.res-imp-actions .btn { flex: 1; }
.res-imp-actions .linkbtn { margin-top: 0; flex: 0 0 auto; }
.res-imp-sub { font-size: var(--t-small); margin-top: 2px; }
.dl-btn.dl-danger { background: #e8483c; color: #fff; }
/* caricamento a LIBRERIA: un solo bersaglio (scegli file) + registro esiti */
.res-file.busy { opacity: .6; pointer-events: none; }
.res-imp-link { margin-top: var(--s3); }

/* ARCHIVIO REPORT: la struttura (anno ▸ mese ▸ file) è il contenuto della pagina */
/* barra del «Rigioca tutto»: stesso disegno della coda upload della Resa, ma classe
   propria — le classi di sezione non si prestano fra sezioni (regola di specificità). */
.arc-prog { margin-top: var(--s3); }
.arc-prog-txt { font-size: var(--t-small); color: var(--hint); display: flex; justify-content: space-between; gap: var(--s3); }
.arc-prog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-prog-bar { height: 4px; margin-top: var(--s2); border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--hint) 20%, transparent); }
.arc-prog-fill { height: 100%; background: var(--accent); border-radius: 2px;
  transition: width .15s linear; }
.arc-year { padding: 0; margin-top: var(--s3); overflow: hidden; cursor: default; }
.arc-year-head { display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.arc-year-n { font-size: var(--t-lead); font-weight: 700; font-variant-numeric: tabular-nums; }
.arc-year-meta { flex: 1; min-width: 0; font-size: var(--t-small); text-align: left; }
.arc-chev { flex: 0 0 auto; color: var(--hint); font-size: var(--t-title); transition: transform .15s; }
.arc-chev.open { transform: rotate(90deg); }
.arc-months { padding: 0 var(--s4) var(--s2); }
.arc-month { padding-top: var(--s2); }
.arc-month-h { font-size: var(--t-small); font-weight: 700; color: var(--hint); text-transform: uppercase;
  letter-spacing: .04em; padding: var(--s2) 0 var(--s1);
  border-top: 1px solid color-mix(in srgb, var(--hint) 15%, transparent); }
.arc-file { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; }
.arc-file-main { flex: 1; min-width: 0; }
.arc-file-name { font-size: var(--t-small); font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.arc-file-sub { font-size: var(--t-small); margin-top: 1px; }
.arc-file-acts { flex: 0 0 auto; display: flex; gap: var(--s1); }
.arc-empty-year { padding: var(--s2) 0 var(--s3); font-size: var(--t-small); }

/* CODA DI CARICAMENTO: una riga per file, con la barra solo su quello in lavorazione.
   La barra piena conta i BYTE spediti (percentuale vera); quella indeterminata è il
   server che legge e importa — lì nessuno sa a che punto sia, e fingere una percentuale
   sarebbe peggio del non mostrarla. */
.res-q-head { margin-top: var(--s3); font-size: var(--t-small); font-weight: 600; color: var(--hint); }
.res-q { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s1); }
.res-q-row { font-size: var(--t-small); line-height: 1.35; padding: var(--s2) var(--s2); border-radius: 9px;
  background: color-mix(in srgb, var(--hint) 8%, transparent); }
.res-q-row.ko { background: color-mix(in srgb, #f5a623 12%, transparent); }
.res-q-top { display: flex; align-items: baseline; gap: var(--s2); }
.res-q-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.res-q-st { flex: 0 0 auto; color: var(--hint); font-variant-numeric: tabular-nums; }
.res-q-st.ok { color: #34c759; } .res-q-st.ko { color: #e8483c; }
.res-q-text { color: var(--hint); margin-top: 2px; }
.res-q-bar { height: 4px; margin-top: var(--s2); border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--hint) 20%, transparent); }
.res-q-fill { height: 100%; background: var(--accent); border-radius: 2px;
  transition: width .15s linear; }
.res-q-fill.indet { width: 40%; animation: res-q-slide 1.1s ease-in-out infinite; }
@keyframes res-q-slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .res-q-fill.indet { width: 100%; animation: none; opacity: .5; }
}
.res-confirm { margin-top: var(--s3); }
/* --- Resa: il poco che il design system non copre --- */
/* la DOMANDA della sezione, in cima alla card della decisione */
.res-domanda { font-size: var(--t-lead); font-weight: var(--fw-bold); line-height: 1.3; }
/* il piede della card: il pavimento in vigore, separato dalle soglie */
.res-floor { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
.res-floor b { color: var(--text); font-weight: var(--fw-med); }