/* ============================================================
   FINANCE LINK — piattaforma membri (app shell v3)
   Layout della piattaforma originale: topbar a tutta larghezza
   (logo · ricerca centrata · azioni), sidebar sotto la topbar,
   densità da back-office. Palette e superfici allineate al design
   system di main.css, a sua volta allineato a IBsolution: blu come
   unico accento d'azione, verde riservato agli stati live/positivi.
   Card piatte su superficie elevata, raggi contenuti (10px).
   ============================================================ */

:root {
  --app-side: 240px;
  --app-side-min: 64px;
  --app-top: 60px;
  /* allineati a IBsolution: 10 per i contenitori, 6 per chip e controlli */
  --app-radius: 10px;
  --app-radius-sm: 6px;
}

body.app {
  font-size: 14px;
  line-height: 1.55;
  /* Fondo piatto. C'erano due aloni azzurri agli angoli: da soli erano
     appena percettibili, ma tingevano l'intera pagina, e con un nero neutro
     sotto la differenza si vede subito. Nel riferimento il fondo non ha
     nessuna sfumatura: e' un nero e basta, e tutto il colore arriva dai
     riquadri e dall'accento. L'unica pagina che tiene il suo alone e' quella
     dell'AI, dove serve a riempire una schermata altrimenti vuota. */
  background: var(--bg);
  background-attachment: fixed;
}
body.app::selection { background: var(--accent-fill); color: var(--on-accent); }

/* ---------- topbar (tutta larghezza) ---------- */

.app-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--app-top);
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: 18px;
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  z-index: 150;
}
.top-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-stretch: 100%;
  font-size: 15.5px; letter-spacing: -0.015em;
  color: var(--text);
  flex: none;
  width: calc(var(--app-side) - 18px);
  min-width: 0;
}
body.side-min .top-logo { width: auto; }
.top-logo svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 720px) { .top-logo b { display: none; } .top-logo { width: auto; } }

.top-search {
  flex: 1;
  max-width: 460px;
  margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(17, 23, 33, 0.6);
  color: var(--sage-dim);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.25s;
  text-align: left;
}
.top-search:hover, .top-search:focus-visible {
  border-color: var(--accent);
  color: var(--text-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.top-search svg { width: 14px; height: 14px; flex: none; }
.top-search .ph { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-search .kbd { margin-left: auto; }
@media (max-width: 900px) { .top-search .kbd { display: none; } }

.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.top-lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--sage);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px;
}
/* Solo finche' .top-lang e' il pill statico con la sua iconcina. Appena
   i18n.js lo trasforma nel selettore, dentro ci finiscono le BANDIERE, e
   questa riga le schiacciava a 13x13 — cioe' a un quadrato — mandando a
   vuoto qualsiasi proporzione impostata sul contenitore. Era la causa vera
   del tricolore che si vedeva male: non il ritaglio, la larghezza. */
.top-lang:not(.lang-switch) svg { width: 13px; height: 13px; }
/* quando i18n.js lo trasforma nel selettore a tre lingue, il padding del
   pill originale si sommerebbe a quello di .lang-switch: lo azzero */
.top-lang.lang-switch { padding: 3px; gap: 2px; }
.top-icon {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--sage);
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.top-icon:hover { color: var(--ivory); border-color: var(--line-strong); }
.top-icon svg { width: 17px; height: 17px; }
.top-icon .dot-n {
  position: absolute; top: 5px; right: 4px;
  min-width: 15px; height: 15px;
  padding-inline: 3px;
  border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 10px var(--accent-glow);
}
.top-support {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 550; color: var(--sage);
  padding: 6px 8px;
}
.top-support svg { width: 15px; height: 15px; }
.top-support:hover { color: var(--ivory); }
.top-user {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  max-width: 210px;
  transition: border-color 0.2s;
}
.top-user:hover { border-color: var(--sage); }
.top-user .av {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-bright);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.top-user .em {
  font-size: 12.5px; color: var(--sage);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* .top-lang resta visibile: e' l'unico modo di cambiare lingua da telefono */
@media (max-width: 860px) { .top-user .em, .top-support { display: none; } }

.top-burger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  flex: none;
  place-items: center;
  color: var(--sage);
  font-size: 16px;
}
@media (max-width: 1023px) { .top-burger { display: grid; } }

/* ---------- sidebar (sotto la topbar) ---------- */

.app-side {
  position: fixed;
  top: var(--app-top); bottom: 0; left: 0;
  width: var(--app-side);
  background: rgba(10, 14, 20, 0.85);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 120;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--raise) transparent;
  transition: width 0.25s var(--ease-out);
}
body.side-min { --app-side: var(--app-side-min); }
body.side-min .side-label,
body.side-min .lbl { display: none; }
body.side-min .side-link { justify-content: center; padding-inline: 0; }
body.side-min .side-plan { justify-content: center; padding: 10px 6px; }
body.side-min .side-foot button { justify-content: center; }

.side-top {
  display: flex; justify-content: flex-end;
  padding: 8px 10px 0;
  flex: none;
}
.side-top button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--sage-dim);
}
.side-top button svg { width: 15px; height: 15px; }
.side-top button:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.04); }
body.side-min .side-top { justify-content: center; }
body.side-min .side-top button { transform: scaleX(-1); }

.side-nav { padding: 4px 10px 10px; flex: 1; }
.side-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-dim);
  padding: 15px 10px 7px;
}
.side-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 7.5px 10px;
  margin-bottom: 1px;
  border-radius: 10px;
  /* Bianco pieno anche qui: il menu si legge di continuo, e il grigio
     lo rendeva faticoso. La voce attiva resta distinguibile perche'
     usa il colore d'accento piu' lo sfondo, non il contrasto col grigio. */
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;
}
.side-link svg { width: 16px; height: 16px; flex: none; opacity: 0.9; }
.side-link:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.035); }
.side-link[aria-current="page"] {
  color: var(--accent-bright);
  background: linear-gradient(90deg, rgba(38, 128, 255, 0.18), rgba(38, 128, 255, 0.05));
}
.side-link[aria-current="page"]::before {
  content: "";
  position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.side-link[aria-current="page"] svg { opacity: 1; }
.side-link .pill { margin-left: auto; }

.side-plan {
  margin: 10px 12px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--app-radius);
  background: linear-gradient(165deg, rgba(140, 188, 255, 0.06), var(--surface-2) 60%);
  display: flex; align-items: center; gap: 11px;
  flex: none;
}
.side-plan .crown {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--warm-soft); color: var(--warm);
}
.side-plan .crown svg { width: 15px; height: 15px; }
.side-plan .k {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-dim);
}
.side-plan .v { font-weight: 750; font-size: 14.5px; line-height: 1.2; }
.side-plan a { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-bright); margin-left: auto; }
.side-plan a:hover { text-decoration: underline; }

.side-foot { padding: 0 12px 12px; flex: none; }
.side-foot button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--sage-dim);
}
.side-foot button svg { width: 14px; height: 14px; flex: none; }
.side-foot button:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.03); }
.side-foot .kbd { margin-left: auto; }

.kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--sage);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- main ---------- */

.app-main {
  margin-left: var(--app-side);
  padding: calc(var(--app-top) + 30px) clamp(18px, 3vw, 44px) 110px;
  max-width: 1280px;
  transition: margin-left 0.25s var(--ease-out);
}

@media (max-width: 1023px) {
  .app-side { transform: translateX(-100%); transition: transform 0.3s var(--ease-out); }
  body.side-open .app-side { transform: none; box-shadow: 30px 0 80px rgba(0,0,0,.6); width: 250px; }
  body.side-open .app-side .lbl, body.side-open .app-side .side-label { display: block; }
  .app-main { margin-left: 0; }
  body.side-open::after {
    content: ""; position: fixed; inset: var(--app-top) 0 0 0; z-index: 115;
    background: rgba(6, 6, 6, 0.62);
  }
}

/* ---------- pagina: intestazioni ---------- */

.page-head { margin-bottom: 24px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1; min-width: 240px; }
/* eyebrow come chip bordata, coerente con .eyebrow del sito pubblico */
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 11px;
  padding: 6px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  line-height: 1;
}
.page-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
/* Il titolo e' il nome della sezione: bianco e contenuto, non una frase
   grande e colorata. Il blu resta per il saluto della dashboard, che e'
   l'unica riga rivolta alla persona. */
.page-title {
  font-weight: 780; font-stretch: 100%;
  letter-spacing: -0.028em;
  font-size: clamp(21px, 2.6vw, 28px); line-height: 1.14; text-wrap: balance;
  color: var(--text);
}
/* La riga sotto il titolo: e' la frase che prima stava in grande. Sta qui
   perche' nel riferimento sotto il titolo c'e' la descrizione di cosa si
   sta guardando, ed e' esattamente quello che quella frase fa. */
.page-meta {
  margin-top: 6px;
  font-size: 13px; line-height: 1.5; color: var(--text-3);
  max-width: 82ch;
}
.page-meta b { color: var(--text-2); font-weight: 700; }
/* Il filo sotto tutta l'intestazione: separa il titolo dal contenuto senza
   mettere spazio, che a schermo pieno lascerebbe un buco. */
body.app .page-head {
  align-items: flex-start;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
/* La dashboard tiene il saluto in grande e azzurro: li' non c'e' un nome di
   sezione da scrivere, c'e' una persona da salutare. */
body.app .page-head.saluto { border-bottom: 0; padding-bottom: 0; }
body.app .page-head.saluto .page-title { color: var(--accent-bright); }
.page-sub { color: var(--sage); font-size: 13.5px; margin-top: 8px; max-width: 70ch; }

/* ---------- hero "Oggi" ---------- */

.oggi-hero { margin-bottom: 30px; }
.oggi-row { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.oggi-row > div:first-child { flex: 1; min-width: 260px; }
.oggi-hello {
  font-weight: 800; font-stretch: 100%;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.oggi-hello em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--warm);
}
.oggi-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.oggi-meta .plan-pill {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
  color: var(--ivory);
}
.oggi-meta .plan-pill b { color: var(--accent-bright); font-weight: 600; }
.oggi-meta .status { font-size: 14.5px; color: var(--sage); }
.oggi-meta .status a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
/* streak = continuità raggiunta, quindi peach (traguardo) e non azure (azione) */
.streak {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(140, 188, 255, 0.3);
  background: linear-gradient(160deg, var(--warm-soft), transparent);
  border-radius: 999px;
  padding: 9px 16px;
  flex: none;
}
.streak b { color: var(--warm); }
.streak b { font-size: 15px; }
.streak span { font-size: 12.5px; color: var(--sage); }

.novita {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: 14px;
  color: var(--ivory);
  margin: 26px 0 12px;
}
.novita .n {
  min-width: 19px; height: 19px;
  padding-inline: 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent-fill); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}
.novita svg { width: 16px; height: 16px; color: var(--accent-bright); }

/* colonne del "Oggi" */
.oggi-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
/* Due colonne: il sistema principale non ha piu Registrazioni e Webinar.
   Classe a parte e non stile in linea, altrimenti vincerebbe anche sui
   media query qui sotto e la griglia resterebbe a due colonne sul telefono. */
.oggi-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .oggi-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .oggi-cols { grid-template-columns: 1fr; } }

.col-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--app-radius);
  padding: 6px 6px 10px;
  overflow: hidden;
}
.col-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 12px 8px;
  font-weight: 700; font-size: 14px;
}
.col-head svg { width: 16px; height: 16px; color: var(--accent-bright); }
.col-head .more { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--sage-dim); font-weight: 400; }
.col-head .more:hover { color: var(--accent-bright); }

.item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background-color 0.15s;
}
.item:hover { background: rgba(255, 255, 255, 0.035); }
.item .thumb {
  width: 44px; height: 44px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 17px;
  border: 1px solid var(--line);
  background: var(--raise);
  overflow: hidden;
}
.item .thumb svg { width: 100%; height: auto; }
.item .tx { min-width: 0; }
.item .meta {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--sage-dim);
  display: flex; align-items: center; gap: 8px;
}
.item .meta .new { color: var(--pos); font-weight: 700; letter-spacing: 0.08em; }
.item .tt {
  font-size: 13px; font-weight: 550; color: var(--ivory);
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.15s;
}
.item:hover .tt { color: var(--accent-bright); }

/* ---------- card generiche / kpi / tabelle ---------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--app-radius);
  padding: 18px;
}
.card + .card { margin-top: 14px; }
.card-title { font-weight: 700; font-size: 14.5px; }
.card-k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-dim);
}
.card p { color: var(--sage); font-size: 13px; }

.grid-a { display: grid; gap: 14px; }
.ga-2 { grid-template-columns: repeat(2, 1fr); }
.ga-3 { grid-template-columns: repeat(3, 1fr); }
.ga-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .ga-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .ga-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ga-2, .ga-3, .ga-4 { grid-template-columns: 1fr; } }

.kpi .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dim); }
.kpi .v {
  font-weight: 800; font-stretch: 100%;
  letter-spacing: -0.03em;
  font-size: 25px; line-height: 1.1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi .d { color: var(--sage); font-size: 12px; margin-top: 4px; }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dim);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.tbl td { color: var(--sage); }
.tbl td.strong { color: var(--ivory); font-weight: 600; }
.tbl td.num { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover td { background: rgba(255, 255, 255, 0.018); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* barre di avanzamento / allocazione */
.prog { height: 5px; border-radius: 999px; background: var(--raise); overflow: hidden; }
.prog i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 999px;
  transition: width 0.5s var(--ease-out);
}

.lesson {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 13px; color: var(--ivory);
}
.lesson:last-child { border-bottom: 0; }
.lesson input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.lesson .idx { font-family: var(--font-mono); font-size: 10.5px; color: var(--sage-dim); width: 22px; flex: none; }
.lesson.done { color: var(--sage-dim); text-decoration: line-through; text-decoration-color: rgba(154, 167, 188, 0.5); }

/* gating */
.locked { position: relative; }
.locked > *:not(.lock-chip) { opacity: 0.45; filter: saturate(0.6); pointer-events: none; }
.lock-chip {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent-fill);
  padding: 5px 11px; border-radius: 999px;
  font-weight: 700;
  z-index: 2;
}
a.lock-chip:hover { box-shadow: 0 4px 18px var(--accent-glow); }

/* preferiti */
.fav-btn {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--sage-dim);
  font-size: 15px;
  line-height: 1;
}
.fav-btn:hover { color: var(--ivory); border-color: var(--line-strong); }
/* preferito = peach, così non si confonde con gli elementi cliccabili azure */
.fav-btn[aria-pressed="true"] { color: var(--warm); }

/* bottoni compatti */
.app .btn, body.app .btn { padding: 10px 20px; font-size: 13.5px; }
.btn-xs { padding: 7px 14px !important; font-size: 12px !important; }

/* ---------- Finance Link AI blob + live pod ---------- */

.ai-blob {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 135;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 25%, #123156, #0d0d0f);
  border: 1px solid rgba(89, 160, 255, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(89, 160, 255, 0.18);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.ai-blob svg { width: 30px; height: 30px; }
.ai-blob:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(89, 160, 255, 0.35);
}

.live-pod {
  position: fixed;
  right: 18px; bottom: 84px;
  z-index: 130;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px;
  background: rgba(22, 28, 40, 0.97);
  border: 1px solid rgba(53, 208, 127, 0.35);
  border-radius: var(--app-radius);
  box-shadow: 0 16px 50px rgba(2, 4, 10, 0.6), 0 0 30px rgba(53, 208, 127, 0.08);
  max-width: min(400px, calc(100vw - 36px));
}
/* "in diretta" = verde, come gli altri stati live del sistema */
.live-pod .sig {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--pos);
  flex: none;
}
.live-pod .sig i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 10px rgba(53, 208, 127, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
.live-pod .t { min-width: 0; }
.live-pod .t b { display: block; font-size: 13px; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-pod .t span { font-family: var(--font-mono); font-size: 10.5px; color: var(--sage-dim); }
.live-pod .x {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--sage-dim); border-radius: 8px;
}
.live-pod .x:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.05); }

/* ---------- menu, palette, modali ---------- */

.menu {
  position: fixed;
  top: calc(var(--app-top) + 6px);
  right: 16px;
  width: min(350px, 92vw);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--app-radius);
  box-shadow: 0 24px 70px rgba(2, 4, 10, 0.65);
  z-index: 160;
  overflow: hidden;
}
.menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dim);
}
.menu-head button { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-bright); }
.menu-head button:hover { text-decoration: underline; }
.menu-item {
  display: block;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ivory);
  line-height: 1.5;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: rgba(255, 255, 255, 0.03); }
.menu-item .when { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--sage-dim); margin-top: 3px; }
.menu-item.unread { box-shadow: inset 2px 0 0 var(--accent); }
.menu-empty { padding: 22px 15px; font-size: 13px; color: var(--sage-dim); text-align: center; }

.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 5, 9, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: min(14vh, 130px) 16px 16px;
}
.pal {
  width: min(580px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--app-radius);
  box-shadow: 0 40px 120px rgba(2, 4, 10, 0.75);
  overflow: hidden;
  animation: palIn 0.22s var(--ease-out);
}
@keyframes palIn { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }
.pal-input {
  width: 100%;
  background: none; border: 0; outline: none;
  padding: 16px 18px;
  color: var(--ivory);
  font-family: var(--font-display); font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.pal-input::placeholder { color: var(--sage-dim); }
.pal-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.pal-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px; color: var(--ivory);
  cursor: pointer;
}
.pal-row .pill { flex: none; }
.pal-row .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-row .kbd { flex: none; }
.pal-row.on { background: var(--accent-soft); color: var(--accent-bright); }
.pal-empty { padding: 26px; text-align: center; color: var(--sage-dim); font-size: 13px; }
.pal-foot {
  display: flex; gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--sage-dim);
}

.modal {
  width: min(460px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--app-radius);
  box-shadow: 0 40px 120px rgba(2, 4, 10, 0.75);
  padding: 22px;
  animation: palIn 0.22s var(--ease-out);
}
.modal h3 { font-size: 15px; font-weight: 750; margin-bottom: 14px; }
.modal .rowk {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 2px;
  border-bottom: 1px dashed var(--line);
  font-size: 13px; color: var(--sage);
}
.modal .rowk:last-of-type { border-bottom: 0; }

/* ---------- chat (Finance Link AI) ---------- */

.chat { display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.msg { max-width: 88%; padding: 11px 15px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
.msg.user { align-self: flex-end; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent-line); }
.msg.ai { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.msg.ai .src { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--sage-dim); }
.chat-form { display: flex; gap: 10px; margin-top: 14px; }
.chat-form .input { flex: 1; }

/* ---------- varie ---------- */

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--app-radius);
  padding: 34px 20px;
  text-align: center;
  color: var(--sage-dim);
  font-size: 13px;
}
.empty a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.app-note { font-family: var(--font-mono); font-size: 11px; color: var(--sage-dim); }

/* reveal in ingresso (rispetta reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .app-main > * { animation: rise 0.55s var(--ease-out) backwards; }
  .app-main > *:nth-child(2) { animation-delay: 0.06s; }
  .app-main > *:nth-child(3) { animation-delay: 0.12s; }
  .app-main > *:nth-child(4) { animation-delay: 0.18s; }
  .app-main > *:nth-child(5) { animation-delay: 0.24s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

.nojs-cover {
  position: fixed; inset: 0; z-index: 500;
  background: var(--void);
  display: grid; place-items: center;
  padding: 30px; text-align: center;
  color: var(--sage);
}

/* ---------- guida scritta: programma del corso ----------
   Impaginazione "aperta": parti, aree e lezioni tutte visibili sulla pagina.
   Prima il programma stava dentro un <details> da aprire corso per corso, e
   per sapere cosa contenesse bisognava cliccare undici volte. */
.corso-testata { margin-bottom: 22px; }

.parte { margin: 34px 0 0; }
.parte-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.parte-n {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-bright);
}
.parte-t { font-size: 25px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 0; }
.parte-d { color: var(--text-3); font-size: 14.5px; margin: 7px 0 0; max-width: 68ch; }
.parte-cont {
  flex: none; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}

.area { margin-top: 22px; }
.area-t {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 10px;
}
.area-n { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .65; }

/* Due colonne su schermo largo: 53 lezioni in colonna singola sarebbero un
   nastro infinito, e si perderebbe il senso delle aree. */
.area-lez { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 900px) { .area-lez { grid-template-columns: 1fr; } }

.lez {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 15px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--app-radius);
  color: var(--text);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.lez:hover { background: var(--surface-2); border-color: var(--accent-line); transform: translateY(-1px); }

.lez-n {
  flex: none; width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .05); color: var(--text-3);
}
.lez.fatta .lez-n { background: var(--accent-fill); color: #fff; }
.lez.fatta .lez-t { color: var(--text-3); }

.lez-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lez-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.lez-d { font-size: 13px; color: var(--text-3); line-height: 1.45; }

.lez-tier {
  flex: none; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(38, 128, 255, .14); color: var(--accent-bright);
}
/* Bloccata: si vede lo stesso, cosi' l'utente sa cosa otterrebbe salendo di
   piano. Nasconderla renderebbe il listino meno comprensibile, non piu'. */
.lez.bloccata { opacity: .55; }
.lez.bloccata:hover { opacity: .78; }

/* ---------- pagina della singola lezione ----------
   Colonna di lettura stretta (circa 68 caratteri): oltre, l'occhio fatica a
   ritrovare l'inizio della riga successiva. Il corpo del testo e' piu' grande
   del resto dell'interfaccia perche' qui si legge, non si consulta. */
.lezione { max-width: 760px; margin: 0 auto; min-width: 0; }

.lz-briciole { font-size: 12.5px; color: var(--text-3); margin-bottom: 18px; }
.lz-briciole a { color: var(--accent-bright); }
.lz-briciole span { opacity: .5; margin: 0 6px; }

.lz-head { padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.lz-t { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; margin: 0; }
.lz-d { font-size: 16.5px; color: var(--text-3); line-height: 1.5; margin: 10px 0 12px; }

.lz-corpo { font-size: 16.5px; line-height: 1.7; }
.lz-corpo p { margin: 0 0 18px; }
.lz-corpo h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.01em;
  margin: 34px 0 12px; padding-top: 4px;
}
.lz-corpo ul, .lz-corpo ol { margin: 0 0 18px; padding-left: 22px; }
.lz-corpo li { margin-bottom: 9px; }
.lz-corpo b { color: var(--text); font-weight: 700; }
.lz-corpo .tbl-wrap { margin: 0 0 20px; }

.lz-nota, .lz-avviso {
  display: block;
  border-radius: var(--app-radius);
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: 15.5px;
}
.lz-nota { background: rgba(38, 128, 255, .09); border-left: 3px solid var(--accent); }
.lz-avviso { background: rgba(255, 180, 60, .09); border-left: 3px solid #ffbc4d; }
.lz-nota p, .lz-avviso p { margin: 6px 0 0; line-height: 1.6; }
.lz-nota-k {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-bright);
}
.lz-avviso .lz-nota-k { color: #ffbc4d; }

/* Le figure sono SVG scritte nel codice: si adattano alla larghezza e
   restano nitide a ogni ingrandimento. */
.lz-fig { margin: 4px 0 24px; }
.lz-fig svg {
  width: 100%; height: auto; display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--app-radius);
  padding: 14px;
}
.lz-fig figcaption { font-size: 13px; color: var(--text-3); margin-top: 9px; text-align: center; }

.lz-fondo {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
}
.lz-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.lz-nav .btn-mini { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .lz-nav .btn-mini { max-width: 100%; } }

/* ---------- verifica di fine lezione ---------- */
.lz-ok { color: #4ade80; font-weight: 700; }

.qz {
  margin-top: 34px; padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--app-radius);
}
.qz-testa { margin-bottom: 22px; }
.qz-t { font-size: 21px; font-weight: 700; margin: 8px 0 10px; }
.qz-testa p { font-size: 15px; line-height: 1.6; color: var(--text-3); margin: 0 0 6px; }
.qz-testa b { color: var(--text); }

.qz-dom { border: none; margin: 0 0 20px; padding: 16px; border-radius: var(--app-radius);
  background: rgba(255,255,255,.02); border-left: 3px solid transparent; }
.qz-dom.ok { border-left-color: #4ade80; background: rgba(74,222,128,.05); }
.qz-dom.no { border-left-color: #ED2939; background: rgba(237,41,57,.05); }
.qz-d { display: flex; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.45; padding: 0; margin-bottom: 12px; }
.qz-n { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: rgba(38,128,255,.16); color: var(--accent-bright); }

.qz-opts { display: flex; flex-direction: column; gap: 7px; padding-left: 34px; }
.qz-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  font-size: 14.5px; line-height: 1.45; transition: background-color .13s, border-color .13s; }
.qz-opt:hover { background: rgba(255,255,255,.04); border-color: var(--accent-line); }
.qz-opt input { margin-top: 3px; flex: none; accent-color: var(--accent); }
/* A verifica corretta i comandi sono disattivati: si smorzano, ma restano
   leggibili — servono a capire cosa si era risposto. */
.qz-opt:has(input:disabled) { cursor: default; opacity: .72; }
.qz-opt:has(input:disabled):hover { background: transparent; border-color: var(--border); }

.qz-sp { margin: 12px 0 0 34px; padding: 11px 13px; border-radius: 10px;
  background: rgba(38,128,255,.09); border-left: 3px solid var(--accent);
  font-size: 14.5px; line-height: 1.6; }

.qz-fondo { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 8px; flex-wrap: wrap; }

.qz-esito { padding: 18px; border-radius: var(--app-radius); margin-top: 4px; }
.qz-esito h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.qz-esito p { font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.qz-esito.ok { background: rgba(74,222,128,.09); border: 1px solid rgba(74,222,128,.3); }
.qz-esito.ok h3 { color: #4ade80; }
.qz-esito.no { background: rgba(237,41,57,.08); border: 1px solid rgba(237,41,57,.28); }
.qz-esito.no h3 { color: #ff6b7a; }

/* ---------- barra di avanzamento per area (modulo) ---------- */
.area-t { justify-content: space-between; }
.area-avz { display: flex; align-items: center; gap: 9px; flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.area-barra { width: 74px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.area-barra i { display: block; height: 100%; background: var(--accent-fill); border-radius: 3px; transition: width .3s; }
.parte-barra { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08);
  overflow: hidden; margin-top: 12px; }
.parte-barra i { display: block; height: 100%; background: var(--accent-fill); border-radius: 3px; transition: width .35s; }

/* ---------- certificato ---------- */
.cert-foglio { border-radius: var(--app-radius); overflow: hidden; border: 1px solid var(--border); }
.cert-foglio svg { width: 100%; height: auto; display: block; }
.cert-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

/* In stampa resta solo il certificato: barra laterale, comandi e testo di
   contorno finirebbero sul foglio senza servire a niente. */
@media print {
  body { background: #fff; }
  .side, .topbar, .cert-azioni, .page-head, .card, .live-pod { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .cert-foglio { border: none; }
  @page { size: landscape; margin: 8mm; }
}

/* ============ pagina corso: struttura da percorso formativo ============
   Sostituisce la griglia di schede: intestazione con i numeri del corso,
   autore e avanzamento, programma a righe, materiali. */
/* Le due colonne in cima: a sinistra titolo e numeri, a destra la scheda
   con l'avanzamento e il pulsante per ripartire. Il bordo che separava la
   testata dal resto passa sotto tutto il blocco, una riga sola invece di
   due. */
.crs-top {
  display: grid; grid-template-columns: 1fr 330px; gap: 28px; align-items: start;
  padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.crs-head { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.crs-t { font-size: 28px; font-weight: 800; letter-spacing: -.022em; line-height: 1.15; margin: 5px 0 0; }
.crs-sub { font-size: 15px; line-height: 1.5; color: var(--text-3); margin: 8px 0 0; max-width: 62ch; }

/* Griglia di quattro colonne uguali, non un flex che va a capo: con la
   colonna piu' stretta l'ultima metrica finiva da sola su una seconda riga,
   e quattro numeri disposti tre-piu'-uno si leggono come un errore. */
.crs-metriche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 18px; }
@media (max-width: 620px) { .crs-metriche { grid-template-columns: repeat(2, 1fr); } }
.crs-m { display: flex; flex-direction: column; gap: 1px; }
.crs-m-k { font-size: 11.5px; color: var(--text-3); }
.crs-m-v { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.crs-m-n { font-size: 11px; color: var(--text-3); }

.crs-autore {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--app-radius); padding: 16px 18px; margin-bottom: 0;
}
.crs-a-riga { display: flex; align-items: center; gap: 13px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); }
.crs-a-av { flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
  background: var(--accent-fill); color: #fff; letter-spacing: .04em; }
.crs-a-n { font-size: 15.5px; font-weight: 700; }
.crs-a-d { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.crs-a-avz { padding-top: 16px; }
.crs-a-lab { font-size: 13px; color: var(--text-3); }
.crs-a-pct { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crs-a-avz .btn { display: inline-block; }

.crs-prog-t { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 18px; }

.crs-parte { margin-bottom: 34px; }
.crs-parte-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.crs-parte-n { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-bright); }
.crs-parte-t { font-size: 20px; font-weight: 750; letter-spacing: -.01em; margin: 3px 0 0; }
.crs-parte-d { font-size: 13.5px; color: var(--text-3); margin: 5px 0 0; max-width: 72ch; }
.crs-parte-c { flex: none; font-size: 13px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
.crs-parte-b { margin: 12px 0 14px; }

.crs-area { margin-bottom: 16px; }
.crs-area-t { display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 8px; }
.crs-area-n { font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Riga lezione: stato a sinistra, titolo al centro, durata a destra.
   A tutta larghezza e non in griglia a due colonne: si scorre come un indice,
   che e' il gesto giusto su un programma di sessantaquattro voci. */
.crs-lez {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px; margin-bottom: 6px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--app-radius); color: var(--text);
  transition: background-color .14s, border-color .14s;
}
.crs-lez:hover { background: var(--surface-2); border-color: var(--accent-line); }
.crs-lez-s { flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.05); color: var(--text-3); }
.crs-lez-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.crs-lez-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.crs-lez-d { font-size: 12.5px; color: var(--text-3); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-lez-m { flex: none; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.crs-lez.fatta .crs-lez-s { background: rgba(74,222,128,.16); color: #4ade80; }
.crs-lez.fatta .crs-lez-t { color: var(--text-3); }
/* Lezione corrente: e' il punto in cui riprendere, deve saltare all'occhio
   scorrendo un elenco lungo. */
.crs-lez.corrente { background: rgba(38,128,255,.10); border-color: var(--accent); }
.crs-lez.corrente .crs-lez-s { background: var(--accent-fill); color: #fff; }
.crs-lez.chiusa { opacity: .5; }
.crs-lez.chiusa:hover { opacity: .72; }

.crs-mat { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.crs-mat-t { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.crs-mat-d { font-size: 13.5px; color: var(--text-3); margin: 6px 0 16px; }
.crs-mat-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.crs-mat-b { display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 14px 15px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--app-radius); color: var(--text);
  transition: background-color .14s, border-color .14s; }
.crs-mat-b:hover { background: var(--surface-2); border-color: var(--accent-line); }
.crs-mat-i { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid;
  place-items: center; background: rgba(38,128,255,.14); color: var(--accent-bright); font-size: 14px; }
.crs-mat-b b { display: block; font-size: 14px; font-weight: 650; }
.crs-mat-b i { display: block; font-size: 12.5px; color: var(--text-3); font-style: normal; margin-top: 2px; }

@media (max-width: 640px) {
  .crs-metriche { gap: 22px; }
  .crs-lez-d { white-space: normal; }
  .crs-lez-m { display: none; }
}



/* ---------- sala segnali: percorso in quattro passi ---------- */

.sala-flusso { position: relative; }
/* Filo verticale che lega i passi: si legge come una sequenza, non come
   quattro riquadri indipendenti. */
.sala-flusso::before {
  content: ""; position: absolute; left: 18px; top: 14px; bottom: 46px;
  width: 2px; background: var(--border);
}
.sala-passo { position: relative; margin-bottom: 22px; }
.sala-passo-h { display: flex; gap: 16px; align-items: flex-start; }
.sala-passo-n {
  position: relative; z-index: 1; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  background: var(--accent-fill); color: #fff;
  box-shadow: 0 0 0 5px var(--bg);
}
.sala-passo-t { font-size: 19px; font-weight: 750; letter-spacing: -.01em; margin: 6px 0 0; }
.sala-passo-d { font-size: 14.5px; color: var(--text-3); line-height: 1.55; margin: 6px 0 0; max-width: 72ch; }
.sala-passo-c {
  margin: 14px 0 0 54px;
  padding: 18px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--app-radius);
  font-size: 15px; line-height: 1.65;
}
.sala-passo-c p { margin-bottom: 10px; }
.sala-passo-c p:last-child { margin-bottom: 0; }
.sala-lista { padding-left: 20px; list-style: disc; margin: 8px 0 12px; }
.sala-lista li { margin-bottom: 7px; line-height: 1.6; }
.sala-avv {
  margin: 12px 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 180, 60, .09); border-left: 3px solid #ffbc4d;
  font-size: 14.5px; line-height: 1.6;
}
@media (max-width: 640px) {
  .sala-flusso::before { display: none; }
  .sala-passo-c { margin-left: 0; }
}

/* Le tre scelte obbligate all'apertura del conto: valore in evidenza e
   motivo sotto. Sbagliarne una costa poi la riapertura del conto, quindi
   devono staccare dal testo corrente e leggersi in un colpo d'occhio. */
.sala-scelte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sala-scelte > div {
  padding: 13px 15px; border-radius: 10px;
  background: rgba(38, 128, 255, .08);
  border: 1px solid var(--accent-line);
}
.sala-scelte span {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-3);
}
.sala-scelte b { display: block; font-size: 19px; font-weight: 800; margin: 3px 0 6px; }
.sala-scelte i { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 760px) { .sala-scelte { grid-template-columns: 1fr; } }

/* Riquadro del deposito consigliato: e' il numero che vogliamo far notare,
   quindi si distingue dagli altri cinque invece di confondersi. */
.sala-scelte > div.forte {
  background: rgba(38, 128, 255, .16);
  border-color: var(--accent);
}
.sala-scelte > div.forte b { color: var(--accent-bright); }

/* Pulsanti principali del percorso. Aprire il conto e mandare la conferma
   sono le due azioni che lo fanno avanzare: devono pesare piu' di un
   bottone qualsiasi. Una classe sola per entrambi, non due stili quasi
   uguali che poi divergono alla prima modifica. */
.sala-cta-riga { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sala-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: 18px; padding: 15px 26px;
  background: var(--accent-fill); color: #fff;
  border-radius: 10px;
  font-size: 16.5px; font-weight: 700; line-height: 1;
  transition: background-color .15s, transform .15s, border-color .15s;
}
/* Dentro la riga il margine lo mette gia' il contenitore. */
.sala-cta-riga .sala-cta { margin-top: 0; }
.sala-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.sala-cta svg { width: 22px; height: 22px; flex: none; }
.sala-cta.secondario {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.sala-cta.secondario:hover { background: rgba(255, 255, 255, .06); border-color: var(--accent-line); }
@media (max-width: 560px) { .sala-cta { width: 100%; } }

/* ---------- calendario economico ---------- */
.cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; }
.cal-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-f {
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-3); font-size: 13px; font-weight: 600; line-height: 1;
  transition: color .14s, background-color .14s, border-color .14s;
}
.cal-f:hover { color: var(--text); border-color: var(--accent-line); }
.cal-f.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.cal-stato { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.cal-stato.vecchio { color: #ffbc4d; }
.cal-stato.guasto { color: #ff6b7a; }

.cal-g { margin-bottom: 24px; }
.cal-g-t {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: capitalize; color: var(--text-3);
  padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.cal-g-n { margin-left: auto; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
.cal-g.oggi .cal-g-t { color: var(--text); border-bottom-color: var(--accent-line); }
.cal-oggi {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--accent-fill); color: #fff;
}

/* Riga: orario, valuta, impatto, evento, e i tre numeri.
   A griglia e non a tabella: sotto una certa larghezza le colonne dei numeri
   si riducono senza spezzare il titolo dell'evento. */
.cal-r {
  display: grid;
  grid-template-columns: 52px 44px 34px 1fr repeat(3, 88px);
  align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 5px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--app-radius);
}
/* Quel che e' gia' uscito si smorza: l'occhio deve cadere su cio' che manca. */
.cal-r.passato { opacity: .45; }
.cal-r.prossimo { border-color: var(--accent); background: rgba(38, 128, 255, .10); opacity: 1; }

.cal-ora { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-val {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-align: center;
  padding: 4px 0; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: var(--text-2);
}
/* Impatto a tre tacche, come si legge sui terminali: si coglie senza leggere
   una parola, e non dipende dal solo colore. */
.cal-imp { display: flex; gap: 2px; }
.cal-imp i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
.cal-r[data-imp="basso"] .cal-imp i:nth-child(1) { background: #71717a; }
.cal-r[data-imp="medio"] .cal-imp i:nth-child(-n+2) { background: #ffbc4d; }
.cal-r[data-imp="alto"] .cal-imp i { background: #ff6b7a; }

.cal-tit { font-size: 14px; font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: 9px; }
.cal-next {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--accent-fill); color: #fff;
}
.cal-num {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text-2);
}
.cal-num b { font-weight: 700; color: var(--text); }
.cal-num i { font-style: normal; font-size: 10px; letter-spacing: .05em; color: var(--text-3); text-transform: uppercase; }

.cal-fonte { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
  .cal-r { grid-template-columns: 48px 40px 30px 1fr; row-gap: 8px; }
  .cal-num { grid-column: span 1; align-items: flex-start; }
  .cal-num:nth-of-type(1) { grid-column: 4 / 5; }
  .cal-stato { margin-left: 0; width: 100%; }
}

/* ================= Finance Link AI — schermata conversazione =================
   Impostazione presa dai riferimenti forniti: stato vuoto centrato con orb e
   saluto, suggerimenti a pillole, e un campo di scrittura che e' l'elemento
   piu' pesante della pagina. Niente riquadro-scheda: la chat occupa lo spazio. */
body[data-page="financelink-ai"] .app-main {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 84px);
  max-width: 860px; margin-inline: auto;
  /* Alone dietro il contenuto, come nei riferimenti: da' profondita' senza
     aggiungere elementi. */
  background:
    radial-gradient(60vw 46vh at 50% 8%, rgba(38, 128, 255, .13), transparent 62%);
}

/* Prima della prima domanda tutto sta al centro; dopo, la conversazione
   spinge il campo in fondo. */
.fai { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
body.fai-attiva .fai { justify-content: flex-start; }

.fai-vuoto { text-align: center; padding: 20px 0 34px; }
.fai-orb { width: 108px; height: 108px; margin: 0 auto 26px; position: relative; }
.fai-orb svg { width: 100%; height: 100%; display: block; }
/* L'alone e' un elemento a parte per poterlo animare senza toccare l'orb. */
.fai-orb::after {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(89, 160, 255, .40), transparent 68%);
  animation: fai-respiro 4.5s ease-in-out infinite;
}
@keyframes fai-respiro {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.14); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fai-orb::after { animation: none; } }

.fai-saluto { font-size: clamp(26px, 4vw, 38px); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; }
.fai-sotto { font-size: 16px; color: var(--text-3); margin: 12px auto 0; max-width: 54ch; line-height: 1.55; }

.fai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.fai-chip {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-2); font-size: 13.5px; font-weight: 500; line-height: 1;
  transition: color .14s, background-color .14s, border-color .14s, transform .14s;
}
.fai-chip:hover { color: var(--text); background: var(--surface-2); border-color: var(--accent-line); transform: translateY(-1px); }

.fai-conv { overflow-y: auto; padding: 8px 2px 20px; display: flex; flex-direction: column; gap: 14px; }
.fai-conv .msg { max-width: 82%; }
.fai-conv .msg.user { align-self: flex-end; }
.fai-conv .msg.ai { align-self: flex-start; }

/* Tre puntini mentre la risposta arriva: dice "sto lavorando" senza occupare
   lo spazio di una frase che poi verrebbe sostituita. */
.fai-pensa { display: inline-flex; gap: 5px; padding: 3px 0; }
.fai-pensa i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); animation: fai-punti 1.3s ease-in-out infinite; }
.fai-pensa i:nth-child(2) { animation-delay: .18s; }
.fai-pensa i:nth-child(3) { animation-delay: .36s; }
@keyframes fai-punti { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .fai-pensa i { animation: none; opacity: .7; } }

/* ---- campo di scrittura ---- */
.fai-comp {
  position: sticky; bottom: 0;
  margin-top: 18px; padding: 14px 16px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(2, 4, 10, .45);
  transition: border-color .16s;
}
.fai-comp:focus-within { border-color: var(--accent); }
.fai-input {
  width: 100%; border: 0; background: transparent; resize: none;
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.5;
  max-height: 220px; outline: none;
}
.fai-input::placeholder { color: var(--text-3); }

.fai-comp-fondo { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.fai-quota { font-size: 12px; color: var(--text-3); }
.fai-comp-dx { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fai-svuota {
  font-size: 12.5px; color: var(--text-3); padding: 6px 10px; border-radius: 8px;
  transition: color .14s, background-color .14s;
}
.fai-svuota:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.fai-invia {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-fill); color: #fff;
  transition: background-color .14s, opacity .14s;
}
.fai-invia svg { width: 19px; height: 19px; }
.fai-invia:hover:not(:disabled) { background: var(--accent-hover); }
/* Disabilitato finche' non c'e' testo: un invio a vuoto non fa niente, ma
   lascia credere che qualcosa sia partito. */
.fai-invia:disabled { opacity: .35; cursor: default; }

@media (max-width: 640px) {
  .fai-conv .msg { max-width: 92%; }
  .fai-comp { border-radius: 14px; }
}

/* ---- Finance Link AI ----
   La chat riempie lo spazio a destra ma il MENU RESTA, come in ogni altra
   sezione. Prima spariva tutto: la schermata era piu' pulita, ma da li'
   l'unico modo di tornare indietro era un pulsante, e una pagina che toglie
   la navigazione fa sentire di essere usciti dalla piattaforma invece che
   dentro una sua sezione.
   Quello che resta della versione a schermo intero e' l'alone e il testo
   incolonnato: quelli servivano alla lettura, non a nascondere il menu. */
body[data-page="financelink-ai"] .live-pod { display: none !important; }

body[data-page="financelink-ai"] .app-main {
  margin-left: var(--app-side);
  padding: 22px 24px 26px !important;
  max-width: none !important; width: auto;
  min-height: calc(100vh - var(--app-top));
  /* Alone in alto come nel riferimento: da' profondita' alla schermata vuota
     senza aggiungere un solo elemento. */
  background:
    radial-gradient(58vw 44vh at 50% -6%, rgba(38, 128, 255, .20), transparent 64%),
    radial-gradient(40vw 30vh at 50% 104%, rgba(38, 128, 255, .07), transparent 62%);
}

/* Il pulsante per tornare indietro non serve piu': il menu e' li'. */
body[data-page="financelink-ai"] .fai-torna { display: none; }

@media (max-width: 900px) {
  body[data-page="financelink-ai"] .app-main { margin-left: 0; }
}

/* Il contenuto resta incolonnato al centro anche se la pagina e' larga:
   righe lunghe quanto lo schermo non si leggono. */
body[data-page="financelink-ai"] .fai,
body[data-page="financelink-ai"] .fai-comp {
  width: 100%; max-width: 860px; margin-inline: auto;
}

.fai-torna {
  position: fixed; top: 18px; left: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px 9px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--text-2); font-size: 13.5px; font-weight: 600; line-height: 1;
  backdrop-filter: blur(8px);
  transition: color .15s, background-color .15s, border-color .15s;
}
.fai-torna:hover { color: var(--text); background: rgba(255, 255, 255, .10); border-color: var(--accent-line); }
.fai-torna svg { width: 17px; height: 17px; }

/* Nome del servizio in evidenza dentro il saluto, come nel riferimento. */
.fai-saluto b { color: var(--accent-bright); font-weight: 750; }

@media (max-width: 640px) {
  body[data-page="financelink-ai"] .app-main { padding: 18px 14px !important; }
}

/* Collegamento dentro una frase. Serve perche' .btn-text di main.css e' un
   invito a se' stante: mette maiuscolo, allarga le lettere e aggiunge "— —"
   come freccia. Dentro un periodo produceva "e la GUIDA — — spiega come...".
   Qui il link deve solo distinguersi dal testo, non gridare. */
.lnk { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(89, 160, 255, .45); transition: text-decoration-color .15s; }
.lnk:hover { text-decoration-color: var(--accent-bright); }

/* ---- comando vocale: solo su telefono ----
   Su schermo grande si scrive; su telefono parlare e' piu' rapido che
   digitare, ed e' il senso del riferimento "voice interaction". */
.fai-voce { display: none; }

@media (max-width: 768px) {
  /* Sfera piu' grande: sul telefono e' l'elemento su cui cade l'occhio,
     come nel riferimento. */
  .fai-orb { width: 152px; height: 152px; margin-bottom: 30px; }
  .fai-saluto { font-size: 25px; }

  body.fai-con-voce .fai-chips { display: none; }
  body.fai-con-voce .fai-comp { display: none; }
  body.fai-con-voce .fai-voce { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }

  .fai-mic {
    width: 76px; height: 76px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-fill); color: #fff;
    box-shadow: 0 0 0 0 rgba(38, 128, 255, .5);
    transition: transform .15s, background-color .15s;
  }
  .fai-mic svg { width: 30px; height: 30px; }
  .fai-mic:active { transform: scale(.94); }

  /* Mentre ascolta: anelli che si allargano dal microfono e sfera che pulsa.
     Il movimento e' l'unico modo per dire "sto registrando" senza scriverlo
     su uno schermo dove lo spazio manca. */
  body.fai-ascolta .fai-mic { animation: fai-onda 1.6s ease-out infinite; }
  @keyframes fai-onda {
    0% { box-shadow: 0 0 0 0 rgba(38, 128, 255, .45); }
    70% { box-shadow: 0 0 0 26px rgba(38, 128, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(38, 128, 255, 0); }
  }
  body.fai-ascolta .fai-orb { animation: fai-sfera 1.6s ease-in-out infinite; }
  @keyframes fai-sfera {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
  }

  .fai-voce-t { font-size: 15px; color: var(--text-2); min-height: 1.4em; text-align: center; padding: 0 18px; }
  .fai-scrivi {
    font-size: 13px; color: var(--text-3); text-decoration: underline;
    text-underline-offset: 3px; padding: 6px 10px;
  }
  .fai-scrivi:hover { color: var(--text); }

  @media (prefers-reduced-motion: reduce) {
    body.fai-ascolta .fai-mic, body.fai-ascolta .fai-orb { animation: none; }
  }
}

/* ============================ Finance Gold Preview ============================
   Impianto grafico su riferimento fornito: pannello scuro con anello di luce,
   riquadri annidati piu' chiari, metriche grandi con etichetta minuta sopra.
   Due scelte di colore, prese apposta:
   - l'azzurro resta il colore dell'INTERFACCIA (bordi, titoli, accenti), per
     non far sembrare la pagina di un altro sito;
   - verde e rosso sono riservati alla DIREZIONE del prezzo. Su una pagina di
     quotazioni quei due colori significano gia' qualcosa per chi legge:
     usarli per decorare renderebbe illeggibile l'unica cosa che contano. */

.pv-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  /* Era una sfumatura azzurra con un alone blu sotto. Su un fondo azzurrato
     si notava appena; su un nero neutro diventava una macchia blu grande
     quanto mezza pagina, e faceva sembrare il riquadro acceso quando non
     c'era niente da segnalare. Nel riferimento i riquadri sono piatti. */
  background: var(--surface-1);
  box-shadow: none;
}
.pv-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .022);
}
.pv-didascalia {
  margin: 13px 6px 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
}
.pv-didascalia b { color: var(--text-2); font-weight: 600; }

/* ---------- intestazione della quotazione ---------- */
.pv-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.pv-nome {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0;
}
.pv-testa-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pv-p {
  font-size: 38px; font-weight: 800; letter-spacing: -.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pv-p.su { color: #4ade80; }
.pv-p.giu { color: #ff6b7a; }
.pv-var { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-var.su { color: #4ade80; }
.pv-var.giu { color: #ff6b7a; }

.pv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .04);
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--text-2); white-space: nowrap;
}
.pv-chip.su { color: #4ade80; border-color: rgba(74, 222, 128, .34); background: rgba(74, 222, 128, .10); }
.pv-chip.giu { color: #ff6b7a; border-color: rgba(255, 107, 122, .34); background: rgba(255, 107, 122, .10); }
.pv-chip.vivo { color: var(--accent-bright); border-color: var(--accent-line); background: var(--accent-soft); }
.pv-chip.neutro { color: var(--text-2); }

/* ---------- riquadri metrica ---------- */
.pv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pv-tiles.due { grid-template-columns: repeat(2, 1fr); }
.pv-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, .022);
  display: flex; flex-direction: column; gap: 3px;
}
.pv-tile.con-anello { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.pv-tile.con-anello > div { display: flex; flex-direction: column; gap: 3px; }
.pv-t-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.pv-t-v { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv-t-v.su { color: #4ade80; }
.pv-t-v.giu { color: #ff6b7a; }
.pv-t-s { font-size: 12px; line-height: 1.4; color: var(--text-3); }

/* ---------- anello indicatore ---------- */
.pv-anello { position: relative; width: 64px; height: 64px; flex: none; }
.pv-anello svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-a-fondo { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.pv-a-arco {
  fill: none; stroke: var(--accent-bright); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dasharray .5s ease;
}
.pv-anello.caldo .pv-a-arco { stroke: #ffbc4d; }
.pv-a-t {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.pv-a-t b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pv-a-t i { font-style: normal; font-size: 8.5px; letter-spacing: .04em; color: var(--text-3); }

/* ---------- commento ---------- */
.pv-c-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.pv-c-k {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-bright);
}
.pv-c-k svg { width: 14px; height: 14px; }
.pv-c-ora { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pv-c-corpo { display: grid; grid-template-columns: 92px 1fr 190px; gap: 20px; align-items: start; }
.pv-voto {
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 14px 8px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, .03);
}
.pv-voto b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.pv-voto i { font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pv-voto.forte, .pv-voto.su { border-color: rgba(74, 222, 128, .34); background: rgba(74, 222, 128, .09); }
.pv-voto.forte b, .pv-voto.su b { color: #4ade80; }
.pv-voto.debole, .pv-voto.giu { border-color: rgba(255, 107, 122, .34); background: rgba(255, 107, 122, .09); }
.pv-voto.debole b, .pv-voto.giu b { color: #ff6b7a; }
.pv-c-t { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 10px; }
.pv-c-testo p { font-size: 14.5px; line-height: 1.62; color: var(--text-2); margin: 0 0 10px; }
.pv-c-testo p b { color: var(--text); font-weight: 700; }
.pv-focus {
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--accent-soft);
  padding: 11px 14px; margin-top: 4px;
}
.pv-focus > span {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 4px;
}
.pv-focus p { margin: 0 !important; font-size: 13.5px !important; }
.pv-c-lato { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pv-c-lk {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1px;
}

/* ---------- scala dei livelli ----------
   Altezza fissa: le voci sono posizionate in percentuale, quindi senza
   un'altezza definita collasserebbero tutte in cima. */
.pv-scala { position: relative; height: 268px; margin-top: 16px; }
.pv-asta {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 107, 122, .30), rgba(255, 255, 255, .10) 50%, rgba(74, 222, 128, .30));
  border-radius: 2px;
}
.pv-liv {
  position: absolute; left: 0; right: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 10px; font-size: 12.5px;
}
.pv-liv::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed rgba(255, 255, 255, .10);
}
.pv-l-k, .pv-l-v {
  position: relative; background: var(--bg); padding: 2px 7px; border-radius: 8px;
}
.pv-l-k { color: var(--text-3); font-weight: 600; }
.pv-l-k i { font-style: normal; }
.pv-l-k .corto { display: none; }
.pv-l-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.pv-liv.r1 .pv-l-v, .pv-liv.r2 .pv-l-v { color: #ff6b7a; }
.pv-liv.s1 .pv-l-v, .pv-liv.s2 .pv-l-v { color: #4ade80; }
.pv-liv.pv .pv-l-v { color: var(--text); }
.pv-ora {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-fill); color: #fff;
  box-shadow: 0 0 0 5px rgba(38, 128, 255, .13), 0 10px 26px -10px var(--accent-glow);
  white-space: nowrap; z-index: 2;
}
.pv-o-p { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pv-o-k { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }

/* ---------- performance ---------- */
.pv-perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.pv-pf {
  border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px;
  background: rgba(255, 255, 255, .022);
  display: flex; flex-direction: column; gap: 5px;
}
.pv-barra { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pv-barra i { display: block; height: 100%; border-radius: 3px; background: var(--text-3); }
.pv-barra i.su { background: #4ade80; }
.pv-barra i.giu { background: #ff6b7a; }

/* ---------- due colonne: numeri e spiegazioni ----------
   Le spiegazioni stanno SEMPRE a fianco, mai dietro a un pulsante: e' il
   motivo per cui questa pagina esiste in questa forma. */
.pv-due { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.pv-guida .pv-box { display: flex; flex-direction: column; gap: 0; }
.pv-g { padding: 13px 0; border-bottom: 1px solid var(--border); }
.pv-g:last-child { border-bottom: 0; padding-bottom: 0; }
.pv-g h4 { font-size: 13.5px; font-weight: 800; margin: 0 0 4px; color: var(--text); }
.pv-g p { font-size: 13px; line-height: 1.58; color: var(--text-3); margin: 0; }
.pv-g p b { color: var(--text-2); font-weight: 700; }

@media (max-width: 1180px) {
  .pv-due { grid-template-columns: 1fr; }
  .pv-c-corpo { grid-template-columns: 84px 1fr; }
  .pv-c-lato { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pv-c-lk { width: 100%; }
}
@media (max-width: 860px) {
  .pv-tiles { grid-template-columns: repeat(2, 1fr); }
  .pv-perf { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pv-panel { padding: 10px; border-radius: 14px; }
  .pv-box { padding: 14px; }
  .pv-testa-r { align-items: flex-start; }
  .pv-p { font-size: 31px; }
  .pv-tiles, .pv-tiles.due { grid-template-columns: 1fr; }
  .pv-c-corpo { grid-template-columns: 1fr; gap: 14px; }
  .pv-voto { flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 9px; }
  .pv-c-t { font-size: 17px; }
  /* Sul telefono la scala e' larga meno di 300px. Verificato: il nome per
     esteso finiva SOTTO la pastiglia del prezzo, che ha sfondo pieno e la
     copriva. Quindi tre cose insieme: sigla al posto del nome, nome e valore
     spostati tutti a destra, pastiglia ancorata a sinistra. Cosi' stanno su
     due lati opposti e non possono piu' incontrarsi. */
  .pv-scala { height: 240px; }
  .pv-l-k { font-size: 11.5px; }
  .pv-l-k .lungo { display: none; }
  .pv-l-k .corto { display: inline; }
  .pv-liv { justify-content: flex-end; gap: 8px; padding-right: 0; }
  .pv-ora { left: 0; transform: translate(0, -50%); padding: 5px 11px; }
  .pv-o-p { font-size: 14px; }
}

/* ============================= Pip Calculator ============================
   Stessa famiglia grafica di Finance Gold Preview (pannello con anello di luce,
   riquadri annidati): sono due strumenti della stessa sezione e devono
   sembrare fatti dalla stessa mano. Qui in piu' ci sono i controlli. */

.pc-due { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; }
.pc-lato { display: flex; flex-direction: column; }

.pc-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pc-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.pc-hint { font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.pc-sel { cursor: pointer; }

/* ---------- selettori a due o piu' scelte ---------- */
.pc-seg {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .022);
}
.pc-seg button {
  flex: 1; padding: 9px 10px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text-3);
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -.005em;
  transition: background .15s ease, color .15s ease;
}
.pc-seg button:hover { color: var(--text); }
/* Acceso col velo dell'accento, non col blu pieno. Un riempimento pieno in
   mezzo a un modulo grida piu' del risultato che il modulo deve produrre —
   ed e' la stessa scelta fatta sui tasti. */
.pc-seg button.on {
  background: rgba(38, 128, 255, .12); color: var(--accent-bright);
  box-shadow: inset 0 0 0 1px rgba(38, 128, 255, .40);
}
.pc-seg.grande button { padding: 12px 10px; font-size: 14px; }
/* Compra e vendi prendono il colore del loro significato solo da accesi:
   spenti sarebbero due bottoni colorati che sembrano entrambi attivi. */
.pc-seg button.su.on { background: rgba(74, 222, 128, .16); color: #4ade80; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .40); }
.pc-seg button.giu.on { background: rgba(255, 107, 122, .16); color: #ff6b7a; box-shadow: inset 0 0 0 1px rgba(255, 107, 122, .40); }

/* ---------- lotti ---------- */
.pc-lotti { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-lotto {
  min-width: 52px; padding: 8px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .022); color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pc-lotto:hover { color: var(--text); border-color: var(--accent-line); }
.pc-lotto.on {
  background: rgba(38, 128, 255, .12);
  border-color: rgba(38, 128, 255, .40);
  color: var(--accent-bright);
}

/* ---------- messaggio e pulsante ---------- */
.pc-msg-box { justify-content: flex-end; }
.pc-msg { font-size: 12.5px; line-height: 1.4; color: var(--text-3); min-height: 18px; }
.pc-msg.male { color: #ffbc4d; }
.pc-vai {
  width: 100%; padding: 15px 18px; cursor: pointer;
  border: 0; border-radius: 10px;
  background: linear-gradient(100deg, var(--accent-fill), var(--accent-bright));
  color: #fff; font: inherit; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 14px 34px -16px var(--accent-glow);
  transition: filter .15s ease, transform .1s ease;
}
.pc-vai:hover { filter: brightness(1.08); }
.pc-vai:active { transform: translateY(1px); }

/* ---------- risultato ---------- */
.pc-grande {
  border: 1px solid var(--accent-line); border-radius: 14px;
  padding: 22px 18px; margin-top: 14px; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 70%), rgba(255, 255, 255, .02);
  display: flex; flex-direction: column; gap: 5px;
}
.pc-g-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.pc-g-v {
  font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: var(--accent-bright); font-variant-numeric: tabular-nums;
}
.pc-g-s { font-size: 12.5px; color: var(--text-3); }

.pc-ipotesi {
  margin-top: 14px; padding: 12px 14px;
  border-left: 2px solid var(--border-strong); border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .022);
}
.pc-ipotesi > span {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 4px;
}
.pc-ipotesi p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.pc-ipotesi p b { color: var(--text-2); font-weight: 700; }

/* ---------- stati vuoti ---------- */
.pc-vuoto { padding: 34px 16px; text-align: center; color: var(--text-3); }
.pc-vuoto.piccolo { padding: 24px 12px; }
.pc-vuoto p { margin: 0; font-size: 13px; line-height: 1.6; }
.pc-vuoto b { color: var(--text-2); }
.pc-vuoto-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 12px;
  border: 1px dashed var(--border-strong); border-radius: 10px;
  font-size: 20px; font-weight: 400; color: var(--text-3);
}

/* ---------- storico ---------- */
.pc-storia-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-svuota {
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; cursor: pointer;
  background: transparent; color: var(--text-3); font: inherit; font-size: 11.5px; font-weight: 600;
}
.pc-svuota:hover { color: #ff6b7a; border-color: rgba(255, 107, 122, .38); }
.pc-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.pc-riga:last-child { border-bottom: 0; padding-bottom: 2px; }
.pc-riga > div:first-child b { font-size: 13.5px; font-weight: 800; display: block; }
.pc-r-s { font-size: 11.5px; color: var(--text-3); }
.pc-r-v { text-align: right; }
.pc-r-v b { font-size: 14px; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.pc-r-v b.su { color: #4ade80; }
.pc-r-v b.giu { color: #ff6b7a; }
.pc-r-v span { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* A tutta pagina. Il tetto di 1280px vale per il resto della piattaforma,
   dove serve: una lezione o un articolo letti su righe lunghissime stancano.
   Qui non c'e' niente da leggere di seguito — ci sono due colonne di comandi
   e di numeri — e lo spazio vuoto a destra era solo spazio sprecato. Alzato
   SOLO su questa pagina, non per tutte.

   Alzato, non tolto: senza alcun tetto, su un monitor da 2560 il campo del
   prezzo diventava largo settecento pixel per ospitare quattro cifre, e il
   pulsante attraversava mezzo schermo. A 1560 la pagina e' piena su
   qualsiasi portatile o monitor normale, e sui pochi schermi piu' larghi si
   ferma prima di diventare goffa. */
body.app[data-page="pipcalculator"] { --app-largo: 1560px; }

/* Le due colonne crescono insieme invece di lasciare il risultato fisso a
   420px: su uno schermo largo il pannello dei numeri deve respirare quanto
   il modulo, altrimenti sembra una striscia appiccicata al bordo. */
@media (min-width: 1181px) {
  .pc-due { grid-template-columns: minmax(0, 1fr) minmax(390px, 31%); }
}

@media (max-width: 1180px) {
  .pc-due { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pc-griglia { grid-template-columns: 1fr; }
  /* Nove misure di lotto su una riga sola non ci stanno: con min-width a
     zero venivano schiacciate finche' la prima si tagliava contro il bordo.
     Con un minimo vero vanno a capo su due righe e restano leggibili. */
  .pc-lotto { flex: 1 1 46px; min-width: 46px; }
  .pc-g-v { font-size: 35px; }
  .pc-seg.grande button { font-size: 13px; }
  /* Il messaggio sta sotto il pulsante quando la colonna e' una sola: in cima
     verrebbe letto prima ancora di aver premuto qualcosa. */
  .pc-msg-box { order: 2; }
}

/* ---------- Lot Calculator: avvisi ----------
   Il piu' importante e' quello rosso: significa che il lotto minimo del
   broker sfonda gia' il rischio deciso. Chi non lo legge apre lo stesso con
   0,01 e rischia piu' del previsto senza accorgersene, quindi qui l'avviso
   deve pesare quanto il risultato. */
.lc-avviso {
  margin-top: 12px; padding: 12px 14px;
  border-left: 2px solid #ffbc4d; border-radius: 0 10px 10px 0;
  background: rgba(255, 188, 77, .08);
}
.lc-avviso.male { border-left-color: #ff6b7a; background: rgba(255, 107, 122, .09); }
.lc-avviso > span {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #ffbc4d; margin-bottom: 4px;
}
.lc-avviso.male > span { color: #ff6b7a; }
.lc-avviso p { margin: 0; font-size: 13px; line-height: 1.58; color: var(--text-2); }
.lc-avviso p b { color: var(--text); font-weight: 700; }

/* Risultato non ottenibile: il numero grande si spegne invece di sparire,
   cosi' si vede che il calcolo e' stato fatto e non e' andato a buon fine. */
.pc-grande.spento { border-color: var(--border); background: rgba(255, 255, 255, .02); }
.pc-grande.spento .pc-g-v { color: var(--text-3); }

body.app[data-page="lotcalculator"] { --app-largo: 1560px; }

/* ============================== Wealth Tracker ==========================
   Stessa famiglia dei calcolatori: pannello con anello di luce, riquadri
   annidati. Qui il pezzo forte e' la ciambella con la cifra grande accanto,
   come nelle reference. */

body.app[data-page="wealth"] { --app-largo: 1560px; }

.wt-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.wt-somma { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wt-tot {
  font-size: 52px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.wt-pallino { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- ciambella ---------- */
.wt-grafico { flex: none; width: 208px; height: 208px; }
.wt-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wt-fetta { transition: opacity .15s ease; }
.wt-svg:hover .wt-fetta { opacity: .45; }
.wt-svg .wt-fetta:hover { opacity: 1; }
/* Il testo al centro va riportato dritto: il gruppo e' ruotato di -90 gradi
   per far partire la prima fetta dall'alto. */
.wt-svg text {
  transform: rotate(90deg); transform-origin: 100px 100px;
  text-anchor: middle; fill: var(--text-3);
}
.wt-c-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.wt-c-v { font-size: 30px; font-weight: 800; fill: var(--text); letter-spacing: -.02em; }
.wt-vuoto-g {
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--text-3); padding: 22px;
}

/* ---------- legenda / ripartizione ----------
   Nome, cifra e percentuale stanno SEMPRE scritti accanto al colore: due dei
   sei colori sfiorano il contrasto minimo sul fondo scuro, e comunque una
   ciambella non fa confrontare due fette di misura simile. */
.wt-l {
  display: grid; grid-template-columns: 1fr auto 62px; gap: 4px 14px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border);
}
.wt-l:last-child { border-bottom: 0; padding-bottom: 2px; }
.wt-l-k { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.wt-l-k i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.wt-l-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-l-p { font-size: 13px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.wt-barra {
  grid-column: 1 / -1; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .06); overflow: hidden;
}
.wt-barra i { display: block; height: 100%; border-radius: 3px; }

/* ---------- due colonne: modulo e voci ---------- */
.wt-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ---------- scelta della categoria ---------- */
.wt-cat { display: flex; flex-wrap: wrap; gap: 7px; }
.wt-c {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .022); color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 700;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wt-c i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wt-c:hover { color: var(--text); border-color: var(--accent-line); }
.wt-c.on { background: rgba(255, 255, 255, .06); border-color: var(--text-3); color: var(--text); }

.wt-azioni { display: flex; align-items: center; gap: 10px; }
.wt-azioni .pc-vai { flex: 1; }
.wt-annulla { padding: 13px 14px; }

/* ---------- elenco voci ---------- */
.wt-v {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 12px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.wt-v:last-child { border-bottom: 0; }
.wt-v-c { width: 4px; height: 30px; border-radius: 3px; }
.wt-v-n { min-width: 0; }
.wt-v-n b { display: block; font-size: 14px; font-weight: 700; }
.wt-v-n span { font-size: 11.5px; color: var(--text-3); }
.wt-v-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wt-v-a { grid-column: 2 / -1; display: flex; gap: 6px; margin-top: 2px; }
.wt-mini {
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; cursor: pointer;
  background: transparent; color: var(--text-3); font: inherit; font-size: 11.5px; font-weight: 600;
}
.wt-mini:hover { color: var(--text); border-color: var(--accent-line); }
.wt-mini.rosso:hover { color: #ff6b7a; border-color: rgba(255, 107, 122, .38); }

@media (max-width: 1023px) {
  .wt-due { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wt-testa { flex-direction: column; align-items: stretch; gap: 20px; }
  .wt-tot { font-size: 38px; }
  .wt-grafico { width: 180px; height: 180px; align-self: center; }
  .wt-l { grid-template-columns: 1fr auto; }
  .wt-l-p { grid-column: 2; }
  .wt-c { flex: 1; justify-content: center; }
  .wt-azioni { flex-direction: column; align-items: stretch; }
}

/* ============================== Sentiment Live ==========================
   Stessa famiglia degli altri strumenti. Verde e rosso qui non decorano:
   sono comprato e venduto, l'unica cosa che la pagina deve far capire in un
   colpo d'occhio. */

body.app[data-page="sentiment"] { --app-largo: 1560px; }

.st-scelta { max-width: 380px; }
.st-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- barra della forza ---------- */
.st-barra { display: flex; gap: 2px; margin-top: 14px; }
.st-barra > span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: 8px; overflow: hidden; min-width: 44px;
  font-variant-numeric: tabular-nums;
}
.st-barra.grande > span { height: 74px; flex-direction: column; gap: 1px; border-radius: 10px; }
.st-barra b { font-size: 13.5px; font-weight: 800; }
.st-barra.grande b { font-size: 27px; letter-spacing: -.02em; }
.st-barra i { font-style: normal; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .8; }
.st-b-c { background: rgba(47, 191, 113, .22); color: #4ade80; box-shadow: inset 0 0 0 1px rgba(47, 191, 113, .38); }
.st-b-v { background: rgba(229, 72, 77, .20); color: #ff6b7a; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .38); }

/* ---------- sentimentrometro ---------- */
.st-quadro { display: grid; grid-template-columns: 380px 1fr; gap: 26px; align-items: start; margin-top: 14px; }
.st-q-box { text-align: center; }
.st-q { width: 100%; height: auto; }
.st-q-z {
  font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--text-3);
  letter-spacing: .01em;
}
.st-q-z.on { fill: var(--text); font-size: 12px; }
.st-q-e { font-size: 10px; fill: var(--text-3); letter-spacing: .05em; text-transform: uppercase; }
.st-ago { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.st-perno { fill: var(--text); }
.st-verdetto { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.st-q-nota { font-size: 12px; line-height: 1.5; color: var(--text-3); margin: 8px auto 0; max-width: 300px; }

.st-q-testo p { font-size: 14px; line-height: 1.62; color: var(--text-2); margin: 0 0 11px; }
.st-q-testo p:last-child { margin-bottom: 0; }
.st-q-testo b { color: var(--text); font-weight: 700; }
.st-perche {
  border-left: 2px solid var(--border-strong); border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .022); padding: 12px 14px; margin-bottom: 12px;
}
.st-perche > span {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 4px;
}
.st-perche p { margin: 0 !important; font-size: 14px !important; }

/* ---------- dettaglio e andamento ---------- */
.st-due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.st-riga { padding: 12px 0; border-bottom: 1px solid var(--border); }
.st-riga:last-child { border-bottom: 0; padding-bottom: 0; }
.st-r-t { display: flex; flex-direction: column; gap: 1px; }
.st-r-s { font-size: 12px; line-height: 1.5; color: var(--text-3); }
.st-r-s b { color: var(--text-2); font-weight: 700; }

.st-linea-box { position: relative; margin-top: 16px; }
.st-linea { width: 100%; height: 132px; display: block; }
.st-tratto { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-area { fill: var(--accent-soft); stroke: none; }
.st-meta { stroke: rgba(255, 255, 255, .14); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.st-ultimo { fill: var(--accent-bright); }
.st-adesso {
  position: absolute; right: 0; top: -6px;
  font-size: 12px; font-weight: 700; color: var(--accent-bright);
  background: var(--bg); padding: 2px 6px; border-radius: 8px;
}

@media (max-width: 1180px) {
  .st-quadro { grid-template-columns: 1fr; gap: 18px; }
  .st-due { grid-template-columns: 1fr; }
  .st-q-box { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .st-barra.grande > span { height: 62px; }
  .st-barra.grande b { font-size: 22px; }
  .st-verdetto { font-size: 25px; }
  /* Le etichette delle zone si accavallano sotto i 380px del quadrante:
     restano leggibili solo rimpicciolendole insieme al disegno. */
  .st-q-z { font-size: 10px; }
  .st-q-z.on { font-size: 11px; }
}

/* ========================================================================
   NUOVA STRUTTURA DI /app — sul riferimento fornito.

   Tre cambiamenti che si vedono subito, e uno che non si vede:
   1. la barra in alto e' ridotta a marchio + icone;
   2. il menu laterale e' una colonna stretta con l'icona SOPRA l'etichetta;
   3. il titolo di ogni pagina prende il colore d'accento, come nel
      riferimento, e sotto ci sta la fascia delle sessioni di mercato.
   Il quarto e' il carattere, dichiarato solo dentro l'area membri: il sito
   pubblico resta com'e', perche' la richiesta riguardava /app.

   Queste regole stanno in fondo al foglio APPOSTA: arrivano dopo quelle
   originali e le sovrascrivono senza doverle cancellare, cosi' un domani
   basta togliere questo blocco per tornare indietro.
   ======================================================================== */

/* ==========================================================================
   LA PALETTE DELL'AREA MEMBRI
   ==========================================================================
   Presa dal riferimento, e non stimata a occhio dalla schermata: i valori
   arrivano dal loro foglio di stile, che dichiara #060606 come fondo e
   #f0f0f0 come testo, piu' un #09090b che e' esattamente zinc-950 di
   Tailwind. Da quello si risale a tutta la scala di grigi che usano, che e'
   quella: non servono ipotesi.

   Cosa cambia rispetto a prima: i nostri grigi erano azzurrati (#05070c,
   #10151f). Sembra un dettaglio, ma affiancando le due schermate e' la prima
   differenza che si nota — i loro grigi sono neutri, e il blu resta solo
   dove il blu ci deve stare.

   L'unica cosa che NON si copia e' l'accento: loro hanno un verde-acqua, noi
   teniamo il blu del marchio.

   Sta tutto su body.app: il sito pubblico non si sposta di un pixel.
   ========================================================================== */
body.app {
  /* ---- superfici ---- */
  --bg: #060606;
  --surface-0: #0a0a0b;
  --surface-1: #131316;
  --surface-2: #1a1a1e;
  --surface-3: #232327;

  /* ---- bordi ----
     Grigi pieni al posto del bianco trasparente. Il bianco all'11% su fondi
     di lightness diversa da' bordi di tinta diversa: nel riferimento invece
     i riquadri sembrano tutti tagliati dallo stesso coltello, e il motivo e'
     questo. */
  --border: #232326;
  --border-strong: #35353b;

  /* ---- testo ----
     #f0f0f0 e' il loro bianco. I due grigi sotto sono zinc-300 e zinc-400.
     Nel riferimento le etichettine piccole scendono ancora di un gradino
     (zinc-500), ma li' il contrasto cade a 3,9:1: su una scritta da dieci
     pixel si legge male, ed e' una loro debolezza, non una cosa da copiare.
     Qui ci si ferma un passo prima, restando nella stessa famiglia. */
  --text: #f0f0f0;
  --text-2: #d4d4d8;
  --text-3: #a1a1aa;

  /* ---- l'accento resta il nostro ----
     Ridichiarato qui solo per averlo sott'occhio insieme al resto: i valori
     sono identici a quelli della radice. */
  --accent-soft: rgba(38, 128, 255, 0.12);
  --accent-line: rgba(38, 128, 255, 0.40);

  /* Gli alias storici puntano alle variabili nuove: mezzo foglio di stile
     usa ancora --panel e --line, e senza questa riga resterebbero indietro. */
  --void: var(--bg);
  --depth: var(--surface-0);
  --panel: var(--surface-1);
  --raise: var(--surface-2);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --ivory: var(--text);
  --sage: var(--text-2);
  --sage-dim: var(--text-3);

  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.55);
}

body.app {
  /* Instrument Sans: e' il carattere del riferimento, non piu' una scelta
     per somiglianza. Dichiarato qui e non nella radice perche' il sito
     pubblico continua con il suo.
     DM Mono lo affianca per i NUMERI - prezzi, orari, scale dei grafici -
     dove servono cifre della stessa larghezza: una colonna di prezzi in un
     carattere proporzionale balla a ogni aggiornamento. */
  --font-display: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-serif: var(--font-display);
  /* Le etichettine in maiuscoletto restano nel carattere di testo: nel
     riferimento sono in Instrument Sans, non monospaziate. */
  --font-mono: var(--font-display);
  --font-dati: "DM Mono", var(--font-dati);
  /* 246 pixel: con le righe orizzontali serve spazio per icona, margini e il
     nome piu' lungo per esteso — "Calendario economico" a 13,5px misura 148.
     La larghezza segue il testo, non il contrario. */
  --app-side: 246px;
  /* Zero: la barra in alto non c'e' piu' sullo schermo grande. La variabile
     resta perche' la usano il menu a scomparsa del telefono e il velo che ci
     va sotto, dove la barra invece serve ancora. */
  --app-top: 0px;
  /* Colore delle scritte del menu: grigio chiaro, non bianco pieno. Sta qui
     sul corpo e non sulla singola voce, altrimenti il pulsante in fondo alla
     colonna — che e' un fratello, non un figlio — non lo vedrebbe. */
  --menu-testo: #d4d4d8;
  font-family: var(--font-display);
}

/* ---------------------------- barra in alto --------------------------- */
body.app .app-topbar {
  gap: 12px;
  padding-inline: 16px;
  background: #0a0a0b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.app .top-logo {
  width: auto;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  gap: 9px;
}
body.app .top-logo svg { width: 21px; height: 21px; }
body.app .top-actions { margin-left: auto; gap: 6px; }
body.app .top-icon { width: 34px; height: 34px; }
body.app .top-icon svg { width: 16px; height: 16px; }
body.app .top-plan {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 11px;
}
body.app .top-user {
  padding: 0; border: 0; max-width: none;
}
body.app .top-user .av {
  width: 32px; height: 32px;
  font-size: 11.5px;
  background: var(--accent-fill); color: #fff;
  box-shadow: none;
}
body.app .top-user:hover .av { filter: brightness(1.12); }
@media (max-width: 640px) { body.app .top-plan { display: none; } }

/* ----------------------- menu laterale, a righe ------------------------
   Rifatto sul riferimento: righe orizzontali con l'icona a sinistra e il
   nome per esteso, gruppi allineati a sinistra, e in fondo chi sei con il
   pulsante per uscire. La colonna a icone sovrapposte alle parole leggeva
   peggio proprio dove serve leggere in fretta, e i nomi lunghi -
   "Calendario Economico", "Sala Segnali VIP" - andavano abbreviati per
   starci. Cosi' ci stanno interi.
   ---------------------------------------------------------------------- */
body.app .app-side {
  background: #0a0a0b;
  border-right: 1px solid var(--border);
}
/* Scorre la lista, NON la colonna: cosi' il riquadro con chi sei resta
   incollato in fondo invece di sparire sotto. Nel riferimento sta sempre li',
   ed e' anche il posto dove uno cerca il pulsante per uscire. */
body.app .app-side { overflow: hidden; }
body.app .side-nav {
  padding: 10px 10px 6px;
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  /* La barra di scorrimento non si vede: la lista scorre lo stesso, con la
     rotella e col dito. Era una riga verticale accesa lungo tutta la
     colonna, alta quanto il menu, per un elenco che di solito ci sta
     intero — decorazione che occupava spazio e attirava l'occhio piu' delle
     voci. Nel riferimento non c'e'. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.app .side-nav::-webkit-scrollbar { width: 0; height: 0; }
body.app .side-foot { flex: none; }

body.app .side-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  text-align: left;
  padding: 18px 10px 7px;
  color: var(--text-3);
  opacity: .8;
}
body.app .side-nav > .side-label:first-child { padding-top: 4px; }

body.app .side-link {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 9px 11px;
  margin-bottom: 2px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-align: left;
  white-space: nowrap;
  color: var(--menu-testo);
  /* La transizione e' quello che si nota per primo passando col mouse: senza,
     il colore scatta e sembra un errore invece di una risposta. */
  transition: background-color .14s ease, color .14s ease;
}
body.app .side-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }

/* Col menu largo si legge il nome intero, non l'abbreviazione. */
body.app .side-link .lbl.corto { display: none; }
body.app .side-link .lbl.lungo { display: block; overflow: hidden; text-overflow: ellipsis; }

body.app .side-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}
body.app .side-link:hover svg { opacity: 1; }

/* La voce attiva: colore d'accento, fondo tenue e una barretta a sinistra.
   Tre segnali insieme perche' su un menu lungo uno solo si perde - e la
   barretta e' quella che si vede con la coda dell'occhio. */
body.app .side-link[aria-current="page"] {
  color: var(--accent-bright);
  background: var(--accent-soft);
  font-weight: 700;
}
body.app .side-link[aria-current="page"] svg { opacity: 1; }
body.app .side-link[aria-current="page"]::before {
  display: block;
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
body.app .side-link .pill { margin-left: auto; }

/* ------------------------------- il piede ----------------------------- */
body.app .side-foot {
  padding: 8px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
}

body.app .side-tasti,
body.app .side-esci {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 8px 11px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--menu-testo);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
body.app .side-tasti svg,
body.app .side-esci svg { width: 17px; height: 17px; flex: none; opacity: .85; }
body.app .side-tasti:hover,
body.app .side-esci:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
body.app .side-esci:hover { color: #ff8080; background: rgba(255, 107, 107, .09); }

/* Chi sei, in un riquadro suo: nel riferimento e' l'unico elemento
   incorniciato di tutta la colonna, ed e' quello che la chiude. */
body.app .side-utente {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  min-width: 0;
}
body.app .su-av {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-fill); color: #fff;
  font-size: 11.5px; font-weight: 800;
}
body.app .su-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body.app .su-testo b {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app .su-testo i {
  font-style: normal; font-size: 10.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.app .su-piano {
  flex: none; padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-bright); background: var(--accent-soft);
}


/* ------------------------------- pagina ------------------------------- */
/* ---------------------- contenuto centrato ---------------------------
   Nel riferimento il contenuto sta in mezzo, con lo stesso margine a destra
   e a sinistra. Prima era incollato al menu e tutto lo spazio avanzato
   finiva a destra: su uno schermo largo si vedeva mezza pagina vuota da una
   parte sola.

   Il tetto di larghezza passa dal contenitore ai FIGLI: il contenitore si
   prende tutto lo spazio rimasto — e' quello che permette di centrarci
   dentro qualcosa — mentre ogni blocco della pagina si ferma a
   --app-largo e si mette in mezzo. Cambiando quella variabile una pagina
   puo' essere piu' larga senza toccare altro.

   La chat AI resta fuori: ha gia' un impianto suo, a schermo intero. */
body.app { --app-largo: 1280px; }
body.app .app-main {
  padding-top: calc(var(--app-top) + 26px);
  margin-right: 0;
  max-width: none;
}
body.app:not([data-page="financelink-ai"]) .app-main > * {
  max-width: var(--app-largo);
  margin-inline: auto;
}

/* Il titolo e' il NOME DELLA SEZIONE, in bianco. Prima prendeva il colore
   d'accento e faceva da aggancio visivo, ma li' sopra c'era una frase
   editoriale, non un nome: un nome di sezione scritto in azzurro e in
   corpo grande urla piu' del contenuto che introduce. L'azzurro resta al
   saluto della dashboard, dove serve. */
body.app .page-title,
body.app .oggi-hello {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.03em;
}
body.app .oggi-hello { color: var(--accent-bright); }
body.app .page-title { font-size: clamp(24px, 2.6vw, 30px); }
/* La targhetta bordata sopra il titolo diventa una riga sottile: nel
   riferimento sopra il titolo non c'e' niente, ma toglierla del tutto
   avrebbe fatto perdere in che sezione si e'. */
body.app .page-eyebrow {
  border: 0; background: none; padding: 0;
  color: var(--text-3);
  font-size: 10.5px; letter-spacing: 0.14em;
  margin-bottom: 7px;
}
body.app .page-eyebrow .dot { display: none; }
body.app .page-sub { font-size: 14px; color: var(--text-3); }

/* ------------------- fascia delle sessioni di mercato ------------------ */
.ses {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 18px 0 26px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .018);
}
.ses-piazze { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ses-p { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.ses-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--text-3);
}
.ses-p.on .ses-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .55); }
.ses-p b { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ses-s { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); }
.ses-p.on .ses-s { color: #4ade80; }
.ses-t { font-size: 11.5px; color: var(--text-3); }
.ses-ore { display: flex; gap: 10px; }
.ses-ora {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .022);
}
.ses-ora b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ses-ora i {
  font-style: normal; font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 1023px) {
  /* Sotto i 1024 il menu esce da fuori schermo col pulsante: li' torna
     largo, altrimenti un pannello a scomparsa di 88px sarebbe assurdo. */
  body.side-open .app-side { width: 230px; }
  body.side-open .side-link { flex-direction: row; justify-content: flex-start; gap: 11px; font-size: 13px; padding: 9px 12px; }
  body.side-open .side-link .lbl.corto { display: none; }
  body.side-open .side-link .lbl.lungo { display: block; }
  body.side-open .side-label { text-align: left; padding: 14px 12px 6px; font-size: 10px; }
  body.side-open .side-foot button { flex-direction: row; justify-content: flex-start; gap: 10px; font-size: 12.5px; padding: 9px 12px; }
}
@media (max-width: 620px) {
  .ses { flex-direction: column; align-items: stretch; gap: 12px; }
  .ses-piazze { gap: 9px 18px; }
  .ses-ore { justify-content: space-between; }
  .ses-ora { flex: 1; justify-content: center; }
}

/* ============================= Trading Journal =========================== */

body.app[data-page="journal"] { --app-largo: 1560px; }

/* ---------- curva del capitale ---------- */
.jr-curva-box { position: relative; }
.jr-curva { width: 100%; height: 220px; display: block; }
.jr-linea { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jr-linea.su { stroke: #4ade80; }
.jr-linea.giu { stroke: #ff6b7a; }
.jr-area { stroke: none; }
.jr-area.su { fill: rgba(74, 222, 128, .10); }
.jr-area.giu { fill: rgba(255, 107, 122, .10); }
.jr-punto.su { fill: #4ade80; }
.jr-punto.giu { fill: #ff6b7a; }
.jr-zero { stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }

/* ---------- schemi di comportamento ----------
   Il bordo rosso a sinistra solo su quelli che sono costati: verde su una
   cosa che ti fa perdere soldi sarebbe un messaggio contraddittorio. */
.jr-schemi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.jr-s {
  border: 1px solid var(--border); border-left: 2px solid var(--border-strong);
  border-radius: 0 12px 12px 0; padding: 14px 16px;
  background: rgba(255, 255, 255, .022);
}
.jr-s.male { border-left-color: #ff6b7a; background: rgba(255, 107, 122, .06); }
.jr-s-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jr-s-t b { font-size: 14.5px; font-weight: 800; }
.jr-s-c { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jr-s-c.su { color: #4ade80; }
.jr-s-c.giu { color: #ff6b7a; }
.jr-s-n {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.jr-s p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-3); }

/* ---------- raggruppamenti a barre ---------- */
.jr-g {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.jr-g:last-child { border-bottom: 0; }
.jr-g-k { font-size: 13.5px; font-weight: 700; }
.jr-g-v { font-size: 13.5px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.jr-g-v.su { color: #4ade80; }
.jr-g-v.giu { color: #ff6b7a; }
.jr-g-n { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-3); }
.jr-g .pv-barra { grid-column: 1 / -1; margin-top: 3px; }

/* ---------- elenco operazioni ---------- */
.jr-lista { display: flex; flex-direction: column; }
.jr-r {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px;
  align-items: start; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.jr-r:last-child { border-bottom: 0; }
.jr-r-d {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.jr-r-d.su { background: rgba(74, 222, 128, .14); color: #4ade80; }
.jr-r-d.giu { background: rgba(255, 107, 122, .14); color: #ff6b7a; }
.jr-r-n { min-width: 0; }
.jr-r-n b { display: block; font-size: 14px; font-weight: 800; }
.jr-r-n span { font-size: 11.5px; color: var(--text-3); }
.jr-r-note {
  display: block !important; margin-top: 5px;
  font-size: 12.5px !important; line-height: 1.5; color: var(--text-2) !important;
  border-left: 2px solid var(--border-strong); padding-left: 10px;
}
.jr-r-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.jr-r-v.su { color: #4ade80; }
.jr-r-v.giu { color: #ff6b7a; }
.jr-r-a { grid-column: 2 / -1; display: flex; gap: 6px; margin-top: 4px; }

.jr-emoz { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {
  .jr-schemi { grid-template-columns: 1fr; }
}

/* ===================== Collegamento a MetaTrader ======================= */

body.app[data-page="collega-mt5"] { --app-largo: 1100px; }

.mt-passi { display: flex; flex-direction: column; gap: 26px; }
.mt-p { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.mt-p h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.mt-p p { font-size: 14px; line-height: 1.62; color: var(--text-2); margin: 9px 0 0; }
.mt-p p b { color: var(--text); }
.mt-p code {
  font-family: var(--font-dati);
  font-size: 13px; background: rgba(255, 255, 255, .06);
  padding: 2px 7px; border-radius: 8px;
}
/* La nota spiega il PERCHE' del passaggio: sta piu' in basso di tono perche'
   chi ha fretta deve poterla saltare senza perdere l'istruzione. */
.mt-nota { font-size: 13px !important; color: var(--text-3) !important; }

.mt-scarica { display: inline-block; width: auto; text-decoration: none; }

.mt-copia {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
.mt-copia code {
  flex: 1; min-width: 0; word-break: break-all;
  background: none; padding: 0; font-size: 13px; color: var(--text);
}
.mt-copia.grande code { font-size: 14.5px; font-weight: 600; }
.mt-copia button { flex: none; }

@media (max-width: 620px) {
  .mt-p { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   FINANCE CARD
   ========================================================================== */

/* Il numero del passaggio. Era gia' usato in collega-mt5.html ma non aveva
   mai avuto una regola: i numeri comparivano come testo nudo in mezzo alla
   colonna da 30px. */
.passo-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 800;
  background: var(--accent-fill); color: #fff;
}

.fc-testa { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; }
.fc-testo h2 {
  font-size: 24px; font-weight: 800; letter-spacing: -.025em;
  line-height: 1.25; margin: 0; max-width: 24ch;
}
.fc-testo > p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); margin: 12px 0 0; max-width: 62ch; }

.fc-punti { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.fc-punti li {
  position: relative; padding-left: 26px;
  font-size: 14px; line-height: 1.55; color: var(--text-2);
}
.fc-punti li b { color: var(--text); }
/* Il segno di spunta e' disegnato, non un carattere: i glifi cambiano forma
   da un sistema all'altro e uno solo di quelli e' allineato bene. */
.fc-punti li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/128% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/128% no-repeat;
}

/* La carta e' un disegno, non la foto del prodotto vero: non ho il pezzo
   reale da mostrare, e mettere una foto presa altrove significherebbe
   promettere un oggetto che potrebbe non essere quello che arriva. Qui si
   capisce a colpo d'occhio che e' un'illustrazione. */
.fc-carta {
  aspect-ratio: 1.586;                 /* le proporzioni vere di una carta */
  border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 140% at 12% 8%, rgba(38, 128, 255, .55), transparent 58%),
    linear-gradient(150deg, #232327, #131316 62%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .45);
}
.fc-c-marchio { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: rgba(255, 255, 255, .9); }
.fc-c-num {
  font-family: var(--font-dati);
  font-size: 16px; letter-spacing: .08em; color: rgba(255, 255, 255, .5);
}
.fc-c-piede i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: rgba(255, 255, 255, .45); }

.fc-passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }

.fc-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; }
.fc-griglia .largo { grid-column: 1 / -1; }
/* Un campo sbagliato si vede subito: senza, su nove campi si ricontrolla
   tutto da capo per trovare quello che manca. */
.fc-griglia .input.male { border-color: #ffbc4d; }

.fc-consenso {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
  padding: 15px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  font-size: 13.5px; line-height: 1.6; color: var(--text-2); cursor: pointer;
}
.fc-consenso input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 1000px) {
  .fc-testa { grid-template-columns: 1fr; gap: 26px; }
  .fc-carta { max-width: 320px; }
  .fc-passi { grid-template-columns: 1fr; gap: 22px; }
  .fc-griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .fc-griglia { grid-template-columns: 1fr; }
  .fc-testo h2 { font-size: 21px; }
}

/* --------------------------------------------------------- il ponte -----
   Lo schema che spiega perche' la carta esiste: da una parte quello che hai,
   dall'altra quello che i negozi accettano, in mezzo chi tiene i fondi.
   I pallini colorati sono pallini, non i marchi veri: un logo ridisegnato a
   memoria si riconosce sempre, e si riconosce come fatto male. */
.fc-ponte {
  display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr;
  gap: 18px; align-items: center;
  padding: 26px 22px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .02);
}

.fc-lato-k, .fc-centro-k {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.fc-centro-k { color: var(--accent-bright); }

.fc-gettoni { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.fc-g {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  font-size: 13px; font-weight: 650; color: var(--text); white-space: nowrap;
}
.fc-g i {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 800;
}

.fc-centro {
  text-align: center; padding: 24px 20px; border-radius: 14px;
  background: linear-gradient(160deg, #1e1e22, #121215);
  border: 1px solid var(--accent-line);
  box-shadow: 0 0 44px rgba(38, 128, 255, .12);
}
.fc-centro-t { display: block; margin-top: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.fc-centro-s { display: block; margin-top: 9px; font-size: 12.5px; color: var(--text-3); }

/* La freccia e' disegnata col bordo: una immagine in piu' da caricare per
   due triangoli non ha senso, e cosi' segue il colore del tema. */
.fc-freccia {
  position: relative; display: block; width: 46px; height: 1px;
  background: var(--accent-line);
}
.fc-freccia::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line);
}

@media (max-width: 900px) {
  /* In colonna le frecce devono puntare in giu': una freccia orizzontale
     sopra un salto verticale indica la direzione sbagliata. */
  .fc-ponte { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .fc-lato, .fc-centro { width: 100%; }
  .fc-gettoni { justify-content: center; }
  .fc-freccia { width: 1px; height: 30px; }
  .fc-freccia::after { right: 50%; top: auto; bottom: 0; transform: translateX(50%) rotate(135deg); }
}

/* ---------------------------------------------------------- i costi -----
   Le quattro voci che il cliente sentira' davvero, in chiaro. */
.fc-costi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fc-costo {
  padding: 16px 17px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .02);
}
.fc-costo-k {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.fc-costo-v { display: block; margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.fc-costo-s { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.fc-costo-s b { color: var(--text); }

/* L'avviso sull'inattivita'. Ha il colore di un avvertimento perche' e' un
   avvertimento: e' l'unico punto in cui il cliente puo' perdere soldi senza
   ricevere niente in cambio, e deve saltare all'occhio PRIMA del modulo. */
.fc-allarme {
  padding: 18px 20px; border-radius: 10px;
  border: 1px solid rgba(255, 188, 77, .34);
  border-left: 3px solid #ffbc4d;
  background: rgba(255, 188, 77, .06);
}
.fc-allarme > span {
  display: block; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #ffbc4d;
}
.fc-allarme p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.62; color: var(--text-2); }
.fc-allarme p b { color: var(--text); }

@media (max-width: 1000px) { .fc-costi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fc-costi { grid-template-columns: 1fr; } }

/* ==========================================================================
   LEZIONE A DUE COLONNE — testo a sinistra, indice del corso a destra
   ========================================================================== */

body.app[data-page="accademia"] { --app-largo: 1400px; }

.lz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; }
/* Il testo non e' piu' centrato nella pagina ma nella sua colonna: con
   l'indice a destra, restare centrato sull'intera larghezza lo spingerebbe
   sotto l'indice. */
.lz-layout .lezione { margin: 0; }

/* L'indice segue la lettura invece di scorrere via. Ha una sua altezza
   massima e un suo scorrimento: sessantaquattro voci non stanno in uno
   schermo, e farle scorrere insieme alla pagina vanificherebbe lo sticky. */
.lz-indice {
  position: sticky; top: 92px;
  max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1);
}
.lz-indice::-webkit-scrollbar { width: 8px; }
.lz-indice::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }

.ix-testa {
  position: sticky; top: 0; z-index: 2;
  padding: 17px 18px 15px; border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.ix-sub { margin: 7px 0 0; font-size: 13.5px; font-weight: 650; color: var(--text); line-height: 1.35; }
.ix-barra { margin-top: 12px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ix-barra i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ix-testa .app-note { margin-top: 8px; }

.ix-corpo { padding: 6px 0 10px; }
.ix-p { padding: 10px 0 2px; }
.ix-p + .ix-p { border-top: 1px solid var(--border); margin-top: 6px; }
.ix-p-k {
  display: block; padding: 4px 18px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3);
}

.ix-a > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.ix-a > summary::-webkit-details-marker { display: none; }
.ix-a > summary:hover { background: rgba(255, 255, 255, .03); }
.ix-a-t { flex: 1; min-width: 0; }
.ix-a-n { flex: none; font-size: 11.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* La freccia della tendina, disegnata col bordo e ruotata all'apertura. */
.ix-a > summary::after {
  content: ""; flex: none; width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.ix-a[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.ix-lezioni { padding: 2px 0 8px; }
.ix-l {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 18px 7px 20px; text-decoration: none;
  font-size: 13px; line-height: 1.45; color: var(--text-2);
}
.ix-l:hover { background: rgba(255, 255, 255, .03); color: var(--text); }
.ix-l-t { flex: 1; min-width: 0; }

/* Il pallino a sinistra dice lo stato senza aggiungere parole: vuoto da
   fare, pieno completato, anello sulla lezione aperta. */
.ix-seg {
  flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: transparent;
}
.ix-l.ok { color: var(--text-3); }
.ix-l.ok .ix-seg {
  border-color: var(--accent); background: var(--accent);
  -webkit-mask: none; mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
.ix-l.qui {
  color: var(--text); font-weight: 700;
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.ix-l.qui .ix-seg { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface-1), inset 0 0 0 8px var(--accent); }

.ix-attesa {
  flex: none; align-self: center;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap;
}

/* Sotto i 1100px l'indice non ci sta di fianco: passa sopra il testo, chiuso
   e non piu' appiccicato, cosi' resta raggiungibile senza rubare la lettura. */
@media (max-width: 1100px) {
  .lz-layout { grid-template-columns: 1fr; gap: 22px; }
  .lz-layout .lezione { order: 2; margin: 0 auto; }
  .lz-indice { order: 1; position: static; max-height: none; overflow: visible; }
  .ix-testa { position: static; }
}

/* Nel testo delle lezioni <b> e' il grassetto normale e <strong> e' quello
   AZZURRO: il punto che regge la lezione, quello da ricordare anche
   dimenticando il resto. Due o tre per lezione al massimo — se si evidenzia
   tutto non si evidenzia niente. */
.lz-corpo strong { color: var(--accent-bright); font-weight: 700; }
/* Dentro il riquadro d'attenzione, che e' gia' ambrato, l'azzurro stonerebbe. */
.lz-corpo .lz-avviso strong { color: inherit; }

/* ==========================================================================
   FX REPLAY — il terminale di backtest
   Le proporzioni sono quelle di una piattaforma vera: barra sopra col
   simbolo, colonna degli attrezzi a sinistra, grafico al centro, barra
   operativa sotto. Chi opera ha gia' questa disposizione negli occhi, e
   spostarla costringerebbe a reimparare dove guardare.
   ========================================================================== */

body.app[data-page="replay"] { --app-largo: 1680px; }

.rp-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; }

.rp-terminale {
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: #0e0e10; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

/* ------------------------------------------------------------ barra alta */
.rp-alto {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: #121215;
}
.rp-alto-sx, .rp-alto-dx { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-sigla { font-size: 14px; font-weight: 800; }
.rp-tf { font-size: 12.5px; color: var(--text-2); }
.rp-sep { width: 1px; height: 16px; background: var(--border-strong); }
.rp-data-sim {
  font-size: 12px; color: var(--text-3);
  font-family: var(--font-dati);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-data-sim.avviso { color: #ffbc4d; }

.rp-mini-b {
  height: 28px; min-width: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-2);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.rp-mini-b:hover { border-color: var(--accent-line); color: var(--text); }

/* ------------------------------------------------------------- il corpo */
.rp-corpo { display: flex; align-items: stretch; }

.rp-attrezzi {
  flex: none; width: 44px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid var(--border); background: #121215;
}
.rp-a {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-3);
}
.rp-a svg { width: 17px; height: 17px; }
.rp-a:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.rp-a.attivo { background: var(--accent-soft); color: var(--accent-bright); }
.rp-a-sep { width: 20px; height: 1px; margin: 5px 0; background: var(--border-strong); }

.rp-area { position: relative; flex: 1; min-width: 0; height: 540px; cursor: crosshair; }
.rp-area.trascina { cursor: grabbing; }
.rp-area canvas { display: block; }

/* Legenda in alto a sinistra: i quattro prezzi della candela sotto il
   mirino, come su qualsiasi piattaforma. */
.rp-legenda {
  position: absolute; top: 8px; left: 10px;
  display: flex; gap: 12px; flex-wrap: wrap; pointer-events: none;
  font-size: 11.5px; color: var(--text-3);
  font-family: var(--font-dati);
}
.rp-l-v b { font-weight: 600; }

.rp-badge-pos {
  position: absolute; top: 8px; right: 84px;
  padding: 5px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 700; pointer-events: none;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border-strong);
}
.rp-badge-pos.su  { color: #26a69a; border-color: rgba(38, 166, 154, .5); background: rgba(38, 166, 154, .12); }
.rp-badge-pos.giu { color: #ef5350; border-color: rgba(239, 83, 80, .5); background: rgba(239, 83, 80, .12); }

/* I comandi di riproduzione fluttuano sul grafico: restano a portata di
   mano senza rubare spazio alle candele. */
.rp-play-bar {
  position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 10px;
  background: rgba(20, 26, 34, .93); border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.rp-p {
  width: 32px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-2);
}
.rp-p svg { width: 17px; height: 17px; }
.rp-p:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.rp-p.principale { background: var(--accent-fill); color: #fff; width: 38px; }
.rp-p.principale:hover { background: var(--accent-hover); }
.rp-p-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 2px; }
.rp-p-vel {
  height: 30px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ------------------------------------------------------- barra operativa */
.rp-basso {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--border); background: #121215;
}
.rp-basso-sx, .rp-basso-dx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.rp-op {
  height: 34px; padding: 0 20px; border-radius: 8px; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
}
.rp-op.compra { background: #26a69a; }
.rp-op.vendi  { background: #ef5350; }
.rp-op.chiudi { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); }
.rp-op:disabled { opacity: .32; cursor: not-allowed; }

.rp-campo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .02);
}
.rp-campo i, .rp-campo u {
  font-style: normal; text-decoration: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--text-3);
}
.rp-mini {
  width: 46px; height: 24px; padding: 0; border: 0; background: transparent;
  color: var(--text); font-size: 13px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.rp-mini:focus { outline: none; }

.rp-lotti {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  border-radius: 8px; background: rgba(255, 255, 255, .04);
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.rp-c { display: flex; flex-direction: column; gap: 1px; padding: 0 12px; }
.rp-c + .rp-c { border-left: 1px solid var(--border); }
.rp-c i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rp-c b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-c b.su  { color: #26a69a; }
.rp-c b.giu { color: #ef5350; }

.rp-tasti { margin: 10px 2px 0; }
.rp-tasti b {
  display: inline-block; padding: 1px 6px; margin: 0 1px; border-radius: 5px;
  background: rgba(255, 255, 255, .07); color: var(--text-2);
  font-family: var(--font-dati); font-size: 11.5px;
}

.rp-fine { display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
  .rp-form { grid-template-columns: repeat(2, 1fr); }
  .rp-area { height: 420px; }
  .rp-basso { justify-content: center; }
}
@media (max-width: 620px) {
  .rp-form { grid-template-columns: 1fr; }
  .rp-area { height: 340px; }
  .rp-attrezzi { width: 38px; }
  .rp-play-bar { bottom: 34px; }
}

/* ------------------------------------------------- archivio dei backtest */
.rp-arc-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rp-arc-azioni { display: flex; gap: 8px; flex: none; }

/* La crocetta che elimina una sessione. Piccola e spenta finche' non ci si
   passa sopra: cancellare un backtest non e' un'azione da invogliare. */
.rp-x {
  width: 24px; height: 24px; padding: 0; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-3); font-size: 15px; line-height: 1; cursor: pointer;
}
.rp-x:hover { border-color: rgba(255, 107, 107, .45); color: #ff6b6b; background: rgba(255, 107, 107, .08); }

/* ==========================================================================
   CORSI — le schede delle aree
   Quindici riquadri con un'immagine si scorrono con l'occhio; quindici righe
   di testo si leggono una per una. L'elenco riga per riga resta nell'indice
   a destra, per chi cerca una lezione precisa.
   ========================================================================== */

.cs-parte { margin-top: 30px; }
.cs-parte:first-of-type { margin-top: 0; }
.cs-parte-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cs-parte-n {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright);
}
.cs-parte-t { font-size: 21px; font-weight: 800; letter-spacing: -.025em; margin: 6px 0 0; }
.cs-parte-d { font-size: 14px; line-height: 1.55; color: var(--text-3); margin: 7px 0 0; max-width: 68ch; }
.cs-parte-c {
  flex: none; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03);
  font-size: 12.5px; font-weight: 800; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.cs-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; }

@media (max-width: 1000px) {
  /* Sotto i mille pixel le due colonne tornano una sopra l'altra: 330 pixel
     fissi a destra strozzerebbero il titolo fino a spezzarlo su tre righe,
     e si perderebbe piu' spazio di quanto se ne guadagna. */
  .crs-top { grid-template-columns: 1fr; gap: 18px; }
}

.cs-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface-1); text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cs-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

/* La miniatura: un fondo blu e un disegno al tratto. Non e' una foto e non
   finge di esserlo — una foto di repertorio su un corso di trading e' la
   cosa che fa sembrare finto tutto il resto. */
.cs-img {
  position: relative; display: block; aspect-ratio: 1.9;
  background: linear-gradient(150deg, var(--accent-fill), #12306b 70%, #0f1b33);
  color: rgba(255, 255, 255, .82);
}
.cs-img svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; }
.cs-card.completa .cs-img { background: linear-gradient(150deg, #1d7a5e, #13503f 70%, #0e2b25); }

.cs-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(6, 12, 20, .62); backdrop-filter: blur(4px);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
}
.cs-tag.fatto  { background: rgba(9, 32, 24, .72); }
.cs-tag.attesa { background: rgba(6, 12, 20, .62); color: rgba(255, 255, 255, .62); }

.cs-corpo { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 16px; flex: 1; }
.cs-t { font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.cs-d { font-size: 13.5px; line-height: 1.5; color: var(--text-2); flex: 1; }
.cs-meta { font-size: 11.5px; color: var(--text-3); }

/* La barra sta sul BORDO della scheda: dice l'avanzamento senza occupare
   una riga di testo, e sparisce da sola quando l'area non e' iniziata. */
.cs-barra { display: block; height: 3px; background: rgba(255, 255, 255, .06); }
.cs-barra i { display: block; height: 100%; background: var(--accent); }
.cs-card.completa .cs-barra i { background: var(--pos); }

@media (max-width: 1400px) { .cs-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .cs-griglia { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .cs-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  {
  .cs-griglia { grid-template-columns: 1fr; }
  .cs-parte-h { flex-direction: column; gap: 10px; }
}

/* ---------------------------------------------- FX Replay · la scrivania */

.rp-schede { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.rp-s {
  padding: 11px 18px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-3); font-size: 14px; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rp-s:hover { color: var(--text-2); }
.rp-s.attiva { color: var(--text); border-bottom-color: var(--accent); }

/* I due punti d'ingresso, come nel riferimento: si comincia da qui, non da
   un modulo gia' aperto che si e' costretti a leggere ogni volta. */
.rp-avvii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rp-avvio {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: inherit; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.rp-avvio:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.rp-avvio-i {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-bright);
  font-size: 18px; font-weight: 700;
}
.rp-avvio b { display: block; font-size: 14.5px; font-weight: 800; }
.rp-avvio i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

.rp-sessioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rp-elenco-sessioni.carica, .rp-sessioni.carica { opacity: .5; pointer-events: none; }

.rp-sess {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface-1);
}
/* Una sessione conclusa resta visibile ma spenta: serve a confrontare, non
   piu' a lavorarci. */
.rp-sess.conclusa { opacity: .78; }
.rp-sess-alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rp-sess-nome { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.rp-sess-sotto { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.rp-sess-stato {
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  background: var(--accent-soft); color: var(--accent-bright);
}
.rp-sess.conclusa .rp-sess-stato { background: rgba(255, 255, 255, .06); color: var(--text-3); }

.rp-sess-cifre { display: flex; gap: 20px; flex-wrap: wrap; }
.rp-sess-cifre span { display: flex; flex-direction: column; gap: 1px; }
.rp-sess-cifre i {
  font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.rp-sess-cifre b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-sess-cifre b.su { color: #26a69a; }
.rp-sess-cifre b.giu { color: #ef5350; }
.rp-sess-cifre u { text-decoration: none; font-size: 11px; color: var(--text-3); }

.rp-sess-piede {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.rp-sess-piede > div { display: flex; gap: 8px; }
.rp-sess-quando { font-size: 11.5px; color: var(--text-3); }
.rp-riapri {
  height: 32px; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent-fill); color: #fff; font-size: 12.5px; font-weight: 800;
}
.rp-riapri:hover { background: var(--accent-hover); }

.rp-filtro { height: 34px; padding: 0 10px; width: auto; font-size: 12.5px; }

.rp-curva-box { padding-top: 6px; }
.rp-curva { height: 220px; margin-top: 10px; }
.rp-curva canvas { display: block; }

.rp-nome-sess { font-size: 13.5px; font-weight: 800; }
.rp-mini-b.forte { border-color: var(--accent-line); color: var(--accent-bright); }

/* ------------------------------------------------------------- modale -- */
.rp-velo {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4, 8, 13, .72);
}
.rp-modale {
  width: min(720px, 100%); max-height: 90vh; overflow: auto;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface-1); box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.rp-mod-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.rp-mod-testa b { font-size: 16px; font-weight: 800; }
.rp-chiudi-mod {
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-3); font-size: 20px; line-height: 1;
}
.rp-chiudi-mod:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.rp-mod-corpo { padding: 20px; }
.rp-mod-piede {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
}
.pc-vai.auto { width: auto; padding: 0 26px; }
.rp-form .largo { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .rp-avvii, .rp-sessioni { grid-template-columns: 1fr; }
}

/* Le unita' di tempo, sul grafico. Sono la cosa che si tocca piu' spesso
   dopo i comandi di riproduzione, quindi stanno in alto a sinistra dove
   stanno su qualsiasi piattaforma. */
.rp-unita { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.rp-u {
  min-width: 30px; height: 24px; padding: 0 7px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-3);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rp-u:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .05); }
.rp-u.attiva { background: var(--surface-1); color: var(--accent-bright); }
/* Spenta, non nascosta: sparire farebbe pensare che quel grafico non esista,
   invece che non esistere per il periodo scelto. */
.rp-u:disabled { opacity: .28; cursor: not-allowed; }
.rp-u.carica { opacity: .5; }

/* --------------------------------------------- FX Replay · l'ordine ---- */

.rp-area.su-livello { cursor: ns-resize; }
.rp-area.sposta { cursor: grabbing; }

/* Il modulo d'ordine sta SUL grafico, non sotto: stop e obiettivo si
   decidono guardando le candele, e guardare altrove per scriverli e' il
   modo piu' rapido di sbagliarli. */
.rp-ticket {
  position: absolute; top: 44px; right: 84px; width: 250px; z-index: 3;
  padding: 12px 13px 13px; border-radius: 10px;
  background: rgba(16, 21, 28, .96); border: 1px solid var(--border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.rp-tk-testa { display: flex; align-items: center; gap: 8px; }
.rp-tk-testa b { font-size: 13.5px; font-weight: 800; }
.rp-tk-testa b.su { color: #26a69a; }
.rp-tk-testa b.giu { color: #ef5350; }
.rp-tk-testa span {
  flex: 1; font-size: 12px; color: var(--text-3);
  font-family: var(--font-dati);
}
.rp-tk-x {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer;
}
.rp-tk-x:hover { background: rgba(255, 255, 255, .07); color: var(--text); }

.rp-tk-righe { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.rp-tk-r {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  padding: 7px 9px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .02);
  border-left-width: 3px;
}
.rp-tk-r.stop { border-left-color: #ef5350; }
.rp-tk-r.obiettivo { border-left-color: #26a69a; }
.rp-tk-r i {
  grid-column: 1; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.rp-tk-r span { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 4px; }
.rp-tk-r u {
  text-decoration: none; font-size: 10px; font-weight: 700; color: var(--text-3);
}
.rp-tk-r b {
  grid-column: 1; font-size: 12.5px; font-weight: 700; color: var(--text-2);
  font-family: var(--font-dati);
}
.rp-tk-in {
  width: 52px; height: 26px; padding: 0 6px; text-align: right;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: rgba(0, 0, 0, .25); color: var(--text);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rp-tk-in:focus { outline: none; border-color: var(--accent-line); }

.rp-tk-conto { display: flex; gap: 14px; margin-top: 11px; }
.rp-tk-conto span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rp-tk-conto i {
  font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.rp-tk-conto b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-tk-conto b.su { color: #26a69a; }
.rp-tk-conto b.giu { color: #ef5350; }
.rp-tk-conto u { text-decoration: none; font-size: 10.5px; color: var(--text-3); }
/* Sopra il due per cento del capitale l'avviso diventa visivo: e' li' che i
   conti si rompono, e un numero grigio non lo dice a nessuno. */
.rp-tk-conto u.male { color: #ffbc4d; font-weight: 700; }

.rp-tk-ok {
  width: 100%; height: 34px; margin-top: 12px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent-fill); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
}
.rp-tk-ok:hover:not(:disabled) { background: var(--accent-hover); }
.rp-tk-ok:disabled { opacity: .35; cursor: not-allowed; }
.rp-tk-aiuto { margin: 8px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--text-3); text-align: center; }

@media (max-width: 620px) { .rp-ticket { right: 8px; width: 220px; } }

/* ------------------------------------- Pips & Lot Calculator ---------- */

body.app[data-page="calcolatori"] { --app-largo: 1560px; }

/* Le due schede. Stesso disegno di quelle di FX Replay: due strumenti
   diversi che si comportano allo stesso modo si imparano una volta sola. */
.cl-schede { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.cl-s {
  padding: 11px 18px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-3); font-size: 14px; font-weight: 700;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s ease, border-color .14s ease;
}
.cl-s:hover { color: var(--text-2); }
.cl-s.attiva { color: var(--text); border-bottom-color: var(--accent); }

@media (max-width: 560px) {
  .cl-s { flex: 1; padding-inline: 8px; font-size: 12.5px; }
}

/* ==========================================================================
   TUTTO NELLA COLONNA
   Sul riferimento non ci sono due barre: c'e' la colonna, e il resto della
   finestra e' contenuto. Marchio, ricerca, notifiche, lingua e account sono
   passati tutti li' dentro. Due barre per orientarsi in una schermata sola
   erano una di troppo, e quella orizzontale rubava cinquantadue pixel di
   altezza a ogni pagina.
   ========================================================================== */

body.app .app-topbar.solo-telefono { display: none; }
body.app .app-side { top: 0; }
body.app .app-main { padding-top: 26px; }

/* -------------------------------------------- il marchio, in cima ------ */
body.app .side-marchio {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 10px;
  flex: none;
}
body.app .sm-logo {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  text-decoration: none; color: var(--text);
}
body.app .sm-logo svg { width: 22px; height: 22px; flex: none; }
body.app .sm-logo b {
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Il selettore della lingua, in cima accanto al marchio. Il menu si apre
   verso il basso e si allinea a destra: aperto verso l'alto finirebbe fuori
   dalla colonna, e la colonna ritaglia quello che le esce. */
body.app .side-marchio .top-lang { flex: none; padding: 0; background: none; border: 0; }
body.app .side-marchio .lang-trigger {
  /* Un filo di respiro in piu' ai lati: con nove pixel la bandiera sfiorava
     il bordo arrotondato del riquadro e sembrava incastrata dentro. */
  height: 32px; padding: 0 11px; gap: 7px;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--menu-testo);
}
body.app .side-marchio .lang-trigger:hover { background: rgba(255, 255, 255, .05); border-color: var(--border-strong); }
/* Il menu della lingua nel sito pubblico e' bianco e centrato sotto al
   pulsante. Qui dentro serve scuro e allineato a destra: centrato uscirebbe
   dalla colonna, che ritaglia quello che le esce, ed e' il motivo per cui la
   prima versione si vedeva a meta'.
   Il transform va riscritto per intero: quello originale contiene un
   translateX(-50%) che rimetterebbe il menu al centro anche con "right: 0". */
body.app .side-marchio .lang-menu {
  left: auto; right: 0;
  top: calc(100% + 8px); bottom: auto;
  transform: translateY(-4px);
  min-width: 180px;
  padding: 6px;
  background: #18181b;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
body.app .side-marchio .lang-switch.open .lang-menu { transform: translateY(0); }
body.app .side-marchio .lang-item {
  border-radius: 8px;
  color: var(--menu-testo);
  font-size: 13px; font-weight: 600;
}
body.app .side-marchio .lang-item:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
body.app .side-marchio .lang-item.on { background: var(--accent-soft); color: var(--accent-bright); }

/* Il campanello, sceso in fondo accanto al pulsante per uscire. */
body.app .side-ntf {
  position: relative; flex: none;
  width: 40px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--menu-testo); cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
body.app .side-ntf svg { width: 16px; height: 16px; }
body.app .side-ntf:hover { background: rgba(255, 255, 255, .05); border-color: var(--border-strong); }
body.app .side-ntf .dot-n {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--accent-fill); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}

/* ---------------------------------------------------- la ricerca ------- */
body.app .side-cerca {
  display: flex; align-items: center; gap: 10px;
  margin: 0 10px 4px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  color: var(--text-3); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color .14s ease, color .14s ease;
}
body.app .side-cerca svg { width: 16px; height: 16px; flex: none; }
body.app .side-cerca span { flex: 1; }
body.app .side-cerca kbd {
  font-family: var(--font-dati);
  font-size: 10px; padding: 2px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: var(--text-3);
}
body.app .side-cerca:hover { border-color: var(--accent-line); color: var(--text-2); }

/* ------------------------------------------ il piede: riga finale ------ */
/* Il riquadro dell'account e' un pulsante a tutti gli effetti: eredita i
   suoi stili ma va ripulito da quelli che il browser mette sui bottoni. */
body.app .side-utente {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  transition: border-color .14s ease, background-color .14s ease;
}
body.app .side-utente:hover { border-color: var(--accent-line); background: rgba(255, 255, 255, .04); }

body.app .side-riga { display: flex; align-items: center; gap: 8px; }
body.app .side-riga .side-esci { flex: 1; }


/* ------------------------------------------------- sul telefono -------- */
@media (max-width: 900px) {
  /* Qui la barra torna: una colonna fissa da 246 pixel non ci sta, e senza
     un pulsante da qualche parte il menu non si aprirebbe piu'. */
  body.app { --app-top: 52px; }
  body.app .app-topbar.solo-telefono {
    display: flex; align-items: center; gap: 10px;
    padding-inline: 12px;
  }
  body.app .app-side { top: var(--app-top); }
  /* Deve tenere conto della barra, che qui e' fissa in cima: con un 18
     secco il titolo della pagina finiva mezzo nascosto sotto. E' rimasto
     cosi' da quando la barra e' sparita dallo schermo grande — li' non fa
     danno perche' --app-top vale zero, sul telefono invece vale 52. */
  body.app .app-main { padding-top: calc(var(--app-top) + 18px); }
  /* Il marchio sarebbe scritto due volte: sparisce quello dentro il menu.
     Il campanello no: e' l'unico modo di vedere le notifiche, e nella barra
     in alto del telefono non c'e' spazio. Resta, allineato a destra. */
  body.app .sm-logo { display: none; }
  body.app .side-marchio { justify-content: flex-end; padding-top: 10px; }
  body.app .side-marchio .lang-menu { right: 0; left: auto; }
}

/* ==========================================================================
   IMPOSTAZIONI — la pagina che si apre dal riquadro dell'account
   Sul riferimento: titolo con una riga di stato sotto, schede, e una scheda
   grande con l'identita' a sinistra e i campi a destra.
   ========================================================================== */

body.app[data-page="account"] { --app-largo: 1180px; }

.ac-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0;
  font-size: 13px; color: var(--text-3);
}
.ac-meta b { color: var(--text-2); font-weight: 700; }
.ac-meta i { font-style: normal; color: var(--border-strong); }

.ac-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1);
  overflow: hidden;
}
.ac-card-testa { padding: 18px 22px 0; }
.ac-kicker {
  display: block; font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.ac-card-testa h2 { font-size: 21px; font-weight: 800; letter-spacing: -.025em; margin: 6px 0 0; }

/* Identita' a sinistra, campi a destra: e' la disposizione del riferimento,
   e tiene insieme "chi sei" e "cosa puoi cambiare" senza farli scorrere. */
.ac-corpo { display: grid; grid-template-columns: 260px 1fr; gap: 0; margin-top: 18px; }
.ac-lato {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; border-right: 1px solid var(--border);
}
.ac-avatar {
  width: 84px; height: 84px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent-fill); color: #fff;
  font-size: 28px; font-weight: 800; letter-spacing: .02em;
  margin-bottom: 6px;
}
.ac-email { font-size: 15px; font-weight: 700; word-break: break-all; line-height: 1.3; }
.ac-lato-n { font-size: 12.5px; color: var(--text-3); }
.ac-lato-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

.ac-campi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 22px; align-content: start; }
.ac-campi.larghi { grid-template-columns: repeat(2, 1fr); }
.ac-campi .largo { grid-column: 1 / -1; }
.pc-aiuto { font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.ac-statico {
  height: 42px; display: flex; align-items: center;
  font-size: 14px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.ac-piede {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px;
  padding-top: 18px;
}
.ac-piede .form-msg { margin: 0; flex: 1; }

.ac-nota { margin: 0; padding: 0 22px 20px; max-width: 76ch; }
.ac-azioni { display: flex; gap: 10px; padding: 0 22px 20px; flex-wrap: wrap; }
.ac-card > .form-msg { margin: 0 22px 18px; }

/* --------------------------------------------------------- le righe --- */
.ac-righe { display: flex; flex-direction: column; padding: 6px 0 8px; }
.ac-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 22px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--border);
  transition: background-color .14s ease;
}
.ac-righe .ac-riga:first-child { border-top: 0; }
.ac-riga:not(.statica):hover { background: rgba(255, 255, 255, .03); }
.ac-riga b { display: block; font-size: 14px; font-weight: 700; }
.ac-riga i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.ac-riga u {
  text-decoration: none; flex: none;
  font-size: 13px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ac-riga:not(.statica):hover u { color: var(--accent-bright); }

/* ---------------------------------------------------------- i piani --- */
.ac-piani { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 22px 0; }
.ac-piano {
  padding: 14px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .02);
  color: var(--text); text-align: left;
}
.ac-piano b { display: block; font-size: 15px; font-weight: 800; }
.ac-piano i {
  display: block; font-style: normal; margin-top: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.ac-piano.on { border-color: var(--accent); background: var(--accent-soft); }
.ac-piano.on b, .ac-piano.on i { color: var(--accent-bright); }
.ac-piano:disabled { cursor: default; }
.ac-piano:not(:disabled):hover { border-color: var(--accent-line); }

/* --------------------------------------------------------- pericolo --- */
/* Il riquadro rosso e' l'unico dell'area membri: se tutto e' evidenziato,
   niente lo e', e questa e' l'unica azione che non si puo' annullare. */
.ac-card.pericolo { border-color: rgba(255, 107, 107, .32); }
.ac-card.pericolo .ac-kicker { color: #ff8080; }
.ac-pericolo {
  height: 38px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 107, 107, .45);
  background: rgba(255, 107, 107, .10); color: #ff8080;
  font-size: 13px; font-weight: 700;
}
.ac-pericolo:hover { background: rgba(255, 107, 107, .18); border-color: #ff6b6b; }

@media (max-width: 900px) {
  .ac-corpo { grid-template-columns: 1fr; }
  .ac-lato { border-right: 0; border-bottom: 1px solid var(--border); }
  .ac-campi { grid-template-columns: 1fr; }
  .ac-piani { grid-template-columns: 1fr; }
}

/* ==========================================================================
   I BOTTONI DELL'AREA MEMBRI
   ==========================================================================
   Nel riferimento il pulsante principale NON e' un rettangolo pieno di
   colore con l'alone sotto: e' scuro, con un velo dell'accento dentro, il
   bordo dell'accento e la scritta dell'accento. Il risultato e' che la
   pagina resta calma e il colore lo si nota dove serve — un tasto pieno e
   luminoso in mezzo a dei dati se li mangia.

   Misure uniche per tutta la piattaforma, che e' l'altra meta' della
   richiesta: prima ogni sezione aveva le sue. Il calcolatore aveva un tasto
   alto 50 pixel con gli angoli a 13, il replay due tasti da 32 e 34 con gli
   angoli a 8, e affiancandoli si vedeva. Adesso: alti 38, angoli a 10,
   respiro laterale di 18. I due formati piu' piccoli (30 e 26) restano per
   le barre degli strumenti, dove un tasto da 38 non ci sta.
   ========================================================================== */

body.app .btn-solid,
body.app .pc-vai,
body.app .rp-riapri,
body.app .rp-tk-ok {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  background: rgba(38, 128, 255, .12);
  border: 1px solid rgba(38, 128, 255, .40);
  color: var(--accent-bright);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease;
}
body.app .btn-solid:hover:not(:disabled),
body.app .pc-vai:hover:not(:disabled),
body.app .rp-riapri:hover:not(:disabled),
body.app .rp-tk-ok:hover:not(:disabled) {
  background: rgba(38, 128, 255, .20);
  border-color: rgba(38, 128, 255, .64);
  /* Niente sollevamento: nel riferimento i tasti non si muovono al passaggio
     del mouse, cambiano solo di tono. Con una barra di comandi fitta, roba
     che si alza di due pixel fa ballare la riga. */
  transform: none;
  filter: none;
  box-shadow: none;
}
body.app .btn-solid:active,
body.app .pc-vai:active { transform: none; }

/* Il tasto del calcolatore e quello del biglietto d'ordine riempiono la loro
   colonna per intero: li' sono l'unica azione della scheda e la larghezza
   piena dice dove si conclude il modulo. Restano gli unici due. */
body.app .pc-vai:not(.auto),
body.app .rp-tk-ok { width: 100%; }
/* .auto e' il tasto che sta in fondo a un modulo largo — "Salva" nelle
   impostazioni. Li' la larghezza piena non aiuta nessuno: un tasto lungo
   mezzo schermo per un'azione piccola. Serve il :not perche' altrimenti la
   regola qui sopra, essendo piu' specifica, se lo mangiava. */
body.app .pc-vai.auto { width: auto; padding: 0 26px; }

/* ------------------------------------------------------- i secondari --- */
body.app .btn-ghost {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  background: #141417;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
body.app .btn-ghost:hover {
  background: #1c1c20;
  border-color: var(--border-strong);
  color: var(--text);
  transform: none;
}

/* I piccoli delle barre: stessa idea, misure ridotte. */
body.app .rp-mini-b,
body.app .pc-svuota {
  border-radius: 8px;
  background: #141417;
  border: 1px solid var(--border);
  color: var(--text-2);
}
body.app .rp-mini-b:hover {
  background: #1c1c20; border-color: var(--border-strong); color: var(--text);
}
body.app .rp-mini-b.forte {
  background: rgba(38, 128, 255, .12);
  border-color: rgba(38, 128, 255, .40);
  color: var(--accent-bright);
}
body.app .btn-xs { height: 30px; padding: 0 14px !important; font-size: 12.5px !important; }

/* ---------------------------------------------- i campi da compilare --- */
/* Avevano il fondo azzurrato preso dalle vecchie superfici; con il nero
   neutro sotto risaltavano come una macchia blu. */
body.app .input,
body.app .rp-tk-in,
body.app .rp-mini {
  background: #101012;
  border-color: var(--border);
  color: var(--text);
  /* Stessi angoli dei tasti: un campo a 6 e il tasto che gli sta accanto a
     10 e' la differenza che si nota senza sapere cosa si sta guardando. */
  border-radius: 10px;
}
body.app .input:focus,
body.app .rp-tk-in:focus,
body.app .rp-mini:focus { border-color: rgba(38, 128, 255, .55); }

/* ==========================================================================
   MERCATI NEL MONDO — la mappa delle borse sulla dashboard
   ========================================================================== */

.mw {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
  overflow: hidden;
}
.mw-testa {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.mw-t {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-2);
  margin: 0;
}
/* L'ora e il conteggio in cifre a larghezza fissa: cambiano ogni secondo, e
   con un carattere proporzionale la riga ballerebbe a ogni scatto. */
.mw-utc {
  font-family: var(--font-dati); font-size: 12.5px; font-weight: 500;
  color: var(--accent-bright); font-variant-numeric: tabular-nums;
}
.mw-utc::after { content: " UTC"; font-size: 10px; color: var(--text-3); letter-spacing: .08em; }
.mw-conto { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mw-leg {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-3);
}
.mw-d {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  display: inline-block; margin-left: 8px;
}
.mw-leg .mw-d:first-child { margin-left: 0; }
.mw-d.aperta { background: #35d07f; }
.mw-d.presto { background: #ffbc4d; }
.mw-d.chiusa { background: #ff6b6b; }

/* Il rapporto e' quello della finestra disegnata: 360 gradi di longitudine
   per 135 di latitudine. Fissarlo qui evita che la tela cambi forma mentre
   la pagina si assesta, che si vedrebbe come uno scatto. */
.mw-mappa { position: relative; aspect-ratio: 360 / 135; background: #08080a; }
.mw-tela { display: block; width: 100%; height: 100%; }

/* Il riquadro col dettaglio segue il puntatore: e' ancorato al punto della
   borsa, e translate lo porta sopra, centrato. */
.mw-info {
  position: absolute; transform: translate(-50%, -100%);
  pointer-events: none; white-space: nowrap;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(10, 10, 11, .94);
  border: 1px solid var(--border-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.mw-info b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.mw-info i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.mw-info span { display: block; font-size: 11px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.mw-info.aperta span { color: #35d07f; }
.mw-info.presto span { color: #ffbc4d; }
.mw-info.chiusa span { color: #ff6b6b; }

.mw-nota {
  margin: 0; padding: 11px 16px 13px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
  max-width: 92ch;
}

@media (max-width: 700px) {
  /* Sul telefono la mappa intera sarebbe alta centoquaranta pixel, con i
     punti a due pixel l'uno dall'altro. Meglio piu' alta e stretta: si
     perde un po' di oceano, si guadagna la leggibilita' dei punti. */
  /* Piu' alto che sul grande, ma senza esagerare: ogni grado in piu' di
     altezza adesso e' mondo vero, non planisfero stirato. */
  .mw-mappa { aspect-ratio: 360 / 165; }
  .mw-leg { margin-left: 0; width: 100%; }
  .mw-nota { font-size: 11px; }
}

/* ==========================================================================
   ORARI DELLE SESSIONI FOREX — la fascia di 24 ore
   ========================================================================== */

.fo, .qd {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
}
.fo-testa, .qd-testa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.fo-t, .qd-t {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-2);
}
.fo-ora {
  font-family: var(--font-dati); font-size: 12.5px; font-weight: 500;
  color: var(--accent-bright); font-variant-numeric: tabular-nums;
}
.fo-etichetta, .qd-etichetta { font-size: 11px; color: var(--text-3); }

/* Altezza fissa: quattro righe di sessione piu' l'asse. Senza, il riquadro
   si ridisegna a ogni aggiornamento e la pagina sotto sussulta. */
/* Le quote sono tutte qui, in un posto solo, perche' i pezzi si incastrano:
   l'etichetta delle ore di punta sta sopra la sua fascia, la fascia comincia
   sopra l'asse, i numeri delle ore stanno sopra la riga dell'asse e le
   sessioni sotto. Spostarne uno senza gli altri li fa accavallare. */
.fo-telaio { position: relative; height: 200px; margin: 20px 20px 6px; }

.fo-asse { position: absolute; inset: 62px 0 auto 0; height: 1px; background: var(--border-strong); }
.fo-tacca { position: absolute; top: 0; width: 0; }
.fo-tacca b {
  position: absolute; top: -18px; left: 0; transform: translateX(-50%);
  font-family: var(--font-dati); font-size: 10.5px; font-weight: 500;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.fo-tacca::after {
  content: ""; position: absolute; top: 1px; left: 0;
  width: 1px; height: 136px; background: var(--border);
}

/* Le fasce di punta stanno DIETRO le barre: sono contesto, non un dato in
   piu' da leggere riga per riga. */
.fo-punta {
  position: absolute; top: 20px; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 188, 77, .13), rgba(255, 188, 77, .02));
  border-left: 1px solid rgba(255, 188, 77, .22);
  border-right: 1px solid rgba(255, 188, 77, .22);
  border-radius: 4px;
}
.fo-punta span {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #ffbc4d; white-space: nowrap;
}

.fo-riga { position: absolute; left: 0; right: 0; height: 26px; }
.fo-r0 { top: 82px; }
.fo-r1 { top: 112px; }
.fo-r2 { top: 142px; }
.fo-r3 { top: 172px; }

.fo-barra {
  position: absolute; top: 9px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(38, 128, 255, .55), rgba(89, 160, 255, .8));
  box-shadow: 0 0 12px rgba(38, 128, 255, .28);
}
.fo-nome {
  position: absolute; top: -6px; transform: translateX(-50%);
  font-size: 12px; font-weight: 700; color: var(--text-3);
  pointer-events: none; white-space: nowrap;
}
/* Il nome della sessione aperta adesso e' l'unica cosa accesa: e' la domanda
   a cui la fascia risponde in un colpo d'occhio. */
.fo-nome.on { color: var(--accent-bright); }

.fo-adesso {
  position: absolute; top: 46px; bottom: 0; width: 1px;
  background: var(--accent-bright);
  box-shadow: 0 0 10px rgba(89, 160, 255, .6);
}
.fo-adesso::before {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 999px; background: var(--accent-bright);
}

.fo-nota, .qd-nota {
  margin: 0; padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.55; color: var(--text-3);
  max-width: 96ch;
}
.fo-nota b, .qd-nota b { color: var(--text-2); font-weight: 700; }

/* ==========================================================================
   QUADRO TECNICO
   ========================================================================== */

.qd-corpo { padding: 16px; }
.qd-vuoto { margin: 0; padding: 26px 0; text-align: center; font-size: 13px; color: var(--text-3); }
.qd-manca { margin: 12px 0 0; font-size: 11.5px; color: #ffbc4d; }

.qd-riga-alta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.qd-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.qd-riepilogo, .qd-carta {
  border: 1px solid var(--border); border-radius: 10px;
  background: #141417; padding: 14px 15px;
}
.qd-k {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.qd-k u {
  text-decoration: none; margin-left: 6px; letter-spacing: 0;
  text-transform: none; font-weight: 600; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.qd-grande { display: block; margin: 8px 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.qd-sotto { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }

.qd .su { color: #35d07f; }
.qd .giu { color: #ff6b7a; }
.qd .fermo { color: var(--text-2); }
.qd-grande.l0 { color: #35d07f; }
.qd-grande.l1 { color: var(--accent-bright); }
.qd-grande.l2 { color: #ffbc4d; }
.qd-grande.l3 { color: #ff6b7a; }

.qd-caselle { display: flex; gap: 4px; }
.qd-caselle i { flex: 1; height: 7px; border-radius: 3px; }
.qd-caselle i.su { background: #35d07f; }
.qd-caselle i.giu { background: #ff6b7a; }

.qd-scala { display: flex; gap: 4px; }
.qd-scala i {
  flex: 1; height: 7px; border-radius: 3px; position: relative;
  background: rgba(255, 255, 255, .07);
}
.qd-scala i em {
  position: absolute; top: 11px; left: 0; right: 0;
  font-style: normal; font-size: 9.5px; text-align: center;
  color: var(--text-3); white-space: nowrap;
}
.qd-scala i.on em { color: var(--text-2); font-weight: 700; }
.qd-scala i.on.l0 { background: #35d07f; }
.qd-scala i.on.l1 { background: var(--accent); }
.qd-scala i.on.l2 { background: #ffbc4d; }
.qd-scala i.on.l3 { background: #ff6b7a; }
/* Le etichette della scala stanno sotto le caselle e sporgono: senza questo
   spazio la riga di testo sotto ci finisce sopra. */
.qd-scala + .qd-sotto { margin-top: 24px; }

.qd-mossi { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.qd-mossi li { display: grid; grid-template-columns: 14px auto 1fr auto; align-items: center; gap: 8px; }
.qd-mossi span { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qd-mossi b { font-size: 12.5px; font-weight: 700; color: var(--text); }
.qd-mossi i { height: 4px; border-radius: 999px; justify-self: start; min-width: 6px; }
.qd-mossi i.su { background: #35d07f; }
.qd-mossi i.giu { background: #ff6b7a; }
.qd-mossi u { text-decoration: none; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ la singola carta */
/* Il filo colorato in alto e' l'unico posto dove la direzione si vede senza
   leggere: con sei carte affiancate il colpo d'occhio conta piu' del testo. */
.qd-carta { position: relative; overflow: hidden; }
.qd-carta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: currentColor; opacity: .8;
}
.qd-carta.su { color: #35d07f; }
.qd-carta.giu { color: #ff6b7a; }
.qd-carta.fermo { color: var(--border-strong); }

.qd-c-alto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qd-c-nome {
  font-family: var(--font-dati); font-size: 14px; font-weight: 500;
  letter-spacing: -.01em; color: var(--text);
}
.qd-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid currentColor; background: rgba(255, 255, 255, .03);
}
.qd-c-var { margin-left: auto; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qd-c-prezzo {
  margin-top: 4px; font-family: var(--font-dati); font-size: 18px; font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums;
}

.qd-conc { margin-top: 11px; }
.qd-conc-riga { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.qd-conc-riga i { display: block; height: 100%; background: currentColor; border-radius: 999px; }
.qd-conc b { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-3); }

.qd-letture { list-style: none; margin: 12px 0 0; padding: 11px 0 0; border-top: 1px solid var(--border); }
.qd-letture li {
  display: grid; grid-template-columns: 7px auto auto 1fr; align-items: baseline;
  gap: 7px; padding: 3px 0; font-size: 11.5px;
}
.qd-letture li i {
  width: 5px; height: 5px; border-radius: 999px; background: currentColor;
  align-self: center;
}
.qd-letture li b { font-weight: 700; color: var(--text-2); }
.qd-letture li u {
  text-decoration: none; font-family: var(--font-dati); font-size: 10.5px;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.qd-letture li span { color: var(--text-3); font-size: 10.5px; text-align: right; }

@media (max-width: 1080px) {
  .qd-riga-alta, .qd-griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .qd-riga-alta, .qd-griglia { grid-template-columns: 1fr; }
  /* A schermo stretto il nome della sessione passa SOPRA la barra: accanto
     si sovrapporrebbe alla barra stessa. */
  .fo-telaio { height: 208px; margin-inline: 14px; }
  .fo-r0 { top: 86px; }
  .fo-r1 { top: 117px; }
  .fo-r2 { top: 148px; }
  .fo-r3 { top: 179px; }
  .fo-nome { font-size: 11px; }
  .fo-tacca::after { height: 142px; }
}

/* ==========================================================================
   SENTIMENT LIVE — elenco degli strumenti e scheda del singolo
   ========================================================================== */

.sl-lista-box {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1); overflow: hidden;
}
.sl-lista-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.sl-t {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-2);
}
.sl-agg { font-size: 11.5px; color: var(--text-3); }
.sl-agg b { font-family: var(--font-dati); font-weight: 500; color: var(--text-2); }

/* Una riga per strumento: nome e prezzo, la barra della concordanza, il
   posizionamento, il pulsante. Le colonne sono fisse e non elastiche, cosi'
   le barre di righe diverse restano incolonnate e si confrontano a occhio —
   che e' l'unico motivo per cui una lista del genere e' utile. */
.sl-r {
  display: grid; grid-template-columns: 200px 1fr 220px auto;
  align-items: center; gap: 18px;
  padding: 13px 16px; border-top: 1px solid var(--border);
}
.sl-r:first-child { border-top: 0; }
.sl-r:hover { background: rgba(255, 255, 255, .018); }

.sl-r-nome b { display: block; font-family: var(--font-dati); font-size: 14px; font-weight: 500; color: var(--text); }
.sl-r-prezzo {
  font-family: var(--font-dati); font-size: 12.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-right: 7px;
}
.sl-r-var { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.sl-r-b-alto { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.sl-r-b-alto u { text-decoration: none; font-size: 11px; color: var(--text-3); }
.sl-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid currentColor; background: rgba(255, 255, 255, .03);
}
.sl-barra { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.sl-barra i { display: block; height: 100%; background: currentColor; border-radius: 999px; }

.sl-r-bias.su, .sl-tag.su, .sl-r-var.su { color: #35d07f; }
.sl-r-bias.giu, .sl-tag.giu, .sl-r-var.giu { color: #ff6b7a; }
.sl-r-bias.fermo, .sl-tag.fermo, .sl-r-var.fermo { color: var(--text-3); }

.sl-k {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
/* Le due parti della barra portano dentro la loro percentuale: un numero
   staccato dalla barra costringe a rileggere quale dei due e' quale. */
.sl-pos { display: flex; height: 20px; border-radius: 6px; overflow: hidden; }
.sl-pos i {
  display: flex; align-items: center; font-style: normal;
  font-size: 10.5px; font-weight: 800; color: #06210f;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.sl-pos i.l { background: #35d07f; padding-left: 7px; }
.sl-pos i.s { background: #ff6b7a; justify-content: flex-end; padding-right: 7px; color: #2a0a0e; }
.sl-pos.grande { height: 30px; margin-top: 4px; }
.sl-pos.grande i { font-size: 12px; padding-inline: 10px; }

.sl-pos-no {
  display: block; font-size: 11.5px; color: var(--text-3);
  padding: 3px 0;
}

.sl-dett { height: 32px; padding: 0 14px; font-size: 12.5px; }

.sl-nota {
  margin: 14px 0 0; font-size: 11.5px; line-height: 1.6;
  color: var(--text-3); max-width: 96ch;
}
.sl-nota b { color: var(--text-2); font-weight: 700; }

/* ------------------------------------------------------------ la scheda -- */

.sl-s-testa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sl-indietro {
  height: 34px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: #141417; border: 1px solid var(--border); color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 700;
}
.sl-indietro:hover { background: #1c1c20; border-color: var(--border-strong); color: var(--text); }
.sl-scelta { width: auto; min-width: 170px; height: 34px; padding: 0 12px; font-size: 13.5px; }

.sl-due { display: grid; grid-template-columns: 1fr 400px; gap: 14px; align-items: start; }
.sl-col { display: flex; flex-direction: column; gap: 14px; }

.sl-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1); padding: 16px 18px;
}
.sl-card .qd-k u {
  text-decoration: none; margin-left: 6px; letter-spacing: 0;
  text-transform: none; font-weight: 600;
}

.sl-p-alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sl-p-nome { font-family: var(--font-dati); font-size: 19px; font-weight: 500; color: var(--text); }
.sl-p-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.sl-p-dx { text-align: right; }
.sl-p-v {
  display: block; font-family: var(--font-dati); font-size: 26px; font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.sl-p-var { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-p-var.su, .sl-cella b.su { color: #35d07f; }
.sl-p-var.giu, .sl-cella b.giu { color: #ff6b7a; }

.sl-p-celle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sl-cella {
  border: 1px solid var(--border); border-radius: 10px;
  background: #141417; padding: 11px 13px;
}
.sl-cella span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); }
.sl-cella b { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; }
.sl-cella b u { text-decoration: none; font-family: var(--font-dati); font-size: 12px;
  font-weight: 500; color: var(--text-3); }

.sl-i-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sl-i-testa .qd-k { margin-bottom: 0; }
.sl-card .qd-conc-riga { margin-top: 12px; }
.sl-card .qd-conc-riga.su { color: #35d07f; }
.sl-card .qd-conc-riga.giu { color: #ff6b7a; }
.sl-card .qd-conc-riga.fermo { color: var(--text-3); }
.sl-conc { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-3); }

/* Le medie in griglia sotto le letture: sono numeri di riferimento, si
   guardano a colpo d'occhio e non si leggono uno per uno. */
.sl-medie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
}
.sl-mv { display: flex; flex-direction: column; gap: 2px; }
.sl-mv span { font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); }
.sl-mv b { font-family: var(--font-dati); font-size: 13px; font-weight: 500;
  color: var(--text-2); font-variant-numeric: tabular-nums; }

.sl-fonte { margin: 9px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-3); }
.sl-come { margin: 11px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.sl-come b { color: var(--text-2); font-weight: 700; }
.sl-assente { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.sl-assente b { color: var(--text); }

.sl-news { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.sl-news li { padding: 10px 0; border-top: 1px solid var(--border); }
.sl-news li:first-child { border-top: 0; padding-top: 2px; }
.sl-news a {
  display: block; font-size: 13.5px; line-height: 1.45; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.sl-news a:hover { color: var(--accent-bright); text-decoration: underline; }
.sl-news span { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); }

@media (max-width: 1080px) {
  .sl-due { grid-template-columns: 1fr; }
  /* La riga a quattro colonne non ci sta: nome e prezzo restano in alto, il
     resto scende sotto. Il pulsante torna a sinistra invece che a destra,
     dove finirebbe sotto al posizionamento senza niente accanto. */
  .sl-r { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .sl-r-nome { grid-column: 1 / -1; }
  .sl-dett { justify-self: start; grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sl-r { grid-template-columns: 1fr; }
  .sl-p-celle, .sl-medie { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   SPIKE LAB — tre colonne: strumenti, grafico, studio
   ==========================================================================
   La disposizione e' quella di un terminale: a sinistra cosa guardare, in
   mezzo il grafico, a destra cosa dice lo studio su quello che si vede. La
   tabella completa sta sotto, a tutta larghezza, perche' sette colonne di
   numeri dentro un terzo di schermo non si leggono.
   ========================================================================== */

.sk-app {
  display: grid; grid-template-columns: 250px 1fr 330px;
  gap: 12px; align-items: stretch;
  /* Altezza fissa: il grafico ha bisogno di un contenitore misurabile, e con
     l'altezza dedotta dal contenuto nasce a zero pixel e resta invisibile. */
  height: 520px;
}
.sk-lato, .sk-centro, .sk-destra {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}

/* ------------------------------------------------------- la colonna ---- */

.sk-lato-t { display: flex; border-bottom: 1px solid var(--border); flex: none; }
.sk-tab {
  flex: 1; height: 40px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-3);
  border-bottom: 2px solid transparent;
}
.sk-tab.on { color: var(--accent-bright); border-bottom-color: var(--accent); }
.sk-cerca { padding: 10px; flex: none; }
.sk-cerca .input { height: 34px; padding: 0 11px; font-size: 12.5px; }

.sk-elenco { flex: 1; overflow-y: auto; padding-bottom: 8px; min-height: 0; scrollbar-width: none; }
.sk-elenco::-webkit-scrollbar { width: 0; }
.sk-gruppo {
  margin: 0; padding: 9px 12px 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.sk-gruppo u { text-decoration: none; opacity: .6; }

.sk-riga {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer;
  border-left: 2px solid transparent;
}
.sk-riga:hover { background: rgba(255, 255, 255, .03); }
.sk-riga.on { background: var(--accent-soft); border-left-color: var(--accent); }
.sk-r-t b { display: block; font-family: var(--font-dati); font-size: 12.5px; font-weight: 500; color: var(--text); }
.sk-r-t i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.sk-riga.on .sk-r-t b { color: var(--accent-bright); }

.sk-stella {
  flex: none; width: 18px; height: 18px; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--border-strong); font-size: 13px; line-height: 1;
}
.sk-stella:hover { color: #ffbc4d; }
.sk-stella.on { color: #ffbc4d; }
.sk-vuoto-lista { margin: 0; padding: 22px 14px; font-size: 12px; line-height: 1.5; color: var(--text-3); text-align: center; }

/* -------------------------------------------------------- il grafico --- */

.sk-testa {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--border); flex: none;
}
.sk-t-sigla { font-family: var(--font-dati); font-size: 15px; font-weight: 500; color: var(--text); }
.sk-t-nome { font-size: 11.5px; color: var(--text-3); }
.sk-t-prezzo {
  font-family: var(--font-dati); font-size: 17px; font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto;
}
.sk-t-var { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-3); }
.sk-t-var.su { color: #35d07f; }
.sk-t-var.giu { color: #ff6b7a; }
.sk-t-stato { width: 100%; font-size: 10.5px; color: var(--text-3); }
/* Il puntino che pulsa dice che la pagina sta guardando: senza, un prezzo
   che non cambia per un minuto sembra un grafico fermo invece che un
   mercato fermo. */
.sk-vivo {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: #35d07f; margin-right: 6px; vertical-align: 1px;
  animation: sk-pulsa 2.4s ease-in-out infinite;
}
@keyframes sk-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sk-vivo { animation: none; } }

.sk-tf { display: flex; gap: 4px; padding: 8px 12px 0; flex: none; }
.sk-tf button {
  height: 26px; padding: 0 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: #141417; color: var(--text-3);
  font: inherit; font-size: 11.5px; font-weight: 700;
}
.sk-tf button:hover { color: var(--text); border-color: var(--border-strong); }
.sk-tf button.on {
  background: rgba(38, 128, 255, .12); border-color: rgba(38, 128, 255, .40);
  color: var(--accent-bright);
}
.sk-grafico { flex: 1; min-height: 0; padding: 6px 6px 6px 0; }

/* ------------------------------------------------------ lo studio ------ */

.sk-destra { overflow-y: auto; scrollbar-width: none; }
.sk-destra::-webkit-scrollbar { width: 0; }
.sk-d-testa { padding: 13px 14px 0; flex: none; }
.sk-destra .sk-c { padding: 10px 14px 0; }
.sk-k {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.sk-k b { color: var(--accent-bright); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sk-vai { width: calc(100% - 28px); margin: 12px 14px 4px; height: 34px; }

.sk-a-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px; margin-top: 8px; border-top: 1px solid var(--border);
}
.sk-a-testa .qd-k { margin-bottom: 0; }

.sk-a-riga {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 14px; font-size: 12px; color: var(--text-3);
}
.sk-a-riga b { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sk-a-riga b.fine { font-family: var(--font-dati); font-size: 11.5px; font-weight: 500; color: var(--text-2); }

/* Il verdetto e' il posto dove altre piattaforme scrivono COMPRA o VENDI.
   Qui dice cosa i numeri permettono di dire, e quasi sempre e' "niente":
   per questo il riquadro neutro e' quello sobrio e non un allarme rosso —
   "nessun segnale" e' un esito normale, non un errore. */
.sk-a-verdetto {
  margin: 10px 14px; padding: 11px 13px; border-radius: 10px;
  font-size: 12px; line-height: 1.6; color: var(--text-2);
  border: 1px solid var(--border); background: #141417;
}
.sk-a-verdetto b { color: var(--text); font-weight: 700; }
.sk-a-verdetto.qualcosa { border-color: rgba(255, 188, 77, .32); background: rgba(255, 188, 77, .06); }

.sk-a-blocco { padding: 12px 14px; border-top: 1px solid var(--border); }
.sk-a-barra { display: flex; height: 18px; border-radius: 6px; overflow: hidden; }
.sk-a-barra i { display: block; }
.sk-a-barra i.su { background: #35d07f; }
.sk-a-barra i.giu { background: #ff6b7a; }
.sk-a-dir-n { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11.5px; }
.sk-a-dir-n b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-a-dir-n b.su { color: #35d07f; }
.sk-a-dir-n b.giu { color: #ff6b7a; }
.sk-a-nota { margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-3); }

.sk-a-mm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk-a-mm > div {
  border: 1px solid var(--border); border-radius: 9px; background: #141417; padding: 9px 11px;
}
.sk-a-mm i { display: block; font-style: normal; font-size: 10px; color: var(--text-3); }
.sk-a-mm b {
  display: block; margin-top: 3px; font-family: var(--font-dati);
  font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.sk-a-mm b.su { color: #35d07f; }
.sk-a-mm b.giu { color: #ff6b7a; }

/* -------------------------------------------------------- i cursori ---- */

.sk-slider {
  width: 100%; height: 26px; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
/* Scritto due volte: i browser su base WebKit e Firefox usano pseudo-elementi
   diversi, e uno sconosciuto invaliderebbe l'intera regola raggruppata. */
.sk-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
.sk-slider::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
.sk-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--accent); border: 2px solid #0a0a0b;
}
.sk-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--accent); border: 2px solid #0a0a0b;
}

/* ------------------------------------------------------ sotto: i dati -- */

.sk-riepilogo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.sk-r { border: 1px solid var(--border); border-radius: 10px; background: #141417; padding: 14px 15px; }
.sk-r b {
  display: block; margin: 7px 0 5px; font-family: var(--font-dati);
  font-size: 22px; font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.sk-r b u { text-decoration: none; font-size: 13px; color: var(--text-3); }
.sk-r i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.sk-r i b { display: inline; font-size: inherit; color: var(--text-2); margin: 0; }
.sk-base { color: var(--accent-bright) !important; }

.sk-verdetto {
  margin: 12px 0 0; padding: 13px 16px; border-radius: 10px;
  font-size: 13px; line-height: 1.6;
  border: 1px solid var(--border); background: #141417; color: var(--text-2);
}
.sk-verdetto b { color: var(--text); font-weight: 700; }
.sk-verdetto.qualcosa { border-color: rgba(255, 188, 77, .3); background: rgba(255, 188, 77, .05); }
.sk-verdetto.taratura { border-color: rgba(38, 128, 255, .35); background: rgba(38, 128, 255, .06); }

.sk-tabella {
  margin-top: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1); overflow: auto;
}
.sk-tabella table { width: 100%; border-collapse: collapse; min-width: 760px; }
.sk-tabella th {
  text-align: right; padding: 11px 14px; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--border);
}
.sk-tabella th:first-child { text-align: left; }
.sk-tabella td { padding: 9px 14px; border-top: 1px solid var(--border); font-size: 13px; }
.sk-tabella tbody tr:first-child td { border-top: 0; }
.sk-tabella tbody tr:hover { background: rgba(255, 255, 255, .02); }
.sk-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.sk-num b { color: var(--text); font-weight: 700; }
.sk-ic { font-size: 11.5px; color: var(--text-3); font-family: var(--font-dati); }
.sk-magro { font-size: 11px; color: var(--text-3); }
.sk-forte td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.sk-scarto { font-family: var(--font-dati); font-size: 12.5px; color: var(--text-3); }
.sk-scarto.su { color: #35d07f; font-weight: 700; }
.sk-scarto.giu { color: #ff6b7a; font-weight: 700; }

.sk-seq { display: inline-flex; gap: 3px; }
.sk-seq i, .sk-legenda i { width: 11px; height: 15px; border-radius: 3px; display: inline-block; }
.sk-seq.grande i { width: 15px; height: 21px; border-radius: 4px; }
.sk-legenda i { vertical-align: -3px; margin: 0 2px; }
.sk-seq i.su, .sk-legenda i.su { background: #35d07f; }
.sk-seq i.giu, .sk-legenda i.giu { background: #ff6b7a; }
.sk-seq i.fermo, .sk-legenda i.fermo { background: var(--border-strong); }

.sk-legenda { margin: 12px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--text-3); max-width: 100ch; }
.sk-legenda b { color: var(--text-2); font-weight: 700; }

@media (max-width: 1240px) {
  /* Sotto questa larghezza le tre colonne strozzano il grafico: lo studio
     scende sotto e prende tutta la riga, cosi' il grafico resta leggibile. */
  .sk-app { grid-template-columns: 220px 1fr; height: auto; }
  .sk-lato { height: 420px; }
  .sk-centro { height: 420px; }
  .sk-destra { grid-column: 1 / -1; }
  .sk-riepilogo { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .sk-app { grid-template-columns: 1fr; }
  .sk-lato { height: 300px; }
  .sk-centro { height: 340px; }
  .sk-riepilogo { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CALCOLATORE DEL PIP — un riquadro solo, diviso in due
   ==========================================================================
   La forma e' quella del riferimento: a sinistra i campi, a destra il
   risultato, separati da una riga verticale dentro lo stesso riquadro.
   Prima erano due pannelli staccati, e per collegare un campo al numero che
   produce l'occhio doveva saltare da un riquadro all'altro.

   La differenza dal riferimento e' una sola: il loro numero grande e'
   verde-acqua, il nostro e' il blu del marchio.
   ========================================================================== */

.pk {
  display: grid; grid-template-columns: 380px 1fr;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1); overflow: hidden;
}
.pk-modulo { padding: 18px 20px; border-right: 1px solid var(--border); }
.pk-esito { padding: 18px 20px; }
.pk-titolo {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
  padding-bottom: 13px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------- il numero grande --- */
/* Il riquadro del risultato principale e' incassato, non in rilievo: e' il
   punto d'arrivo della pagina, e un fondo piu' scuro lo fa sembrare scavato
   dentro la scheda invece di appoggiato sopra. */
.pk-ero {
  position: relative;
  border: 1px solid var(--border); border-radius: 12px;
  background: #101013; padding: 18px 20px 20px; margin-top: 14px;
}
.pk-ero-k {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.pk-ero-v {
  display: block; margin-top: 6px;
  font-size: clamp(38px, 5vw, 58px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
/* La riga di contesto sta in basso a destra, allineata alla base del numero:
   e' una precisazione, non un sottotitolo, e sotto al numero se ne
   prenderebbe l'attenzione. */
.pk-ero-s {
  position: absolute; right: 20px; bottom: 22px;
  font-size: 11.5px; color: var(--text-3); text-align: right; max-width: 45%;
}

/* --------------------------------------------------------- le celle ----- */
/* Attaccate, non staccate: i bordi li mette il contenitore e le celle si
   dividono la riga con una linea in mezzo. Sono tagli dello stesso numero,
   e schede separate le farebbero sembrare misure diverse. */
.pk-coppia, .pk-tre {
  display: grid; margin-top: 10px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.pk-coppia { grid-template-columns: 1fr 1fr; }
.pk-tre { grid-template-columns: repeat(3, 1fr); }
.pk-cella { padding: 13px 16px; background: #141417; }
.pk-coppia .pk-cella + .pk-cella,
.pk-tre .pk-cella + .pk-cella { border-left: 1px solid var(--border); }
.pk-cella span {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.pk-cella b {
  display: block; margin-top: 5px;
  font-size: 22px; font-weight: 800; letter-spacing: -.03em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pk-cella b.su { color: #35d07f; }
.pk-cella b.giu { color: #ff6b7a; }

.pk-k {
  display: block; margin: 18px 0 -2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}

/* ---------------------------------------------------------- la nota ----- */
.pk-nota {
  display: flex; gap: 12px; margin-top: 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #141417; padding: 13px 15px;
  font-size: 12px; line-height: 1.55; color: var(--text-3);
}
.pk-nota b { color: var(--text); font-weight: 700; }
.pk-nota i {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-style: normal; font-size: 11px;
  background: rgba(38, 128, 255, .12); color: var(--accent-bright);
}

/* Lo stato vuoto riempie l'altezza della colonna, cosi' il riquadro non
   collassa prima del primo calcolo. */
.pk-esito .pc-vuoto { min-height: 260px; }

@media (max-width: 1000px) {
  .pk { grid-template-columns: 1fr; }
  .pk-modulo { border-right: 0; border-bottom: 1px solid var(--border); }
  .pk-ero-s { position: static; display: block; margin-top: 8px; max-width: none; text-align: left; }
  .pk-esito .pc-vuoto { min-height: 0; }
}
@media (max-width: 620px) {
  .pk-tre { grid-template-columns: 1fr; }
  .pk-tre .pk-cella + .pk-cella { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---------------------------------------- lotti: quattro celle e la curva */
.pk-quattro {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.pk-quattro .pk-cella + .pk-cella { border-left: 1px solid var(--border); }
.pk-cella b.grande { font-size: 30px; color: var(--accent-bright); }

/* La curva: un SVG scritto a mano, una linea sola. Tirare dentro una
   libreria di grafici per venti punti non si giustifica. */
.pk-curva {
  margin-top: 16px; border: 1px solid var(--border); border-radius: 12px;
  background: #101013; padding: 14px 16px 8px;
}
.pk-curva-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pk-curva-t b { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.pk-curva-t i {
  display: block; font-style: normal; margin-top: 3px;
  font-size: 11.5px; line-height: 1.45; color: var(--text-3); max-width: 44ch;
}
.pk-curva-q { text-align: right; flex: none; }
.pk-curva-q span {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.pk-curva-q b {
  display: block; margin-top: 2px; font-size: 14px; font-weight: 800;
  color: var(--accent-bright); font-variant-numeric: tabular-nums;
}
.pk-curva svg {
  display: block; width: 100%; margin-top: 8px; overflow: visible;
  /* L'altezza la decide il viewBox: fissarla qui e' quello che, insieme al
     preserveAspectRatio, schiacciava la curva. Il tetto serve solo a non
     farla diventare enorme su schermi molto larghi. */
  height: auto; max-height: 260px;
}
.pk-curva line { stroke: var(--border); stroke-width: 1; }
.pk-c-linea { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
/* Il tratteggio segna dove sei adesso sulla curva: senza, la linea e' una
   nozione generale invece della TUA operazione. */
.pk-c-tratto { stroke: var(--accent) !important; stroke-dasharray: 4 4; }
.pk-c-punto { fill: var(--accent-bright); }
.pk-c-x, .pk-c-y { fill: var(--text-3); font-size: 10px; font-family: var(--font-dati); }

@media (max-width: 620px) {
  .pk-quattro { grid-template-columns: repeat(2, 1fr); }
  .pk-quattro .pk-cella:nth-child(3) { border-left: 0; }
  .pk-quattro .pk-cella:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ------------------------------------------ rischio / rendimento -------- */

.rr-ero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #101013; padding: 18px 20px; margin-top: 14px;
}
.rr-ero-v {
  display: block; margin-top: 5px;
  font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--accent-bright); font-variant-numeric: tabular-nums;
}
/* Il giudizio e' una parola, non un voto in cifre: le fasce sono una
   convenzione diffusa, e un "8 su 10" farebbe credere a una misura. */
.rr-voto {
  flex: none; padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800;
  border: 1px solid currentColor; background: rgba(255, 255, 255, .03);
}
.rr-voto.bene { color: #35d07f; }
.rr-voto.cosi { color: #ffbc4d; }
.rr-voto.male { color: #ff6b7a; }

/* La barra: i due segmenti in scala fra loro. Un 1 a 3 si riconosce prima
   guardando due segmenti che leggendo "3,00". */
.rr-barra { margin-top: 12px; }
.rr-b-riga { display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; }
.rr-b-riga i.giu { background: #ff6b7a; }
.rr-b-riga i.su { background: #35d07f; }
.rr-b-etichette {
  position: relative;
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.rr-b-etichette .mezzo {
  position: absolute; transform: translateX(-50%);
  color: var(--text-2); font-weight: 700; white-space: nowrap;
}

.pc-hint-in {
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-3); font-size: 10.5px; margin-left: 5px;
}

@media (max-width: 620px) {
  .rr-ero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rr-b-etichette { font-size: 10px; }
}

/* ==========================================================================
   FINANCE CARD — l'apertura
   ==========================================================================
   Il taglio e' quello del riferimento: a sinistra la spilla, il titolo, una
   riga di testo con la frase che conta evidenziata, e le caratteristiche
   come pastiglie. A destra la carta e un estratto di esempio.

   Il colore e' AMBRA e non il blu del resto della piattaforma, ed e'
   voluto: qui si parla di un oggetto fisico, la carta, e nel riferimento e'
   proprio il calore a distinguere questa sezione dal resto. Resta
   circoscritto a questa apertura — piu' sotto la pagina torna al blu.
   ========================================================================== */

.fch {
  display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: center;
  border: 1px solid var(--border); border-radius: 18px;
  /* Un alone caldo dietro, appena percettibile: nel riferimento il fondo e'
     una sfumatura color pesca, che su un tema chiaro funziona e su uno
     scuro accecherebbe. Qui e' lo stesso gesto, con la mano leggera. */
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(255, 154, 60, .10), transparent 60%),
    var(--surface-1);
  padding: 34px 36px;
}

.fch-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #ffab5c; background: rgba(255, 154, 60, .12);
  border: 1px solid rgba(255, 154, 60, .28);
}
.fch-pill i {
  width: 6px; height: 6px; border-radius: 999px; background: #ffab5c;
  animation: fch-pulsa 2.4s ease-in-out infinite;
}
@keyframes fch-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .fch-pill i { animation: none; } }

.fch-t {
  margin: 16px 0 0;
  font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15; max-width: 18ch;
  color: var(--text);
}
.fch-p {
  margin: 14px 0 0; max-width: 56ch;
  font-size: 15px; line-height: 1.7; color: var(--text-2);
}
/* L'evidenziatore. Nel riferimento e' una banda dietro il testo, come un
   pennarello: rende la frase la cosa che si legge per prima anche a chi
   scorre senza leggere. */
.fch-p mark {
  background: rgba(255, 154, 60, .16);
  color: var(--text); font-weight: 700;
  padding: 1px 3px; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.fch-chip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.fch-chip span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .02);
  font-size: 13px; color: var(--text-2);
}
/* Il segno di spunta e' disegnato, non un carattere: i glifi cambiano forma
   da un sistema all'altro e uno solo di quelli e' allineato bene. */
.fch-chip span::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: #ffab5c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23000' stroke-width='2.2' 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 16 16'%3E%3Cpath d='M3.5 8.4l3 3L12.5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.fch-nota {
  margin: 18px 0 0; max-width: 66ch;
  font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}
.fch-nota b { color: var(--text-2); font-weight: 700; }

/* -------------------------------------------------------- la colonna --- */

.fch-lato { display: flex; flex-direction: column; gap: 14px; }

/* La carta, ridisegnata in ambra. Il numero resta coperto per intero: anche
   solo quattro cifre finali inventate sarebbero un dato falso su quello che
   sembra un documento di pagamento. */
.fch-lato .fc-carta {
  aspect-ratio: 1.586; border-radius: 16px; padding: 20px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #f0870f 0%, #f5a623 45%, #e8b53a 100%);
  border: 0; box-shadow: 0 24px 50px rgba(240, 135, 15, .22);
}
.fc-c-alto { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fch-lato .fc-c-marchio { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.fc-c-rete { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .82); }
.fc-c-chip {
  width: 40px; height: 29px; border-radius: 6px;
  background: linear-gradient(150deg, #ffe6a8, #e0b25c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.fch-lato .fc-c-num {
  font-family: var(--font-dati); font-size: 17px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .95);
}
.fch-lato .fc-c-piede { display: flex; justify-content: space-between; gap: 16px; }
.fch-lato .fc-c-piede i {
  display: block; font-style: normal;
  font-size: 8.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.fch-lato .fc-c-piede b {
  display: block; margin-top: 3px;
  font-family: var(--font-dati); font-size: 12px; color: #fff;
}

/* --------------------------------------------------------- l'estratto -- */

.fch-spese {
  border: 1px solid var(--border); border-radius: 14px;
  background: #141417; padding: 14px 16px;
}
.fch-s-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fch-s-k {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
/* Nel riferimento qui c'e' un pallino verde con scritto LIVE, accanto a tre
   movimenti inventati. Quel pallino dice "questi sono i tuoi soldi adesso",
   e non e' vero nemmeno da loro. La targhetta dice invece cosa sono. */
.fch-esempio {
  font-style: normal; padding: 3px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); border: 1px dashed var(--border-strong);
}
.fch-righe { list-style: none; margin: 10px 0 0; padding: 0; }
.fch-righe li {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.fch-righe li:first-child { border-top: 0; }
.fch-righe span { font-family: var(--font-dati); font-size: 11px; color: var(--text-3); }
.fch-righe b { font-size: 13px; font-weight: 600; color: var(--text-2); }
.fch-righe u {
  text-decoration: none; font-family: var(--font-dati); font-size: 12.5px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.fch-s-nota {
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; line-height: 1.55; color: var(--text-3);
}
.fch-s-nota b { color: var(--text-2); font-weight: 700; }

@media (max-width: 1000px) {
  .fch { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; }
  .fch-t { max-width: none; }
}

/* ------------------------------------ Finance Card: le sezioni nuove ---- */
.fc-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fc-griglia article {
  border: 1px solid var(--border); border-radius: 12px;
  background: #141417; padding: 15px 17px;
}
.fc-griglia h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.fc-griglia p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-3); }
.fc-griglia p b { color: var(--text-2); font-weight: 700; }

/* L'etichetta accanto al titolo di sezione dice DA DOVE viene quello che
   segue. Sta li' e non in fondo perche' chi legge la sezione deve saperlo
   prima di leggerla, non dopo. */
.pv-c-k u {
  text-decoration: none; margin-left: 8px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 9px; letter-spacing: .08em;
  color: var(--text-3); border: 1px dashed var(--border-strong);
}

.fc-avvertenza {
  margin: 16px 0 0; padding: 13px 15px;
  border-left: 2px solid rgba(255, 154, 60, .5); border-radius: 0 10px 10px 0;
  background: rgba(255, 154, 60, .06);
  font-size: 12.5px; line-height: 1.6; color: var(--text-3);
}
.fc-avvertenza b { color: var(--text-2); font-weight: 700; }

@media (max-width: 780px) { .fc-griglia { grid-template-columns: 1fr; } }

/* ==========================================================================
   INVITA E GUADAGNA
   ========================================================================== */

.pr-due { display: grid; grid-template-columns: 1fr 380px; gap: 14px; margin-top: 14px; align-items: start; }
.pr-col { display: flex; flex-direction: column; gap: 14px; }
.pr-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-1); padding: 16px 18px;
}
.pr-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-testa .qd-k { margin-bottom: 0; }
.pr-testa u {
  text-decoration: none; font-size: 11px; color: var(--text-3);
  padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--border-strong);
}
.pr-testa u.ok { color: #35d07f; border-style: solid; border-color: rgba(53, 208, 127, .4); }

.pr-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pr-link .input { flex: 1; height: 38px; padding: 0 12px; font-size: 13px; min-width: 0; }
.pr-link .btn, .pr-link .btn-ghost { flex: none; height: 38px; }
.pr-prefisso {
  flex: none; font-family: var(--font-dati); font-size: 12px; color: var(--text-3);
}
.pr-aiuto { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-3); }
.pr-aiuto b { color: var(--text-2); font-weight: 700; }
.pr-aiuto b.male { color: #ff6b7a; }

/* Il riquadro che nel riferimento porta tre totali in denaro. Qui porta il
   motivo per cui quei totali non ci sono, e sta in evidenza: e' la cosa che
   chi apre questa pagina si aspetta di trovare, e merita una risposta e non
   uno zero. */
.pr-avviso { border-color: rgba(255, 188, 77, .3); background: rgba(255, 188, 77, .05); }
.pr-grande {
  margin: 8px 0 10px; font-size: 22px; font-weight: 800;
  letter-spacing: -.03em; color: #ffbc4d;
}

.pr-eventi { list-style: none; margin: 10px 0 0; padding: 0; }
.pr-eventi li {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px;
}
.pr-eventi li:first-child { border-top: 0; }
.pr-eventi i { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); }
.pr-eventi li.iscr i { background: #35d07f; }
.pr-eventi b { font-weight: 600; color: var(--text-2); }
.pr-eventi span { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pr-vuoto { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

.pr-metodi { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pr-m {
  height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: #141417; color: var(--text-3);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.pr-m:hover { color: var(--text); border-color: var(--border-strong); }
.pr-m.on {
  background: rgba(38, 128, 255, .12); border-color: rgba(38, 128, 255, .40);
  color: var(--accent-bright);
}

@media (max-width: 1000px) { .pr-due { grid-template-columns: 1fr; } }