/* ================================================================
   MiniSurge — disegno in stile Apple (prova in locale, ramo «apple»)
   Fonte: Apple Human Interface Guidelines (developer.apple.com/design/human-interface-guidelines).
   Si carica DOPO stile.css e ne ridefinisce token e componenti.

   Regole seguite, con la pagina delle HIG da cui vengono:
   - Typography: font di sistema (San Francisco sui Mac e sugli iPhone: i file SF non si possono
     distribuire sul web, quindi si chiede al sistema), scala macOS: Large Title 26, Title 1 22,
     Title 2 17, Title 3 15, Headline 13 bold, Body 13, Callout 12, Subheadline 11, Footnote 10;
     mai pesi Ultralight/Thin/Light.
   - Color: valori ufficiali dei colori di sistema (tabella del giugno 2025), «Increased contrast»
     quando il colore e' testo piccolo. Un colore, un significato.
   - Accessibility: contrasto almeno 4,5:1 fino a 17 pt; controlli macOS 28 pt, 44 pt col tocco.
   - Dark Mode: all'inizio segue il sistema; il selettore in basso a sinistra (sua richiesta) scrive data-aspetto su <html>.
   - Materials: il vetro SOLO sul livello di navigazione e controlli (barra laterale, barra strumenti,
     menu, popover), mai nel contenuto. Rispetta «Reduce Transparency» e «Increase Contrast».
   - Sidebars: icone nel colore d'accento, al massimo due livelli, righe arrotondate; niente di critico in fondo.
   - Lists and tables: righe alterne nelle tabelle larghe, clic sull'intestazione per ordinare.
   - Motion: breve e con uno scopo; niente lampeggi veloci; rispetta «Reduce Motion».
   ================================================================ */

:root {
  color-scheme: light;
  --font-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeri: var(--font-corpo);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  
  --raggio: 8px; --raggio-carta: 14px; 

  /* superfici (system gray, gruppi su fondo) */
  --fondo: #F2F2F7; --pannello: #FFFFFF; --pannello2: #F5F5F7; --campo: #FFFFFF;
  
  --pollice: #FFFFFF;            /* il pezzo scelto dei controlli segmentati */
  --riempi-rgb: 60, 60, 67;
  --riempimento: rgba(118, 118, 128, .12); --riempimento-su: rgba(118, 118, 128, .2);

  /* linee (separator) */
  --linea: rgba(60, 60, 67, .13); --linea-f: rgba(60, 60, 67, .18); --linea-ff: rgba(60, 60, 67, .29);

  /* testi (label): tutti almeno 4,5:1 su bianco e su F2F2F7 */
  --testo: #1D1D1F; --testo2: #5C5C61; --testo3: #6C6C70; --testo-forte: #000000; 

  /* colori semantici: --x = testo, --x-pieno = riempimenti e barre (valori ufficiali). I testi partono dai valori «Increased
     contrast» di Apple, scuriti quanto basta per restare a 4,5:1 anche sul fondo grigio F2F2F7 */
  --accento: #1A64E0; --accento-pieno: #1E6EF4; --accento-rgb: 0, 136, 255; --bottone-testo: #FFFFFF;
  --verde: #007F2E; --verde-pieno: #34C759; --verde-scuro: #007F2E; --verde-vivo: #007F2E; 
  --verde-rgb: 52, 199, 89; 
  --rosso: #D8132A; --rosso-pieno: #FF383C; --rosso-rgb: 255, 56, 60;
  --giallo: #8F5E00; --giallo-pieno: #FFCC00; --giallo-rgb: 255, 204, 0;
  --arancione: #B64C00; --arancione-pieno: #FF8D28; --arancione-rgb: 255, 141, 40; 
  --ciano: #00749F; --ciano-pieno: #00C0E8; --ciano-rgb: 0, 192, 232; 
  --indaco: #564ADE; --indaco-rgb: 97, 85, 245; 

  /* materiali: vetro normale per la navigazione, spesso per menu e popover */
  --vetro: rgba(255, 255, 255, .66); --vetro-barra: rgba(255, 255, 255, .3); --oro-traccia: #E8AE00; --oro-testo: #9C7000; --vetro-spesso: rgba(255, 255, 255, .84); --vetro-filo: rgba(255, 255, 255, .7);
  --vetro-filtro: saturate(180%) blur(28px);
  --bordo-vetro: rgba(0, 0, 0, .1);

  /* ombre */
  --ombra-carta: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .05);
  --ombra-comando: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06);
  --ombra-vetro: 0 8px 32px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  --ombra-popover: 0 12px 44px rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .1);
}
:root[data-aspetto="scuro"] {
  color-scheme: dark;
  --fondo: #1C1C1E; --pannello: #2C2C2E; --pannello2: #3A3A3C; --campo: #1C1C1E;
  --pollice: #636366;
  --riempi-rgb: 235, 235, 245;
  --riempimento: rgba(118, 118, 128, .24); --riempimento-su: rgba(118, 118, 128, .36);
  --linea: rgba(235, 235, 245, .1); --linea-f: rgba(235, 235, 245, .16); --linea-ff: rgba(235, 235, 245, .26);
  --testo: #F5F5F7; --testo2: #C7C7CC; --testo3: #AEAEB2; --testo-forte: #FFFFFF; 
  --accento: #5CB8FF; --accento-pieno: #1E6EF4; --accento-rgb: 0, 145, 255;
  --verde: #30D158; --verde-pieno: #30D158; --verde-vivo: #30D158; --verde-rgb: 48, 209, 88; 
  --rosso: #FF8A8D; --rosso-pieno: #FF4245; --rosso-rgb: 255, 66, 69;
  --giallo: #FFD600; --giallo-pieno: #FFD600; --giallo-rgb: 255, 214, 0;
  --arancione: #FF9230; --arancione-pieno: #FF9230; --arancione-rgb: 255, 146, 48;
  --ciano: #3CD3FE; --ciano-pieno: #3CD3FE; --ciano-rgb: 60, 211, 254;
  --indaco: #A7AAFF; --indaco-rgb: 109, 124, 255; 
  --vetro: rgba(44, 44, 46, .66); --vetro-barra: rgba(44, 44, 46, .34); --oro-traccia: #FFD60A; --oro-testo: #FFD60A; --vetro-spesso: rgba(58, 58, 60, .86); --vetro-filo: rgba(255, 255, 255, .1);
  --bordo-vetro: rgba(0, 0, 0, .5);
  --ombra-carta: 0 0 0 .5px rgba(255, 255, 255, .06);
  --ombra-comando: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .08);
  --ombra-vetro: 0 8px 32px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --ombra-popover: 0 12px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}
/* Increase Contrast: linee e testi piu' decisi */
@media (prefers-contrast: more) {
  :root {
    --linea: rgba(60, 60, 67, .3); --linea-f: rgba(60, 60, 67, .45); --linea-ff: rgba(60, 60, 67, .65);
    --testo: #000000; --testo2: #3A3A3C; --testo3: #48484A; --bordo-vetro: rgba(0, 0, 0, .4);
  }
}
@media (prefers-contrast: more) {
  :root[data-aspetto="scuro"] {
    --linea: rgba(235, 235, 245, .3); --linea-f: rgba(235, 235, 245, .45); --linea-ff: rgba(235, 235, 245, .65);
    --testo: #FFFFFF; --testo2: #E5E5EA; --testo3: #D1D1D6; --bordo-vetro: rgba(255, 255, 255, .4);
  }
}
/* Reduce Transparency: niente vetro, superfici piene */
@media (prefers-reduced-transparency: reduce) {
  :root { --vetro: var(--pannello); --vetro-spesso: var(--pannello); --vetro-filtro: none; }
}

/* ---------- basi ---------- */
html { background: var(--fondo); -webkit-text-size-adjust: 100%; }
body { font: 13px/1.38 var(--font-corpo); background: var(--fondo); color: var(--testo); -webkit-font-smoothing: antialiased; }
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }
h2, h3 { font-variation-settings: normal; }
.oro { color: var(--arancione); }
.nota { font-size: 11px; color: var(--testo3); }
.nota b { color: var(--testo2); }
code { background: var(--riempimento); border: 0; border-radius: 4px; font: 12px var(--font-mono); }
.ic { width: 16px; height: 16px; }
.bottone .ic { width: 14px; height: 14px; margin-right: 2px; }
button:focus-visible, a:focus-visible, summary:focus-visible, th[data-campo]:focus-visible { outline: 3px solid rgba(var(--accento-rgb), .5); outline-offset: 1px; }

/* ---------- finestra: barra laterale di vetro + contenuto ---------- */
.app { grid-template-columns: 252px minmax(0, 1fr); }
.laterale {
  position: sticky; top: 8px; height: calc(100vh - 16px); height: calc(100dvh - 16px); margin: 8px 0 8px 8px;
  background: var(--vetro); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro);
  border: 0; border-radius: 18px; box-shadow: var(--ombra-vetro), inset 0 0 0 .5px var(--vetro-filo), 0 0 0 .5px var(--bordo-vetro);
}
.marchio { flex-direction: column; gap: 0; padding: 16px 18px 8px; border: 0; }
.marchio .nome { font: 700 15px/20px var(--font-corpo); letter-spacing: 0; color: var(--testo); }
.marchio .nome em { color: inherit; }
.marchio .sotto { font: 400 11px/14px var(--font-corpo); letter-spacing: 0; color: var(--testo3); }
.laterale nav { padding: 4px 10px 10px; gap: 1px; }
.nav-sezione { font: 600 11px/14px var(--font-corpo); letter-spacing: 0; text-transform: none; color: var(--testo3); padding: 14px 8px 4px; }
.laterale nav button[data-vista] {
  height: 30px; padding: 0 8px; gap: 8px; border: 0; border-radius: 8px; color: var(--testo); font: 400 13px/16px var(--font-corpo);
  transition: background-color .12s;
}
.laterale nav button[data-vista] .ic { color: var(--accento); width: 16px; height: 16px; }
.laterale nav button[data-vista]:hover { background: rgba(var(--riempi-rgb), .07); color: var(--testo); }
.laterale nav button[data-vista]:hover .ic { color: var(--accento); }
.laterale nav button[data-vista].attiva { background: rgba(var(--accento-rgb), .16); color: var(--testo); border: 0; font-weight: 500; }
.nav-conta { background: var(--riempimento-su); color: var(--testo2); font: 600 11px/18px var(--font-corpo); }
.cartiglio { border-top: .5px solid var(--linea-ff); font-size: 11px; padding: 6px 0 4px; margin: 0 10px; }
.cartiglio > div { padding: 3px 8px; border: 0; }
.cartiglio small { font-size: 11px; color: var(--testo3); }
.cartiglio > div > span { color: var(--testo2); }
.cartiglio .vivo { color: var(--testo2); }
#bottone-esci { color: var(--accento); font: 400 12px var(--font-corpo); padding: 6px 8px 8px; text-align: left; border-radius: 6px; }
#bottone-esci:hover { color: var(--accento); text-decoration: underline; }

/* ---------- barra strumenti: titolo e comandi su un velo che sfuma (scroll edge effect) ---------- */
header.testata {
  position: sticky; top: 0; align-items: center; gap: 8px 12px; padding: 12px 24px 10px; min-height: 52px;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
}
header.testata::before {
  content: ""; position: absolute; inset: 0 0 -14px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--fondo) 90%, transparent) 60%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
}
header.testata h1 { font: 700 22px/26px var(--font-corpo); color: var(--testo); margin: 0 auto 0 0; letter-spacing: -.01em; }
.quota { flex-direction: row; align-items: center; gap: 10px; }
.misura, header.testata:has(#testata-ponte:not([hidden])) .misura { position: static; width: auto; height: auto; display: flex; align-items: baseline; gap: 5px; }
.misura::before, .capo { display: none; }
.misura b { position: static; transform: none; background: none; padding: 0; order: 1; font: 600 12px/16px var(--font-corpo); color: var(--testo); }
.misura small { position: static; font-size: 11px; color: var(--testo3); }
.misura small.a { order: 2; } .misura small.a::before { content: "· "; } .misura small.a::after { content: " –"; }
.misura small.b { order: 3; }
.stato-dati { font-size: 11px; color: var(--testo3); gap: 5px; min-height: 0; }
.stato-dati:not(:empty)::before { width: 6px; height: 6px; background: var(--verde-pieno); box-shadow: none; }
header.testata .testata-ponte { gap: 6px 8px; }
header.testata .testata-ponte select, header.testata .testata-ponte input { height: 28px; }
header.testata .testata-ponte .freccia { width: 28px; height: 28px; }
header.testata .testata-ponte #com-mese { min-width: 128px; }
header.testata .testata-ponte select, header.testata .testata-ponte .freccia, header.testata .testata-quote, .testata-giro {
  background-color: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro);
  box-shadow: var(--ombra-comando); border: 0;
}
header.testata .testata-quote { height: 28px; border-radius: 14px; }
header.testata .testata-ponte select { border-radius: 14px; }
header.testata .testata-ponte .freccia { border-radius: 50%; }
main { padding: 6px 24px 64px; }
.vista.attiva { animation-duration: .2s; }

/* ---------- comandi: bottoni, tendine, campi (28 pt, HIG Accessibility) ---------- */
input, select, textarea {
  height: 28px; padding: 0 8px; border: .5px solid var(--linea-ff); border-radius: 7px; background-color: var(--campo); color: var(--testo);
  font: 400 13px var(--font-corpo); box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .03);
}
textarea { padding: 6px 8px; font: 400 13px/1.38 var(--font-corpo); }
input::placeholder, textarea::placeholder { color: var(--testo3); }
input:hover, select:hover { border-color: var(--linea-ff); }
input:focus, select:focus, textarea:focus { border-color: var(--accento-pieno); box-shadow: 0 0 0 3px rgba(var(--accento-rgb), .32); }
/* la tendina e' un pop-up button: bezel e doppia freccia a destra */
select {
  min-width: 120px; padding: 0 24px 0 10px; background-color: var(--campo); box-shadow: var(--ombra-comando); border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M1 5l3-3.2L7 5M1 8l3 3.2L7 8' fill='none' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 8px center;
}
input[type=checkbox], input[type=radio] { width: 14px; height: 14px; padding: 0; box-shadow: none; accent-color: var(--accento-pieno); }
.ott-form .campo.orizzontale input[type="checkbox"], .ott-campi .campo.orizzontale input[type="checkbox"], .avv-tipi input[type="checkbox"],
.riga-libro .spunta input, .sl-sugg li input[type="checkbox"], table.neg-tabella .neg-spunta, table.neg-tabella .neg-spunta-tutte, .scelta-mercati .menu input { width: 14px; height: 14px; accent-color: var(--accento-pieno); }
input.stretto { width: 72px; }
label.campo, .campo { gap: 4px; font-size: 12px; font-weight: 400; color: var(--testo2); }
.gruppo-campi > .eti { font-size: 12px; font-weight: 400; color: var(--testo2); }
.gruppo-campi { gap: 4px; }
.barra { gap: 10px 16px; }
.bottone {
  height: 28px; padding: 0 12px; gap: 4px; border: 0; border-radius: 8px; background: var(--accento-pieno); color: var(--bottone-testo);
  font: 500 13px var(--font-corpo); box-shadow: var(--ombra-comando); transition: background-color .12s, filter .12s, transform .1s;
}
.bottone:hover { background: var(--accento-pieno); filter: brightness(1.08); box-shadow: var(--ombra-comando); text-decoration: none; }
.bottone:active:not(:disabled) { filter: brightness(.92); }
.bottone:disabled { opacity: .45; cursor: default; }
.bottone.secondario { background: var(--pannello); color: var(--testo); border: 0; }
.bottone.secondario:hover { background: var(--pannello); filter: brightness(.97); box-shadow: var(--ombra-comando); }
.bottone.rosso { background: var(--pannello); color: var(--rosso); border: 0; }
.bottone.rosso:hover { background: var(--pannello); filter: brightness(.97); box-shadow: var(--ombra-comando); }
.bottone.verde { background: var(--verde-scuro); color: #FFFFFF; border: 0; }
.bottone.verde:hover { background: var(--verde-scuro); box-shadow: var(--ombra-comando); }
.bottone.piccolo { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.bottone.testo { background: transparent; color: var(--accento); box-shadow: none; padding: 0 6px; }
.bottone.testo:hover { background: rgba(var(--accento-rgb), .1); filter: none; box-shadow: none; }
.bottone.fatto, .bottone.fatto:hover { background: var(--verde-scuro); border: 0; color: #FFFFFF; box-shadow: var(--ombra-comando); filter: none; }
.chip { height: 24px; padding: 0 10px; border: 0; background: var(--riempimento); color: var(--testo); font: 400 12px var(--font-corpo); }
.chip:hover { background: var(--riempimento-su); color: var(--testo); }
.chip.attivo { background: var(--accento-pieno); color: #FFFFFF; font-weight: 500; }
.freccia { width: 28px; height: 28px; border: 0; border-radius: 7px; background: var(--campo); box-shadow: var(--ombra-comando); color: var(--testo2); font-size: 15px; }
.freccia:hover:not(:disabled) { color: var(--accento); }
.tag { border: 0; background: var(--riempimento); color: var(--testo2); font-size: 11px; font-weight: 500; padding: 1px 7px; }
.tag.verde { color: var(--verde); background: rgba(var(--verde-rgb), .14); } .tag.giallo { color: var(--giallo); background: rgba(var(--giallo-rgb), .18); }
.tag.rosso { color: var(--rosso); background: rgba(var(--rosso-rgb), .12); }
.tag.news-kdp { color: var(--verde); background: rgba(var(--verde-rgb), .14); } .tag.news-ads { color: var(--accento); background: rgba(var(--accento-rgb), .12); }

/* controlli segmentati: traccia grigia, pezzo scelto bianco in rilievo */
.segmentato, .earners-toggle { display: inline-flex; flex-wrap: wrap; padding: 2px; gap: 0; border: 0; border-radius: 9px; background: var(--riempimento); overflow: visible; }
.segmentato button, .earners-toggle button { height: 24px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--testo); font: 400 12px var(--font-corpo); transition: background-color .12s; }
.segmentato button:hover, .earners-toggle button:hover { background: rgba(var(--riempi-rgb), .06); color: var(--testo); }
.segmentato button.attivo, .earners-toggle button.attivo { background: var(--pollice); color: var(--testo); font-weight: 500; box-shadow: var(--ombra-comando); }
.segmentato .conta { font-size: 11px; opacity: 1; color: var(--testo3); }
.segmentato button.attivo .conta { opacity: 1; color: var(--testo2); }
.ott-gruppo > summary { height: 24px; padding: 0 11px; border: 0; border-radius: 7px; color: var(--testo); font: 400 12px var(--font-corpo); }
.ott-gruppo > summary:hover { background: rgba(var(--riempi-rgb), .06); color: var(--testo); }
.ott-gruppo.attivo > summary { background: var(--pollice); color: var(--testo); font-weight: 500; box-shadow: var(--ombra-comando); }
.ott-schede-nav { margin: 14px 0 16px; }
.ott-schede-nav button { min-width: 84px; }

/* interruttori: la levetta di sistema */
.interruttore { height: 28px; padding: 0 10px 0 6px; gap: 7px; border: 0; border-radius: 14px; background: var(--pannello); box-shadow: var(--ombra-comando); font: 400 12px var(--font-corpo); color: var(--testo); }
.interruttore:hover { border: 0; }
.interruttore i { width: 32px; height: 18px; border-radius: 9px; background: var(--verde-pieno); }
.interruttore i::after { top: 2px; right: 2px; width: 14px; height: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .18s ease; }
.interruttore.quote-spente i { background: var(--riempimento-su); }
.interruttore.quote-spente i::after { transform: translateX(-14px); }
.selettore-stato { height: 18px; padding: 0 7px 0 3px; border: 0; background: var(--riempimento); color: var(--testo2); font: 400 11px var(--font-corpo); }
.selettore-stato i { width: 24px; height: 14px; background: var(--riempimento-su); }
.selettore-stato i::after { top: 2px; left: 2px; width: 10px; height: 10px; background: #FFFFFF; box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.selettore-stato.acceso { color: var(--verde); border: 0; }
.selettore-stato.acceso i { background: var(--verde-pieno); }
.selettore-stato.acceso i::after { transform: translateX(10px); }
.selettore-stato:hover { border: 0; background: var(--riempimento-su); }

/* sezioni apribili: triangolo di apertura */
details.dati-kdp > summary, details.aggiungi-libro > summary, details.avanzate > summary {
  height: 28px; padding: 0 12px 0 10px; gap: 6px; border: 0; border-radius: 8px; background: var(--pannello); color: var(--testo); box-shadow: var(--ombra-comando); font: 400 13px var(--font-corpo);
}
details.dati-kdp > summary::before, details.aggiungi-libro > summary::before, details.avanzate > summary::before { content: "▸"; color: var(--testo3); font-weight: 400; font-size: 11px; }
details[open].dati-kdp > summary::before, details[open].aggiungi-libro > summary::before, details[open].avanzate > summary::before { content: "▾"; }
details.dati-kdp > summary:hover, details.aggiungi-libro > summary:hover, details.avanzate > summary:hover { border: 0; }
details.dati-kdp .corpo, details.aggiungi-libro .corpo, details.avanzate .griglia-form, details.copie-auto .corpo, .ott-form .ott-tf-pan{ border: 0; border-radius: 10px; background: var(--riempimento); }
.campo-tendina { height: 28px; border: 0; border-radius: 7px; background: var(--campo); box-shadow: var(--ombra-comando); font: 400 13px var(--font-corpo); line-height: 28px; }
.campo-tendina::after { content: "⌄"; color: var(--testo3); top: -3px; }
.scelta-mercati[open] .campo-tendina { border: 0; box-shadow: 0 0 0 3px rgba(var(--accento-rgb), .32); }

/* ---------- carte di contenuto (niente vetro: HIG Materials) ---------- */
.pannello { background: var(--pannello); border: 0; border-radius: var(--raggio-carta); box-shadow: var(--ombra-carta); padding: 14px 16px; margin-bottom: 16px; }
.pannello > h3:first-child, .pannello > h2:first-child {
  position: static; max-width: none; margin: 0 0 10px; padding: 0; background: none; border-radius: 0; white-space: normal;
  font: 600 15px/20px var(--font-corpo); color: var(--testo);
}
.pannello > h3:first-child small, .pannello > h2:first-child small { font-size: 12px; font-weight: 400; color: var(--testo3); }
h3 { font: 600 15px/20px var(--font-corpo); }
.pannello .pannello { background: var(--pannello2); box-shadow: none; margin-top: 12px; }
.in-alto-destra { top: 10px; right: 14px; }
.com-tabelle { gap: 16px; }
.cru-sopra { margin: 0 0 12px; }
.avviso { border: 0; border-radius: 10px; background: rgba(var(--rosso-rgb), .12); color: var(--rosso); padding: 8px 12px; margin: 10px 0; }
.stato-vuoto { border: 0; border-radius: 10px; background: var(--riempimento); color: var(--testo2); font-size: 13px; }
.indice-sezioni { margin-bottom: 14px; gap: 6px; }

/* ---------- Dashboard ---------- */
.ponte-netto { padding: 16px 18px 14px; }
.ponte-eti { font: 400 13px var(--font-corpo); color: var(--testo2); }
.ponte-valore { font: 700 44px/50px var(--font-corpo); letter-spacing: -.02em; color: var(--verde-vivo); text-shadow: none; }
.ponte-valore.rosso { color: var(--rosso); text-shadow: none; }
.ponte-conf { font-size: 12px; margin-top: 2px; color: var(--testo2); }
.ponte-roi { font: 600 22px/26px var(--font-corpo); color: var(--testo); }
.ponte-prev { border-left: .5px solid var(--linea-ff); padding-left: 20px; }
.prev-voce { font-size: 12px; }
.prev-val { font: 600 15px var(--font-corpo); color: var(--testo); }
.prev-val.netto { font-size: 17px; font-weight: 700; }
.prev-val.netto.verde-vivo { color: var(--verde-vivo); text-shadow: none; }
.ponte-traguardo { margin-top: 14px; }
.ponte-traguardo .binario { height: 6px; border-radius: 3px; background: var(--riempimento); }
.ponte-traguardo .binario .fatto { border-radius: 3px; background: var(--verde-pieno); box-shadow: none; }
.ponte-traguardo .previsto { background: rgba(var(--verde-rgb), .3); border-radius: 0 3px 3px 0; }
.ponte-traguardo .segno { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; }
.ponte-traguardo .segno.pari { background: var(--arancione-pieno); box-shadow: none; }
.ponte-traguardo .segno.intero { background: var(--testo3); opacity: 1; }
.ponte-tessere { margin: 12px 0 16px; }
.ponte-sotto { font-size: 11px; color: var(--testo3); }

.tessere { gap: 10px; }
.tessera { padding: 12px 14px 10px; background: var(--pannello); border: 0; border-radius: var(--raggio-carta); box-shadow: var(--ombra-carta); }
.tessera:hover { border: 0; box-shadow: var(--ombra-carta); }
.pannello .tessera, .pannello .tessera:hover { background: var(--pannello2); box-shadow: none; }
.pannello .strip { background: var(--pannello2); box-shadow: none; }
.tessera::before, .tessera.verde::before, .tessera.rosso::before, .tessera.oro::before, .tessera.tessera-netto::before { display: none; }
.tessera .e { font-size: 12px; font-weight: 500; color: var(--testo2); }
.tessera.verde .e { color: var(--verde); } .tessera.rosso .e { color: var(--rosso); } .tessera.oro .e { color: var(--arancione); } .tessera.tessera-netto .e { color: var(--verde-vivo); }
.tessera .v, .ponte-tessere .tessera .v { font: 600 22px/26px var(--font-corpo); margin-top: 4px; letter-spacing: -.01em; color: var(--testo); }
.tessera .v.oro { color: var(--testo); } .tessera .v.verde { color: var(--testo); } .tessera .v.rosso { color: var(--testo); }
.tessera .v.verde-vivo { color: var(--verde-vivo); text-shadow: none; }
.ott-funz-regole .tessera .v { font-size: 22px; }
.delta { font-size: 11px; padding: 1px 6px; color: var(--testo2); background: var(--riempimento); }
.delta.su { color: var(--verde); background: rgba(var(--verde-rgb), .14); }
.delta.giu { color: var(--rosso); background: rgba(var(--rosso-rgb), .12); }
.punto-vivo, .punto-vivo.fermo { box-shadow: none; }
.strip { margin-top: 10px; border: 0; border-radius: var(--raggio-carta); background: var(--pannello); box-shadow: var(--ombra-carta); }
.strip > div { padding: 8px 14px; border-right: .5px solid var(--linea); }
.strip .e { font-size: 11px; }
.strip .v { font: 500 15px/20px var(--font-corpo); }
.strip .s { font-size: 11px; }
.legenda { font-size: 11px; color: var(--testo3); gap: 14px; }
.legenda .q-verde { background: var(--verde-pieno); } .legenda .q-rosso { background: var(--rosso-pieno); }
.legenda .q-linea { background: var(--verde-vivo); box-shadow: none; }
.legenda .q-migliore { background: transparent; border: 0; box-shadow: inset 0 0 0 2px var(--oro-traccia); }

.podio { gap: 10px; }
.podio-voce { background: var(--pannello2); border: 0; border-radius: 12px; }
.podio-voce:hover { border: 0; transform: none; }
.podio-cover{ border-radius: 4px; background: var(--riempimento); }
.podio-cover img{ border-radius: 3px; }
#com-tooltip, #cru-tooltip, .ott-ris-grafico .tooltip-grafico {
  background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro);
  border: 0; border-radius: 10px; box-shadow: var(--ombra-popover); font-size: 11px; padding: 7px 10px;
}

/* ---------- tabelle ---------- */
.tab-stats { font-size: 13px; }
.tab-stats th { font: 500 11px var(--font-corpo); color: var(--testo3); padding: 5px 8px; border-bottom: .5px solid var(--linea-ff); }
.tab-stats td { padding: 6px 8px; border-bottom: .5px solid var(--linea); }
.tab-stats .tab-val { font-weight: 500; color: var(--testo); }
.tab-stats .tab-cambio { font-size: 12px; font-weight: 500; }
.tab-stats .riga-forte td { font-weight: 600; color: var(--testo); background: rgba(var(--verde-rgb), .08); }
table.dati { font-size: 13px; }
table.dati th, table.dati td { padding: 6px 9px; border-bottom: 0; }
table.dati th { font: 500 11px/14px var(--font-corpo); color: var(--testo3); background: var(--pannello); border-bottom: .5px solid var(--linea-ff); }
table.dati tbody tr:nth-child(even) > td { background: rgba(var(--riempi-rgb), .035); }
table.dati tbody tr:hover > td { background: rgba(var(--accento-rgb), .08); }
table.dati th[data-campo]:hover, table.dati th.ordinata, table.tab-stats th.ordinata { color: var(--testo); }
table.dati th .freccia, table.tab-stats th .freccia, .riga-libro.testa .freccia { color: var(--accento); box-shadow: none; }
table.dati th.colonna-netto, table.dati td.colonna-netto, table.dati tr:hover td.colonna-netto { border-left: 0; border-right: 0; }
table.dati th.colonna-netto { background: var(--pannello); }
table.dati td.colonna-netto { background: rgba(var(--verde-rgb), .06); font-weight: 600; }
table.dati tbody tr:hover td.colonna-netto { background: rgba(var(--verde-rgb), .12); }
td.con-barra .barra-netto { top: 5px; bottom: 5px; width: calc((100% - 16px) * var(--w, 0)); border-radius: 4px; }
.testa-fissa { background: var(--pannello); box-shadow: 0 1px 0 var(--linea-ff); }
table.dati thead tr.bande th { font-size: 11px; letter-spacing: 0; color: var(--testo3); border-bottom: .5px solid var(--linea); padding: 4px 9px; }
table.dati thead tr.bande th.banda-soldi, table.dati thead tr.bande th.banda-30, table.dati thead th.b30 { color: var(--arancione); }
.ott-scorre table.dati thead th { background: var(--pannello); }
.cru-libro-cella img, #cec-tabella .cec-cover, #salvati-tabella .cec-cover, .sl-mini, .mini-cover, .neg-cover { border: 0; border-radius: 3px; background: var(--riempimento); box-shadow: 0 0 0 .5px var(--linea-f); }
#cru-tab-account .esp { border: 0; background: transparent; color: var(--testo3); }
#cru-tab-account .esp:hover { color: var(--accento); }
tr.scheletro td span, .scheletro-voce span, .scheletro-libro span { background: var(--riempimento); border-radius: 4px; }
.scheletro-libro { border-bottom: .5px solid var(--linea); }
.ridim-maniglia::after { background: var(--linea-ff); }
.ridim-maniglia:hover::after, body.ridimensionando .ridim-maniglia::after { background: var(--accento-pieno); }

/* ---------- Libreria ---------- */
.elenco-libri { background: var(--pannello); border: 0; border-radius: var(--raggio-carta); box-shadow: var(--ombra-carta); margin-top: 16px; }
.lib-sopra { margin-top: 16px; }
.lib-sopra + .elenco-libri { margin-top: 8px; }
.riga-libro { padding: 7px 14px; border-bottom: .5px solid var(--linea); min-height: 78px; }
.riga-libro.testa { height: 34px; min-height: 34px; padding: 6px 14px; font: 500 11px/14px var(--font-corpo); color: var(--testo3); border-bottom: .5px solid var(--linea-ff); background: var(--pannello); }
.riga-libro.testa:hover { background: var(--pannello); }
.riga-libro:not(.testa):hover { background: rgba(var(--accento-rgb), .06); }
.riga-libro .cover { border: 0; border-radius: 3px; background: var(--riempimento); box-shadow: 0 1px 4px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .08); }
.riga-libro .cover-link:hover .cover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .08); }
.riga-libro .t { font-weight: 500; font-size: 13px; }
.riga-libro .meta { font-size: 11px; color: var(--testo3); gap: 6px; margin-top: 3px; }
.riga-libro .bsr { font: 600 15px/20px var(--font-corpo); color: var(--testo); }
.riga-libro .dato { font: 400 13px/16px var(--font-corpo); }
.riga-libro .asin { font: 400 12px var(--font-mono); letter-spacing: 0; color: var(--testo3); }
.riga-libro .asin:hover { color: var(--accento); }
.riga-libro.senza-ads { box-shadow: inset 3px 0 0 var(--giallo-pieno); background: rgba(var(--giallo-rgb), .08); }
.riga-libro.senza-ads:hover { background: rgba(var(--giallo-rgb), .13); }
.legenda-ads { box-shadow: inset 3px 0 0 var(--giallo-pieno); background: rgba(var(--giallo-rgb), .12); }
.riga-libro .stella, .riga-libro .dato.stelle-giu .stella, .riga-libro .dato.stelle-male .stella { color: var(--giallo-pieno); }
.agg-titolo { width: 20px; height: 20px; border: 0; background: var(--riempimento); color: var(--testo2); }
.agg-titolo:hover { background: rgba(var(--accento-rgb), .14); color: var(--accento); }
.agg-titolo .ic { width: 11px; height: 11px; }
.agg-titolo:disabled { color: var(--accento); }
.intestazione-mercato { gap: 8px; margin-top: 0; padding: 10px 14px; border: 0; border-bottom: .5px solid var(--linea-ff); background: rgba(var(--riempi-rgb), .05); }
.intestazione-mercato .sigla, .mercato-fisso .sigla { font: 700 12px/16px var(--font-corpo); letter-spacing: 0; min-width: 0; padding: 2px 8px; border: 0; border-radius: 6px; background: var(--accento-pieno); color: #FFFFFF; }
.intestazione-mercato .nome { font: 600 15px/20px var(--font-corpo); color: var(--testo); }
.intestazione-mercato .conta, .mercato-fisso .conta { font-size: 12px; color: var(--testo3); }
.mercato-fisso { padding: 4px 12px 4px 4px; gap: 7px; background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); border: 0; box-shadow: var(--ombra-vetro), 0 0 0 .5px var(--bordo-vetro); }
.mercato-fisso .sigla { border-radius: 999px; }
.mercato-fisso .nome { font: 600 12px var(--font-corpo); }
.badge-mercato { border: 0; font-size: 11px; font-weight: 500; padding: 0 6px; background: var(--riempimento); }
.lingua-en { color: var(--ciano); } .lingua-de { color: var(--verde); } .lingua-fr { color: var(--indaco); } .lingua-es { color: var(--arancione); } .lingua-it { color: var(--giallo); }
.badge-evergreen { font-size: 11px; font-weight: 500; }
/* stagionalita': scala dai colori di sistema, testo sempre scuro o bianco a norma (uguale in chiaro e in scuro) */
.mese-blocco { height: 20px; border-radius: 4px; font-size: 10px; font-weight: 600; color: rgba(0, 0, 0, .78); }
.mese-grigio { background: var(--riempimento); color: var(--testo3); }
.mese-verde { background: #34C759; } .mese-giallo { background: #FFCC00; } .mese-rosso { background: #FF8A80; }
.mese-verde2 { background: #34C759; color: #03210D; } .mese-verde1 { background: #A6E7B6; color: #05300F; }
.mese-giallo1 { background: #FFE98A; color: #3D2F00; } .mese-giallo2 { background: #FFCC00; color: #3D2F00; }
.mese-rosso1 { background: #FFC2BC; color: #4A0A0D; } .mese-rosso2 { background: #FF6B66; color: #2E0305; }
.mese-ev1 { background: #BFF0EA; color: #063E37; } .mese-ev2 { background: #6FE0D2; color: #063E37; }
.mese-ev3 { background: #00C8B3; color: #02302A; } .mese-ev4 { background: #008575; color: #FFFFFF; box-shadow: none; }
.mese-blocco.oggi { height: 28px; border-radius: 5px; box-shadow: 0 0 0 1.5px var(--pannello), 0 0 0 3.5px var(--testo); }
.mese-blocco.oggi::after { border-bottom-color: var(--testo); }

/* ---------- menu, popover, avvisi: vetro spesso ---------- */
.menu-altro .menu, .tendina-scelte, .avvisi-pannello, .giro-nuvola {
  background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro);
  border: 0; box-shadow: var(--ombra-popover), inset 0 0 0 .5px var(--vetro-filo), 0 0 0 .5px var(--bordo-vetro);
}
.menu-altro .menu, .tendina-scelte { padding: 5px; border-radius: 12px; }
.menu-altro .menu a, .menu-altro .menu button, .tendina-scelte button, .scelta-mercati .menu label, .ott-gruppo .menu button {
  padding: 4px 9px; border-radius: 7px; color: var(--testo); font: 400 13px/18px var(--font-corpo); height: auto; box-shadow: none;
}
.menu-altro .menu a:hover, .menu-altro .menu button:hover, .tendina-scelte button:hover, .tendina-scelte button.evid, .scelta-mercati .menu label:hover, .ott-gruppo .menu button:hover {
  background: var(--accento-pieno); color: #FFFFFF; text-decoration: none;
}
.menu-altro .menu button:hover .conta { color: #FFFFFF; }
.menu-altro .menu .rosso { color: var(--rosso); }
.menu-altro .menu .rosso:hover { background: var(--rosso-pieno); color: #FFFFFF; }
.tendina-scelte button.scelta { color: var(--accento); }
.scelta-mercati .menu label.tutti { border-bottom: .5px solid var(--linea-ff); border-radius: 7px; font-weight: 500; }

.avvisi-pannello { top: calc(100% + 8px); border-radius: 16px; padding: 12px 14px 6px; animation-duration: .14s; }
.avvisi-testa { border-bottom: .5px solid var(--linea-ff); }
.avvisi-testa b { font: 600 15px var(--font-corpo); }
.avvisi-campana li { border-top: .5px solid var(--linea); padding: 8px 0; }
.avvisi-campana li[class*="imp-"] { border-left-width: 3px; padding-left: 9px; margin-left: 0; border-radius: 3px; }
.avvisi-campana li.imp-rosso { background: rgba(var(--rosso-rgb), .1); border-left-color: var(--rosso-pieno); }
.avvisi-campana li.imp-arancio { border-left-color: var(--arancione-pieno); }
.avvisi-campana li.imp-giallo { border-left-color: var(--giallo-pieno); }
.avvisi-campana li.imp-verde { border-left-color: var(--verde-pieno); }
.avvisi-campana li.imp-rosso i.punto { background: var(--rosso-pieno); }
.avvisi-campana li.imp-arancio i.punto, .avvisi-campana li.avviso-copie i.punto, .avvisi-campana li.avviso-negative i.punto { background: var(--arancione-pieno); }
.avvisi-campana li.imp-giallo i.punto { background: var(--giallo-pieno); }
.avvisi-campana li.imp-verde i.punto { background: var(--verde-pieno); }
.avvisi-campana .testo { font-size: 12px; }
.avvisi-sezione + .avvisi-sezione { border-top: .5px solid var(--linea-ff); }
.avvisi-sezione h4 { font: 600 12px var(--font-corpo); }
.avvisi-nota { border-top: .5px solid var(--linea); font-size: 11px; }
.voce-budget .budget-modifica input { height: 24px; }

.testata-giro { width: 28px; height: 28px; color: var(--testo); font: 500 13px var(--font-corpo); }
.testata-giro:hover { color: var(--accento); border: 0; }
header.testata .testata-giro, header.testata .testata-avvisi { margin-top: 0; }
.testata-campana .ic { width: 15px; height: 15px; }
.testata-campana.con-avvisi { color: var(--arancione); border: 0; }
.testata-campana .conta { background: var(--arancione-pieno); color: #000000; top: -5px; right: -6px; min-width: 16px; height: 16px; font: 600 10px/16px var(--font-corpo); box-shadow: 0 0 0 1.5px var(--fondo); animation-duration: .15s; }
.testata-campana .conta.urgente { background: var(--rosso-pieno); color: #FFFFFF; }
.testata-campana[data-livello="rosso"] { color: var(--rosso); border: 0; background-color: rgba(var(--rosso-rgb), .14); }
.testata-campana[data-livello="arancio"] { color: var(--arancione); border: 0; }
.testata-campana[data-livello="giallo"] { color: var(--giallo); border: 0; }
.testata-campana[data-livello="verde"] { color: var(--verde); border: 0; }
.testata-campana[data-livello="giallo"] .conta { background: var(--giallo-pieno); color: #000000; }
.testata-campana[data-livello="verde"] .conta { background: var(--verde-scuro); color: #FFFFFF; }

.toast { max-width: 380px; padding: 10px 14px; background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro);
  border: 0; border-radius: 16px; box-shadow: var(--ombra-popover), 0 0 0 .5px var(--bordo-vetro); font-size: 13px; }
.toast .toast-eti { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--testo); text-transform: lowercase; }
.toast .toast-eti::first-letter { text-transform: uppercase; }
.toast.errore .toast-eti { color: var(--rosso); }
.toast .toast-azione { border: 0; border-radius: 7px; background: var(--riempimento); color: var(--accento); font: 500 12px var(--font-corpo); }
.toast .toast-azione:hover { background: var(--accento-pieno); color: #FFFFFF; }
.toast-tempo { background: var(--accento-pieno); }
.giro-luce { border-color: var(--accento-pieno); border-radius: 12px; }
.giro-nuvola { border-radius: 16px; }
.giro-nuvola h4 { font: 600 15px var(--font-corpo); }
.giro-nuvola p { font-size: 13px; }
.giro-conta { font-size: 11px; letter-spacing: 0; color: var(--testo3); }

#schermo-login { background: var(--fondo); }
#schermo-login form { width: 340px; padding: 28px 28px 22px; border-radius: 18px; box-shadow: var(--ombra-popover); gap: 12px; }
#schermo-login form > h3:first-child { font: 700 22px/26px var(--font-corpo); text-align: center; margin-bottom: 6px; }
#schermo-login input, #schermo-login .bottone { height: 32px; }

/* ---------- Dashboard ADS: import dei report ---------- */
.kdp-zona { min-height: 104px; border: 1px dashed var(--linea-ff); border-radius: 12px; background: var(--riempimento); font-size: 12px; }
.kdp-zona .ic { color: var(--accento); width: 22px; height: 22px; }
.kdp-zona b { font: 500 13px var(--font-corpo); }
.kdp-zona:hover, .kdp-zona:focus-visible, .kdp-zona.sopra { border-color: var(--accento-pieno); background: rgba(var(--accento-rgb), .08); }
.kdp-voce { background: var(--pannello2); border: 0; border-radius: 8px; font-size: 12px; }
.kdp-voce.stato-errore { border: 0; box-shadow: inset 0 0 0 1px rgba(var(--rosso-rgb), .55); }
.kdp-pct { font: 500 12px var(--font-corpo); color: var(--testo2); }
.kdp-barra, .binario{ background: var(--riempimento); border: 0; }
.kdp-barra i{ background: var(--accento-pieno); }
.lancio-zona.pieno { border-color: rgba(var(--verde-rgb), .7); }
.rotella { width: 20px; height: 20px; border-width: 2px; border-color: var(--linea-f); border-top-color: var(--testo2); }

/* ---------- Amazon ADS ---------- */
.ott-stato { font: 600 15px var(--font-corpo); }
.ott-punto.ok { background: var(--verde-pieno); box-shadow: none; }
.ott-punto.errore { background: var(--rosso-pieno); box-shadow: none; }
.ott-punto.attesa { background: var(--giallo-pieno); }
.ott-errore { border: 0; border-radius: 8px; background: rgba(var(--rosso-rgb), .12); font-size: 12px; }
.ott-dett { font-size: 12px; }
.ott-tessere .e { font-size: 11px; }
.ott-tessere .v { font: 600 15px/20px var(--font-corpo); }
.ott-scheda { background: var(--pannello); border: 0; border-radius: var(--raggio-carta); box-shadow: var(--ombra-carta); padding: 12px 14px; gap: 10px; }
.pannello .ott-scheda { background: var(--pannello2); box-shadow: none; }
.ott-scheda h4 { font: 600 13px var(--font-corpo); border-bottom: 0; padding: 0; }
.ott-form h4 { font: 600 12px var(--font-corpo); color: var(--testo2); border-top: .5px solid var(--linea); }
.ott-info { border: 0; background: var(--riempimento); color: var(--testo3); font: 500 10px var(--font-corpo); }
.ott-scheda h4:hover .ott-info { border: 0; color: var(--accento); }
.ott-campi { gap: 8px 10px; }
.ott-piede { border-top: .5px solid var(--linea-ff); }
.ott-fasi .fase { font-size: 11px; }
.ott-fasi .fase i { height: 4px; background: var(--riempimento); }
.ott-fasi .fase.fatta i { background: var(--verde-pieno); }
.ott-fasi .fase.ora { color: var(--accento); }
.ott-fasi .fase.ora i { background: var(--accento-pieno); animation: none; }
.cal-giorno { border: 0; border-radius: 7px; background: var(--riempimento); }
.cal-giorno .cal-gs { font-size: 10px; }
.cal-giorno b { font: 500 12px var(--font-corpo); color: var(--testo); }
.cal-giorno.oggi { border: 0; box-shadow: inset 0 0 0 1.5px var(--accento-pieno); }
.cal-giorno.aumento, .cal-giorno.settimanale { background: rgba(var(--accento-rgb), .12); }
.s-aum { background: var(--arancione-pieno); } .s-set { background: var(--ciano-pieno); }
.ott-cal-leggenda { font-size: 11px; }
.ott-conto .fondo { stroke: var(--riempimento-su); }
.ott-conto .arco { stroke: var(--accento-pieno); filter: none; }
.ott-conto b { color: var(--testo); }
.ott-conto { font-size: 11px; }
.ott-negative-conta { background: var(--arancione-pieno); color: #000000; font-size: 11px; font-weight: 600; }
.ott-report h4 { color: var(--testo); font: 600 13px var(--font-corpo); }
#ott-tab-proposte tr.az-budget td:nth-child(3), .ott-importanti li.az-budget .az { color: var(--arancione); }
table.dati thead tr.bande th.banda-7, table.dati thead th.b7 { color: var(--ciano); }
.lancio-libro { border: 0; border-radius: 10px; background: var(--riempimento); }
.lancio-camp, .lancio-saltate { border-top: .5px solid var(--linea); }

/* ---------- pagina Negative ---------- */
.neg-col { border: 0; border-radius: 12px; background: var(--pannello2); overflow: hidden; }
.neg-col-aggiungi, .neg-col-togli { border-top: 0; }
.neg-col-aggiungi .neg-col-testa b { color: var(--rosso); } .neg-col-togli .neg-col-testa b { color: var(--verde); }
.neg-col-testa { border-bottom: .5px solid var(--linea); padding: 8px 12px; }
.neg-col-conta { font: 500 12px var(--font-corpo); }
.neg-col table.dati th { background: var(--pannello2); }
.neg-libro-titolo { font: 600 15px/20px var(--font-corpo); }
.neg-tasto { border: 0; background: var(--riempimento); }
.neg-tasto:hover { background: var(--riempimento-su); }
.neg-tasto[aria-expanded="true"] { border: 0; background: var(--accento-pieno); color: #FFFFFF; }
table.neg-tabella tr.neg-dettaglio td, table.neg-tabella tr.neg-dettaglio td:first-child { background: var(--riempimento); font-size: 12px; }
.neg-azioni { background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); border: 0; border-radius: 16px; box-shadow: var(--ombra-vetro), 0 0 0 .5px var(--bordo-vetro); padding: 8px 12px; bottom: 12px; }

/* ---------- scheda del libro ---------- */
.sl-cover { border: 0; border-radius: 6px; background: var(--riempimento); box-shadow: 0 2px 12px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .08); }
.sl-titolo { font: 700 22px/26px var(--font-corpo); color: var(--testo); }
.sl-sotto { font-size: 13px; }
.sl-numeri b { font: 600 17px var(--font-corpo); }
.sl-numeri .eti { font-size: 11px; }
.sl-sottotitolo { font: 600 13px var(--font-corpo); }
.lib-storico { background: rgba(var(--riempi-rgb), .03); border-bottom: .5px solid var(--linea); animation-duration: .2s; }
.lib-storico-unico{ border: 0; border-radius: 10px; background: var(--pannello); box-shadow: var(--ombra-carta); }
.lib-storico-sintesi b{ font: 500 15px var(--font-corpo); }
.lib-storico-sintesi .seg.oro { background: var(--arancione-pieno); } .lib-storico-sintesi .seg.blu { background: var(--accento-pieno); }

/* ---------- news e guida ---------- */
.news-voce h4 { font: 600 15px/20px var(--font-corpo); color: var(--testo); }
.news-voce { border-top: .5px solid var(--linea); }
.news-voce.nuova { box-shadow: inset 3px 0 0 var(--accento-pieno); }
.news-testo { border-left: 2px solid var(--linea-ff); }
.guida h2 { font-size: 17px; font-weight: 600; }
.guida p, .guida li { font-size: 13px; line-height: 1.5; color: var(--testo2); }
.guida dl.glossario dt, .guida dl.glossario dd { font-size: 13px; }
.scheda{ background: var(--pannello2); border: 0; border-radius: 12px; }
.etichetta-record { background: var(--oro-traccia); color: #2B1F00; font: 600 10px/16px var(--font-corpo); letter-spacing: 0; text-transform: none; }
.chiudi { border-radius: 50%; width: 22px; height: 22px; font-size: 15px; }
.chiudi:hover { background: var(--riempimento); }

/* ---------- movimento: breve, senza bagliori (HIG Motion) ---------- */
.tessere > .tessera, .ott-tessere-larghe > div, .podio > .podio-voce { animation-duration: .2s; }
:is(.tessere > .tessera, .ott-tessere-larghe > div, .podio > .podio-voce):nth-child(n+2) { animation-delay: 0s; }
img.inclinata { box-shadow: 0 6px 16px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); }
/* la campanella lampeggia (tua richiesta del 21 ott) ma piano e senza oscillare: le HIG sconsigliano i lampeggi veloci */
.testata-campana.lampeggia { animation: campanella-respira 1.8s ease-in-out infinite; }
.testata-campana.lampeggia .ic { animation: none; }
@keyframes campanella-respira { 0%, 100% { background-color: rgba(var(--rosso-rgb), .14); } 50% { background-color: rgba(var(--rosso-rgb), .42); } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes cambiato-meglio { 0%, 30% { color: var(--verde); } }
  @keyframes cambiato-peggio { 0%, 30% { color: var(--rosso); } }
  svg.traccia{ animation-duration: .45s; }
  :where(.vista.attiva) > * { animation-duration: .18s; }
  :where(.vista.attiva) > :nth-child(n+2) { animation-delay: 0s; }
  @keyframes punto-vivo { from { transform: scale(1); opacity: .5; } to { transform: scale(2.8); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .testata-campana.lampeggia { animation: none; background-color: rgba(var(--rosso-rgb), .3); } }

/* ---------- finestre strette: la barra laterale si riduce alle icone (HIG Sidebars) ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .laterale { width: 56px; }
  .marchio, .cartiglio, .nav-sezione { display: none; }
  .laterale nav { padding: 10px 8px; gap: 4px; }
  .laterale nav button[data-vista] { justify-content: center; height: 36px; padding: 0; position: relative; }
  .laterale nav button[data-vista] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .laterale nav button[data-vista] .ic { width: 18px; height: 18px; }
  .nav-conta { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; line-height: 15px; font-size: 10px; padding: 0 3px; margin: 0; }
}

/* ---------- telefono: barra in basso come le tab bar di iOS, corpo piu' grande (HIG: iOS 17, minimo 11) ---------- */
@media (max-width: 900px) {
  .app { display: block; }
  .laterale {
    position: fixed; top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; height: auto; margin: 0; padding: 4px;
    flex-direction: row; align-items: stretch; gap: 0; border: 0; border-radius: 26px; overflow-x: auto; overflow-y: hidden; z-index: 40;
  }
  .marchio, .cartiglio, .nav-sezione { display: none; }
  .laterale nav { flex-direction: row; flex: 1 0 auto; gap: 0; padding: 0; overflow: visible; justify-content: space-between; }
  .laterale nav button[data-vista] { flex-direction: column; justify-content: center; gap: 2px; width: auto; min-width: 68px; height: 50px; padding: 0 6px; border: 0; border-radius: 22px; font-size: 10px; line-height: 12px; white-space: nowrap; position: relative; }
  .laterale nav button[data-vista] .ic { width: 22px; height: 22px; color: var(--testo2); }
  .laterale nav button[data-vista].attiva { background: rgba(var(--accento-rgb), .16); color: var(--accento); border: 0; }
  .laterale nav button[data-vista].attiva .ic { color: var(--accento); }
  .nav-conta { position: absolute; top: 2px; right: 12px; margin: 0; min-width: 15px; height: 15px; line-height: 15px; font-size: 10px; padding: 0 3px; }
  body { font-size: 15px; }
  header.testata { position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; }
  header.testata::before { display: none; }
  header.testata h1 { font-size: 28px; line-height: 34px; flex: 1 1 100%; padding-right: 76px; }
  header.testata .testata-giro { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; margin: 0; }
  header.testata .testata-avvisi { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 52px; margin: 0; }
  .avvisi-pannello { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; max-height: 72vh; }
  .quota { flex-wrap: wrap; flex-basis: 100%; }
  header.testata .testata-ponte { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  header.testata .testata-ponte .gruppo-campi { min-width: 0; max-width: 100%; }
  header.testata .testata-ponte #com-account, header.testata .testata-ponte #com-mese { min-width: 0; max-width: 100%; }
  header.testata .testata-ponte .gruppo-campi:has(#com-account) { flex: 1 1 100%; }
  header.testata .testata-ponte #com-account { width: 100%; }
  header.testata .testata-ponte .riga:has(#com-mese) { flex-wrap: nowrap; }
  header.testata .testata-quote { align-self: center; }
  main { padding: 6px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .ponte-valore { font-size: 40px; line-height: 46px; }
  .ponte-netto-riga { grid-template-columns: minmax(0, 1fr); }
  .ponte-netto-mezzo { text-align: left; }
  .ponte-prev { padding: 10px 0 0; border-left: 0; border-top: .5px solid var(--linea-ff); }
  .tessere, .strip { gap: 8px; }
  #toast-zona { left: 10px; right: 10px; top: 10px; }
  .toast { max-width: none; }
}
/* col tocco: bersagli da 44 pt (HIG Accessibility) e campi da 16 px, cosi' iOS non ingrandisce la pagina */
@media (pointer: coarse) {
  input, select, .bottone, .freccia, .interruttore, header.testata .testata-ponte select, header.testata .testata-ponte input, header.testata .testata-ponte .freccia, details.dati-kdp > summary, details.aggiungi-libro > summary, details.avanzate > summary, .campo-tendina { height: 44px; font-size: 16px; }
  input[type=checkbox], input[type=radio] { height: 22px; width: 22px; }
  .bottone.piccolo { height: 36px; font-size: 13px; }
  .segmentato button, .earners-toggle button, .ott-gruppo > summary { height: 36px; font-size: 13px; padding: 0 13px; }
  .testata-giro, .freccia { width: 44px; height: 44px; }
  .chiudi { width: 36px; height: 36px; }
  .menu-altro .menu a, .menu-altro .menu button, .tendina-scelte button, .scelta-mercati .menu label { padding: 10px; font-size: 15px; }
  header.testata .testata-avvisi { right: 68px; }
}

/* ================================================================
   MiniSurge: marchio, molle, selezione che scivola, telefono
   ================================================================ */
:root {
  --molla: cubic-bezier(.22, 1, .36, 1); --molla-viva: cubic-bezier(.3, 1.3, .5, 1);
  --vetro-luce: rgba(255, 255, 255, .65);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* molle come quelle di SwiftUI: «smooth» e «snappy», con un rimbalzo appena percepibile */
    --molla: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --molla-viva: linear(0, .008 1.1%, .031 2.2%, .129 4.8%, .257 7.2%, .671 14.2%, .789 16.8%, .88 19.4%, .949 22%, 1.002 24.7%, 1.04 27.4%, 1.065 30.2%, 1.078 33.1%, 1.081 36.3%, 1.063 43%, 1.027 52%, 1.008 60%, .999 72%, 1);
  }
}
:root[data-aspetto="scuro"] { --vetro-luce: rgba(255, 255, 255, .14); }

/* il marchio */
.marchio { flex-direction: row; align-items: center; gap: 9px; padding: 14px 16px 6px; }
.marchio img { width: 28px; height: 28px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.marchio .nome { font: 600 15px/20px var(--font-corpo); }
.login-icona { display: block; width: 64px; height: 64px; margin: 2px auto 10px; filter: drop-shadow(0 4px 12px rgba(10, 79, 219, .35)); }
#schermo-login form > h3 { font: 700 22px/26px var(--font-corpo); text-align: center; margin: 0 0 10px; color: var(--testo); }
.laterale, .laterale.laterale { box-shadow: var(--ombra-vetro), inset 0 .5px 0 var(--vetro-luce), inset 0 0 0 .5px var(--vetro-filo), 0 0 0 .5px var(--bordo-vetro); }

/* il segnaposto delle copertine e le icone senza emoji */
.cover.vuota { color: var(--testo3); }
.cover.vuota .ic, .cover-emoji .ic { width: 24px; height: 24px; }
.cover-emoji { color: var(--testo3); }
.legenda .q-linea { background: var(--accento-pieno); }
canvas { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#com-tooltip, #cru-tooltip, .ott-ris-grafico .tooltip-grafico { max-width: min(340px, 100%); box-shadow: var(--ombra-popover), inset 0 .5px 0 var(--vetro-luce), 0 0 0 .5px var(--bordo-vetro); }

/* la selezione e' un pezzo che scivola: lo sfondo sta nel ::before, che il movimento sposta dal vecchio tasto al nuovo */
.laterale nav button[data-vista], .segmentato > button, .earners-toggle > button, .ott-gruppo > summary { position: relative; isolation: isolate; }
.laterale nav button[data-vista].attiva { background: transparent; }
.laterale nav button[data-vista].attiva:hover { background: transparent; }
.laterale nav button[data-vista].attiva::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(var(--accento-rgb), .16); }
.segmentato > button.attivo, .earners-toggle > button.attivo, .ott-gruppo.attivo > summary { background: transparent; box-shadow: none; }
.segmentato > button.attivo::before, .earners-toggle > button.attivo::before, .ott-gruppo.attivo > summary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pollice); box-shadow: var(--ombra-comando); }

/* premere: si stringe subito, torna con la molla */
.bottone, .chip, .freccia, .testata-giro, .interruttore, .segmentato > button, .earners-toggle > button, .laterale nav button, .podio-voce{
  transition: transform .4s var(--molla-viva), background-color .15s, color .15s, filter .15s, box-shadow .15s;
}
:is(.bottone, .chip, .freccia, .testata-giro, .interruttore, .ponte-ott-conto):active:not(:disabled),
:is(.segmentato > button, .earners-toggle > button, .laterale nav button):active { transform: scale(.96); transition-duration: .08s; }

/* levette e triangoli di apertura */
.interruttore i, .selettore-stato i { transition: background-color .2s; }
.interruttore i::after, .selettore-stato i::after { transition: transform .38s var(--molla-viva); }
details.dati-kdp > summary::before, details.aggiungi-libro > summary::before, details.avanzate > summary::before,
details[open].dati-kdp > summary::before, details[open].aggiungi-libro > summary::before, details[open].avanzate > summary::before {
  content: "▸"; display: inline-block; transition: transform .32s var(--molla);
}
details[open].dati-kdp > summary::before, details[open].aggiungi-libro > summary::before, details[open].avanzate > summary::before { transform: rotate(90deg); }

/* menu e popover nascono dal punto da cui si aprono; i messaggi entrano con la molla */
@keyframes pop-entra { from { opacity: 0; transform: scale(.9) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes toast-molla { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toast-via { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
.menu-altro .menu, .scelta-mercati .menu { transform-origin: top right; animation: pop-entra .3s var(--molla); }
.ott-gruppo .menu { transform-origin: top left; animation: pop-entra .3s var(--molla); }
.tendina-scelte { transform-origin: top left; animation: pop-entra .26s var(--molla); }
.avvisi-pannello { transform-origin: top right; animation: pop-entra .34s var(--molla); }
.toast { animation: toast-molla .46s var(--molla-viva); }
.toast.esce { animation: toast-via .22s ease-in forwards; }
.vista.attiva { animation-timing-function: var(--molla); animation-duration: .36s; }

/* la barra laterale ridotta a icone tiene «Altro»: dati di stato ed Esci restano raggiungibili */
.tab-altro { display: none; }
@media (max-width: 1180px) {
  .laterale nav .tab-altro { display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--testo); cursor: pointer; height: 36px; border-radius: 8px; position: relative; font: 400 10px/12px var(--font-corpo); }
  .laterale nav .tab-altro .ic { width: 18px; height: 18px; color: var(--accento); }
  .laterale nav .tab-altro span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* il foglio che sale dal basso: vetro, maniglia, elenco raggruppato come in iOS */
@keyframes foglio-su { from { transform: translateY(100%); } to { transform: none; } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
.foglio-velo { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .32); animation: velo-entra .25s ease-out; }
.foglio {
  position: fixed; z-index: 91; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto; max-height: 82vh; overflow-y: auto; padding: 6px 14px 14px;
  background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); border-radius: 28px;
  box-shadow: var(--ombra-popover), inset 0 .5px 0 var(--vetro-luce), 0 0 0 .5px var(--bordo-vetro); animation: foglio-su .5s var(--molla);
  touch-action: pan-y;
}
.foglio.esce { transform: translateY(calc(100% + 24px)); transition: transform .24s ease-in; animation: none; }
.foglio-velo.esce { opacity: 0; transition: opacity .24s; animation: none; }
.foglio-maniglia { width: 100%; padding: 6px 0 10px; cursor: grab; touch-action: none; }
.foglio-maniglia::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: rgba(var(--riempi-rgb), .3); }
.foglio-lista { background: var(--pannello); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.foglio-lista > * { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-bottom: .5px solid var(--linea); background: transparent; color: var(--testo); font: 400 15px/20px var(--font-corpo); text-align: left; cursor: pointer; }
.foglio-lista > :last-child { border-bottom: 0; }
.foglio-lista > button:active { background: var(--riempimento); }
.foglio-lista .ic { width: 20px; height: 20px; color: var(--accento); flex: none; }
.foglio-lista .freccetta { margin-left: auto; color: var(--testo3); }
.foglio-lista .freccetta .ic { width: 12px; height: 12px; color: inherit; }
.foglio-lista .conta-foglio { margin-left: auto; color: var(--testo3); font-size: 13px; }
.foglio-lista .conta-foglio + .freccetta { margin-left: 0; }
.foglio-info > div { cursor: default; min-height: 36px; font-size: 13px; justify-content: space-between; color: var(--testo2); }
.foglio-info > div span:last-child { color: var(--testo); text-align: right; }
.foglio-esci { display: block; width: 100%; min-height: 44px; border: 0; border-radius: 14px; background: var(--pannello); color: var(--rosso); font: 500 15px var(--font-corpo); cursor: pointer; }
.foglio-esci:active { background: var(--riempimento); }

/* ---------- telefono ---------- */
@media (max-width: 900px) {
  /* quattro tab e «Altro», come chiede iOS: gli altri tasti stanno nel foglio */
  .laterale { overflow: visible; padding: 4px; }
  .laterale nav { flex: 1 1 auto; min-width: 0; justify-content: stretch; }
  .laterale nav button[data-vista="cecchino"], .laterale nav button[data-vista="salvati"], .laterale nav button[data-vista="news"], .laterale nav button[data-vista="impostazioni"], .laterale nav button[data-vista="guida"] { display: none; }
  .laterale nav button[data-vista], .laterale nav .tab-altro { flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; height: 50px; padding: 0 2px; border-radius: 22px; font-size: 10px; line-height: 12px; }
  .laterale nav button[data-vista] span:not(.nav-conta), .laterale nav .tab-altro span { position: static; width: auto; height: auto; clip-path: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .laterale nav .tab-altro .ic { width: 22px; height: 22px; color: var(--testo2); }
  .laterale nav .tab-altro:active { transform: scale(.96); }
  .laterale nav:has(button[data-vista="cecchino"].attiva, button[data-vista="salvati"].attiva, button[data-vista="news"].attiva, button[data-vista="impostazioni"].attiva, button[data-vista="guida"].attiva) .tab-altro { background: rgba(var(--accento-rgb), .16); color: var(--accento); }
  .laterale nav:has(button[data-vista="cecchino"].attiva, button[data-vista="salvati"].attiva, button[data-vista="news"].attiva, button[data-vista="impostazioni"].attiva, button[data-vista="guida"].attiva) .tab-altro .ic { color: var(--accento); }

  /* i controlli segmentati lunghi scorrono di lato, senza andare a capo */
  .segmentato:not(.ott-schede-nav):not(.sl-periodi):not(:has(.ott-gruppo)) { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmentato:not(.ott-schede-nav):not(.sl-periodi):not(:has(.ott-gruppo))::-webkit-scrollbar { display: none; }
  .segmentato > button { flex: none; }

  .legenda { flex-wrap: wrap; gap: 4px 12px; }
  .legenda span { white-space: nowrap; }
  .pannello { padding: 12px; border-radius: 14px; }
  .tessera .v, .ponte-tessere .tessera .v { font-size: 20px; line-height: 24px; }
  .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
  .strip > div { border-right: 0; border-bottom: .5px solid var(--linea); }

  /* tabelle larghe: la prima colonna resta ferma, si scorre sui numeri */
  table.dati th:first-child, table.dati td:first-child { position: sticky; left: 0; z-index: 2; background: var(--pannello); box-shadow: .5px 0 0 var(--linea-ff); }
  table.dati tbody tr:nth-child(even) > td:first-child { background: color-mix(in srgb, var(--pannello) 96%, rgb(var(--riempi-rgb))); }
  .pannello .pannello table.dati th:first-child, .pannello .pannello table.dati td:first-child { background: var(--pannello2); }
}
/* Libreria a schede: una tabella da 13 colonne non si legge su un telefono */
@media (max-width: 720px) {
  .elenco-libri { background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
  .riga-libro.testa { display: none; }
  .intestazione-mercato { background: transparent; border: 0; padding: 12px 4px 8px; }
  .riga-libro:not(.testa), .riga-libro.senza-ads {
    grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 6px; min-width: 0; min-height: 0; padding: 12px; margin-bottom: 10px;
    background: var(--pannello); border: 0; border-radius: var(--raggio-carta); box-shadow: var(--ombra-carta); align-items: center;
  }
  .riga-libro.senza-ads { box-shadow: var(--ombra-carta), inset 3px 0 0 var(--giallo-pieno); }
  .riga-libro:not(.testa):hover { background: var(--pannello); }
  .riga-libro > .cover-link { grid-column: 1 / span 3; grid-row: 1 / span 2; align-self: start; }
  .riga-libro > .info { grid-column: 4 / -1; grid-row: 1; align-self: start; }
  .riga-libro .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 20px; }
  .riga-libro .t-riga { align-items: flex-start; }
  .riga-libro .meta { font-size: 12px; flex-wrap: wrap; }
  .riga-libro > .bsr { grid-column: 4 / span 4; grid-row: 2; text-align: left; font-size: 17px; }
  .riga-libro > .bsr::before { content: "BSR"; display: block; font: 400 11px/14px var(--font-corpo); color: var(--testo3); }
  .riga-libro > .bsr-30 { grid-column: 8 / -1; grid-row: 2; padding: 0; justify-content: flex-end; }
  .riga-libro > .dato { grid-row: 3; text-align: left; white-space: normal; padding-top: 8px; border-top: .5px solid var(--linea); font-weight: 500; }
  .riga-libro > .dato::before { display: block; font: 400 11px/14px var(--font-corpo); color: var(--testo3); margin-bottom: 1px; }
  .riga-libro > .dato:nth-child(6) { grid-column: 1 / span 4; } .riga-libro > .dato:nth-child(6)::before { content: "Royalty a copia"; }
  .riga-libro > .dato:nth-child(7) { grid-column: 5 / span 4; } .riga-libro > .dato:nth-child(7)::before { content: "Recensioni"; }
  .riga-libro > .dato:nth-child(8) { grid-column: 9 / span 4; } .riga-libro > .dato:nth-child(8)::before { content: "Valutazione"; }
  .riga-libro > .spunta { grid-row: 4; justify-content: flex-start; align-items: center; gap: 6px; font-size: 12px; color: var(--testo2); }
  .riga-libro > .spunta:nth-child(9) { grid-column: 1 / span 4; } .riga-libro > .spunta:nth-child(9)::after { content: "ED Reviews"; }
  .riga-libro > .spunta:nth-child(10) { grid-column: 5 / span 4; } .riga-libro > .spunta:nth-child(10)::after { content: "A+"; }
  .riga-libro > .spunta:nth-child(11) { grid-column: 9 / span 4; } .riga-libro > .spunta:nth-child(11)::after { content: "Video"; }
  .riga-libro > .stag { grid-column: 1 / -1; grid-row: 5; white-space: normal; }
  .riga-libro > .asin { grid-column: 1 / span 6; grid-row: 6; }
  .riga-libro > .azioni { grid-column: 7 / -1; grid-row: 6; }
  .lib-storico { border-radius: var(--raggio-carta); margin-bottom: 10px; }
  .mese-blocco { font-size: 10px; }
}
/* ================================================================
   Secondo passaggio: via tutto cio' che sa di sito web e non di app Apple
   ================================================================ */
:root { --raggio-carta: 16px; --filo: .5px solid var(--linea); --chevron-pop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M1 5l3-3.2L7 5M1 8l3 3.2L7 8' fill='none' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* comportamento da app: freccia del mouse sui comandi (la manina e' dei link), etichette non selezionabili, cifre incolonnate */
button, summary, select, label, .chip, .segmentato button, .interruttore, .selettore-stato, th[data-campo], .riga-libro.testa > div.ordinabile, input[type=checkbox], input[type=radio] { cursor: default; }
.laterale, header.testata h1, .nav-sezione, button, summary, th, .tessera .e, .eti, label.campo { -webkit-user-select: none; user-select: none; }
label.campo input, label.campo textarea { -webkit-user-select: text; user-select: text; }
td, .tessera .v, .ponte-valore, .ponte-roi, .prev-val, .bsr, .dato, .strip .v, .tab-val, .cartiglio span { font-variant-numeric: tabular-nums; }
.riga-libro .asin { font: 400 12px var(--font-corpo); font-variant-numeric: tabular-nums; }

/* forma unica dei comandi: capsule, come in macOS 26 e iOS 26; raggi concentrici */
.bottone, .bottone.piccolo, select, .chip, .tag, .badge-mercato, .segmentato, .earners-toggle, .segmentato button, .earners-toggle button, .ott-gruppo > summary, details.dati-kdp > summary, details.aggiungi-libro > summary, details.avanzate > summary, .campo-tendina, input[type=search] { border-radius: 999px; }
.bottone { padding: 0 14px; font-weight: 400; }
.bottone:not(.secondario):not(.rosso):not(.testo) { font-weight: 500; }
.bottone .ic { width: 13px; height: 13px; }
.bottone.secondario, .bottone.rosso, details.dati-kdp > summary, details.aggiungi-libro > summary, details.avanzate > summary { background: var(--riempimento); box-shadow: none; }
.bottone.secondario:hover, .bottone.rosso:hover, details.dati-kdp > summary:hover, details.aggiungi-libro > summary:hover, details.avanzate > summary:hover { background: var(--riempimento-su); box-shadow: none; filter: none; }
select, .campo-tendina { background-color: var(--riempimento); box-shadow: none; }
select:hover, .campo-tendina:hover { background-color: var(--riempimento-su); }
select option { background: var(--pannello); color: var(--testo); }
.campo-tendina::after { content: ""; top: 50%; right: 9px; width: 8px; height: 13px; margin-top: -6.5px; background: var(--chevron-pop) center no-repeat; }
.freccia { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--riempimento); box-shadow: none; }
.freccia .ic { width: 12px; height: 12px; }
.testata-giro .ic { width: 15px; height: 15px; }
.chiudi { display: inline-flex; align-items: center; justify-content: center; } .chiudi .ic { width: 10px; height: 10px; }
.neg-tasto { display: inline-flex; align-items: center; justify-content: center; } .neg-tasto .ic { width: 15px; height: 15px; }
.bottone .ic:last-child:not(:first-child) { margin: 0 0 0 3px; width: 10px; height: 10px; }
.menu-altro > summary .ic { width: 9px; height: 9px; }
#cru-tab-account .esp .ic { width: 9px; height: 9px; }
table.dati th .freccia, table.tab-stats th .freccia, .riga-libro.testa .freccia { display: inline-flex; width: auto; height: auto; background: none; border-radius: 0; margin-left: 3px; vertical-align: middle; }
table.dati th .freccia .ic, table.tab-stats th .freccia .ic, .riga-libro.testa .freccia .ic { width: 8px; height: 8px; }
.sl-barra .bottone.testo .ic { width: 11px; height: 11px; margin-right: 1px; }
/* in barra strumenti restano di vetro */
header.testata .testata-ponte select, header.testata .testata-ponte .freccia { background-color: var(--vetro-spesso); box-shadow: var(--ombra-comando); }
.testata-giro { display: inline-flex; align-items: center; justify-content: center; }

/* triangolo di apertura vero (disegnato, non un carattere) */
details.dati-kdp > summary::before, details.aggiungi-libro > summary::before, details.avanzate > summary::before, .ott-diario > summary::before, details.copie-auto > summary::before,
details[open].dati-kdp > summary::before, details[open].aggiungi-libro > summary::before, details[open].avanzate > summary::before, details[open].ott-diario > summary::before, details[open].copie-auto > summary::before {
  content: ""; display: inline-block; flex: none; width: 9px; height: 9px; background: var(--testo3); margin-right: 4px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .32s var(--molla);
}
details[open].dati-kdp > summary::before, details[open].aggiungi-libro > summary::before, details[open].avanzate > summary::before, details[open].ott-diario > summary::before, details[open].copie-auto > summary::before { transform: rotate(90deg); }

/* caselle di spunta di sistema, uguali su ogni browser */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0; width: 14px; height: 14px; border: 0; border-radius: 4px; padding: 0;
  background: var(--campo); box-shadow: inset 0 0 0 .5px var(--linea-ff), 0 .5px 1px rgba(0, 0, 0, .08); transition: background-color .12s;
}
input[type=checkbox]:checked, input[type=checkbox]:indeterminate { background: var(--accento-pieno); box-shadow: none; }
input[type=checkbox]:checked::after { content: ""; position: absolute; inset: 0; background: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.4 2.4 4.6-5.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.4 2.4 4.6-5.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type=checkbox]:indeterminate::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; border-radius: 1px; background: #FFFFFF; }
input[type=checkbox]:disabled { opacity: .5; }
input[type=checkbox]:focus-visible { outline: 3px solid rgba(var(--accento-rgb), .5); outline-offset: 1px; }

/* moduli come Impostazioni di Sistema: etichetta a sinistra, valore a destra, righe separate da un filo. Le spunte diventano levette */
.campo.orizzontale input[type=checkbox], .avv-tipi input[type=checkbox], .ott-form .campo.orizzontale input[type=checkbox], .ott-campi .campo.orizzontale input[type=checkbox] {
  width: 32px; height: 18px; border-radius: 9px; background: var(--riempimento-su); box-shadow: none; accent-color: auto; transition: background-color .2s;
}
.campo.orizzontale input[type=checkbox]:checked, .avv-tipi input[type=checkbox]:checked { background: var(--verde-pieno); box-shadow: none; }
.campo.orizzontale input[type=checkbox]::after, .avv-tipi input[type=checkbox]::after,
.campo.orizzontale input[type=checkbox]:checked::after, .avv-tipi input[type=checkbox]:checked::after {
  content: ""; position: absolute; inset: 2px auto 2px 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  -webkit-mask: none; mask: none; transition: transform .38s var(--molla-viva);
}
.campo.orizzontale input[type=checkbox]:checked::after, .avv-tipi input[type=checkbox]:checked::after { transform: translateX(14px); }

.ott-campi { display: block; }
.ott-campi > .campo, .ott-campi > label, #vista-impostazioni .pannello label.campo, .avv-tipi label {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 100% !important; width: 100%; max-width: none; min-height: 38px; padding: 5px 0; border-bottom: var(--filo);
  font: 400 13px/16px var(--font-corpo); color: var(--testo); white-space: normal;
}
.ott-campi > :last-child, .avv-tipi label:last-child { border-bottom: 0; }
.ott-campi > .campo .eti { font: 400 13px/16px var(--font-corpo); color: var(--testo); }
.campo.orizzontale, .avv-tipi label { flex-direction: row-reverse !important; }
.ott-campi input:not([type=checkbox]), .ott-campi select { flex: 0 0 auto; width: 84px; min-width: 0; text-align: right; }
.ott-campi select { width: auto; max-width: 62%; text-align: left; }
.ott-campi .largo select { min-width: 132px; }
.ott-campi textarea { flex: 0 1 62%; }
.ott-campi > .gruppo-campi, .ott-campi > .segmentato, .ott-campi > div:not(.campo) { padding: 8px 0; border-bottom: var(--filo); }
.ott-scheda, .pannello .ott-scheda { padding: 12px 16px 6px; gap: 0; background: var(--pannello); box-shadow: var(--ombra-carta); border-radius: var(--raggio-carta); }
.ott-scheda h4 { font: 600 13px/18px var(--font-corpo); margin: 0 0 4px; padding: 0; border: 0; }
details.ott-impostazioni { background: transparent; box-shadow: none; padding: 0; }
details.ott-impostazioni > summary { margin-bottom: 10px; }
.ott-piede { border-top: 0; }

#vista-impostazioni .riga-form, #vista-impostazioni .griglia-form { display: flex; flex-wrap: wrap; gap: 0; justify-content: flex-end; margin-top: 0; }
#vista-impostazioni .pannello label.campo input:not([type=checkbox]), #vista-impostazioni .pannello label.campo select { flex: 0 1 min(62%, 380px); width: auto; min-width: 0; }
#vista-impostazioni .riga-form > .bottone, #vista-impostazioni .griglia-form > .bottone { margin: 10px 0 2px 8px; }
#vista-impostazioni .pannello > h3:first-child { margin-bottom: 4px; }
.avv-tipi { display: block !important; }

/* niente carte dentro le carte: dentro un pannello i numeri stanno sul fondo, separati da un filo (come in Borsa e Salute) */
.pannello .tessere { gap: 0; overflow: hidden; }
.pannello .tessera, .pannello .tessera:hover { background: transparent; border-radius: 0; box-shadow: -.5px 0 0 var(--linea-ff), 0 -.5px 0 var(--linea-ff); padding: 10px 14px; }
.pannello .strip { background: transparent; box-shadow: none; border-radius: 0; border-top: .5px solid var(--linea-ff); margin-top: 0; }
.pannello .strip > div { border-right: 0; box-shadow: -.5px 0 0 var(--linea-ff); padding: 10px 14px; }
.pannello .strip { overflow: hidden; }

/* niente righine colorate a sinistra: il livello lo dice un punto, come le notifiche e la posta non letta */
.avvisi-campana li[class*="imp-"], .avvisi-campana li.imp-rosso, .avvisi-campana li.imp-arancio, .avvisi-campana li.imp-giallo, .avvisi-campana li.imp-verde { border-left: 0; padding-left: 0; margin-left: 0; border-radius: 0; }
.avvisi-campana li.imp-rosso { background: rgba(var(--rosso-rgb), .1); border-radius: 10px; padding: 8px 10px; }
.avvisi-campana li { border-top: var(--filo); }
.riga-libro.senza-ads, .riga-libro.senza-ads:hover { box-shadow: none; }
.legenda-ads { box-shadow: none; border-radius: 999px; padding: 1px 8px; }
.news-voce.nuova { box-shadow: none; position: relative; padding-left: 14px; }
.news-voce.nuova::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accento-pieno); }
.news-testo { border-left: 0; padding-left: 0; }
.ponte-prev { border-top: 0; }

/* il campo di ricerca: capsula con la lente, senza etichetta sopra */
input[type=search] { padding-left: 28px; background: var(--riempimento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='5.5' cy='5.5' r='4.2' fill='none' stroke='%238E8E93' stroke-width='1.4'/%3E%3Cpath d='M8.7 8.7L12 12' stroke='%238E8E93' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 9px center no-repeat; border: 0; box-shadow: none; }
input[type=search]:focus { box-shadow: 0 0 0 3px rgba(var(--accento-rgb), .32); }
.gruppo-campi:has(> .riga > input[type=search]) > .eti, .gruppo-campi.neg-cerca > .eti { display: none; }
.gruppo-campi:has(> .riga > input[type=search]), .gruppo-campi.neg-cerca { justify-content: flex-end; }
.pannello:has(#lib-cerca) > h3:first-child { display: none; }

/* il piede della barra laterale: chi sei e come uscire */
#bottone-esci { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin-top: 4px; padding: 0 8px; border-radius: 8px; color: var(--testo); font: 400 13px var(--font-corpo); text-decoration: none; }
#bottone-esci:hover { background: rgba(var(--riempi-rgb), .07); color: var(--testo); text-decoration: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: linear-gradient(#AEAEB2, #8E8E93); color: #FFFFFF; font: 600 12px var(--font-corpo); }
.avatar-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#bottone-esci .ic { width: 14px; height: 14px; color: var(--testo3); }

/* oggi nel calendarietto: il giorno cerchiato, come in Calendario */
.cal-giorno.oggi { box-shadow: none; }
.cal-giorno.oggi b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rosso-pieno); color: #FFFFFF; }

@media (max-width: 900px) {
  .segmentato:has(.ott-gruppo), .segmentato.ott-schede-nav { border-radius: 18px; }
  .ott-schede { grid-template-columns: minmax(0, 1fr); }
  #vista-impostazioni .pannello label.campo { min-height: 44px; }
  #vista-impostazioni .pannello label.campo input:not([type=checkbox]), #vista-impostazioni .pannello label.campo select { flex-basis: 58%; }
}
@media (pointer: coarse) {
  input[type=checkbox] { width: 22px; height: 22px; border-radius: 6px; }
  .campo.orizzontale input[type=checkbox], .avv-tipi input[type=checkbox] { width: 51px; height: 31px; border-radius: 16px; }
  .campo.orizzontale input[type=checkbox]::after, .avv-tipi input[type=checkbox]::after,
  .campo.orizzontale input[type=checkbox]:checked::after, .avv-tipi input[type=checkbox]:checked::after { width: 27px; height: 27px; }
  .campo.orizzontale input[type=checkbox]:checked::after, .avv-tipi input[type=checkbox]:checked::after { transform: translateX(20px); }
  .ott-campi input:not([type=checkbox]) { width: 96px; }
}
.ott-gruppo > summary .ic { width: 8px; height: 8px; margin-left: 4px; }
.ott-campi label.campo, .ott-campi .campo { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; cursor: default; font: 400 13px/16px var(--font-corpo); color: var(--testo); }
.ott-campi .campo.orizzontale { flex-direction: row-reverse; justify-content: space-between; gap: 12px; cursor: default; }
.ott-campi .campo .eti { flex: 1 1 auto; min-width: 0; display: block; color: var(--testo); }
.ott-campi label.campo > input:not([type=checkbox]) { flex: 0 0 auto; width: 84px; }
.ott-campi label.campo > select { flex: 0 0 auto; width: auto; max-width: 62%; min-width: 120px; }
.ott-campi label.campo > textarea { flex: 0 1 62%; width: auto; }
.ott-campi > .campo:has(> .nota), .ott-campi > .largo:has(> .nota) { flex-wrap: wrap; }
.ott-scheda .nota { flex: 1 1 100%; margin: 2px 0 4px; }
@media (pointer: coarse) { .ott-campi label.campo > input:not([type=checkbox]) { width: 96px; } }
.ott-campi label.campo > input:not([type=number]):not([type=checkbox]) { flex: 0 1 62%; width: auto; min-width: 0; text-align: left; }
@media (max-width: 900px) { .ott-schede > * { grid-column: 1 / -1 !important; grid-row: auto !important; min-width: 0; } }
@media (pointer: coarse) {
  .campo.orizzontale input[type=checkbox], .avv-tipi input[type=checkbox] { width: 51px !important; height: 31px !important; border-radius: 16px !important; }
}

/* ================================================================
   Terzo passaggio: menu, calendario, Dashboard, barra laterale
   ================================================================ */
/* tendine: pop-up di vetro con la spunta, come i menu di macOS */
.menu-sel { position: fixed; z-index: 300; overflow-y: auto; min-width: 140px; max-width: 420px; padding: 5px; border-radius: 12px; background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); box-shadow: var(--ombra-popover), inset 0 .5px 0 var(--vetro-luce), 0 0 0 .5px var(--bordo-vetro); animation: pop-entra .22s var(--molla); }
.menu-sel button { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 24px; padding: 3px 12px 3px 6px; border: 0; border-radius: 7px; background: none; color: var(--testo); font: 400 13px/18px var(--font-corpo); text-align: left; white-space: nowrap; cursor: default; }
.menu-sel button .ic { flex: none; width: 11px; height: 11px; visibility: hidden; }
.menu-sel button.scelta .ic { visibility: visible; }
.menu-sel button.evid { background: var(--accento-pieno); color: #FFFFFF; }
.menu-sel button:disabled { color: var(--testo3); }
.menu-sel-gruppo { padding: 6px 12px 2px 22px; font: 600 11px var(--font-corpo); color: var(--testo3); }

/* il periodo in un solo campo, col calendario */
.campo-periodo { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--riempimento); color: var(--testo); font: 400 13px var(--font-corpo); font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform .4s var(--molla-viva), background-color .15s; }
.campo-periodo:hover { background: var(--riempimento-su); }
.campo-periodo:active { transform: scale(.97); transition-duration: .08s; }
.campo-periodo .ic { width: 14px; height: 14px; color: var(--accento); }
.calendario { position: fixed; z-index: 300; width: 276px; padding: 12px 12px 8px; border-radius: 18px; background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); box-shadow: var(--ombra-popover), inset 0 .5px 0 var(--vetro-luce), 0 0 0 .5px var(--bordo-vetro); transform-origin: top left; animation: pop-entra .28s var(--molla); }
.cal-testa { display: flex; align-items: center; gap: 2px; padding: 0 2px 8px 6px; }
.cal-testa b { flex: 1; font: 600 15px/20px var(--font-corpo); color: var(--testo); }
.cal-testa button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--accento); }
.cal-testa button:hover { background: var(--riempimento); }
.cal-testa button .ic { width: 12px; height: 12px; }
.cal-sett, .cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-sett span { font: 600 10px/18px var(--font-corpo); color: var(--testo3); text-align: center; }
.cal-griglia button { position: relative; isolation: isolate; height: 32px; border: 0; background: none; color: var(--testo); font: 400 13px var(--font-corpo); font-variant-numeric: tabular-nums; }
.cal-griglia button::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; }
.cal-griglia button:hover::before { background: var(--riempimento); }
.cal-griglia button.oggi { color: var(--rosso); font-weight: 600; }
.cal-griglia button.dentro { background: rgba(var(--accento-rgb), .14); }
.cal-griglia button.capo-a, .cal-griglia button.capo-b { color: #FFFFFF; font-weight: 600; }
.cal-griglia button.capo-a::before, .cal-griglia button.capo-b::before { background: var(--accento-pieno); }
.cal-griglia button.capo-a:not(.capo-b) { background: linear-gradient(90deg, transparent 50%, rgba(var(--accento-rgb), .14) 50%); }
.cal-griglia button.capo-b:not(.capo-a) { background: linear-gradient(90deg, rgba(var(--accento-rgb), .14) 50%, transparent 50%); }
.cal-aiuto { margin: 8px 6px 2px; font-size: 11px; color: var(--testo3); }

/* la barra del netto: piu' alta, con segnali che si leggono da soli */
.ponte-traguardo { margin-top: 16px; }
.trag-pista { position: relative; padding: 34px 0 34px; }
.ponte-traguardo .binario { position: relative; height: 12px; border-radius: 6px; background: var(--riempimento); overflow: hidden; }
.ponte-traguardo .binario .fatto { position: relative; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #30C85A, var(--verde-pieno)); transition: width .7s var(--molla); }
.ponte-traguardo .binario .fatto.rosso { background: var(--rosso-pieno); }
.ponte-traguardo .previsto { position: absolute; top: 0; bottom: 0; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(-45deg, rgba(var(--verde-rgb), .34) 0 4px, rgba(var(--verde-rgb), .16) 4px 8px); }
.trag-segnale { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.trag-segnale i { position: absolute; left: -1px; width: 2px; top: 24px; height: 28px; border-radius: 1px; background: var(--segnale); }
.trag-segnale i::after { content: ""; position: absolute; left: -2.5px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--segnale); box-shadow: 0 0 0 2px var(--pannello); }
.trag-segnale .capsula { position: absolute; top: 0; left: 0; display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--fondo-segnale); color: var(--testo-segnale); font: 400 11px/16px var(--font-corpo); white-space: nowrap; }
.trag-segnale .capsula b { font-weight: 600; font-variant-numeric: tabular-nums; }
.trag-segnale.sotto i { top: auto; bottom: 22px; height: 28px; }
.trag-segnale.sotto i::after { top: -2px; }
.trag-segnale.sotto .capsula { top: auto; bottom: 0; }
.trag-segnale.pari { --segnale: var(--arancione-pieno); --fondo-segnale: rgba(var(--arancione-rgb), .16); --testo-segnale: var(--arancione); }
.trag-segnale.intero { --segnale: var(--indaco); --fondo-segnale: rgba(var(--indaco-rgb), .14); --testo-segnale: var(--indaco); }
.trag-segnale.prev { --segnale: var(--verde-scuro); --fondo-segnale: rgba(var(--verde-rgb), .16); --testo-segnale: var(--verde); }
.ponte-prev { padding-left: 22px; }

/* le tessere: icona tinta, numero grande, curva che arriva ai bordi come nei widget */
.ponte-tessere { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ponte-tessere .tessera { position: relative; display: flex; flex-direction: column; min-height: 148px; padding: 12px 14px 58px; overflow: hidden; }
.ponte-tessere .tessera .e { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-corpo); color: var(--testo2); }
.ponte-tessere .tessera .e .ic { flex: none; width: 20px; height: 20px; padding: 3.5px; box-sizing: border-box; border-radius: 6px; color: #FFFFFF; background: var(--tinta, var(--testo3)); }
.ponte-tessere .tessera.verde .e, .ponte-tessere .tessera.rosso .e, .ponte-tessere .tessera.oro .e { color: var(--testo2); }
.ponte-tessere .tessera.verde { --tinta: var(--verde-pieno); } .ponte-tessere .tessera.rosso { --tinta: var(--rosso-pieno); } .ponte-tessere .tessera.oro { --tinta: var(--arancione-pieno); }
.ponte-tessere .tessera:nth-child(4) { --tinta: #00C3D0; } .ponte-tessere .tessera:nth-child(5) { --tinta: var(--accento-pieno); }
.ponte-tessere .tessera .v { font: 700 26px/30px var(--font-corpo); margin-top: 8px; color: var(--testo); }
.ponte-tessere .ponte-sotto { margin-top: 2px; }
.ponte-tessere .spark { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; margin: 0; }
.ponte-tessere .spark svg { display: block; width: 100%; height: 100%; }
.ponte-tessere .punto-vivo { right: 6px; }

/* Dashboard ADS: comandi al loro posto */
.cru-libri-comandi { display: flex; align-items: center; gap: 8px; position: absolute; right: 16px; top: 12px; }
.cru-libri-comandi .eti { font-size: 12px; color: var(--testo2); white-space: nowrap; }
.pannello:has(> .cru-libri-comandi) { position: relative; }
.cru-manutenzione { margin: 4px 0 16px; }
.cru-manutenzione details.dati-kdp .corpo { background: var(--pannello); box-shadow: var(--ombra-carta); border-radius: var(--raggio-carta); }
#cru-tab-account .esp { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; padding: 0; vertical-align: -3px; border-radius: 50%; color: var(--testo3); }
#cru-tab-account .esp:hover { background: var(--riempimento); color: var(--testo); }
#cru-tab-account .sotto-conto { padding-left: 18px; }

/* barra laterale: quadratini colorati con il simbolo bianco, come Impostazioni di Sistema */
.laterale nav button[data-vista] { height: 32px; padding: 0 6px; gap: 9px; }
.laterale nav button[data-vista] .ic, .laterale nav button[data-vista]:hover .ic { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 6px; color: #FFFFFF; background: linear-gradient(180deg, color-mix(in srgb, var(--nav-tinta) 88%, #fff), var(--nav-tinta)); box-shadow: 0 .5px 1px rgba(0, 0, 0, .18); }
.laterale nav button[data-vista="comando"] { --nav-tinta: #0A84FF; }
.laterale nav button[data-vista="cruscotto"] { --nav-tinta: #5E5CE6; }
.laterale nav button[data-vista="ottimizzazione"] { --nav-tinta: #FF9500; }
.laterale nav button[data-vista="libri"] { --nav-tinta: #A2845E; }
.laterale nav button[data-vista="cecchino"] { --nav-tinta: #FF3B30; }
.laterale nav button[data-vista="salvati"] { --nav-tinta: #FFB300; }
.laterale nav button[data-vista="news"] { --nav-tinta: #FF2D55; }
.laterale nav button[data-vista="impostazioni"] { --nav-tinta: #8E8E93; }
.laterale nav button[data-vista="guida"] { --nav-tinta: #30B0C7; }
.laterale nav .tab-altro .ic { color: var(--accento); }
.laterale nav { gap: 2px; }

/* piede della barra: lo stato dei dati in una scheda ordinata, sotto chi sei */
.cartiglio { margin: 8px 10px 10px; padding: 0; border: 0; font-size: 11px; }
.cartiglio > div { display: flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 9px; background: rgba(var(--riempi-rgb), .055); border-bottom: .5px solid var(--linea); }
.cartiglio > div:first-of-type { border-radius: 10px 10px 0 0; }
.cartiglio > div:nth-last-of-type(1) { border-radius: 0 0 10px 10px; border-bottom: 0; }
.cartiglio > div .ic { flex: none; width: 13px; height: 13px; color: var(--testo3); }
.cartiglio small { flex: 1 0 auto; font-size: 11px; color: var(--testo2); }
.cartiglio > div > span { min-width: 0; color: var(--testo); font-weight: 500; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bottone-esci { margin-top: 6px; }

/* telefono e finestre strette */
@media (max-width: 1350px) { .ponte-tessere { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) and (min-width: 901px) {
  .laterale nav button[data-vista] { justify-content: center; height: 38px; padding: 0; }
  .laterale nav button[data-vista] .ic, .laterale nav button[data-vista]:hover .ic { width: 28px; height: 28px; padding: 5px; border-radius: 7px; }
}
@media (max-width: 900px) {
  .laterale nav button[data-vista] { height: 50px; padding: 0 2px; gap: 2px; }
  .laterale nav button[data-vista] .ic, .laterale nav button[data-vista]:hover .ic { width: 24px; height: 24px; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--testo2); }
  .laterale nav button[data-vista].attiva .ic { color: var(--accento); }
  .ponte-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ponte-tessere .tessera:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trag-segnale .capsula { font-size: 11px; }
  .cru-libri-comandi { position: static; flex-wrap: wrap; margin-bottom: 10px; }
  .cru-libri-comandi input[type=search] { flex: 1 1 100%; }
  .ponte-prev { padding-left: 0; }
}

/* ================================================================
   Quarto passaggio: Cecchino, Salvati, Guida, Libreria, ultimo ciclo
   ================================================================ */
/* Cecchino e Salvati: elenchi veri, non tabelle da foglio di calcolo */
#vista-cecchino .pannello > h3 small, #vista-salvati .pannello > h3 small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--testo3); }
.mercati-spunte { display: inline-flex; gap: 0; padding: 2px; border-radius: 999px; background: var(--riempimento); }
.mercati-spunte label { position: relative; display: inline-flex; margin: 0; border-radius: 999px; }
.mercati-spunte input[type=checkbox] { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; }
.mercati-spunte label span { display: block; height: 24px; padding: 0 11px; border-radius: 999px; font: 400 12px/24px var(--font-corpo); color: var(--testo2); transition: background-color .15s, color .15s; }
.mercati-spunte label:has(input:checked) span { background: var(--pollice); color: var(--testo); font-weight: 500; box-shadow: var(--ombra-comando); }
.mercati-spunte label:has(input:focus-visible) { outline: 3px solid rgba(var(--accento-rgb), .5); }
.cec-piede { margin-top: 10px; }
#cec-tabella tbody tr:nth-child(even) > td, #salvati-tabella tbody tr:nth-child(even) > td { background: transparent; }
#cec-tabella td, #salvati-tabella td { padding: 9px 9px; border-bottom: .5px solid var(--linea); vertical-align: middle; }
#cec-tabella tbody tr:last-child td, #salvati-tabella tbody tr:last-child td { border-bottom: 0; }
#cec-tabella tbody tr:hover > td, #salvati-tabella tbody tr:hover > td { background: rgba(var(--riempi-rgb), .04); }
#cec-tabella td:first-child { color: var(--testo3); font-size: 12px; width: 26px; }
.cec-riga { display: flex; align-items: center; gap: 12px; min-width: 240px; }
#cec-tabella .cec-cover, #salvati-tabella .cec-cover { width: 38px; height: auto; max-height: 57px; aspect-ratio: auto 2 / 3; object-fit: contain; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .08); }
.cec-titolo a { color: var(--testo); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.cec-titolo a:hover { color: var(--accento); text-decoration: none; }
.cec-nuovo { color: var(--accento); background: rgba(var(--accento-rgb), .12); margin-right: 5px; }
.anello-punti b { font: 600 11px var(--font-corpo); color: var(--testo) !important; }
.voto-si { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--riempimento); color: var(--testo); font: 400 12px var(--font-corpo); transition: transform .4s var(--molla-viva), background-color .15s; }
.voto-si .ic { display: none; width: 10px; height: 10px; }
.voto-si:hover { background: var(--riempimento-su); }
.voto-si:active { transform: scale(.94); transition-duration: .08s; }
.voto-si.scelto, .voto-si.scelto:hover { background: var(--verde-pieno); color: #03210D; font-weight: 600; }
.voto-si.scelto .ic { display: inline-block; }
[data-cecsalva] { gap: 4px; } [data-cecsalva] .ic { width: 11px !important; height: 11px !important; margin: 0 !important; }
[data-cecsalva]:disabled { opacity: 1; color: var(--accento); }
.gemelle-libro > summary { display: flex; align-items: center; gap: 6px; min-height: 36px; list-style: none; border-top: .5px solid var(--linea); }
.gemelle-libro > summary::-webkit-details-marker { display: none; }
.gemelle-libro > summary::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--testo3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .32s var(--molla); }
.gemelle-libro[open] > summary::before { transform: rotate(90deg); }

/* Guida: sezioni che si aprono, come un elenco di Impostazioni */
.guida-sez { padding: 0; margin-bottom: 10px; overflow: hidden; }
.guida-sez > summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; list-style: none; }
.guida-sez > summary::-webkit-details-marker { display: none; }
.guida-sez > summary h2 { flex: 1; margin: 0; font: 600 15px/20px var(--font-corpo); color: var(--testo); border: 0; }
.guida-sez > summary::after { content: ""; flex: none; width: 11px; height: 11px; background: var(--testo3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .34s var(--molla); }
.guida-sez[open] > summary::after { transform: rotate(90deg); }
.guida-sez > summary:hover { background: rgba(var(--riempi-rgb), .035); }
.guida-corpo { padding: 2px 16px 14px; border-top: .5px solid var(--linea); animation: vista-entra .3s var(--molla); }

/* Libreria: il tasto aggiorna e' un'icona discreta, come nelle barre di macOS */
.agg-titolo, .agg-titolo:hover { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--testo3); transition: background-color .15s, color .15s, transform .4s var(--molla-viva); }
.agg-titolo:hover { background: var(--riempimento); color: var(--accento); }
.agg-titolo:active { transform: scale(.9); transition-duration: .08s; }
.agg-titolo .ic { width: 13px; height: 13px; }
.agg-titolo:disabled { background: transparent; }
/* i mesi: tasselli arrotondati, il mese corrente con un anello sottile e un punto */
.striscia-mesi { gap: 2px; padding: 4px 0 9px; }
.mese-blocco { height: 22px; border-radius: 6px; }
.mese-blocco.oggi { height: 22px; margin: 0; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--pannello), 0 0 0 3px var(--testo); }
.mese-blocco.oggi::after { left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; transform: none; border: 0; border-radius: 50%; background: var(--testo); }
/* lo storico sotto la riga del libro: un pannello pulito */
.lib-storico { padding: 12px 16px 14px; background: rgba(var(--riempi-rgb), .025); }
.lib-storico-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lib-storico-testa .titolo { flex: 1; min-width: 160px; font: 600 15px/20px var(--font-corpo); color: var(--testo); }
.lib-storico-sintesi { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 8px; font-size: 12px; color: var(--testo2); }
.lib-storico-sintesi .eti { font-size: 12px; font-weight: 500; color: var(--testo); }
.lib-storico-sintesi b { font: 600 15px var(--font-corpo); color: var(--testo); font-variant-numeric: tabular-nums; }
.lib-storico-sintesi .seg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.lib-storico-unico{ padding: 10px 8px 4px; }
.grafico-nuvola { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: 7px 10px; border-radius: 10px; font-size: 11px; line-height: 16px; color: var(--testo); background: var(--vetro-spesso); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); box-shadow: var(--ombra-popover), 0 0 0 .5px var(--bordo-vetro); white-space: nowrap; }
.grafico-nuvola > b { display: block; margin-bottom: 2px; font-weight: 600; }
.grafico-nuvola div b { font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico-nuvola i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.grafico svg, .lib-storico-unico svg { display: block; max-width: 100%; }

/* Amazon ADS: l'ultimo ciclo in righe, non un paragrafo */
.ott-stato { margin-bottom: 8px; }
.ott-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 30px; padding: 6px 0; border-bottom: .5px solid var(--linea); font-size: 13px; color: var(--testo2); }
.ott-kv b { font-weight: 500; color: var(--testo); text-align: right; font-variant-numeric: tabular-nums; }
.ott-kv small { display: block; font-size: 11px; font-weight: 400; color: var(--testo3); }
#ott-marker .ott-calendario{ margin-top: 12px; }
.cal-giorno { position: relative; }
.ott-conto { margin-top: 10px; }
@media (max-width: 720px) {
  /* Cecchino e Salvati sul telefono: una scheda per libro, come la Libreria */
  #cec-tabella, #salvati-tabella, #cec-tabella tbody, #salvati-tabella tbody { display: block; width: 100%; min-width: 0; }
  #cec-tabella thead, #salvati-tabella thead { display: none; }
  #cec-tabella tr, #salvati-tabella tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; padding: 12px 0; border-bottom: .5px solid var(--linea); align-items: center; }
  #cec-tabella td, #salvati-tabella td { position: static !important; padding: 0; border: 0; text-align: left !important; background: transparent !important; box-shadow: none !important; font-size: 13px; }
  #cec-tabella td::before, #salvati-tabella td::before { display: block; font-size: 11px; color: var(--testo3); }
  #cec-tabella td:nth-child(1) { display: none; }
  #cec-tabella td:nth-child(2), #salvati-tabella td:nth-child(1) { grid-column: 1 / -1; }
  #cec-tabella td:nth-child(3)::before, #salvati-tabella td:nth-child(2)::before { content: "Mercato"; }
  #cec-tabella td:nth-child(4)::before { content: "Punteggio"; }
  #cec-tabella td:nth-child(5)::before { content: "BSR"; } #salvati-tabella td:nth-child(3)::before { content: "BSR ora"; }
  #cec-tabella td:nth-child(6)::before { content: "Copie al mese"; } #salvati-tabella td:nth-child(4)::before { content: "Trend BSR"; }
  #cec-tabella td:nth-child(7)::before { content: "Prezzo"; } #salvati-tabella td:nth-child(5)::before { content: "Recensioni"; }
  #cec-tabella td:nth-child(8)::before { content: "Recensioni"; } #salvati-tabella td:nth-child(6)::before { content: "Prezzo"; }
  #cec-tabella td:nth-child(9)::before { content: "A settimana"; } #salvati-tabella td:nth-child(7)::before { content: "Salvato il"; }
  #cec-tabella td:nth-child(10)::before { content: "Uscito da"; } #salvati-tabella td:nth-child(8)::before { content: "Da scrivere"; }
  .cec-riga { min-width: 0; }
  .mercati-spunte { flex-wrap: wrap; border-radius: 16px; }
}

/* piccole correzioni del terzo passaggio */
.misura small:empty { display: none; }
.ponte-tessere .tessera .e { justify-content: flex-start; }
.ponte-netto .nota:empty { display: none; }

.ott-alto { align-items: start; }

/* ogni altra sezione apribile e le righe apribili: lo stesso triangolo disegnato */
details:not(.menu-altro, .scelta-mercati, .ott-gruppo, .guida-sez, .dati-kdp, .aggiungi-libro, .avanzate, .ott-diario, .copie-auto, .gemelle-libro) > summary { display: flex; align-items: center; gap: 6px; list-style: none; }
details:not(.menu-altro, .scelta-mercati, .ott-gruppo, .guida-sez, .dati-kdp, .aggiungi-libro, .avanzate, .ott-diario, .copie-auto, .gemelle-libro) > summary::-webkit-details-marker { display: none; }
details:not(.menu-altro, .scelta-mercati, .ott-gruppo, .guida-sez, .dati-kdp, .aggiungi-libro, .avanzate, .ott-diario, .copie-auto, .gemelle-libro) > summary::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--testo3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .32s var(--molla); }
details[open]:not(.menu-altro, .scelta-mercati, .ott-gruppo, .guida-sez, .dati-kdp, .aggiungi-libro, .avanzate, .ott-diario, .copie-auto, .gemelle-libro) > summary::before { transform: rotate(90deg); }
#ott-tab-risultati tr.apribile td:first-child b::before, #ott-tab-risultati tr.apribile.aperta td:first-child b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; background: var(--testo3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l3.5 3.5L3 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .32s var(--molla); }
#ott-tab-risultati tr.apribile.aperta td:first-child b::before { transform: rotate(90deg); }
[data-copia] { font-family: var(--font-corpo); font-variant-numeric: tabular-nums; }

/* chiaro o scuro, in basso a sinistra */
.aspetto { display: flex; flex-wrap: nowrap; margin: 8px 10px 0; }
.aspetto button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 8px; }
.aspetto button .ic { width: 13px; height: 13px; }
.aspetto + .cartiglio { margin-top: 6px; }
.foglio .aspetto { margin: 0 0 12px; }
.foglio .aspetto button { height: 36px; font-size: 13px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
@media (max-width: 1180px) { .laterale > .aspetto { display: none; } }

/* ================================================================
   Quinto passaggio: niente tagli, niente linee coperte, niente spazi vuoti
   ================================================================ */
/* le curve nelle tessere stanno dentro il riquadro: gli angoli arrotondati non le tagliano */
.ponte-tessere .tessera { padding-bottom: 66px; }
.ponte-tessere .spark { left: 14px; right: 14px; bottom: 12px; height: 44px; }
.ponte-tessere .punto-vivo { right: -3px; }

/* le linee delle tabelle stanno dentro la cella: gli sfondi colorati non le coprono piu' */
table.dati thead tr:last-child th, .tab-stats th { border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--linea-ff); }
.tab-stats td { border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--linea); }
.testa-fissa { box-shadow: none; }
#cec-tabella td, #salvati-tabella td { border-bottom: 0; box-shadow: inset 0 -.5px 0 var(--linea); }
#cec-tabella tbody tr:last-child td, #salvati-tabella tbody tr:last-child td { box-shadow: none; }

/* Dashboard ADS: il periodo e' una barra, i report KDP una cosa a parte */
.cru-periodo { padding: 10px 16px; }
.cru-periodo .gruppo-campi { flex-direction: row; align-items: center; gap: 12px; }
.cru-periodo .eti { font-weight: 600; color: var(--testo); }
.cru-periodo #cru-custom { flex-wrap: wrap; }
.cru-report { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 10px 16px; }
.cru-report > h3:first-child { margin: 0; }
.cru-report .kdp-import { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px 10px; }
.cru-report .kdp-zona { flex: 1 1 280px; flex-direction: row; gap: 8px; min-height: 40px; padding: 6px 12px; border-radius: 10px; }
.cru-report .kdp-zona .ic { width: 18px; height: 18px; }
.cru-report .kdp-azioni { flex: none; }
.cru-report .kdp-azioni #kdp-importa { flex: none; }
.cru-report .kdp-file { flex: 1 1 100%; }

/* Amazon ADS: ultimo ciclo e struttura occupano tutta la larghezza */
.ott-alto { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ott-alto > .pannello { margin-bottom: 0; }
#ott-marker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
#ott-marker > :not(.ott-kv) { grid-column: 1 / -1; }
#ott-riassunto .ott-tessere { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
#ott-riassunto .nota { margin: 8px 0 0; }
#ott-marker .ott-calendario{ width: 100%; }
.ott-schede-nav { margin-top: 16px; }

/* impostazioni: i riquadri si incastrano in colonne, senza buchi sotto i piu' corti */
.ott-schede, .lancio-imp-schede { display: block; columns: 340px 3; column-gap: 16px; }
.ott-schede > * { break-inside: avoid; margin: 0 0 16px; }
#vista-impostazioni { columns: 460px 2; column-gap: 16px; }
#vista-impostazioni > * { break-inside: avoid; }
#vista-impostazioni > .indice-sezioni { column-span: all; }

/* guida: il testo aperto riempie la larghezza su due colonne */
.guida p, .guida li { max-width: none; }
.guida-corpo { columns: 440px 2; column-gap: 36px; }
.guida-corpo > p, .guida-corpo li, .guida-corpo dd, .guida-corpo dt { break-inside: avoid-column; }
.guida-corpo table, .guida-corpo .legenda-mesi { break-inside: avoid; }

/* negative: se una colonna e' vuota, l'altra prende tutto lo spazio */
.neg-colonne.una { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  #ott-marker { grid-template-columns: minmax(0, 1fr); }
  #ott-riassunto .ott-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ott-schede, .lancio-imp-schede, #vista-impostazioni, .guida-corpo { columns: auto; }
  .cru-periodo .gruppo-campi { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cru-report { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .cru-report .kdp-azioni #kdp-importa { flex: 1; }
}

/* la barra del netto non tiene spazio per capsule che non ci sono */
.trag-pista:not(:has(.trag-segnale.sotto)) { padding-bottom: 4px; }
.trag-pista:not(:has(.trag-segnale:not(.sotto))) { padding-top: 4px; }
/* le soglie 30 giorni e lifetime: righe come tutte le altre */
.ott-form .ott-tf-pan { display: block; padding: 0; background: transparent; border-radius: 0; }
.ott-form .ott-tf-pan .ott-campi, .ott-form .ott-tf-pan .ott-campi-3 { display: block; }
.ott-form .ott-tf-pan label.campo, .ott-form .ott-tf-pan .campo { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; min-height: 38px; padding: 5px 0; border-bottom: var(--filo); }
/* le tessere delle negative riempiono la riga */
#vista-negative .tessere { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { #vista-negative .tessere { grid-template-columns: minmax(0, 1fr); } }

/* maiuscola iniziale dove il testo viene dai dati (stati, note, celle) */
.tag::first-letter, .nota::first-letter, .ponte-conf::first-letter, .ponte-sotto::first-letter, .ott-dett::first-letter, .ott-funz-sotto::first-letter, .perche::first-letter, td::first-letter, .ott-report li::first-letter, .ott-kv small::first-letter, .and-pari::first-letter, .and-su::first-letter, .and-giu::first-letter, h3 small::first-letter { text-transform: uppercase; }
.and-pari, .and-su, .and-giu, h3 small { display: inline-block; }

/* il riquadro sui grafici */
#com-tooltip, #cru-tooltip, .ott-ris-grafico .tooltip-grafico { width: max-content; max-width: min(420px, 100%); padding: 9px 11px; font-size: 12px; line-height: 16px; white-space: normal; color: var(--testo); }
.nuv-titolo { margin-bottom: 5px; font-weight: 600; font-size: 12px; color: var(--testo); }
.nuv-voci { display: grid; gap: 1px; margin: 0; }
.nuv-voci > div { display: flex; justify-content: space-between; gap: 24px; }
.nuv-voci dt { color: var(--testo2); font-weight: 400; }
.nuv-voci dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.nuv-tab { width: 100%; margin-top: 7px; padding-top: 0; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.nuv-tab th { padding: 3px 0 2px 10px; border-top: .5px solid var(--linea-ff); font-weight: 500; color: var(--testo3); text-align: right; }
.nuv-tab td { padding: 1px 0 1px 10px; text-align: right; white-space: nowrap; }
.nuv-tab td:first-child, .nuv-tab th:first-child { padding-left: 0; text-align: left; color: var(--testo2); }
.nuv-vuoto { margin: 6px 0 0; font-size: 11px; color: var(--testo3); }

/* i libri piu' redditizi: uno scaffale di schede sul fondo della pagina */
.pannello:has(> #com-earners) { padding: 0; background: transparent; box-shadow: none; }
.pannello:has(> #com-earners) > h3:first-child { margin: 0 0 12px; font-size: 17px; line-height: 22px; }
.pannello:has(> #com-earners) > .in-alto-destra { top: -2px; right: 0; }
.pannello:has(> #com-earners) #com-earners > .nota { padding: 16px; border-radius: var(--raggio-carta); background: var(--pannello); box-shadow: var(--ombra-carta); }
.lt-primi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.lt-altri { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.lt-scheda { display: flex; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--raggio-carta); background: var(--pannello); box-shadow: var(--ombra-carta); }
.lt-cover { position: relative; flex: none; width: auto; height: 68px; overflow: hidden; border-radius: 4px; background: var(--riempimento); box-shadow: 0 2px 8px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .08); }
.lt-scheda.grande .lt-cover { height: 132px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .08); }
.lt-cover img { position: relative; z-index: 1; display: block; width: auto; height: 100%; aspect-ratio: auto 2 / 3; }
.lt-cover.senza { width: 46px; }
.lt-scheda.grande .lt-cover.senza { width: 88px; }
.lt-cover .cover-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lt-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-testa { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.lt-pos { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--riempimento-su); color: var(--testo2); font: 600 11px var(--font-corpo); font-variant-numeric: tabular-nums; }
.lt-pos.medaglia-1 { background: linear-gradient(145deg, #FBE08A, #D9A61E); color: #3D2A00; }
.lt-pos.medaglia-2 { background: linear-gradient(145deg, #EDEFF2, #A9AFB8); color: #26282C; }
.lt-pos.medaglia-3 { background: linear-gradient(145deg, #E8B07C, #B4692B); color: #2E1500; }
.lt-scheda h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font: 500 13px/17px var(--font-corpo); color: var(--testo); }
.lt-scheda:not(.grande) h4 { -webkit-line-clamp: 1; }
.lt-netto { margin-top: 2px; font: 700 17px/22px var(--font-corpo); font-variant-numeric: tabular-nums; }
.lt-scheda.grande .lt-netto { margin-top: 6px; font-size: 22px; line-height: 26px; }
.lt-voci { display: flex; gap: 14px; margin: auto 0 0; font-size: 11px; }
.lt-voci > div { display: flex; gap: 4px; }
.lt-voci dt { font-weight: 400; color: var(--testo3); }
.lt-voci dd { margin: 0; color: var(--testo2); font-variant-numeric: tabular-nums; }

/* ================================================================
   Sesto passaggio: anno intero, news, e un po' di bellezza
   ================================================================ */

/* news a schede sul fondo della pagina */
.pannello:has(> #news-elenco) { padding: 0; background: transparent; box-shadow: none; }
.pannello:has(> #news-elenco) > h3:first-child { font-size: 17px; line-height: 22px; }
.news-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.news-scheda { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: var(--raggio-carta); background: var(--pannello); box-shadow: var(--ombra-carta); overflow: hidden; }
.news-scheda.altra { opacity: .78; }
.news-testa { display: flex; align-items: center; gap: 8px; }
.news-icona .ic { display: block; width: 24px; height: 24px; padding: 5px; box-sizing: border-box; border-radius: 7px; color: #FFFFFF; background: var(--tinta-news, #8E8E93); }
.news-kdp { --tinta-news: #A2845E; } .news-ads { --tinta-news: #5E5CE6; } .news-amazon { --tinta-news: #FF9500; }
.news-fonte { font: 500 12px var(--font-corpo); color: var(--testo2); }
.news-data { margin-left: auto; font-size: 11px; color: var(--testo3); font-variant-numeric: tabular-nums; }
.news-nuova { padding: 1px 7px; border-radius: 999px; background: var(--accento-pieno); color: #FFFFFF; font: 600 10px/15px var(--font-corpo); }
.news-scheda h4 { margin: 2px 0 0; font: 600 15px/20px var(--font-corpo); color: var(--testo); }
.news-riassunto { margin: 0; font-size: 13px; line-height: 18px; color: var(--testo2); }
.news-originale { margin: 0; font-size: 11px; color: var(--testo3); }
.news-piede { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 2px; font-size: 12px; }
.news-testo { white-space: pre-wrap; font-size: 12px; color: var(--testo2); }
.news-archivio { margin-top: 16px; }
.news-archivio > summary { margin-bottom: 10px; font: 500 13px var(--font-corpo); color: var(--testo2); }

/* sfondo: una luce leggera e ferma dietro tutto, cosi' il vetro si vede davvero; nessun costo durante lo scorrimento */
html { background: var(--fondo); }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 6% 0%, rgba(0, 136, 255, .15), transparent 70%),
    radial-gradient(45% 40% at 100% 4%, rgba(0, 200, 179, .13), transparent 70%),
    radial-gradient(50% 45% at 92% 100%, rgba(97, 85, 245, .11), transparent 70%),
    radial-gradient(40% 35% at 2% 100%, rgba(255, 141, 40, .07), transparent 70%); }
:root[data-aspetto="scuro"] body::before { background:
    radial-gradient(55% 45% at 6% 0%, rgba(10, 132, 255, .2), transparent 70%),
    radial-gradient(45% 40% at 100% 4%, rgba(0, 199, 190, .13), transparent 70%),
    radial-gradient(50% 45% at 92% 100%, rgba(94, 92, 230, .2), transparent 70%),
    radial-gradient(40% 35% at 2% 100%, rgba(191, 90, 242, .1), transparent 70%); }
header.testata::before { background: linear-gradient(color-mix(in srgb, var(--fondo) 62%, transparent) 55%, transparent); }
/* la fascia in alto arriva fino al bordo sinistro della finestra, anche sopra la barra laterale: niente stacco */
header.testata::before { left: -252px; }
@media (max-width: 1180px) and (min-width: 901px) { header.testata::before { left: -64px; } }

/* il netto: la cifra sfuma come i titoli delle presentazioni Apple */
.ponte-valore:not(.rosso) { background: linear-gradient(95deg, #0A8F3C, #00877B); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-aspetto="scuro"] .ponte-valore:not(.rosso) { background-image: linear-gradient(95deg, #30D158, #40D9CF); }
.ponte-netto-num .ponte-conf + .ponte-conf { margin-top: 1px; }

/* gli anelli, come in Salute */
.ponte-netto-mezzo { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.anelli { flex: none; width: 64px; height: 64px; transform: rotate(-90deg); }
.anelli[hidden] { display: none; }
.anelli circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.anelli .fondo { opacity: .16; }
.anelli .arco { stroke-dasharray: 0 100; transition: stroke-dasharray 1.1s var(--molla); }

.lt-scheda, .ponte-netto { position: relative; }

/* il bordo vivo, come Siri: mentre un ciclo lavora */
@property --giro-aura { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gira-aura { to { --giro-aura: 360deg; } }
.pannello.aura { position: relative; }
.pannello.aura::before { content: ""; position: absolute; inset: -1.5px; z-index: 0; padding: 1.5px; border-radius: calc(var(--raggio-carta) + 1.5px); pointer-events: none;
  background: conic-gradient(from var(--giro-aura), #0A84FF, #5E5CE6, #BF5AF2, #FF375F, #FF9F0A, #30D158, #40C8E0, #0A84FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gira-aura 5s linear infinite; }

/* la barra del netto: un riflesso che passa una volta */
.ponte-traguardo .binario .fatto { overflow: hidden; }
.ponte-traguardo .binario .fatto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: riflesso 1.5s .8s var(--molla) 1 both; }
@keyframes riflesso { to { transform: translateX(100%); } }

/* copertine con un po' di profondita' al passaggio, schede che salgono scorrendo */
.lt-cover { transition: transform .5s var(--molla-viva), box-shadow .3s; }
.lt-scheda:hover .lt-cover { transform: perspective(500px) rotateY(-9deg) scale(1.03); }
.riga-libro .cover-link:hover .cover { transform: perspective(500px) rotateY(-9deg) scale(1.04); }
@supports (animation-timeline: view()) {
  @keyframes sale-in-vista { from { opacity: .25; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
  .lt-scheda, .news-griglia > .news-scheda, .com-tabelle > .pannello { animation: sale-in-vista linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}

@media (max-width: 900px) {
  .col-anno { display: none; }
  .ponte-netto-mezzo { justify-content: flex-start; }
  .news-griglia { grid-template-columns: minmax(0, 1fr); }
}

/* Dashboard KDP: la proiezione si disegna dopo il riempimento */
.ponte-traguardo .previsto { transition: width .55s var(--molla) .6s; }
@keyframes proiezione-entra { from { opacity: 0; } }
.trag-pista:not(.fermo) .trag-segnale.prev { animation: proiezione-entra .3s ease-out 1.05s backwards; }
.trag-pista.fermo .fatto, .trag-pista.fermo .previsto { transition: none; }
.trag-pista.fermo .fatto::after { display: none; }

/* il ROI arriva al 100%: l'anello chiuso fa un lampo, come sull'Apple Watch */
@keyframes anello-lampo { 40% { transform: rotate(-90deg) scale(1.08); filter: drop-shadow(0 0 7px rgba(var(--verde-rgb), .85)) brightness(1.15); } }
.anelli.chiuso { animation: anello-lampo .8s ease-out 1s 1; }

/* la curva di una tessera si legge giorno per giorno */
.ponte-tessere .spark-mira { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--linea-ff); pointer-events: none; }
.ponte-tessere .spark-mira b { position: absolute; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--pannello); }
.tessera.in-lettura .punto-vivo { opacity: 0; }

/* copertine sempre intere: larghezza fissa, altezza dal formato del libro (6x9 piu' alto, 8,5x11 piu' basso).
   «auto 2 / 3» tiene il posto finche' l'immagine non arriva, poi vale il formato vero */
.riga-libro .cover-link { height: auto; }
.riga-libro img.cover { width: 62px; height: auto; max-height: 93px; aspect-ratio: auto 2 / 3; }
.cru-libro-cella img { width: 26px; height: auto; max-height: 39px; aspect-ratio: auto 2 / 3; }
img.mini-cover { width: 48px; height: auto; max-height: 72px; aspect-ratio: auto 2 / 3; }
.avvisi-campana img.mini-cover { width: 38px; height: auto; max-height: 57px; }
.neg-cover { width: 43px; height: auto; max-height: 65px; aspect-ratio: auto 2 / 3; }
.sl-mini { width: 28px; height: auto; max-height: 42px; aspect-ratio: auto 2 / 3; }
.sl-cover { height: auto; }
.sl-cover:not(:has(img)) { aspect-ratio: 2 / 3; }
.sl-cover img { height: auto; aspect-ratio: auto 2 / 3; }

/* la barra laterale lascia passare lo sfondo: sul computer non le scorre nulla sotto; sul telefono resta il vetro pieno */
@media (min-width: 901px) { .laterale, .laterale.laterale { background: var(--vetro-barra); } }
@media (prefers-reduced-transparency: reduce) { .laterale, .laterale.laterale { background: var(--vetro); } }

/* keyword da archiviare: i gruppi pieni (4 nov 2026) */
.ott-negative-conta.rosso { background: var(--rosso-pieno); color: #FFFFFF; }
.arc-strumenti { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin: 0 0 8px; }
.arc-strumenti .nota { margin: 0; }
.neg-azioni #arc-conta { margin-right: auto; color: var(--testo2); }
td.testo-esatto::first-letter { text-transform: none; }     /* una keyword si legge com'e' su Amazon */
.neg-azioni #arc-conta b { color: var(--testo); }

/* (14 nov 2026) stagione del libro: striscia indicativa (pochi libri) piu' tenue, scelta manuale dal menu Altro */
.striscia-libro.indicativa .striscia-mesi { opacity: .5; }
.scelta-stagione { width: 300px; }
.scelta-stagione .segmentato { display: flex; margin-top: 8px; }
.scelta-stagione .segmentato button { flex: 1; }
.stag-mesi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.stag-mesi button { padding: 6px 0; border: 0; border-radius: 8px; background: var(--riempimento); color: var(--testo); font: 500 12px/1 var(--font-corpo); }
.stag-mesi button.attivo { background: var(--verde-pieno); color: #03210D; font-weight: 600; }
.stag-azioni { display: flex; justify-content: flex-end; margin-top: 6px; }

/* (14 nov 2026) libri archiviati: copertine intere e piccole, tasto «Rimetti» a destra */
.lib-archivio { margin: 0 0 14px; }
.lib-archivio h3 { margin-bottom: 8px; }
.arc-libro { display: flex; align-items: center; gap: 10px; min-width: 0; }
.arc-libro img.mini { width: 30px; height: auto; aspect-ratio: auto 2 / 3; border-radius: 3px; flex: none; }
.arc-libro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.lib-arc-tabella td.d { text-align: right; }
.lib-tasto-archivio { margin-left: 10px; vertical-align: middle; }
.lib-tasto-archivio .conta { margin-left: 4px; color: var(--testo3); font-variant-numeric: tabular-nums; }
.lib-tasto-archivio.attivo { background: var(--riempimento-su); }

/* Libreria, pop-up «Nicchia» (14 nov 2026): le sue keyword sopra, i termini che vendono sotto */
.scelta-nicchia { width: 460px; max-width: calc(100vw - 16px); max-height: min(80vh, 640px); overflow: hidden auto; padding-bottom: 10px; }
.scelta-nicchia .nic-sez { padding: 10px 6px; border-top: var(--filo); }
.scelta-nicchia .cal-testa + .nic-sez { border-top: 0; padding-top: 2px; }
.scelta-nicchia .nic-eti { margin-bottom: 8px; font: 600 13px/18px var(--font-corpo); color: var(--testo); }
.scelta-nicchia .nic-eti span { display: block; margin-top: 1px; font: 400 11px/15px var(--font-corpo); color: var(--testo2); }
.scelta-nicchia .nic-input { width: 100%; }
.scelta-nicchia .stag-azioni { gap: 8px; margin-top: 8px; }
.scelta-nicchia .nic-termini { width: 100%; font-size: 12px; table-layout: auto; }
.scelta-nicchia .nic-termini th, .scelta-nicchia .nic-termini td { padding: 5px 6px; }
.scelta-nicchia .nic-termini td:first-child { white-space: normal; overflow-wrap: anywhere; }
.scelta-nicchia .nic-termini td.azione { width: 1%; text-align: right; white-space: nowrap; }
.scelta-nicchia .nota, .scelta-nicchia .nic-testo { margin: 6px 0 0; font: 400 12px/17px var(--font-corpo); color: var(--testo2); }
.scelta-nicchia .nic-sez:last-child .nic-testo { margin-top: 0; color: var(--testo); }

/* Scheda del libro (14 nov 2026): le campagne dove vanno keyword e prodotti spuntati, tutte quelle del libro */
.sl-sugg-testa .sl-dest-elenco { flex-basis: 100%; margin: 0; font-size: 11px; line-height: 16px; color: var(--testo2); }

/* Barra laterale, il programma dei lavori (14 nov 2026): sotto Oggi/Token/KDP/Ads, sopra il nome.
   In corso: capsula gialla che pulsa e barra che avanza; finito: «Fatto» verde e la riga si chiude */
.lat-programma { margin-top: 8px; padding: 7px 9px 2px; border-radius: 10px; background: rgba(var(--riempi-rgb), .055); }
.lat-programma[hidden] { display: none; }
.prog-testa { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
.prog-titolo { font: 600 11px/14px var(--font-corpo); color: var(--testo2); }
.prog-stato { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font: 600 10.5px/1 var(--font-corpo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .3s, color .3s; }
.prog-stato:empty { display: none; }
.prog-stato.libero { background: rgba(var(--verde-rgb), .16); color: var(--verde); }
.prog-stato.aspetta { background: rgba(var(--giallo-rgb), .22); color: var(--giallo); }
.prog-stato.manutenzione { background: rgba(var(--accento-rgb), .14); color: var(--accento); }
.prog-lista { list-style: none; margin: 0; padding: 0 0 8px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); }
.prog-lista > li { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; column-gap: 6px; max-height: 64px; padding: 4px 0; border-bottom: .5px solid var(--linea);
  transition: opacity .35s, transform .35s var(--molla), max-height .4s var(--molla), padding .4s var(--molla), border-color .4s; }
.prog-ora { align-self: start; padding-top: 1px; font: 500 11px/15px var(--font-corpo); font-variant-numeric: tabular-nums; color: var(--testo2); }
.prog-nome { min-width: 0; font: 500 11.5px/15px var(--font-corpo); color: var(--testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-nome small { display: block; font: 400 10.5px/13px var(--font-corpo); color: var(--testo2); overflow: hidden; text-overflow: ellipsis; }
.prog-fra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog-lista > li.leggera .prog-nome { color: var(--testo2); }
.prog-lista > li.leggera .prog-nome small, .prog-lista > li.leggera .prog-ora { color: var(--testo3); }
.prog-pill { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px; border-radius: 9px; background: rgba(var(--giallo-rgb), .24); color: var(--giallo);
  font: 600 10.5px/1 var(--font-corpo); white-space: nowrap; animation: prog-pill-entra .45s var(--molla-viva); }
.prog-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--giallo-pieno); animation: prog-pulsa 1.4s ease-in-out infinite; }
.prog-pill.fatto { background: rgba(var(--verde-rgb), .18); color: var(--verde); }
.prog-pill .ic { width: 10px; height: 10px; }
.prog-barra { grid-column: 2 / -1; height: 3px; margin-top: 4px; border-radius: 2px; background: rgba(var(--giallo-rgb), .2); overflow: hidden; }
.prog-barra b { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; background: var(--giallo-pieno); overflow: hidden; transition: width 1s linear, background-color .3s; }
.prog-barra b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); animation: prog-scorre 1.6s ease-in-out infinite; }
.prog-lista > li.finita .prog-barra b { width: 100% !important; background: var(--verde-pieno); }
.prog-lista > li.finita .prog-barra b::after { animation: none; }
.prog-lista > li.entra { animation: prog-entra .45s var(--molla) both; }
.prog-lista > li.via { max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; opacity: 0; transform: translateX(10px); overflow: hidden; }
.prog-lista > li.prog-giorno { display: block; padding: 6px 0 1px; border-bottom: 0; font: 600 10.5px/13px var(--font-corpo); color: var(--testo2); }
.prog-lista > li.prog-vuoto { display: block; padding: 6px 0; border-bottom: 0; font-size: 11px; color: var(--testo2); }
/* il menu resta intero e prende lo spazio libero (Chiaro/Scuro e il riquadro restano in fondo, attaccati);
   nelle finestre basse si accorcia solo la lista del programma, fino a una riga */
@media (min-width: 1181px) {
  .laterale nav { flex: 1 0 auto; }
  .cartiglio { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .cartiglio > * { flex-shrink: 0; }
  .cartiglio > .lat-programma:not([hidden]) { flex: 0 1 auto; min-height: 72px; display: flex; flex-direction: column; overflow: hidden; }
  .lat-programma .prog-lista { flex: 0 1 auto; min-height: 0; }
}
/* finestre basse: il menu un po' piu' fitto, cosi' ci stanno tutto e il tuo nome in fondo */
@media (min-width: 1181px) and (max-height: 820px) {
  .laterale nav button[data-vista] { height: 27px; }
  .nav-sezione { padding: 8px 8px 3px; }
  .marchio { padding-top: 12px; padding-bottom: 4px; }
}
@media (min-width: 1181px) and (max-height: 700px) {
  .laterale nav { flex: 1 1 auto; min-height: 0; }      /* ultima risorsa: il menu scorre */
  .lat-programma .prog-lista { max-height: 42px; }        /* e del programma resta una riga */
  .cartiglio { flex-shrink: 0; }
}
@keyframes prog-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes prog-pulsa { 50% { opacity: .35; transform: scale(.7); } }
@keyframes prog-scorre { to { transform: translateX(100%); } }
@keyframes prog-pill-entra { from { opacity: 0; transform: scale(.6); } }

/* Riduci movimento: niente molle, niente scivolamenti, solo stati che cambiano */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}