/* Jinnco Capital app, scope B (paper). Mobile-first, nero vivo, onesto sul rischio.
   Redesign su specifica di Leo (regia Andy), validazione tecnica Friday.
   Direzione: plancia di trading. Nero vero, contrasto massimo, numeri che spiccano.
   Riferimento energia: Apple Stocks. Identita: Jinnco (blu o oro, non Apple).
   Struttura per sottrazione: niente scatole spesse, solo capelli da 1px.
   Guadagno e perdita a PARI peso visivo. Il rischio non si nasconde.
   Tipografia: Inter Variable (UI) + IBM Plex Mono (numeri) — direzione raccomandata da Andy.
   Font caricati via jsDelivr (Fontsource CDN). Tocco minimo 48px, viewport stretto.
   Direzioni alternative: html.font-b (Geist + Geist Mono), html.font-c (Manrope variable).
   Solo presentazione: nessun cambio di comportamento, API, navigazione o onesta. */

:root {
  /* Nero nerissimo, verde/rosso accesi, scritte bianche. Niente oro (scelta BOSS 2026-06-22). */
  --bg:      #000000;   /* nero pieno, nerissimo */
  --bg-2:    #0A0A0A;   /* righe alternate / stati premuti */
  --bg-3:    #141414;   /* input, track, segmenti */
  --surface: #0D0D0D;   /* pannelli: appena sopra il nero */

  --line:      #2A2A2A;   /* capello separatore */
  --line-soft: #181818;   /* capello piu tenue, righe di lista */

  --ink:   #FFFFFF;   /* bianco pieno per le scritte normali */
  --ink-2: #B3B3B3;   /* secondario */
  --ink-3: #7A7A7A;   /* terziario, eyebrow, meta */

  /* accento: VERDE acceso (niente oro). Pulsanti, stato attivo, linea equity neutra. */
  --brand:      #00E676;   /* verde acceso */
  --brand-soft: rgba(0, 230, 118, 0.16);
  --brand-dim:  #00B85F;

  /* GAIN / LOSS: verde acceso e rosso acceso. Pari peso, mai smorzati. */
  --gain:      #00E676;   /* verde acceso */
  --loss:      #FF3B30;   /* rosso acceso */
  --gain-bg:   rgba(0, 230, 118, 0.16);
  --loss-bg:   rgba(255, 59, 48, 0.16);
  --gain-glow: rgba(0, 230, 118, 0.30);
  --loss-glow: rgba(255, 59, 48, 0.30);

  /* semaforo operatore */
  --verde: #00E676;
  --giallo: #FFD60A;
  --rosso: #FF3B30;
  --semaforo-verde:  #00E676;
  --semaforo-giallo: #FFD60A;
  --semaforo-rosso:  #FF3B30;

  --warn:    #FFD60A;
  --warn-bg: rgba(255, 214, 10, 0.14);

  --radius: 3px;
  --radius-sm: 2px;
  --pad: 14px;
  --tap: 48px;

  /* ---- tipografia: direzione A (default) — Inter + IBM Plex Mono -----------------
     Direzione A  (default)   : Inter Variable  (UI)    + IBM Plex Mono  (numeri)
     Direzione B  html.font-b : Geist            (UI)    + Geist Mono     (numeri)
     Direzione C  html.font-c : Manrope Variable (UI)    + IBM Plex Mono  (numeri)
     Le classi html.font-b / html.font-c riscrivono queste tre variabili.
     SF di sistema resta solo come fallback di coda, mai come prima scelta. */
  --font-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
  --font-body:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* corpo radiale: nero su nero — il nero e la scelta, non serve sfumatura */
  --body-radial-1: #000000;
  --body-radial-2: #000000;
}

/* ============================================================================
   DIREZIONI TIPOGRAFICHE ALTERNATIVE (si cicla col selettore prova-font)
   La direzione A e il default in :root. Le classi qui sotto la sovrascrivono.
   ========================================================================== */

/* Direzione B: Geist + Geist Mono (coppia coesiva da Vercel, fintech 2026) */
html.font-b {
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

/* Direzione C: Manrope Variable (premium elegante, banca privata digitale)
   numeri via tnum di Manrope, Martian Mono come accent sull'hero se servisse */
html.font-c {
  --font-display: 'Manrope Variable', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope Variable', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

/* ============================================================================
   NUMERI A LARGHEZZA FISSA — requisito di trading (colonne che non ballano)
   Applicato a tutti gli elementi numerici che si aggiornano o si incolonnano.
   IBM Plex Mono e Geist Mono sono monospaziati per costruzione (allineamento
   garantito). Per la direzione C (Manrope) le feature OpenType attivano le
   cifre tabulari/lining. In tutti i casi il doppio flag e esplicito.
   ========================================================================== */
.hero-number,
.perf-val,
.perf-sub,
.pos-num,
.pos-pct,
.pos-meta,
.foll-nums .num,
.kv-row .v,
.stat-cell .v,
.chart-label,
.stopbar-head .lim,
.stopbar-v2 .labels,
.stopbar .legend,
.pair .v,
.pair .sub,
.risk-badge .risk-max,
.sym-text,
.num,
.pill {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ============================================================================
   SELETTORE TIPOGRAFIA TEMPORANEO (prova-font) — DA RIMUOVERE dopo la scelta
   Una chip discreta in alto a destra: cicla A/B/C e salva in localStorage.
   Marcata con data-temp="true" per trovarlo subito quando si vuole toglierlo.
   ========================================================================== */
#prova-font {
  position: fixed; top: 10px; right: 10px; z-index: 9999;
  display: flex; align-items: center; gap: 5px;
  background: rgba(18, 20, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px; padding: 4px 10px 4px 8px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
  pointer-events: auto;
  user-select: none;
}
#prova-font .pf-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--loss); margin-right: 3px; opacity: 0.8;
}
#prova-font button {
  min-height: 22px; padding: 0 8px; border-radius: 12px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-3); font: 500 11px/1 var(--font-mono);
  cursor: pointer; transition: color .1s, background .1s, border-color .1s;
}
#prova-font button[aria-selected="true"] {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand);
}
#prova-font button:active { opacity: 0.7; }

/* === Gestione copia operatore: una riga per cliente, comandi a portata di pollice === */
.foll-mgmt { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.foll-mgmt:last-child { border-bottom: 0; }
.foll-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.foll-id .nm { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.foll-id .rl { color: var(--ink-3); font-size: 0.78rem; margin-top: 3px; }
.foll-nums { text-align: right; white-space: nowrap; }
.foll-nums .eq { color: var(--ink); font-weight: 600; }
.foll-nums .sub { color: var(--ink-3); font-size: 0.78rem; margin-top: 3px; }
.st { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.st-active { color: var(--gain); }
.st-paused { color: var(--warn); }
.st-stopped, .st-stopped_by_operator, .st-stopped_by_client, .st-stopped_by_equity { color: var(--loss); }
.foll-ctl { display: flex; gap: 8px; margin-top: 10px; }
.cbtn { flex: 1; min-height: var(--tap); border: 1px solid var(--line); background: var(--bg-3); color: var(--ink); border-radius: var(--radius-sm); font: 600 0.82rem var(--font-body); letter-spacing: 0.03em; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; }
.cbtn:hover { background: var(--surface); }
.cbtn:active { opacity: 0.7; }
.cbtn.go { border-color: var(--brand); color: var(--brand); }
.cbtn.danger { border-color: var(--loss); color: var(--loss); }

/* Operazioni dal vivo: la lista compravendite in stile app di trading. */
.op-sub { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 2px 0 4px; }
.op-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.op-row:last-child { border-bottom: 0; }
.op-row.live { background: linear-gradient(90deg, var(--brand-soft), transparent 55%); margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 3px; }
.op-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-sym { font-weight: 600; color: var(--ink); }
.op-side { font-size: .6rem; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.op-side.buy { color: var(--gain); background: var(--gain-bg); border: 1px solid var(--gain-glow); }
.op-side.sell { color: var(--loss); background: var(--loss-bg); border: 1px solid var(--loss-glow); }
.op-px { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.op-arr { color: var(--ink-3); padding: 0 2px; }
.op-pnl { font-weight: 600; font-size: .9rem; text-align: right; min-width: 60px; }

/* Schermata di accesso (login dentro l'app, stile Superagentsss: nero, accento verde) */
.login-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.login-brand { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; color: var(--ink); }
.login-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.login-title { color: var(--ink-3); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.login-input { width: min(86vw, 320px); height: 50px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink); font: 500 1rem var(--font-mono); padding: 0 14px; text-align: center; }
.login-input:focus { outline: none; border-color: var(--brand); }
.login-btn { width: min(86vw, 320px); }
.login-err { color: var(--loss); font-size: .85rem; min-height: 1.1em; }

/* Grafico prezzo dal vivo (lightweight-charts): candele su nero, stile vera app di trading.
   Il contenitore ha altezza fissa cosi il grafico ha dove disegnarsi (la libreria misura
   il box). Mobile-first: largo quanto la card, basso quanto basta a leggere il movimento. */
.chart-card { padding: 12px; }
.price-chart { width: 100%; height: 200px; position: relative; }
.price-chart .tv-lightweight-charts { border-radius: var(--radius); }

/* Variante B, Oro Jinnco su nero. Tema-figlio della A: stesso DOM, solo accento swappato.
   Si attiva con la classe .theme-oro su <html>.
   Stesso nero, stesso verde/rosso di sistema iOS — cambia solo l accento di marca. */
html.theme-oro {
  --brand:      #e8b84b;   /* oro caldo Jinnco, leggibile sul nero */
  --brand-soft: rgba(232, 184, 75, 0.16);
  --brand-dim:  #b8902f;

  /* Il nero resta nero: l oro vive sul nero, non su carbone */
  --bg:      #000000;
  --bg-2:    #0a0a0c;
  --bg-3:    #141416;
  --surface: #0e0e10;

  /* corpo: nero pieno anche nella variante oro */
  --body-radial-1: #000000;
  --body-radial-2: #000000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* nero piatto: per questa app il nero e la plancia, non pigrizia.
     La profondita viene dal contrasto dei dati sopra, non dal fondale.
     I token --body-radial-1 / --body-radial-2 restano in :root per compatibilita
     ma non vengono applicati qui. */
  min-height: 100vh;
  overscroll-behavior-y: none;
}

/* contenitore mobile-first: stretto, centrato, con respiro per il pollice */
.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px calc(100px + env(safe-area-inset-bottom));
  min-height: 100vh;
}

/* ---- intestazione, piu silenziosa ----------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 10px;
  background: linear-gradient(to bottom, var(--bg) 75%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 0; }
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.brand b {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 16px; margin-left: 8px;
}
.brand .paper {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--warn); border: 1px solid rgba(232, 184, 75, 0.35);
  border-radius: 5px; padding: 2px 5px; margin-left: 6px;
}
/* role-switch ora link di testo puro, non scatola */
.role-switch {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-3);
  background: none; border: none; cursor: pointer; padding: 8px 0; min-height: 38px;
}
.role-switch:active { color: var(--ink-2); }

/* navigazione a schede del topbar: Dal vivo / Cliente / Operatore */
.brand-link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topnav { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.topnav-tab {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  background: none; border: none; cursor: pointer; padding: 7px 8px; min-height: 38px;
  border-radius: 8px; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.topnav-tab.on { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.topnav-tab:active { color: var(--ink-2); }
@media (max-width: 360px) {
  .brand .paper { display: none; }
  .topnav-tab { font-size: 12px; padding: 7px 6px; }
}

/* ---- nastro avvertenza, sempre in faccia, compattato ---------------------- */
.disclaimer {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 12px; margin: 4px 0 14px;
  background: var(--warn-bg); border: 1px solid rgba(232, 184, 75, 0.25);
  border-radius: 10px;
}
.disclaimer .ic { color: var(--warn); font-size: 13px; flex: none; margin-top: 1px; }
.disclaimer span:last-child { font: 400 13px/1.45 var(--font-body); color: var(--ink-2); }

/* ---- titoli di sezione ---------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 8px;
}
h1.screen-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: 28px; line-height: 1.1; margin-bottom: 6px;
}
.lede { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin-bottom: 20px; }

/* ---- carte (usate dove serve un contenitore, ma leggere) ------------------ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--pad); margin-bottom: 14px;
}
.card.tight { padding: 14px; }
/* carta "piatta": nessuna scatola, solo capelli (struttura per sottrazione) */
.card.flat {
  background: transparent; border: none; border-radius: 0;
  padding: 0; margin-bottom: 0;
}

/* ============================================================================
   HERO: il numero protagonista
   ========================================================================== */
.hero-block { padding: 24px 0 8px; text-align: left; }
.hero-label {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.hero-number {
  font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}
.hero-pills { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hero-sub { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* pill percentuale: fondo pieno acceso — sono il colpo d occhio, devono accendersi.
   Sul nero iOS verde e rosso sono vividi senza rinforzarli: vengono da soli. */
.pill {
  font: 700 15px/1 var(--font-body); padding: 5px 11px; border-radius: 20px;
  display: inline-block; letter-spacing: -0.01em;
}
.pill.gain { color: #ffffff; background: var(--gain); }
.pill.loss { color: #ffffff; background: var(--loss); }
.pill.neutral { color: var(--ink-2); background: var(--bg-3); }

/* ============================================================================
   SELETTORE PERIODO (stile Apple Stocks)
   ========================================================================== */
.period-seg { display: flex; gap: 2px; margin: 16px 0 4px; }
.period-seg button {
  flex: 1; min-height: 32px; border: none; background: transparent; color: var(--ink-3);
  font: 600 13px/1 var(--font-body); border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.period-seg button[aria-selected="true"] {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* ============================================================================
   GRAFICO EQUITY a linea SVG
   ========================================================================== */
.chart-wrap { position: relative; margin: 8px 0 16px; }
.chart-wrap svg { width: 100%; height: 140px; display: block; overflow: visible; }
.chart-label {
  position: absolute; font: 400 11px/1 var(--font-mono); color: var(--ink-3);
  pointer-events: none;
}
.chart-label.hi { top: 0; left: 0; }
.chart-label.lo { bottom: 0; right: 0; }

/* ============================================================================
   COPPIA guadagno / rischio compatta: due blocchi, separatore a capello
   ========================================================================== */
.perf-pair { display: grid; grid-template-columns: 1fr 1px 1fr; margin: 16px 0; }
.perf-sep { background: var(--line-soft); width: 1px; }
.perf-cell { padding: 0 16px; }
.perf-cell:first-child { padding-left: 0; }
.perf-cell:last-child { padding-right: 0; }
.perf-label {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.perf-val { font: 600 28px/1 var(--font-mono); letter-spacing: -0.02em; }
.perf-val.gain { color: var(--gain); }
.perf-val.loss { color: var(--loss); }
.perf-sub { font: 400 12px/1 var(--font-mono); color: var(--ink-3); margin-top: 4px; }

/* coppia legacy: tenuta come alias sul nuovo look in caso restasse del markup vecchio */
.pair { display: grid; grid-template-columns: 1fr 1px 1fr; margin: 16px 0; background: none; }
.pair .cell { background: none; padding: 0 16px; }
.pair .cell:first-child { padding-left: 0; }
.pair .cell:last-child { padding-right: 0; }
.pair .cell.risk { background: none; }
.pair .k { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.pair .v { font: 600 28px/1 var(--font-mono); letter-spacing: -0.02em; }
.pair .v.gain { color: var(--gain); }
.pair .v.loss { color: var(--loss); }
.pair .sub { font: 400 12px/1 var(--font-mono); color: var(--ink-3); margin-top: 4px; }

/* ============================================================================
   BARRA EQUITY STOP, piu sottile
   ========================================================================== */
.stopbar-section { padding: 14px 0 10px; border-top: 1px solid var(--line-soft); }
.stopbar-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.stopbar-head .lbl { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stopbar-head .lim { font: 500 12px/1 var(--font-mono); color: var(--loss); }
.stopbar-v2 .track { height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.stopbar-v2 .fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gain) 0%, var(--warn) 65%, var(--loss) 100%);
  transition: width .4s ease;
}
.stopbar-v2 .labels {
  display: flex; justify-content: space-between; margin-top: 5px;
  font: 400 11px/1 var(--font-mono); color: var(--ink-3);
}
/* stopbar legacy, mappata sul nuovo look se restasse del markup vecchio */
.stopbar .track { height: 6px; border-radius: 4px; background: var(--bg-3); overflow: hidden; border: none; }
.stopbar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gain) 0%, var(--warn) 65%, var(--loss) 100%); transition: width .4s ease; }
.stopbar .legend { display: flex; justify-content: space-between; font: 400 11px/1 var(--font-mono); color: var(--ink-3); margin-top: 5px; }

/* ============================================================================
   RIGHE: posizioni, operazioni, follower con mini-sparkline
   ========================================================================== */
.pos-row {
  display: grid; grid-template-columns: 1fr 40px 88px; align-items: center; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.pos-row:last-child { border-bottom: none; }
.pos-sym { display: flex; align-items: center; min-width: 0; }
.sym-text { font: 600 15px/1 var(--font-mono); color: var(--ink); }
.pos-spark { width: 40px; height: 24px; display: block; }
.pos-val { text-align: right; }
.pos-num { font: 600 15px/1 var(--font-mono); }
.pos-num.gain { color: var(--gain); }
.pos-num.loss { color: var(--loss); }
.pos-num.neutral { color: var(--ink-2); }
.pos-pct { font: 400 11px/1 var(--font-mono); margin-top: 2px; color: var(--ink-3); }
.pos-pct.gain { color: var(--gain); }
.pos-pct.loss { color: var(--loss); }
.pos-meta { font: 400 11px/1 var(--font-mono); color: var(--ink-3); margin-top: 3px; }

/* tag direzione */
.tag {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px; flex: none;
}
.tag.long { color: var(--gain); background: var(--gain-bg); }
.tag.short { color: var(--loss); background: var(--loss-bg); }

/* numeri generici mono */
.num { font-family: var(--font-mono); }
.num.gain { color: var(--gain); }
.num.loss { color: var(--loss); }

/* riga follower operatore */
.foll-row-v2 {
  display: grid; grid-template-columns: 1fr 40px 96px; align-items: center; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.foll-row-v2:last-child { border-bottom: none; }
.foll-nm { font: 600 15px/1 var(--font-body); color: var(--ink); }
.foll-meta { font: 400 12px/1 var(--font-mono); color: var(--ink-3); margin-top: 3px; }
.foll-nums { text-align: right; }
.foll-nums .num { display: block; }
.foll-nums .num.eq { font: 600 15px/1 var(--font-mono); color: var(--ink); }
.foll-nums .num.dd { font: 400 12px/1 var(--font-mono); color: var(--loss); margin-top: 2px; }

/* riga generica chiave/valore (esposizione per simbolo) */
.kv-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.kv-row:last-child { border-bottom: none; }
.kv-row .k { font: 600 14px/1 var(--font-mono); color: var(--ink-2); }
.kv-row .v { font: 600 14px/1 var(--font-mono); color: var(--ink); }

/* summary trasparenza: vinte vs perse */
.trade-summary { display: flex; gap: 8px; margin: 0 0 16px; }

/* ============================================================================
   BOTTONI, tocco minimo 48px
   ========================================================================== */
.btn {
  min-height: var(--tap); width: 100%; border-radius: 12px;
  font: 600 16px/1 var(--font-body);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid; cursor: pointer; transition: opacity .1s;
  background: var(--bg-3); border-color: var(--line); color: var(--ink);
}
.btn:active { opacity: 0.75; }
.btn.primary { background: var(--brand); border-color: transparent; color: #fff; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn.warn { background: var(--warn-bg); border-color: rgba(232, 184, 75, .35); color: var(--warn); }
.btn.danger { background: var(--loss-bg); border-color: rgba(232, 115, 106, .35); color: var(--loss); }
.btn.kill { background: var(--loss); border-color: transparent; color: #fff; font-weight: 700; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* dock fisso in basso, fuori dallo scroll */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  max-width: 480px; margin: 0 auto;
}
.dock .btn-row { gap: 10px; }

/* ============================================================================
   LIVELLI DI RISCHIO: righe selezionabili senza scatola spessa
   ========================================================================== */
.levels { display: flex; flex-direction: column; gap: 8px; }
.level {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; cursor: pointer; background: transparent;
  transition: border-color .15s ease, background .15s ease;
}
.level[aria-selected="true"] { border-color: var(--brand); background: var(--bg-2); }
.level .lh { display: flex; align-items: center; justify-content: space-between; }
.level .name { font: 600 16px/1 var(--font-body); color: var(--ink); }
.level .maxloss { font: 500 13px/1 var(--font-mono); color: var(--loss); }
.level .desc { font: 400 13px/1.45 var(--font-body); color: var(--ink-2); margin-top: 6px; }

/* badge livello rischio: nome + perdita massima accanto, sempre */
.risk-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px; border: 1px solid;
  font-family: var(--font-mono);
}
.risk-badge.prudente { border-color: var(--gain); background: var(--gain-bg); }
.risk-badge.equilibrato { border-color: var(--brand); background: var(--brand-soft); }
.risk-badge.audace { border-color: var(--loss); background: var(--loss-bg); }
.risk-badge .risk-name { font: 600 13px/1 var(--font-mono); color: var(--ink); }
.risk-badge .risk-max { font: 500 12px/1 var(--font-mono); color: var(--loss); }

/* ---- vetrina master ------------------------------------------------------ */
.master-card .mrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.master-card .scen { font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.master-name { font: 600 16px/1 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }

/* ---- form, piu aerato ----------------------------------------------------- */
label.field { display: block; margin-bottom: 16px; }
label.field .lab { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; display: block; }
input[type=text], input[type=number] {
  width: 100%; min-height: var(--tap); background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 14px; font-size: 16px; font-family: var(--font-body);
}
input:focus { outline: none; border-color: var(--brand); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--brand); flex: none; }

/* ---- chip stato ---------------------------------------------------------- */
.state-chip {
  font: 500 11px/1 var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 4px 9px; border-radius: 7px;
  display: inline-flex; gap: 6px; align-items: center;
}
.state-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-chip.active { color: var(--gain); background: var(--gain-bg); }
.state-chip.paused { color: var(--giallo); background: var(--warn-bg); }
.state-chip.stopped { color: var(--loss); background: var(--loss-bg); }

/* ---- notifiche che spiegano: banner compatto a capello -------------------- */
.notice {
  font: 400 13px/1.45 var(--font-body); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2);
  display: flex; gap: 9px; align-items: flex-start;
}
.notice .ic { flex: none; margin-top: 1px; }
.notice.info { border-color: var(--brand-soft); }
.notice.info .ic { color: var(--brand); }
.notice.warn { border-color: rgba(232, 184, 75, .35); background: var(--warn-bg); }
.notice.warn .ic { color: var(--warn); }
.notice.stop { border-color: rgba(232, 115, 106, .35); background: var(--loss-bg); }
.notice.stop .ic { color: var(--loss); }

/* ============================================================================
   OPERATORE: semaforo con bordo sinistro, niente sfondo pieno
   ========================================================================== */
.semaforo-v2 {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); border-left-width: 3px; margin-bottom: 14px;
}
.semaforo-v2 .sem-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  box-shadow: 0 0 10px currentColor;
}
.semaforo-v2.verde { border-left-color: var(--semaforo-verde); }
.semaforo-v2.verde .sem-dot { background: var(--semaforo-verde); color: var(--semaforo-verde); }
.semaforo-v2.giallo { border-left-color: var(--semaforo-giallo); }
.semaforo-v2.giallo .sem-dot { background: var(--semaforo-giallo); color: var(--semaforo-giallo); }
.semaforo-v2.rosso { border-left-color: var(--semaforo-rosso); }
.semaforo-v2.rosso .sem-dot { background: var(--semaforo-rosso); color: var(--semaforo-rosso); animation: dotpulse 1.1s ease-in-out infinite; }
.sem-body { min-width: 0; }
.sem-stato { font: 700 15px/1 var(--font-display); text-transform: capitalize; color: var(--ink); }
.sem-desc { font: 400 13px/1.4 var(--font-body); color: var(--ink-2); margin-top: 3px; }
@keyframes dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* stat operatore: 4 blocchi senza scatola, separati da capelli verticali */
.stat-grid {
  display: grid; grid-template-columns: 1fr 1px 1fr; row-gap: 16px; margin-bottom: 14px;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
}
.stat-grid .vsep { width: 1px; background: var(--line-soft); grid-row: span 1; }
.stat-cell { padding: 0 16px; }
.stat-cell.c0, .stat-cell.c2 { padding-left: 0; }
.stat-cell .k { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stat-cell .v { font: 600 24px/1 var(--font-mono); margin-top: 6px; color: var(--ink); letter-spacing: -0.02em; }
.stat-cell .v.gain { color: var(--gain); }
.stat-cell .v.loss { color: var(--loss); }

/* allarme correlazione: banner a bordo sinistro colorato */
.corr-alert {
  border: 1px solid var(--line); border-left: 3px solid var(--loss);
  background: var(--bg-2); color: var(--ink-2);
  border-radius: 10px; padding: 13px; margin-bottom: 14px; font: 400 14px/1.45 var(--font-body);
  display: flex; gap: 10px; align-items: flex-start;
}
.corr-alert.ok { border-left-color: var(--gain); }
.corr-alert .ic { flex: none; margin-top: 1px; }
.corr-alert.ok .ic { color: var(--gain); }
.corr-alert:not(.ok) .ic { color: var(--loss); }

/* ---- segmenti operatore (scenario) --------------------------------------- */
.seg { display: flex; gap: 2px; background: var(--bg-3); border-radius: 9px; padding: 3px; margin-bottom: 16px; }
.seg button {
  flex: 1; min-height: 36px; border: none; background: transparent; color: var(--ink-3);
  font: 600 13px/1 var(--font-body); border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

/* ---- utilita ------------------------------------------------------------- */
.muted { color: var(--ink-3); }
.center { text-align: center; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hidden { display: none !important; }
.gap { height: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }

/* link tipo testo */
.tlink { color: var(--brand); background: none; border: none; font: 500 14px/1.4 var(--font-body); cursor: pointer; padding: 10px 0; display: inline-block; }

/* toggle tema A/B, riga discreta in fondo alla home */
.theme-toggle {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 4px;
  font: 400 12px/1 var(--font-mono); color: var(--ink-3);
}
.theme-toggle button {
  flex: none; min-height: 30px; padding: 0 12px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3);
  font: 500 12px/1 var(--font-mono); cursor: pointer; transition: color .12s, border-color .12s;
}
.theme-toggle button[aria-selected="true"] { color: var(--ink); border-color: var(--brand); }

/* ============================================================================
   DAL VIVO: pannello Performance (KPI stile myfxbook) + curva equity
   Mobile-first: KPI in griglia fluida che si adatta alla larghezza disponibile.
   ========================================================================== */
.live-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live-back { width: auto; min-width: 0; padding: 0 14px; flex: none; }

.perf-card { padding: var(--pad); }
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  overflow: hidden; margin-top: 4px;
}
.kpi { background: var(--surface); padding: 11px 12px; }
/* su mobile (2 colonne) la cella "larga" prende l'intera riga */
.kpi-wide { grid-column: 1 / -1; }
.kpi-k {
  font: 500 10px/1.1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.kpi-v { font: 600 17px/1 var(--font-mono); letter-spacing: -0.01em; color: var(--ink); }
.kpi-v.gain { color: var(--gain); }
.kpi-v.loss { color: var(--loss); }

.perf-equity { padding: 12px; }
.equity-chart { width: 100%; height: 160px; position: relative; }
.equity-chart .tv-lightweight-charts { border-radius: var(--radius); }

/* ============================================================================
   DESKTOP (>=900px): la plancia diventa un terminale multi-colonna.
   Stesso DOM, stesso codice: cambia solo la disposizione. Mobile resta una colonna.
   Layout (CSS grid):
     riga 1: KPI di performance a tutta larghezza (denso, una sola fila di celle)
     riga 2: due grafici prezzo affiancati (EUR/USD | XAU/USD)
     riga 3: operazioni a sinistra, equity+follower a destra
   ========================================================================== */
@media (min-width: 900px) {
  /* il contenitore stretto mobile si allarga: la plancia vuole spazio */
  .app { max-width: 1320px; padding-left: 28px; padding-right: 28px; }
  .dock { max-width: 1320px; }

  .live-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'perf   perf'
      'charts charts'
      'ops    side';
    gap: 16px;
    align-items: start;
  }
  .lz-perf { grid-area: perf; }
  .lz-charts { grid-area: charts; }
  .lz-content { grid-area: ops; }
  .lz-side { grid-area: side; }

  /* la zona perf su desktop: KPI in una fila densa, curva equity larga sotto */
  .lz-perf { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
  .lz-perf .perf-card { margin-bottom: 0; }
  .lz-perf .perf-equity { margin-bottom: 0; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  /* desktop a 4 colonne: la cella "larga" ne occupa 2, cosi chiude il buco (12 celle piene) */
  .kpi-wide { grid-column: span 2; }
  .equity-chart { height: 200px; }

  /* i due grafici prezzo affiancati su desktop (su mobile restano impilati) */
  #live-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  #live-charts .chart-card { margin-bottom: 0; }
  .price-chart { height: 260px; }

  /* le operazioni dal vivo respirano: piu' alte, scroll se serve, non spingono la pagina */
  .lz-content .card { margin-bottom: 16px; }

  /* titolo plancia piu' generoso su schermo largo */
  .live-view h1.screen-title { font-size: 32px; }
}

/* schermi molto larghi: la zona operazioni e la colonna laterale si bilanciano meglio */
@media (min-width: 1280px) {
  .live-grid { grid-template-columns: 1.4fr 1fr; }
}