/* ==========================================================================
   Eurhosting Partner Program — foglio di stile unico.

   Condiviso da area partner, dashboard operatore e futuro sito vetrina.
   Un file solo: Apache lo serve staticamente, PHP non lo legge mai, e il
   browser lo tiene in cache fra una pagina e l'altra.

   Nessuna libreria, nessun framework, nessun JavaScript per la grafica.
   I grafici sono SVG calcolato lato server e CSS.

   COLORI: le variabili sono quelle di eurhosting.net/assets/css/style.css.
   Cambiare un colore del marchio significa cambiare una riga qui sotto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Caratteri, ospitati qui e non su Google
   --------------------------------------------------------------------------
   Il caricamento da fonts.gstatic.com trasmette l'indirizzo IP del
   visitatore a un terzo, e queste sono pagine autenticate che trattano dati
   personali. I file sono gli stessi che serviva Google.

   Sono font VARIABILI: un solo file copre piu' pesi. Inter 400 e 600
   condividono lo stesso file, come Plus Jakarta Sans 700 e 800.

   unicode-range fa scaricare latin-ext solo a chi legge polacco o ceco: un
   visitatore italiano scarica 75 kB in tutto, non 182.

   Il cinese non e' coperto da questi font e usa quello di sistema: nessun
   font web per il cinese ha una dimensione accettabile.
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   2. Variabili — l'unico punto in cui cambiare un colore
   -------------------------------------------------------------------------- */

:root {
  /* Marchio, identici a eurhosting.net */
  --green:       #7AB930;
  --green-dark:  #5E9A1F;
  --blue:        #00AEEF;
  --blue-dark:   #0090C8;
  --dark:        #0D1B2A;
  --dark-2:      #1C2F44;
  --mid:         #4A6177;
  --muted:       #8A9BB0;
  --bg:          #F4F8FC;
  --bg-card:     #FFFFFF;
  --border:      #DDE6F0;
  --gold:        #C9A84C;

  /* Aggiunte per il testo colorato.
     Il verde e l'azzurro del marchio su bianco danno 2.38 e 2.53 di
     contrasto: vanno benissimo per una superficie, non per una parola da
     leggere. Queste due varianti sono le piu' vicine al marchio che
     superano 4.5 SIA su bianco SIA sullo sfondo pagina. */
  --green-text:  #527C20;   /* 4.93 su bianco, 4.62 su --bg */
  --blue-text:   #007AA7;   /* 4.84 su bianco, 4.53 su --bg */

  /* Sfumature tenui per gli sfondi di accento (dalle stesse tinte) */
  --green-soft:  rgba(122,185,48,.12);
  --blue-soft:   rgba(0,174,239,.12);
  --red:         #C0392B;
  --red-soft:    rgba(192,57,43,.10);

  --font-display: 'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --font-body:    'Inter','Segoe UI',system-ui,sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(13,27,42,.06), 0 1px 2px rgba(13,27,42,.04);
  --shadow-md: 0 4px 16px rgba(13,27,42,.08), 0 2px 4px rgba(13,27,42,.05);

  --max-w: 1080px;
  --gap:   1rem;
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dark);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 700; margin-top: 2rem; }
h3 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 .8rem; }
a { color: var(--blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .small { font-size: .82rem; line-height: 1.5; }
.muted { color: var(--mid); }
.eyebrow {
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid); margin-bottom: .25rem;
}

/* Il focus deve vedersi: si naviga anche da tastiera. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   4. Impianto
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; }

.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: .6rem 0;
  margin-bottom: 1.5rem;
}
.topbar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
}
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: var(--dark); margin-right: auto; text-decoration: none;
}
.brand span { color: var(--blue-text); }

.nav { display: flex; flex-wrap: wrap; gap: .1rem; }
.nav a {
  display: block; padding: .35rem .7rem; border-radius: var(--radius-sm);
  color: var(--mid); font-size: .9rem; font-weight: 500; text-decoration: none;
}
.nav a:hover { background: var(--bg); color: var(--dark); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--blue-text); font-weight: 600; background: var(--blue-soft); }

.who { font-size: .85rem; color: var(--mid); }
.who strong { color: var(--dark); }

main { padding-bottom: 3rem; }


/* --------------------------------------------------------------------------
   5. Selettore di lingua — stessa forma del sito vetrina
   -------------------------------------------------------------------------- */

/* Il margine inferiore separa il selettore dal contenuto. Senza, sulle
   pagine di accesso e registrazione la scheda partiva appiccicata ai nomi
   delle lingue e le due cose si leggevano come un blocco solo. */
.lang { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center;
        margin: 0 0 1.5rem; }
.lang-option {
  display: block; padding: .25rem .5rem; border-radius: var(--radius-sm);
  font-size: .8rem; color: var(--muted); text-decoration: none;
  border: 1px solid transparent;
}
.lang-option:hover { border-color: var(--blue); color: var(--blue-text); text-decoration: none; }
.lang-option.active { color: var(--blue-text); font-weight: 700; background: var(--blue-soft); }


/* --------------------------------------------------------------------------
   6. Schede
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-sm);
}
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.card-head h2 { margin: 0 auto 0 0; }


/* --------------------------------------------------------------------------
   7. Il reflink — l'elemento piu' usato di una dashboard di affiliazione
   -------------------------------------------------------------------------- */

.reflink {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #fff; border: 0;
}
.reflink h2, .reflink .eyebrow { color: #fff; }
.reflink .eyebrow { opacity: .7; }
.reflink-code {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2.4rem); letter-spacing: .08em;
  color: #fff; margin: .2rem 0 .8rem; word-break: break-all;
}
.reflink-vai {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #fff; font-weight: 600; text-decoration: underline;
  text-underline-offset: .25em;
}
.reflink-vai:hover { color: #fff; }


/* --------------------------------------------------------------------------
   7-bis. I link per prodotto — la pagina che il partner apre piu' spesso
   --------------------------------------------------------------------------
   Una scheda per prodotto, non una riga di tabella: il campo dell'indirizzo
   e il pulsante devono essere grandi abbastanza da usarli col pollice, e
   una tabella li stringerebbe. Con un prodotto solo la pagina non sembra
   vuota; con cinque non diventa un muro.
   -------------------------------------------------------------------------- */

.linkbox { margin-bottom: var(--gap); }
.linkbox-top {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  align-items: baseline; margin-bottom: .6rem;
}
.linkbox-nome { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.linkbox-tasso {
  font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
  background: var(--green-soft); color: var(--green-text);
}
.linkbox-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.linkbox-url {
  flex: 1 1 18rem; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 1rem: sotto questa misura iOS ingrandisce la pagina quando il campo
     prende il fuoco, e il partner si ritrova la schermata spostata. */
  font-size: 1rem; padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--dark);
}
.linkbox-row .btn { flex: 0 0 auto; }

@media (max-width: 45.99rem) {
  /* Sul telefono il pulsante va sotto e a tutta larghezza: e' il bersaglio
     piu' toccato di questa pagina. */
  .linkbox-url { flex: 1 1 100%; }
  .linkbox-row .btn { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   7-ter. Condivisione
   --------------------------------------------------------------------------
   Pulsanti che sono solo collegamenti: nessuno script di terzi, nessuna
   richiesta verso l'esterno finche' il partner non clicca.

   Le icone sono uno sprite SVG scritto a mano, definito una volta in cima
   alla pagina e richiamato con <use>. Con cinque prodotti e nove
   destinazioni sono quarantacinque riferimenti a nove definizioni, non
   quarantacinque disegni.
   -------------------------------------------------------------------------- */

.share { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.share-lab {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid); margin-bottom: .5rem;
}
.share-row { display: flex; flex-wrap: wrap; gap: .4rem; }

.share-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .75rem; min-height: 40px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--dark);
  font-size: .84rem; font-weight: 500; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.share-btn:hover { border-color: var(--blue); color: var(--blue-text); text-decoration: none; }
.share-btn svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* La condivisione nativa del sistema: nascosta finche' il browser non
   dichiara di saperla fare. Senza JavaScript resta nascosta e restano i
   pulsanti singoli, che funzionano da soli. */
.share-nativa { border-color: var(--green); background: var(--green); color: var(--dark); font-weight: 600; }
.share-nativa:hover { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }

/* Quando la condivisione nativa c'e', le singole destinazioni si
   richiudono qui dentro: restano a un tocco, senza occupare lo schermo. */
.share-altre { margin-top: .5rem; }
.share-altre > summary {
  cursor: pointer; font-size: .82rem; color: var(--mid);
  padding: .35rem 0; list-style: revert;
}
.share-altre > summary:hover { color: var(--blue-text); }
.share-altre[open] > summary { margin-bottom: .5rem; }

@media (max-width: 30rem) {
  /* Su schermi molto stretti i pulsanti si dividono lo spazio invece di
     scendere uno per riga. */
  .share-btn { flex: 1 1 auto; justify-content: center; }
}


/* --------------------------------------------------------------------------
   7bis. Turnstile
   --------------------------------------------------------------------------
   Il widget lo disegna Cloudflare dentro un iframe: qui si regola solo lo
   spazio che occupa nel modulo. Ha una larghezza propria di 300px e non si
   comprime, quindi su schermi stretti si centra invece di sbordare.
   min-height tiene il posto mentre carica: senza, il pulsante di invio
   salta verso il basso quando il widget compare, proprio mentre qualcuno
   sta per premerlo. */

.cf-turnstile {
  margin: 0 0 1rem;
  min-height: 65px;
  display: flex;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   8. Pulsanti
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.2rem; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  /* 44px di lato minimo: e' la dimensione sotto la quale un pollice sbaglia. */
  min-height: 44px;
}
.btn:hover { text-decoration: none; }

/* Il pulsante primario tiene il VERDE DEL MARCHIO con testo scuro.
   Bianco su quel verde da' 2.38 di contrasto e sarebbe illeggibile;
   testo scuro sullo stesso verde da' 7.30. Il colore resta quello del
   marchio, cambia solo cio' che ci sta sopra. */
.btn-primary { background: var(--green); color: var(--dark); }
.btn-primary:hover { background: var(--green-dark); color: #fff; }

.btn-blue { background: var(--blue); color: var(--dark); }
.btn-blue:hover { background: var(--blue-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--dark); border-color: var(--border); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-text); }

.btn-light { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-light:hover { background: rgba(255,255,255,.25); color: #fff; }

.btn-sm { padding: .35rem .8rem; font-size: .82rem; min-height: 36px; }
.btn-block { width: 100%; }


/* --------------------------------------------------------------------------
   9. I quattro numeri
   -------------------------------------------------------------------------- */

.stats {
  display: grid; gap: var(--gap);
  /* Due per riga sul telefono, quattro da 46rem in su. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--gap);
}
.stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm);
}
.stat-val {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 5vw, 1.9rem); line-height: 1.1;
  color: var(--dark); word-break: break-word;
}
.stat-val.green { color: var(--green-text); }
.stat-val.blue  { color: var(--blue-text); }
.stat-lab { font-size: .82rem; color: var(--mid); margin-top: .3rem; }
.stat-note { font-size: .74rem; color: var(--muted); margin-top: .3rem; display: block; }


/* --------------------------------------------------------------------------
   10. Anello delle commissioni per prodotto (SVG puro)
   -------------------------------------------------------------------------- */

.ring-wrap { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.ring { flex: 0 0 auto; width: 170px; height: 170px; }
.ring circle { fill: none; stroke-width: 18; }
.ring-track { stroke: var(--bg); }
.ring-center { text-anchor: middle; font-family: var(--font-display); }
.ring-center .v { font-size: 20px; font-weight: 800; fill: var(--dark); }
.ring-center .l { font-size: 9px; font-weight: 600; fill: var(--muted); letter-spacing: .06em; }

.legend { flex: 1 1 12rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.legend li { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; }
.legend .dot { flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 3px; }
.legend .nm { flex: 1 1 auto; min-width: 0; }
.legend .vl { font-weight: 600; white-space: nowrap; }


/* --------------------------------------------------------------------------
   11. Imbuto: aperture -> prove -> clienti
   -------------------------------------------------------------------------- */

.funnel { margin: 0; padding: 0; list-style: none; }
.funnel li { margin-bottom: .8rem; }
.funnel-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.funnel-top .n { font-weight: 700; font-family: var(--font-display); }
.funnel-bar {
  height: 12px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--border); overflow: hidden; margin-top: .25rem;
}
.funnel-fill { height: 100%; border-radius: 999px; }
.funnel-fill.a { background: var(--blue); }
.funnel-fill.b { background: linear-gradient(90deg, var(--blue), var(--green)); }
.funnel-fill.c { background: var(--green); }
.funnel-rate {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--radius-md);
  background: var(--blue-soft); font-size: .88rem;
}
.funnel-rate b { font-family: var(--font-display); }


/* --------------------------------------------------------------------------
   12. Barra verso la soglia
   -------------------------------------------------------------------------- */

.bar {
  height: 22px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--border); overflow: hidden; margin: .5rem 0;
}
.bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .4s ease;
}
.bar-fill.full { background: var(--green); }
.bar-tags { display: flex; justify-content: space-between; font-size: .8rem; color: var(--mid); }


/* --------------------------------------------------------------------------
   13. Tabelle — su telefono diventano schede
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--border); }
th {
  font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mid); white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }


/* --------------------------------------------------------------------------
   14. Moduli
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.field .hint { display: block; font-size: .78rem; color: var(--mid); margin-top: .3rem; }

input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: .6rem .7rem;
  font-family: var(--font-body); font-size: 1rem;  /* 1rem evita lo zoom su iOS */
  color: var(--dark); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--blue);
}
textarea { resize: vertical; min-height: 5rem; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .8rem 1rem; margin: 0 0 1rem; }
legend { font-size: .85rem; font-weight: 600; padding: 0 .4rem; }
.choice { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.choice input { margin-top: .3rem; }


/* --------------------------------------------------------------------------
   15. Avvisi ed etichette
   -------------------------------------------------------------------------- */

.alert {
  padding: .8rem 1rem; border-radius: var(--radius-md);
  border-left: 4px solid var(--blue); background: var(--blue-soft);
  margin-bottom: var(--gap); font-size: .92rem;
}
.alert-ok   { border-color: var(--green); background: var(--green-soft); }
.alert-bad  { border-color: var(--red);   background: var(--red-soft); }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alert > :last-child { margin-bottom: 0; }

.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--bg); color: var(--mid);
  border: 1px solid var(--border);
}
.badge-ok  { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.badge-wait{ background: var(--blue-soft);  color: var(--blue-text);  border-color: transparent; }
.badge-bad { background: var(--red-soft);   color: var(--red);        border-color: transparent; }

.checklist { margin: .4rem 0 0; padding-left: 1.2rem; }
.checklist li { margin-bottom: .2rem; }


/* --------------------------------------------------------------------------
   16. Dashboard operatore: stesso impianto, piu' sobrio
   --------------------------------------------------------------------------
   E' uno strumento di lavoro: piu' densita', niente ombre colorate, niente
   numeri giganti. Si cambia solo cio' che serve, non si riscrive nulla.
   -------------------------------------------------------------------------- */

.admin { --radius-lg: 12px; --gap: .75rem; }
.admin .card { padding: 1rem; box-shadow: none; }
.admin h1 { font-size: 1.4rem; }
.admin h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.admin .stat-val { font-size: 1.3rem; }
.admin table { font-size: .85rem; }
.admin th, .admin td { padding: .45rem .5rem; }


/* --------------------------------------------------------------------------
   17. Schermi piu' larghi
   -------------------------------------------------------------------------- */

@media (min-width: 46rem) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card { padding: 1.5rem; }
  .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
  .cols2 > * { margin-bottom: 0; }
}

@media (max-width: 45.99rem) {
  /* Le tabelle marcate .as-cards diventano un elenco di schede: su un
     telefono una tabella a sei colonne o si taglia o si spezza. */
  table.as-cards, table.as-cards tbody, table.as-cards tr, table.as-cards td { display: block; width: 100%; }
  table.as-cards thead { position: absolute; left: -9999px; }
  table.as-cards tr {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: .6rem .8rem; margin-bottom: .6rem; background: var(--bg-card);
  }
  table.as-cards td {
    border: 0; padding: .25rem 0; display: flex; justify-content: space-between; gap: 1rem;
  }
  table.as-cards td::before {
    content: attr(data-lab);
    font-size: .74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--mid); flex: 0 0 auto;
  }
  table.as-cards td.num { text-align: right; }
  .ring-wrap { justify-content: center; }
}


/* --------------------------------------------------------------------------
   18. Stampa e preferenze
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   12. Sito vetrina: apertura, passi, richiami, piede
   --------------------------------------------------------------------------
   Serve solo alle pagine pubbliche. Riusa le tinte e i raggi gia' definiti
   sopra: qui non nasce nessun colore nuovo.
   -------------------------------------------------------------------------- */

/* .lead esisteva nel markup di /rates/ e non nel foglio: un paragrafo di
   apertura che veniva reso come tutti gli altri. */
.lead {
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 1.6; color: var(--mid); max-width: 46rem;
}

.vetrina {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #fff; border: 0;
}
.vetrina h1 {
  color: #fff;
  font-size: clamp(1.7rem, 5.2vw, 2.7rem); line-height: 1.15;
  margin: 0 0 .6rem;
}
.vetrina .lead { color: rgba(255,255,255,.86); max-width: 44rem; }
.vetrina .eyebrow { color: rgba(255,255,255,.7); }
/* Il verde del marchio su fondo scuro ha contrasto abbondante: qui si puo'
   usare la tinta piena invece della variante scurita per il bianco. */
.vetrina .spicca { color: var(--green); font-weight: 800; }

.azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* Numeri veri, presi dal database: percentuale piu' alta, soglia, prodotti. */
.cifre {
  display: grid; gap: .8rem; margin-top: 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cifra {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: .8rem .9rem;
}
.cifra .v {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(1.3rem, 4.6vw, 1.8rem); line-height: 1.1;
}
.cifra .l { font-size: .78rem; color: rgba(255,255,255,.72); margin-top: .25rem; }

/* I tre passi. Il numero e' disegnato dal CSS: nel markup c'e' solo una
   lista ordinata, che e' cio' che la pagina e' davvero. */
.passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 1rem; }
.passi > li {
  counter-increment: passo; position: relative;
  padding-left: 3.1rem; min-height: 2.4rem;
}
.passi > li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-text);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}
.passi h3 { margin: .2rem 0 .3rem; font-size: 1.05rem; }
.passi p { margin: 0; color: var(--mid); }

.richiamo { text-align: center; }
.richiamo h2 { margin-top: 0; }
.richiamo .azioni { justify-content: center; }

.piede {
  border-top: 1px solid var(--border); background: var(--bg-card);
  margin-top: 2.5rem; padding: 1.4rem 0;
}
.piede-link { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; }
.piede-nota { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }

@media (min-width: 46rem) {
  .cifre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .passi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  .topbar, .lang, .btn, .reflink-row { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}