:root {
  --sfondo: #141110;
  --pannello: #1e1a16;
  --pannello2: #2a231c;
  --bordo: #3e352b;
  --testo: #ece3d6;
  --testo2: #a5967f;
  --accento: #e0a35c;
  --verde: #93b968;
  --giallo: #e3b459;
  --rosso: #dd7250;
  --blu: #cba873;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}
a { color: var(--accento); }

header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--bordo);
  background: var(--pannello);
  position: sticky; top: 0; z-index: 10;
  flex-wrap: wrap;
}
header h1 { font-size: 18px; margin: 0; letter-spacing: .3px; }
header h1 span { color: var(--accento); }
#badge-token {
  margin-left: auto; font-size: 12.5px; color: var(--testo2);
  background: var(--pannello2); border: 1px solid var(--bordo);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav button {
  background: none; border: none; color: var(--testo2);
  font: inherit; font-size: 14px; padding: 8px 13px; cursor: pointer;
  border-radius: 8px;
}
nav button:hover { color: var(--testo); background: var(--pannello2); }
nav button.attiva { color: #221a0e; background: var(--accento); font-weight: 600; }

main { max-width: 1220px; margin: 0 auto; padding: 22px 24px 80px; }
@media (min-width: 1500px) { main { max-width: 1780px; } }
.guida { max-width: 1150px; margin: 0 auto; }
.vista { display: none; }
.vista.attiva { display: block; }

/* ---------- form ---------- */
.pannello {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 18px;
}
.griglia-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--testo2); }
input, select, textarea {
  background: var(--pannello2); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 14px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento); outline-offset: -1px; }
textarea { font-family: Consolas, monospace; font-size: 12.5px; }

.bottone {
  background: var(--accento); color: #221a0e; border: none;
  font: inherit; font-weight: 700; font-size: 15px;
  padding: 12px 26px; border-radius: 10px; cursor: pointer;
}
.bottone:hover { filter: brightness(1.08); }
.bottone:disabled { opacity: .5; cursor: wait; }
.bottone.secondario {
  background: var(--pannello2); color: var(--testo);
  border: 1px solid var(--bordo); font-weight: 500;
}
.bottone.piccolo { padding: 6px 14px; font-size: 13px; }
.bottone.rosso { background: none; border: 1px solid var(--rosso); color: var(--rosso); }

details.avanzate { margin-top: 14px; }
details.avanzate summary { cursor: pointer; color: var(--testo2); font-size: 13.5px; user-select: none; }
details.avanzate .griglia-form { margin-top: 14px; }

#caricamento { display: none; align-items: center; gap: 14px; padding: 26px 6px; color: var(--testo2); }
#caricamento.visibile { display: flex; }
.rotella {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--bordo); border-top-color: var(--accento);
  animation: gira 0.9s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.avviso {
  border: 1px solid var(--rosso); background: rgba(221, 114, 80, .09);
  color: var(--rosso); border-radius: 10px; padding: 12px 16px; margin: 14px 0;
  display: none; white-space: pre-wrap;
}
.avviso.visibile { display: block; }

/* ---------- scanner ---------- */
.riga-profilo {
  font-size: 13px; color: var(--testo2);
  background: var(--pannello2); border: 1px dashed var(--bordo);
  border-radius: 10px; padding: 10px 14px; margin-top: 14px;
}
.riga-profilo b { color: var(--accento); }

#progresso-scan { display: none; }
#progresso-scan.visibile { display: block; }
.binario-progresso {
  height: 14px; background: var(--pannello2); border-radius: 8px;
  overflow: hidden; border: 1px solid var(--bordo);
}
.riempi-progresso {
  height: 100%; background: var(--accento); width: 0;
  transition: width .5s ease; border-radius: 8px;
}
.info-progresso { display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--testo2); margin-top: 8px; flex-wrap: wrap; }

tr.riga-scan { cursor: pointer; }
tr.riga-scan.selezionata td { background: var(--pannello2); }

.etichetta-esito {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 10px; border-radius: 999px;
}

/* ---------- risultati ---------- */
.testata-risultato { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.blocco-verdetto { flex: 1; min-width: 260px; }
.etichetta-verdetto {
  display: inline-block; font-size: 26px; font-weight: 800;
  padding: 6px 20px; border-radius: 10px; letter-spacing: 1px;
}
.verde  { color: var(--verde); }  .fondo-verde  { background: rgba(147,185,104,.13); }
.giallo { color: var(--giallo); } .fondo-giallo { background: rgba(227,180,89,.13); }
.rosso  { color: var(--rosso); }  .fondo-rosso  { background: rgba(221,114,80,.13); }
.neutro { color: var(--testo2); } .fondo-neutro { background: var(--pannello2); }
.blu { color: var(--blu); }

.badge-matrice {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700;
  border-radius: 999px; padding: 4px 14px; border: 1px solid var(--bordo);
}

.barre-punteggi { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.riga-barra { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: 10px; font-size: 13px; }
.riga-barra .nome { color: var(--testo2); }
.binario { height: 9px; background: var(--pannello2); border-radius: 6px; overflow: hidden; }
.riempimento { height: 100%; border-radius: 6px; transition: width .6s ease; }

.griglia-schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-top: 18px; }
.scheda {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: 14px; padding: 18px 20px;
}
.scheda h3 { margin: 0 0 12px; font-size: 15px; color: var(--accento); display: flex; justify-content: space-between; align-items: center; }
.scheda h3 .mini-punteggio { font-size: 12px; color: var(--testo2); font-weight: 500; }
.metrica { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed rgba(62,53,43,.7); font-size: 13.8px; }
.metrica:last-child { border-bottom: none; }
.metrica .nome { color: var(--testo2); }
.metrica .valore { font-weight: 600; text-align: right; }
.nota { font-size: 12.5px; color: var(--testo2); margin-top: 10px; }

.liste-esito { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }
.lista-blocco { border-radius: 14px; padding: 16px 18px; border: 1px solid var(--bordo); background: var(--pannello); }
.lista-blocco h4 { margin: 0 0 8px; font-size: 13.5px; letter-spacing: .4px; text-transform: uppercase; }
.lista-blocco ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.lista-blocco li { margin-bottom: 6px; }

table.dati { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dati th, table.dati td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--bordo); }
table.dati th { color: var(--testo2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
table.dati td.num, table.dati th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dati tr:hover td { background: var(--pannello2); }
.contenitore-tabella { overflow-x: auto; }
.titolo-competitor { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.azioni-risultato { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ---------- storico ---------- */
.punto-esito { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }
.punto-verde { background: var(--verde); } .punto-giallo { background: var(--giallo); }
.punto-rosso { background: var(--rosso); } .punto-neutro { background: var(--testo2); }

.riquadro-cpc {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
  border: 1px solid var(--accento); border-radius: 12px;
  padding: 14px 18px; margin-top: 16px; background: rgba(224,163,92,.06);
}
.riquadro-cpc label.campo { max-width: 220px; }

/* ---------- i miei libri ---------- */
.griglia-libri { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1499px) { .griglia-libri { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 950px) { .griglia-libri { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .griglia-libri { grid-template-columns: repeat(2, 1fr); } }
.carta-libro {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 9px;
}
.copertina-libro {
  width: 100%; height: 210px; object-fit: contain;
  background: var(--pannello2); border-radius: 8px;
}
.copertina-vuota {
  width: 100%; height: 210px; display: flex; align-items: center; justify-content: center;
  background: var(--pannello2); border-radius: 8px; color: var(--testo2); font-size: 38px;
}
.titolo-libro {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.statistiche-libro {
  display: grid; grid-template-columns: 1.35fr 1fr 0.85fr; gap: 6px;
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 9px 6px;
}
.stat { text-align: center; min-width: 0; }
.stat .valore {
  display: block; font-size: 18px; font-weight: 800; line-height: 1.15;
  color: var(--accento); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.stat .stella { font-size: 13px; color: var(--giallo); }
.stat .nome {
  display: block; font-size: 9.5px; letter-spacing: .8px;
  color: var(--testo2); text-transform: uppercase; margin-top: 2px;
}
.riga-mini {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--testo);
}
.riga-elimina { margin-top: 2px; }
.elimina-libro {
  background: none; border: none; color: var(--testo2); cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 6px;
}
.elimina-libro:hover { color: var(--rosso); background: rgba(221,114,80,.10); }
.striscia-mesi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.mese-blocco {
  height: 22px; border-radius: 4px; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; color: rgba(20,17,16,.85);
}
.mese-verde { background: var(--verde); }
.mese-giallo { background: var(--giallo); }
.mese-rosso { background: var(--rosso); }
.mese-grigio { background: var(--pannello2); color: var(--testo2); }
/* scala stagionale: 5 colori semaforo ben distinti + "spento" */
.mese-verde2 { background: #1f9d55; color: #eafbf1; }   /* top: verde pieno */
.mese-verde1 { background: #9ccc65; color: #24310f; }   /* buono: verde chiaro */
.mese-giallo1 { background: #f4c542; color: #3a2c05; }  /* medio: giallo acceso */
.mese-giallo2 { background: #e8822e; color: #341c05; }  /* sotto media: arancione */
.mese-rosso1 { background: #d64533; color: #fbe9e5; }   /* basso: rosso */
.mese-rosso2 {                                          /* quasi morto: SPENTO */
  background: #191512; color: rgba(165,150,127,.45);
  border: 1px dashed var(--bordo);
}
.legenda-mesi { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.legenda-mesi .mese-blocco { height: 18px; padding: 0 7px; font-size: 10px; }
.badge-evergreen {
  font-size: 9px; font-weight: 700; color: var(--verde);
  border: 1px solid var(--verde); border-radius: 999px; padding: 0 7px;
  white-space: nowrap;
}
.azioni-libro { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.azioni-libro .bottone { padding: 4px 8px; font-size: 12px; }
.badge-mercato {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  border-radius: 999px; padding: 2px 10px; border: 1.5px solid;
  width: fit-content;
}
.lingua-en { color: #e8b061; border-color: #e8b061; background: rgba(232,176,97,.10); }
.lingua-de { color: #93b968; border-color: #93b968; background: rgba(147,185,104,.10); }
.lingua-fr { color: #7fb3d5; border-color: #7fb3d5; background: rgba(127,179,213,.10); }
.lingua-es { color: #dd7250; border-color: #dd7250; background: rgba(221,114,80,.10); }
.lingua-it { color: #b8a1d9; border-color: #b8a1d9; background: rgba(184,161,217,.10); }
.intestazione-mercato {
  grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--accento);
  border-bottom: 1px solid var(--bordo); padding: 10px 2px 6px; letter-spacing: .4px;
}
.carta-libro.trascinabile { cursor: grab; }
.carta-libro.trascinabile:active { cursor: grabbing; }
.carta-libro.sopra-drop { outline: 2px dashed var(--accento); outline-offset: 3px; }

/* ---------- guida ---------- */
.guida h2 { color: var(--accento); font-size: 17px; margin-top: 26px; }
.guida p, .guida li { font-size: 14px; }
.guida .pannello { margin-bottom: 14px; }
code { background: var(--pannello2); border-radius: 5px; padding: 1px 6px; font-size: 13px; }

@media (max-width: 720px) {
  header { padding: 12px 14px; }
  main { padding: 16px 14px 60px; }
}

/* ---------------- Cruscotto Ads ---------------- */
.cru-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px; margin-top: 14px;
}
.cru-kpi .tessera {
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 10px 12px; text-align: center;
}
.cru-kpi .tessera .valore {
  font-size: 21px; font-weight: 700; color: var(--testo);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cru-kpi .tessera .valore.accento { color: var(--accento); }
.cru-kpi .tessera .valore.verde { color: var(--verde); }
.cru-kpi .tessera .nome {
  font-size: 11.5px; color: var(--testo2); text-transform: uppercase;
  letter-spacing: .4px; margin-top: 2px;
}
#cru-tab-libri td, #cru-tab-account td { white-space: nowrap; }
.cru-libro-cella { display: flex; align-items: center; gap: 8px; }
.cru-libro-cella img {
  width: 26px; height: 38px; object-fit: cover; border-radius: 3px;
  border: 1px solid var(--bordo); flex: none;
}
.cru-libro-cella .titolo-libro {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cru-tab-libri th[data-campo], #cru-tab-account th[data-campo] {
  cursor: pointer; user-select: none; white-space: nowrap;
}
#cru-tab-libri th[data-campo]:hover, #cru-tab-account th[data-campo]:hover {
  color: var(--accento);
}
#cru-tab-libri th.ordinata, #cru-tab-account th.ordinata { color: var(--accento); }
#cru-tab-libri th .freccia, #cru-tab-account th .freccia {
  margin-left: 4px; font-size: 10px;
}
#cru-tooltip {
  position: absolute; z-index: 6; pointer-events: none;
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); white-space: nowrap;
}
#cru-tooltip .accento { color: var(--accento); }

/* ---------------- nav a tendina (Ricerca KW) ---------------- */
.nav-gruppo { position: relative; display: inline-block; }
.nav-gruppo .nav-capo::after { content: ""; }
.nav-tendina {
  display: none; position: absolute; top: 100%; left: 0; z-index: 30;
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 6px; min-width: 150px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.nav-gruppo.aperta .nav-tendina { display: block; }
.nav-tendina button {
  display: block; width: 100%; text-align: left; border-radius: 7px;
}

/* ---------------- Ponte di Comando ---------------- */
.comando-corpo {
  display: grid; grid-template-columns: minmax(260px, 1.2fr) 2fr;
  gap: 22px; align-items: center;
}
@media (max-width: 900px) { .comando-corpo { grid-template-columns: 1fr; } }
.comando-testata-mese {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; margin-bottom: 18px;
}
.mese-pillola {
  width: auto; min-width: 200px; text-align: center;
  font-size: 15px; font-weight: 600; letter-spacing: .4px;
  color: var(--accento); background: var(--pannello2);
  border: 1px solid var(--bordo); border-radius: 999px;
  padding: 8px 20px; cursor: pointer; transition: border-color .15s;
}
.mese-pillola:hover { border-color: var(--accento); }
.mese-freccia {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pannello2); border: 1px solid var(--bordo);
  color: var(--testo2); font-size: 18px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.mese-freccia:hover:not(:disabled) { color: var(--accento); border-color: var(--accento); }
.mese-freccia:disabled { opacity: .35; cursor: default; }
.comando-netto { text-align: center; padding: 8px 0; }
.comando-netto .nome {
  font-size: 12px; letter-spacing: 1.6px; color: var(--testo2);
}
.comando-netto .valore {
  font-size: 52px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  animation: comando-entra .5s ease-out;
}
.comando-grandi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.comando-carta {
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 12px; padding: 14px 12px; text-align: center;
  animation: comando-entra .6s ease-out;
}
.comando-carta .valore {
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.comando-carta .nome {
  font-size: 11.5px; color: var(--testo2); text-transform: uppercase;
  letter-spacing: .5px; margin-top: 3px;
}
.comando-riga {
  display: grid; grid-template-columns: 3fr 2fr; gap: 16px;
}
@media (max-width: 900px) { .comando-riga { grid-template-columns: 1fr; } }
.comando-mini-griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 10px;
}
.comando-mini {
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 9px 10px; text-align: center;
}
.comando-mini .valore {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.comando-mini.grande .valore { font-size: 27px; }
.comando-mini .nome { font-size: 11px; color: var(--testo2); margin-top: 2px; }
@keyframes comando-entra {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
#com-tooltip {
  position: absolute; z-index: 6; pointer-events: none;
  background: var(--pannello2); border: 1px solid var(--bordo);
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); white-space: nowrap;
}
.comando-netto .nome select {
  width: auto; font-size: 13px; padding: 4px 8px;
}
.mese-pillola {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  text-transform: uppercase; text-align: center; text-align-last: center;
  background-image: none;
}
.mese-pillola.secondaria {
  color: var(--testo2); font-weight: 500; min-width: 170px;
  margin-left: 14px; text-transform: none;
}
.mese-pillola.secondaria:hover { color: var(--accento); }
header h1 .sotto-titolo {
  font-size: 11px; font-weight: 400; color: var(--testo2);
  letter-spacing: 2.2px; text-transform: uppercase; margin-left: 8px;
}
#cru-tab-account .esp {
  background: none; border: 1px solid var(--bordo); color: var(--testo2);
  border-radius: 6px; width: 22px; height: 22px; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0; margin-right: 4px;
}
#cru-tab-account .esp:hover { color: var(--accento); border-color: var(--accento); }
#cru-tab-account .riga-mercato td { background: rgba(42, 35, 28, .45); }
#cru-tab-account .sotto-conto { padding-left: 26px; color: var(--testo2); }

/* valori modificabili nelle carte libro */
.modificabile {
  cursor: pointer; border-bottom: 1px dotted var(--testo2);
}
.modificabile:hover { color: var(--accento); border-bottom-color: var(--accento); }

/* pillola account del Ponte: stessa dignita' della pillola mese */
.mese-pillola.secondaria {
  min-width: 200px; margin-left: 18px;
  font-size: 14px; font-weight: 600; color: var(--testo);
  padding: 8px 18px;
}
.mese-pillola.secondaria:hover { color: var(--accento); }
.riga-mini { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* righe di form allineate in basso (campi e bottoni alla stessa quota) */
.riga-form {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
}
.riga-form .campo { min-width: 0; }
.riga-form .riga-bottone { height: 41px; padding: 0 22px; white-space: nowrap; }
.campo.orizzontale { flex-direction: row; align-items: center; gap: 10px; white-space: nowrap; }
label.campo > .bottone { width: 100%; }

/* voci leggibili nelle tendine a pillola del Ponte */
.mese-pillola option, .mese-pillola optgroup {
  text-align: left; text-transform: none;
  color: var(--testo); font-weight: 400; background: var(--pannello2);
}
.mese-pillola optgroup { color: var(--testo2); font-weight: 600; }
.bottone-gemello { width: 178px; padding: 0 10px; text-align: center; }

/* ================================================================
   SKIN JARVIS AMBRA — direzione approvata dall'utente sul canvas.
   HUD olografico caldo: pannelli traslucidi con staffe angolari,
   reattore ad anelli nel Ponte, monospazio tecnico per le etichette.
   ================================================================ */
:root {
  color-scheme: dark;   /* tendine, scrollbar e controlli nativi scuri */
  --sfondo: #0b0a08;
  --pannello: #14100c;
  --pannello2: #1b1510;
  --bordo: rgba(224, 163, 92, 0.16);
  --testo: #e6d9c3;
  --testo2: #8a7860;
  --verde: #b9d694;
  --rosso: #e08b6d;
  --oro-scuro: #776a55;
}
.mono { font-family: 'Share Tech Mono', Consolas, monospace; }
body {
  font-family: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  background:
    radial-gradient(1300px 900px at 50% 40%, transparent 55%, rgba(5, 4, 3, 0.6)),
    linear-gradient(rgba(224, 163, 92, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 163, 92, 0.02) 1px, transparent 1px),
    radial-gradient(1150px 720px at 40% 30%, #16110d, #0b0a08 72%);
  background-size: auto, 52px 52px, 52px 52px, auto;
  background-attachment: fixed;
}
header {
  background: rgba(20, 16, 12, 0.85);
  border-bottom: 1px solid rgba(224, 163, 92, 0.28);
  backdrop-filter: blur(6px);
}
header h1 { letter-spacing: 6px; font-weight: 600; }
header h1 .sotto-titolo { letter-spacing: 3px; }
#badge-token {
  font-family: 'Share Tech Mono', Consolas, monospace; font-size: 12.5px;
  background: rgba(224, 163, 92, 0.05); border-color: var(--bordo);
  border-radius: 0;
}
nav button {
  letter-spacing: 2px; font-weight: 300; font-size: 14.5px;
  border-radius: 0; position: relative; color: var(--oro-scuro);
}
nav button:hover { background: rgba(224, 163, 92, 0.06); color: var(--testo); }
nav button.attiva { background: none; color: var(--accento); font-weight: 400; }
nav button.attiva::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accento), transparent);
  box-shadow: 0 0 12px rgba(224, 163, 92, 0.7);
}
.nav-capo { letter-spacing: 2px; font-weight: 300; font-size: 13px; border-radius: 0; }
.nav-tendina { border-radius: 0; background: #16110d; border-color: rgba(224, 163, 92, 0.25); }

.pannello {
  background: linear-gradient(160deg, rgba(224, 163, 92, 0.055), rgba(224, 163, 92, 0.015));
  border: 1px solid var(--bordo); border-radius: 0; position: relative;
}
.pannello::before, .modulo::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 12px; height: 12px;
  border-left: 1px solid rgba(224, 163, 92, 0.85); border-top: 1px solid rgba(224, 163, 92, 0.85);
}
.pannello::after, .modulo::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-right: 1px solid rgba(224, 163, 92, 0.85); border-bottom: 1px solid rgba(224, 163, 92, 0.85);
}
h3 {
  font-family: 'Share Tech Mono', Consolas, monospace; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: #bcab90; font-weight: 400;
}
input, select, textarea {
  background: rgba(224, 163, 92, 0.05); border: 1px solid rgba(224, 163, 92, 0.22);
  border-radius: 0; color: var(--testo);
}
/* la LISTA aperta delle tendine e' un controllo nativo: senza sfondo
   esplicito resta bianca con testo chiaro (illeggibile) */
select option, select optgroup {
  background-color: #1b1510; color: var(--testo);
}
.bottone { border-radius: 0; letter-spacing: 1.5px; box-shadow: 0 0 18px rgba(224, 163, 92, 0.15); }
.bottone.secondario {
  background: rgba(224, 163, 92, 0.05); border-color: rgba(224, 163, 92, 0.3);
  color: var(--testo);
}
table.dati th {
  font-family: 'Share Tech Mono', Consolas, monospace; font-size: 9.5px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--testo2);
}
table.dati th, table.dati td { border-bottom: 1px solid rgba(224, 163, 92, 0.1); }
.carta-libro { border-radius: 0; border-color: var(--bordo); }
#cru-tooltip, #com-tooltip {
  border-radius: 0; background: rgba(22, 17, 13, 0.95);
  border: 1px solid rgba(224, 163, 92, 0.35); backdrop-filter: blur(4px);
}
.mese-pillola {
  font-family: 'Share Tech Mono', Consolas, monospace; font-size: 13px;
  letter-spacing: 5px; color: var(--accento); background: transparent;
  border: 1px solid rgba(224, 163, 92, 0.5); border-radius: 0;
  box-shadow: inset 0 0 18px rgba(224, 163, 92, 0.05), 0 0 20px rgba(224, 163, 92, 0.08);
  text-transform: uppercase; text-align: center; text-align-last: center;
  padding: 10px 22px;
}
.mese-pillola.secondaria {
  letter-spacing: 2px; font-size: 13.5px; color: #cdbda2;
  border-color: var(--bordo); box-shadow: none; text-transform: none;
}
.mese-freccia { border-radius: 0; border-color: rgba(224, 163, 92, 0.3); background: transparent; }
/* colori delle metriche Ads: spesa rossa, lordo giallo, royalty verde,
   netto verde acceso (il numero che conta davvero) */
.num.giallo, .valore.giallo { color: #e3c878; }
.num.verde-vivo, .valore.verde-vivo {
  color: #d9f2a9; text-shadow: 0 0 10px rgba(160, 200, 110, 0.35);
}
/* le tessere KPI hanno una regola piu' specifica: si ribadisce qui */
.cru-kpi .tessera .valore.rosso { color: var(--rosso); }
.cru-kpi .tessera .valore.giallo { color: #e3c878; }
.cru-kpi .tessera .valore.verde { color: var(--verde); }
.cru-kpi .tessera .valore.verde-vivo {
  color: #d9f2a9; text-shadow: 0 0 10px rgba(160, 200, 110, 0.35);
}
.cru-kpi .tessera .valore { font-size: 23px; }
.cru-kpi .tessera .nome { font-size: 13px; }
.bottone-quote {
  cursor: pointer; font-family: 'Share Tech Mono', Consolas, monospace;
  color: var(--verde); border-color: rgba(147, 185, 104, 0.35);
}
.bottone-quote:hover { background: rgba(147, 185, 104, 0.08); }
.bottone-quote.quote-spente {
  color: var(--accento); border-color: rgba(224, 163, 92, 0.45);
  background: rgba(224, 163, 92, 0.07);
}
.bottone-quote.quote-spente:hover { background: rgba(224, 163, 92, 0.12); }

/* ---- accessi: schermata di login e modalita' ospite ---- */
#schermo-login {
  position: fixed; inset: 0; z-index: 100;
  background: var(--sfondo);
  display: flex; align-items: center; justify-content: center;
}
#schermo-login form {
  width: 340px; padding: 30px 34px; display: flex;
  flex-direction: column; gap: 14px;
}
#schermo-login h3 { margin: 0 0 4px 0; letter-spacing: 4px; }
#schermo-login input { height: 40px; padding: 0 12px; width: 100%; }
#bottone-esci { height: 34px; padding: 0 14px; margin-left: 10px; }
body.ospite .solo-admin { display: none !important; }
body.ospite #badge-token { display: none; }

/* testata Amazon ADS: controlli tutti della stessa altezza, quote a destra */
#vista-cruscotto .pannello select, #vista-cruscotto .pannello input[list] {
  height: 40px; padding: 0 12px; font-size: 14px;
}
#vista-cruscotto .bottone.piccolo {
  height: 40px; padding: 0 18px; font-size: 13.5px; letter-spacing: 1px;
}
#cru-quote { margin-left: auto; height: 40px; padding: 0 18px; }

/* ---------------- Ponte: griglia JARVIS ---------------- */
.jarvis-griglia {
  display: grid; grid-template-columns: 260px minmax(560px, 1fr) 320px;
  gap: 26px; align-items: center; margin: 6px 0 18px 0;
}
@media (max-width: 1350px) {
  .jarvis-griglia { grid-template-columns: 240px minmax(460px, 1fr) 300px; }
}
@media (max-width: 1100px) { .jarvis-griglia { grid-template-columns: 1fr; } }
.jarvis-col { display: flex; flex-direction: column; gap: 18px; }
.modulo {
  position: relative; padding: 12px 16px 11px 16px;
  background: linear-gradient(160deg, rgba(224, 163, 92, 0.055), rgba(224, 163, 92, 0.015));
  border: 1px solid var(--bordo);
}
.modulo.bordo-verde { border-left: 2px solid rgba(147, 185, 104, 0.9); }
.modulo.bordo-rosso { border-left: 2px solid rgba(221, 114, 80, 0.9); }
.modulo.bordo-oro { border-left: 2px solid rgba(224, 163, 92, 0.8); }
.modulo-eti { font-size: 13.5px; letter-spacing: 3px; color: #b3a186; }
.modulo-eti.oro { color: var(--accento); }
.modulo-val { font-weight: 300; font-size: 38px; line-height: 1.25; }
.modulo-barra { height: 3px; background: rgba(224, 163, 92, 0.1); margin-top: 5px; }
.modulo-barra > div { height: 100%; width: 0; transition: width .8s ease; }
.modulo-barra .fondo-v, .fondo-v { background: linear-gradient(to right, rgba(147, 185, 104, 0.4), var(--verde)); }
.modulo-barra .fondo-r, .fondo-r { background: linear-gradient(to right, rgba(221, 114, 80, 0.4), var(--rosso)); }
.modulo-sotto { font-size: 14.5px; color: #b3a186; margin-top: 6px; letter-spacing: 1px; }

.reattore-zona { display: flex; justify-content: center; }
.reattore { position: relative; width: 560px; height: 560px; }
@media (max-width: 1350px) { .reattore { width: 460px; height: 460px; } }
.anello { position: absolute; border-radius: 50%; pointer-events: none; }
.a-tacche-est {
  inset: -14px; opacity: .5;
  background: repeating-conic-gradient(rgba(224, 163, 92, 0.5) 0deg 0.5deg, transparent 0.5deg 3deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 4px), #000 calc(50% - 1px), transparent 50%);
}
.a-archi {
  inset: 0; animation: gira-lento 32s linear infinite;
  background: conic-gradient(from 20deg, rgba(224, 163, 92, 0.6) 0 62deg, transparent 62deg 98deg, rgba(224, 163, 92, 0.28) 98deg 168deg, transparent 168deg 208deg, rgba(224, 163, 92, 0.45) 208deg 318deg, transparent 318deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 6px), #000 calc(50% - 5px), #000 calc(50% - 2px), transparent calc(50% - 1px));
  mask: radial-gradient(circle, transparent calc(50% - 6px), #000 calc(50% - 5px), #000 calc(50% - 2px), transparent calc(50% - 1px));
}
.orbita { position: absolute; inset: 0; animation: gira-lento 32s linear infinite; pointer-events: none; }
.orbita .satellite {
  position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%; background: var(--accento); box-shadow: 0 0 12px rgba(224, 163, 92, 0.9);
}
.a-tacche {
  inset: 16px; animation: gira-inverso 70s linear infinite;
  background: repeating-conic-gradient(rgba(224, 163, 92, 0.55) 0deg 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 10px), #000 calc(50% - 9px), #000 calc(50% - 2px), transparent calc(50% - 1px));
  mask: radial-gradient(circle, transparent calc(50% - 10px), #000 calc(50% - 9px), #000 calc(50% - 2px), transparent calc(50% - 1px));
}
.a-quad {
  inset: 16px; animation: gira-inverso 70s linear infinite;
  background: repeating-conic-gradient(rgba(224, 163, 92, 0.75) 0deg 1.6deg, transparent 1.6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 16px), #000 calc(50% - 15px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 16px), #000 calc(50% - 15px), #000 calc(50% - 1px), transparent 50%);
}
.a-tratt { inset: 46px; border: 1px dashed rgba(224, 163, 92, 0.28); animation: gira-lento 110s linear infinite; }
.sweep {
  inset: 34px; animation: gira-lento 9s linear infinite;
  background: conic-gradient(rgba(224, 163, 92, 0.14), transparent 58deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%, #000 98%, transparent 99%);
  mask: radial-gradient(circle, transparent 42%, #000 43%, #000 98%, transparent 99%);
}
.arco-mese {
  inset: 64px; filter: drop-shadow(0 0 6px rgba(147, 185, 104, 0.35));
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px), #000 calc(50% - 1px), transparent 50%);
}
.reattore-ciclo {
  /* sopra l'anello esterno (che sporge di 14px): mai sopra la figura */
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 2px; color: #cdbda2; white-space: nowrap;
  background: rgba(14, 12, 9, 0.92); border: 1px solid var(--bordo);
  padding: 3px 12px;
}
.reattore-nucleo {
  position: absolute; inset: 78px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 163, 92, 0.12), rgba(224, 163, 92, 0.02) 58%, transparent 72%);
  border: 1px solid rgba(224, 163, 92, 0.18);
  box-shadow: inset 0 0 40px rgba(224, 163, 92, 0.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.nucleo-eti { font-size: 14px; letter-spacing: 4px; color: #b3a186; }
@media (max-width: 1350px) {
  .nucleo-eti { font-size: 12.5px; letter-spacing: 3px; }
}
.nucleo-valore {
  font-weight: 600; font-size: 78px; line-height: 1.1; letter-spacing: -1px;
  color: #c4e09e; text-shadow: 0 0 18px rgba(147, 185, 104, 0.65), 0 0 52px rgba(147, 185, 104, 0.35);
}
.nucleo-valore.rosso { color: var(--rosso); text-shadow: 0 0 18px rgba(221, 114, 80, 0.55); }
.nucleo-sotto { font-size: 15.5px; color: #cdbda2; letter-spacing: .5px; padding: 0 46px; }
.nucleo-linea {
  width: 140px; height: 2px; margin: 7px 0 6px 0;
  background: linear-gradient(to right, transparent, rgba(185, 214, 148, 0.8), transparent);
  box-shadow: 0 0 10px rgba(147, 185, 104, 0.5);
}
.nucleo-roi { font-size: 15.5px; letter-spacing: 3px; color: var(--accento); }

.ghiera-riga { display: flex; gap: 18px; align-items: center; }
.ghiera { position: relative; width: 132px; height: 132px; flex: none; }
.ghiera::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(224, 163, 92, 0.35) 0deg 1deg, transparent 1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px), #000 calc(50% - 1px), transparent 50%);
}
.ghiera-anello {
  position: absolute; inset: 5px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px), #000 calc(50% - 1px), transparent 50%);
}
.ghiera-centro {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 31px;
}
.ghiera-num { font-weight: 300; font-size: 35px; color: var(--testo); }
.prev-riga { display: flex; gap: 24px; align-items: baseline; margin-top: 5px; }
.prev-grande { font-weight: 300; font-size: 37px; }
.prev-media { font-weight: 300; font-size: 25px; }

/* frecce di tendenza: su = verde che fluttua in alto, giu = rossa in basso */
.freccia-trend {
  display: inline-block; margin-left: 10px; font-size: .5em;
  vertical-align: middle; line-height: 1;
}
.freccia-trend.su { color: var(--verde); animation: fluttua-su 1.6s ease-in-out infinite; }
.freccia-trend.giu { color: var(--rosso); animation: fluttua-giu 1.6s ease-in-out infinite; }
@keyframes fluttua-su {
  0%, 100% { transform: translateY(2px); opacity: .7; }
  50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes fluttua-giu {
  0%, 100% { transform: translateY(-2px); opacity: .7; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* particelle che confluiscono nel reattore (svaniscono al bordo del nucleo) */
.reattore-particelle {
  position: absolute; inset: -40px; width: calc(100% + 80px);
  height: calc(100% + 80px); pointer-events: none;
}
.stats-giorno {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 7px 10px;
  font-size: 15.5px; margin-top: 8px; align-items: baseline;
}
.stats-giorno .int { color: var(--testo2); }
.stats-giorno .num { text-align: right; }
.console-jarvis {
  display: flex; flex-wrap: wrap; gap: 26px;
  font-family: 'Share Tech Mono', Consolas, monospace;
  font-size: 13px; letter-spacing: 1.5px; color: #9a8870;
  padding: 8px 4px 0 4px;
}
#vista-comando .nota { font-size: 14px; }
.console-jarvis .fine::after {
  content: "_"; color: var(--testo2); animation: cursore 1.2s infinite;
}
@keyframes gira-lento { to { transform: rotate(360deg); } }
@keyframes gira-inverso { to { transform: rotate(-360deg); } }
@keyframes cursore { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }