:root {
  /* ===== Tema LUSSO: nero caldo + rosso profondo + oro (stile alta profumeria) ===== */
  --bg: #0c0708;
  --bg-soft: #140b0d;
  --card: #17100f;
  --card-2: #1f1512;
  --border: #35211c;
  --text: #f4ece4;
  --muted: #b39a8c;
  --faint: #806860;
  --brand: #d9b25a;        /* ORO */
  --brand-2: #b11226;      /* ROSSO profondo */
  --accent: #d9b25a;       /* oro (accento generale) */
  --gold-2: #f0d38a;       /* oro chiaro per i riflessi */
  --green: #35c98a;
  --red: #e5484d;
  --yellow: #d9b25a;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --radius: 16px;
  --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Titoli in serif elegante (look alta gamma) color oro */
  --title-font: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --title: #e6c67e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Nero caldo con un bagliore rosso profondo in alto (come l'hero del sito di lusso). */
  background:
    radial-gradient(1000px 560px at 80% -12%, rgba(177,18,38,0.18), transparent 60%),
    radial-gradient(700px 400px at 8% 0%, rgba(217,178,90,0.06), transparent 55%),
    var(--bg);
  /* niente 'attachment: fixed': su telefono ridisegna a ogni scorrimento e lagga */
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand); text-decoration: none; }
/* Titoli in serif elegante (Playfair Display) color oro: look alta gamma. */
h1, h2, h3 {
  margin: 0 0 .4em; font-weight: 700; letter-spacing: 0;
  font-family: var(--title-font);
  color: var(--title);
}
.brand-name { font-family: var(--title-font); color: var(--title); font-weight: 700; letter-spacing: .01em; }
.kpi .label, .panel-head .hint { font-family: var(--title-font); }

/* Numeri (prezzi, importi, percentuali) in monospazio: look "finanziario", meno IA */
.mono, .kpi .value, .calc-out b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Flash ---------- */
.flash-stack {
  position: fixed; top: 18px; right: 18px; z-index: 999;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.flash {
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow);
  font-size: 14px; border: 1px solid var(--border); background: var(--card-2);
  animation: slidein .25s ease;
}
.flash-success { border-color: rgba(34,201,138,.5); }
.flash-error { border-color: rgba(255,93,108,.5); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; transition: .15s;
  background: var(--card-2); color: var(--text);
}
.btn:hover { filter: brightness(1.08); }
/* Pulsante principale ORO (come il 'aggiungi al carrello' del sito di lusso). */
.btn-primary {
  background: linear-gradient(180deg, var(--gold-2), var(--brand));
  color: #241606; border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 20px rgba(217,178,90,.22);
}
.btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); filter: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ---------- Auth / Paywall layout ---------- */
.auth-wrap { max-width: 1120px; margin: 0 auto; padding: 48px 20px; }
.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-size: 22px;
}
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.lead { color: var(--muted); max-width: 640px; }

.plan-card {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column;
  transition: .18s; cursor: pointer;
}
.plan-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); }
.plan-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,140,255,.35); }

.plan-features { list-style: none; padding: 0; margin: 16px 0; flex: 1; }
.plan-features li { padding: 6px 0 6px 24px; position: relative; font-size: 14px; color: #cdd6ea; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }

.auth-card {
  max-width: 460px; margin: 8vh auto; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); font-size: 15px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

.license-box {
  background: var(--bg-soft); border: 1px dashed var(--brand); border-radius: 12px;
  padding: 18px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 20px;
  letter-spacing: 2px; text-align: center; margin: 18px 0; color: var(--brand);
  word-break: break-all;
}
.disclaimer {
  margin-top: 18px; font-size: 12px; color: var(--muted); background: rgba(255,207,92,.06);
  border: 1px solid rgba(255,207,92,.25); border-radius: 10px; padding: 12px 14px;
}

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--bg-soft); border-right: 1px solid var(--border); padding: 22px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px;
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.nav-link:hover { background: var(--card); color: var(--text); }
.nav-link.active { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.nav-svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.side-foot { margin-top: auto; font-size: 12px; color: var(--muted); padding: 10px 8px; }
/* Selettore lingua per telefono: nascosto su desktop (il footer mostra già
   l'elenco lingue), visibile solo nella barra orizzontale mobile. */
.nav-lang {
  display: none; font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.plan-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; margin-bottom: 8px;
}

.main { padding: 28px 32px; overflow-x: hidden; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.topbar h1 { font-size: 24px; margin: 0; }
.bot-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,201,138,.15); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(34,201,138,0); } }
.online-box { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 13px; color: var(--muted); }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,201,138,.15); animation: pulse 1.6s infinite; flex: none; }
.online-label { font-weight: 700; color: var(--text); }
.online-nums b { color: var(--text); }

.pwa-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.pwa-modal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; max-width: 380px; width: 100%; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pwa-modal-card h3 { font-size: 18px; }
.pwa-modal-card p { color: var(--muted); font-size: 14px; }
.pwa-modal-close { width: 100%; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--card-2); color: var(--muted); margin-left: 6px; }
.pill-red { background: rgba(255,93,108,.15); color: var(--red); }

.ask-msg { padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; max-width: 88%; }

/* ---------- Cards / KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
}
.kpi .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi .value { font-size: 26px; font-weight: 800; margin-top: 6px; }
.kpi .sub { font-size: 13px; margin-top: 4px; color: var(--muted); }
.pos { color: var(--green); } .neg { color: var(--red); }
/* Grafichetto (sparkline) dentro ogni card KPI, di fianco al numero */
.kpi-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.kpi-figs { min-width: 0; }
.kpi-spark { width: 92px; height: 34px; flex: none; display: none; align-self: center; }
.kpi-spark.on { display: block; }

.panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 22px;
}
.panel h2 { font-size: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }

/* Dashboard a due colonne: principale (attività) + laterale (strumenti).
   Riduce lo scroll: i riquadri stanno affiancati invece che tutti in colonna.
   Su schermi stretti (iPad verticale, telefono) torna una colonna sola. */
.dash-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; align-items: start; margin-bottom: 22px; }
.dash-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dash-col .panel { margin-bottom: 0; }
@media (max-width: 1100px) { .dash-cols { grid-template-columns: 1fr; } }

/* Schede (tab) della dashboard: dividono il contenuto in viste separate,
   cosi' non e' tutto uno scroll. */
.dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-tab-btn { padding: 12px 18px; font-size: 14.5px; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.dash-tab-btn:hover { color: var(--text); }
.dash-tab-btn.on { color: var(--text); border-bottom-color: var(--brand); }
section.dash-tab { display: none; }
section.dash-tab.on { display: block; }

/* Avviso "salva il codice" nella pagina del codice */
.save-code-alert {
  margin: 6px 0 12px; padding: 14px 16px; border-radius: 12px;
  background: rgba(245, 181, 71, .12); border: 1px solid rgba(245, 181, 71, .5);
  color: var(--yellow); font-weight: 800; font-size: 16px; letter-spacing: .3px;
  text-align: center; line-height: 1.4;
}

/* Passaggi delle istruzioni Deposita / Preleva */
.funds-steps { margin: 4px 0 0; padding-left: 20px; }
.funds-steps li { margin: 9px 0; line-height: 1.5; font-size: 14.5px; color: var(--text); }
@media (max-width: 900px) {
  /* La barra del menu (riga 1) resta alta quanto serve; il contenuto (riga 2)
     riempie il resto. Senza questo, su pagine corte la griglia "stira" la barra
     e la voce attiva diventa un riquadrone che copre la pagina. */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    flex-direction: row; overflow-x: auto; position: sticky; top: 0; z-index: 20;
    gap: 6px; padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--border);
    align-items: center; align-self: start;
    -webkit-overflow-scrolling: touch;
  }
  .nav-link.active, .nav-link { align-self: center; }
  .sidebar::-webkit-scrollbar { display: none; }
  .side-foot, .side-brand { display: none; }
  .nav-link { white-space: nowrap; padding: 9px 12px; font-size: 13px; }
  /* Il selettore lingua compatto appare dopo il tasto "Esci" nella barra. */
  .nav-lang { display: inline-block; flex: none; white-space: nowrap; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--faint); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 12px; border-bottom: 1px solid var(--border); }
td { padding: 13px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); }
.tag-long { background: rgba(47,208,160,.08); color: var(--green); border-color: rgba(47,208,160,.28); }
.tag-open { background: rgba(91,140,255,.08); color: var(--brand); border-color: rgba(91,140,255,.28); }
.tag-closed { background: rgba(138,151,177,.06); color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 26px; font-size: 14px; }
/* Tabella VUOTA: niente intestazioni (Crypto, Lato, Quantità…) e la scritta resta visibile.
   Prima la tabella era più larga del riquadro e la scritta finiva centrata nella parte
   nascosta a destra: sembrava una tabella rotta con solo i titoli. */
table:has(> tbody > tr:only-child > td.empty:only-child) > thead { display: none; }
td.empty { white-space: normal; }

/* ---------- Prices ---------- */
.price-list { display: grid; gap: 10px; }
.price-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--card-2); }
.price-sym { font-weight: 700; }
.price-val { text-align: right; }
.price-val .p { font-weight: 700; }
.price-val .c { font-size: 12px; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }

.toggle-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.locked { opacity: .55; }
.lock-note { font-size: 12px; color: var(--yellow); margin-top: 4px; }
canvas { max-width: 100%; }

/* ---------- Guida Telegram ---------- */
.tg-guide { margin: 4px 0 16px; background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; }
.tg-guide summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--brand); }
.tg-steps { margin: 8px 0 14px; padding-left: 22px; }
.tg-steps li { padding: 5px 0; font-size: 14px; color: #cdd6ea; }
.tg-steps code { background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; font-size: 13px; color: var(--yellow); }
.data-badge { padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.data-live { background: rgba(34,201,138,.15); color: var(--green); }
.data-offline { background: rgba(255,93,108,.15); color: var(--red); }
.adm-in { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 13px; }
.adm-in:focus { outline: none; border-color: var(--brand); }
.danger-panel { border-color: rgba(255,93,108,.5); background: rgba(255,93,108,.05); }
.danger-toggle { padding: 10px 12px; border: 1px solid rgba(255,93,108,.4); border-radius: 10px; background: rgba(255,93,108,.08); }
.tag-executed { background: rgba(34,201,138,.15); color: var(--green); }
.tag-pending { background: rgba(255,207,92,.15); color: var(--yellow); }
.tag-declined, .tag-failed, .tag-expired { background: rgba(138,151,177,.15); color: var(--muted); }
/* Avvisi di prezzo */
.alert-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.alert-form select, .alert-form input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); font-size: 13px;
}
.alert-form input { width: 130px; }
.alert-form select:focus, .alert-form input:focus { outline: none; border-color: var(--brand); }
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
  font-size: 13px;
}

.community-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; background: var(--bg-soft); font-size: 14px;
}
.community-row.community-sub { background: transparent; padding: 4px 12px; font-size: 13px; color: var(--muted); }
.community-row .pos { color: var(--green); }
.community-row .neg { color: var(--red); }
/* Popup dettaglio utente (amministrazione) */
.modal-backdrop {
  /* sopra a TUTTO (barra dei menu, colonna, barra in alto): prima il grafico completo
     finiva mezzo nascosto sotto la colonna di sinistra */
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1100;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto;
}
/* Ricerca + filtri tabella admin */
.adm-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.adm-filters { display: flex; gap: 6px; }
.adm-filter.active { background: var(--brand); color: #fff; border-color: var(--brand); }

textarea.adm-in { width: 100%; resize: vertical; font-family: inherit; line-height: 1.5; }
/* Selettore lingua IT/EN */
.lang-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang-switch a { padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; }
.lang-switch a.on { background: var(--brand); color: #fff; }
/* Pagina stato del servizio */
.status-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.status-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.status-name { font-weight: 700; flex: 1; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status-dot.ko { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.risk-banner {
  background: rgba(255,207,92,.08); border: 1px solid rgba(255,207,92,.3);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; color: #e6d6a8;
}
.connect-hint {
  background: rgba(79,140,255,.1); border: 1px solid rgba(79,140,255,.35);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px; color: #cfe0ff;
}
/* Contenitore del grafico ad altezza FISSA: evita che Chart.js cresca
   all'infinito (grafico enorme + pagina che lampeggia bianca). */
.chart-box { position: relative; height: 240px; width: 100%; }

.tv-modal-card { max-width: 960px; width: 96%; height: 82vh; display: flex; flex-direction: column; }
.tv-modal-box { flex: 1; min-height: 0; margin-top: 10px; border-radius: 10px; overflow: hidden; }
.price-right { display: flex; align-items: center; gap: 10px; }
.price-chart-btn { padding: 4px 10px; line-height: 1; }
.chart-placeholder { display: none; text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
.top-right-btns { position: absolute; top: 18px; right: 20px; display: flex; gap: 8px; }
.creator-btn {
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  font-size: 13px; font-weight: 600;
}
.creator-btn:hover { border-color: var(--brand); color: var(--text); }

/* Popup assistenza */
.support-popup {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 20px;
}
.support-card {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; max-width: 380px; width: 100%; box-shadow: var(--shadow);
}
.support-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--muted); font-size: 18px; cursor: pointer;
}
.support-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 10px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-weight: 600; font-size: 14px; word-break: break-all;
}
.support-row:hover { border-color: var(--brand); }
.terms-box {
  max-height: 46vh; overflow-y: auto; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; margin: 8px 0 18px; font-size: 13.5px; line-height: 1.6;
}
.terms-box p { margin: 0 0 12px; }
/* Logo immagine (al posto dell'emoji) */
/* Logo come un'ICONA vera (riempie il riquadro arrotondato), non una foto col
   riquadro bianco incollato attorno. */
.brand-logo--img { background: transparent !important; padding: 0; overflow: hidden; }
.brand-logo--img img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
/* Testimonianze */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.review-card p { margin: 8px 0 0; font-size: 14px; color: #cdd6ea; }
.review-stars { color: var(--yellow); letter-spacing: 2px; }
/* Come funziona: passi + FAQ */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 22px; }
.step-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-bottom: 10px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.faq details p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
/* Selettore stelle recensione */
.star-pick { font-size: 34px; letter-spacing: 6px; cursor: pointer; }
.star-pick .star { color: var(--border); transition: color .1s; }
.star-pick .star.on { color: var(--yellow); }

.strategy-opt { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: .15s; }
.strategy-opt:hover { border-color: var(--brand); }
.strategy-opt.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,140,255,.3); }

/* Chip crypto */
.coin-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.coin-chip { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; user-select: none; }
.coin-chip:hover { border-color: var(--brand); }
.coin-chip.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; }
.influencer-grid { display: grid; gap: 10px; margin-top: 8px; }
.influencer-opt {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-soft); cursor: pointer; font-weight: 600;
}
.influencer-opt:hover { border-color: var(--brand); }
.influencer-opt.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,140,255,.3); }
.influencer-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: inline-grid; place-items: center; }
.influencer-opt.selected .influencer-dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }

/* =====================================================================
   TABLET / iPad — i due pulsanti in alto (Assistenza a sinistra, lingue+menu a
   destra) sono in posizione assoluta: su schermi medi la barra delle 15 lingue
   diventa larga e si SOVRAPPONE al tasto Assistenza. Qui, fino a 1100px, li tolgo
   dall'assoluto così si impilano in ordine. Non tocca il resto del layout iPad.
   ===================================================================== */
@media (max-width: 1300px) {
  .top-right-btns {
    position: static; top: auto; right: auto; flex-wrap: wrap;
    align-items: center; margin: 0 0 16px;
  }
  .top-right-btns .lang-switch {
    flex: 0 0 100%; width: 100%; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px;
  }
  .top-right-btns .lang-switch a { flex: 0 0 auto; }
}

/* =====================================================================
   OTTIMIZZAZIONE TELEFONO (grafica mobile) — solo layout, nessuna funzione
   ===================================================================== */
@media (max-width: 600px) {
  /* Pagine di accesso / paywall */
  .auth-wrap { padding: 16px 14px 40px; }
  .auth-card { padding: 22px 18px; margin: 3vh auto; }
  h1 { font-size: 21px; }
  .lead { font-size: 14px; }

  /* Pulsanti in alto: sul telefono NON sono più assoluti (si sovrapponevano) {
    position: static; top: auto; left: auto; display: inline-flex;
    margin: 0 0 10px; padding: 7px 12px; font-size: 12px;
  }
  .top-right-btns {
    position: static; top: auto; right: auto; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px; margin: 0 0 18px;
  }
  /* Le 9 lingue: riga propria a tutta larghezza, che scorre di lato invece di
     ammassarsi a capo. Così in alto resta tutto pulito e ordinato. */
  .top-right-btns .lang-switch {
    flex: 0 0 100%; width: 100%; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .top-right-btns .lang-switch a { flex: 0 0 auto; padding: 8px 13px; font-size: 13px; }
  .top-right-btns .creator-btn { flex: 1 1 auto; text-align: center; padding: 8px 12px; font-size: 12px; }

  /* Piani abbonamento: una colonna { grid-template-columns: 1fr; gap: 14px; margin: 26px 0; }

  /* App / dashboard */
  .main { padding: 16px 13px; }
  .topbar { margin-bottom: 18px; }
  .topbar h1 { font-size: 20px; }
  .bot-status { font-size: 12px; }

  /* KPI a 2 per riga, compatti */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
  /* Se le card sono ESATTAMENTE 3 (Home: P&L, Liquidità, Posizioni), la terza
     occupa tutta la riga: niente più buco vuoto a destra. Le griglie da 4 (es.
     Diario del bot) restano 2×2. */
  .kpi-grid > .kpi:nth-child(3):last-child { grid-column: 1 / -1; }
  .kpi { padding: 14px 15px; }
  .kpi .value { font-size: 20px; }
  .kpi .label { font-size: 11px; }
  .kpi .sub { font-size: 12px; }
  /* Card strette: il grafichetto va SOTTO il numero, a tutta larghezza,
     così il testo non viene schiacciato in una colonna sottile. */
  .kpi-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .kpi-spark { width: 100%; height: 26px; align-self: stretch; margin-top: 2px; }

  .panel { padding: 16px; }
  .grid-2 { gap: 16px; }

  /* Tabelle più leggibili e scorrevoli */
  table { font-size: 13px; }
  th { font-size: 10px; padding: 8px 8px; }
  td { padding: 10px 8px; }

  /* Popup assistenza e box termini a tutta larghezza */
  .support-card { padding: 22px 18px; }
  .terms-box { max-height: 52vh; font-size: 13px; }

  /* Grafici un filo più bassi sul telefono */
  .chart-box { height: 200px; }
}

/* Telefoni molto piccoli */
@media (max-width: 360px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .top-right-btns .creator-btn { font-size: 11px; padding: 5px 8px; }
}

/* ---------- Riquadri con scorrimento interno ---------- */
/* La lista/tabella scorre DENTRO al riquadro invece di allungare la pagina
   all'infinito. L'intestazione della tabella resta visibile (sticky). */
.scroll-in { max-height: 360px; overflow: auto; }
.scroll-in table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }

/* ---- Umore del mercato (Fear & Greed) ---- */
.mood {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius, 14px);
  padding: 14px 16px 12px; margin: 14px 0;
}
.mood-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mood-title { font-weight: 700; font-size: 14px; }
.mood-read { font-size: 14px; color: var(--muted); }
.mood-read b { color: var(--text); }
.mood-track {
  position: relative; height: 10px; border-radius: 999px;
  /* Centro NEUTRO in grigio/argento (non più giallo): coincide con la palette
     neutra del sito. Rosso a sinistra (Paura), verde a destra (Avidità). */
  background: linear-gradient(90deg, #e5484d 0%, #d06a5a 24%, #aab3c4 50%, #6faa63 76%, #46a758 100%);
}
.mood-fill { display: none; }
.mood-pin {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transform: translate(-50%, -50%); transition: left .4s ease;
}
.mood-scale { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--muted); }

/* ⋮ e descrizione dell'umore del mercato */
.mood-read { display: inline-flex; align-items: center; gap: 6px; }
.mood-dots {
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 16px;
  line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.mood-dots:hover, .mood-dots:focus-visible { color: var(--brand); border-color: var(--brand); }
.mood-desc {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.mood-desc p { margin: 0; }
.mood-desc .mood-note { margin-top: 8px; color: var(--muted); font-size: 12px; }

/* ---- Livello di rischio del segnale ---- */
.risk-badge {
  display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; border: 1px solid; background: transparent; white-space: nowrap;
}

/* ---- Calcolatrice guadagno ---- */
.calc { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.calc-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); flex: 1; min-width: 110px; }
.calc-field input, .calc-field select {
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); font-size: 15px; font-weight: 600;
}
.calc-out { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 15px; }
.calc-out b { font-size: 17px; }

/* ---- Traguardi ---- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ach {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; opacity: .55;
}
.ach-done { opacity: 1; border-color: var(--green, #2bbd7e); }
.ach-icon { font-size: 26px; line-height: 1; filter: grayscale(1); }
.ach-done .ach-icon { filter: none; }
.ach-body { flex: 1; min-width: 0; }
.ach-title { font-size: 13.5px; font-weight: 600; }
.ach-check { color: var(--green, #2bbd7e); }
.ach-bar { height: 6px; border-radius: 999px; background: var(--border); margin: 6px 0 4px; overflow: hidden; }
.ach-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.ach-prog { font-size: 11px; color: var(--muted); }

/* ---- Eventi ---- */
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-item { display: flex; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.ev-item:last-child { border-bottom: none; }
.ev-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 62px; padding: 8px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border);
}
.ev-day { font-size: 22px; font-weight: 800; line-height: 1; }
.ev-mon { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--brand); }
.ev-year { font-size: 10px; color: var(--muted); }
.ev-title { font-weight: 700; font-size: 15px; }
.ev-note { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---- Glossario ---- */
.glossary { display: flex; flex-direction: column; }
.gl-item { padding: 12px 2px; border-bottom: 1px solid var(--border); }
.gl-item:last-child { border-bottom: none; }
.gl-term { font-weight: 700; font-size: 15px; color: var(--brand); }
.gl-desc { font-size: 14px; color: var(--text); margin-top: 3px; line-height: 1.5; }

/* ---- Notizie di mercato ---- */
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
}
.news-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.news-coin {
  font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand);
}
.news-src { font-size: 12px; color: var(--muted); }
.news-title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.news-sum { font-size: 14px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.news-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.news-link { font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 600; }
.news-link:hover { text-decoration: underline; }
.news-actions { display: flex; gap: 8px; margin-left: auto; }
.tbtn {
  font-weight: 800; font-size: 13.5px; padding: 8px 18px; border-radius: 10px; cursor: pointer;
  border: none; color: #fff;
}
.tbtn-buy { background: #1f9d5c; }
.tbtn-buy:hover { background: #23b368; }
.tbtn-sell { background: #d33f45; }
.tbtn-sell:hover { background: #e5484d; }

/* ---- Finestra operazione ---- */
.trade-card { max-width: 420px; width: 100%; }
.trade-warn {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  background: color-mix(in srgb, #e5a51b 14%, transparent); border: 1px solid color-mix(in srgb, #e5a51b 40%, transparent);
  color: var(--text);
}

/* ---- iPhone: niente zoom automatico all'apertura della tastiera --------------
   iOS Safari ingrandisce la pagina quando tocchi un campo con testo più piccolo
   di 16px. Sui telefoni portiamo TUTTI i campi ad almeno 16px così lo schermo
   non "zooma" più quando appare la tastiera. Vale solo su schermi piccoli, così
   sul computer l'aspetto resta identico. */
@media (max-width: 820px) {
  input, textarea, select,
  .adm-in, .field input, .field select {
    font-size: 16px;
  }
}

/* ---- Pagine legali (Privacy, Termini, Cookie) ---------------------------- */
.legal-box { margin-top: 18px; line-height: 1.6; }
.legal-box h2 { font-size: 17px; margin: 22px 0 6px; }
.legal-box p, .legal-box li { color: var(--text); }
.legal-box ul { margin: 6px 0 6px 18px; padding: 0; }
.legal-box li { margin: 4px 0; }
.legal-box a { color: var(--brand, #4f8cff); }
.legal-warn {
  margin: 14px 0 8px; padding: 12px 14px; border-radius: 10px; line-height: 1.5;
  background: color-mix(in srgb, #e5a51b 14%, transparent);
  border: 1px solid color-mix(in srgb, #e5a51b 45%, transparent); color: var(--text);
}

/* ================= Rifinitura grafica + mobile (2026-08) ================= */
/* Titoli un filo più equilibrati e testo più nitido con Inter caricato. */
body { letter-spacing: -0.005em; }
h1 { font-size: clamp(22px, 4.5vw, 30px); }
h2 { font-size: clamp(18px, 3.6vw, 22px); }

/* Card/pannelli: SOBRI. Niente bagliori né inset "lucido": bordo netto + ombra
   piatta e discreta (look meno 'template AI'). */
.panel, .kpi, .plan-card, .card {
  box-shadow: none;
  border: 1px solid var(--border);
}
.btn { transition: transform .06s ease, filter .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }

/* ===== Scuro SOBRIO: via tutti i bagliori/gradienti che sanno di 'AI' ===== */
/* pulsanti e chip: tinta piena, niente gradiente viola-blu */
.brand-logo, .step-num, .coin-chip.on, .ach-fill { background: var(--card-2) !important; }
.step-num, .coin-chip.on { background: var(--brand) !important; }
/* Il numero del passo deve leggersi sul cerchio: con l'accento chiaro il testo
   bianco spariva (bianco su bianco). */
.step-num, .coin-chip.on, .lang-switch a.on, .adm-filter.active { color: #0b0b0b !important; }
/* anelli/glow di selezione → semplice bordo colorato */
.plan-card.selected, .strategy-opt.selected, .influencer-opt.selected { box-shadow: none !important; border-color: var(--brand); }
.plan-card:hover { box-shadow: none; }
/* puntini "online": tolgo l'alone pulsante */
.dot, .online-dot { box-shadow: none !important; animation: none !important; }
.status-dot.ok, .status-dot.ko { box-shadow: none !important; }

/* Le tabelle e le file di tab non devono mai sforare: scorrono da sole. */
.dash-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tabs .dash-tab-btn { white-space: nowrap; flex: 0 0 auto; }
.table-wrap, .panel > table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  .main { padding: 14px 12px; }
  .panel { padding: 14px; border-radius: 14px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .kpi-grid { gap: 10px; }
  /* Bottoni più comodi da toccare col dito. */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
}

/* ================= TEMA LUSSO + MOVIMENTO (2026-08) ================= */
/* Card: bordo caldo e un'ombra profonda ma morbida; si sollevano al passaggio. */
.panel, .kpi, .plan-card, .card {
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  border: 1px solid var(--border);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.panel:hover, .kpi:hover, .plan-card:hover, .card:hover {
  transform: translateY(-5px) scale(1.014);
  border-color: var(--brand);
  /* bordo che si ILLUMINA d'oro + ombra profonda */
  box-shadow: 0 26px 64px rgba(0,0,0,.55), 0 0 0 1px var(--brand), 0 0 26px rgba(217,178,90,.38);
}
a { transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--gold-2); }

th, .kpi .label, .panel-head .hint { letter-spacing: .12em; text-transform: uppercase; }

/* Linea dorata sottile sotto i titoli principali della pagina. */
.topbar h1::after, .brand-name::after { content: none; }

/* ---- Ingresso SCENICO ma SICURO: le card salgono una alla volta con un filo di
       scala e sfocatura che si mette a fuoco. Solo verticale: niente movimento
       laterale, così non escono MAI dai bordi (prima si tagliavano). ---- */
/* Solo opacità + spostamento/scala (accelerati dalla GPU): fluidi { opacity: 0; transform: translateY(46px) scale(.955); }

/* Sicurezza: nessuno scroll orizzontale per colpa delle animazioni. */
html, body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  .panel, .kpi, .plan-card, .card { transition: none; }
}

@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

@keyframes goldSheen { to { background-position: -240% 0; } }

/* 2) Pulsanti oro: LAMPO di luce che attraversa al passaggio. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.btn-primary:hover::after { animation: btnShine .75s ease; }
@keyframes btnShine { 0% { left: -70%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

@keyframes featGlow { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* 4) Barra di avanzamento dorata in alto mentre scorri. */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9996;
  background: linear-gradient(90deg, var(--brand-2), var(--brand), var(--gold-2));
  box-shadow: 0 0 10px rgba(217,178,90,.5); transition: width .08s linear;
}

/* ============ Fix larghezza mobile + tocco d'oro ============ */
/* Le stringhe lunghissime senza spazi (chiavi API mascherate, codici) vanno a
   capo invece di allargare la pagina e farsi tagliare ai bordi. */
.hint, .lead, .legal-box p, .mono { overflow-wrap: anywhere; word-break: break-word; }
/* Nessun campo può essere più largo dello schermo. */
input, select, textarea, .adm-in, .field input, .field select { max-width: 100%; }
.field, .field input, .field select { min-width: 0; }

/* ✦ Simbolino d'ORO accanto ai titoli delle pagine (tocco boutique). */
.topbar h1::before, .brand-name::before {
  content: "✦"; color: var(--brand); font-size: .62em; margin-right: 9px;
  vertical-align: middle; opacity: .85; -webkit-text-fill-color: var(--brand);
}

/* ============ Tocco su telefono + entrata dei titoli ============ */
/* Toccando un riquadro su telefono si illumina come col mouse su PC. */
.panel.tap-glow, .kpi.tap-glow, .plan-card.tap-glow, .card.tap-glow {
  transform: translateY(-4px) scale(1.014);
  border-color: var(--brand);
  box-shadow: 0 26px 64px rgba(0,0,0,.55), 0 0 0 1px var(--brand), 0 0 26px rgba(217,178,90,.38);
}

/* Entrata "particolare" dei titoli in alto: il titolo scende in dolcezza, il
   ✦ ruota/entra e una linea dorata si disegna sotto. */
.topbar h1 { animation: ttlIn .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ttlIn { from { opacity: 0; transform: translateY(-12px); letter-spacing: .08em; }
                   to   { opacity: 1; transform: none; letter-spacing: 0; } }
.topbar h1::before { display: inline-block; animation: ttlStar .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ttlStar { 0% { opacity: 0; transform: rotate(-60deg) scale(.3); }
                     60% { opacity: .9; transform: rotate(8deg) scale(1.15); }
                     100% { opacity: .85; transform: none; } }
.topbar h1::after { content: ""; display: block; height: 2px; width: 0; margin-top: 7px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  animation: ttlLine 1s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes ttlLine { to { width: 74px; } }
@media (prefers-reduced-motion: reduce) {
  .topbar h1, .topbar h1::before, .topbar h1::after { animation: none; }
  .topbar h1::after { width: 74px; }
}

/* ============================================================
   MINI-SFERA IA fluttuante (in ogni pagina): una versione PICCOLA della
   stessa sfera di particelle della pagina IA. In basso a destra su TUTTI i
   dispositivi. Tocco -> apre la pagina IA grande pronta a parlare.
   ============================================================ */
.mini-orb {
  position: fixed; z-index: 950; bottom: 20px; right: 18px;
  width: 66px; height: 66px; border-radius: 50%;
  display: block; text-decoration: none; cursor: pointer;
  transition: transform .14s ease;
  touch-action: none;              /* così il trascinamento non scrolla la pagina */
}
.mini-orb:hover { transform: scale(1.08); }
.mini-orb:active { transform: scale(.94); }
.mini-orb-cv { display: block; width: 100%; height: 100%; }
.mini-orb-label {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--title, #e6c67e);
  opacity: .9; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
@media (max-width: 760px) {
  .mini-orb { width: 62px; height: 62px; bottom: 18px; right: 15px; }
}

/* ============================================================
   SCROLL "cinematografico" morbido (solo pagina abbonamenti).
   La copertina e la sezione piani si agganciano dolcemente mentre scorri.
   'proximity' NON blocca lo scroll: aggancia solo quando sei già vicino.
   ============================================================ */
/* NETTO ('mandatory'): la copertina e la parte accesso si comportano come DUE
   PAGINE separate — flick e salta netto, niente più mezzo-mezzo brutto. La parte
   accesso resta comunque scorribile al suo interno fino al form (contenuto più alto
   dello schermo → il browser ti lascia arrivare in fondo). */
html.vc-snap { scroll-snap-type: y mandatory; scroll-padding-top: 8px; }
html.vc-snap .auth-wrap { scroll-snap-align: start; scroll-snap-stop: always; }
/* Blocchi che si agganciano (usati nella dashboard): offset per la barra in
   alto quando è sticky su telefono. */
html.vc-snap .snap { scroll-snap-align: start; scroll-margin-top: 64px; }
@media (prefers-reduced-motion: reduce) {
  html.vc-snap { scroll-snap-type: none; }
}

/* =====================================================================
   REDESIGN — TEMA "VETRO SCURO" (Fase 2)
   Override in coda: ritara le variabili e i componenti principali verso il
   look vetro scuro opaco. La palette segue l'umore del mercato via la classe
   html.vc-mood-* (impostata da uno script in base.html). Niente colori accesi.
   ===================================================================== */
:root {
  /* PALETTE PREMIUM FISSA (stile Kraken): nero profondo + oro raffinato, un solo
     accento coerente su tutto il sito. Niente più colore che cambia con l'umore. */
  --bg: #08090d;
  --bg-soft: rgba(17, 18, 24, 0.55);
  --card: rgba(20, 21, 28, 0.58);
  --card-2: rgba(28, 30, 38, 0.64);
  --border: rgba(214, 182, 106, 0.14);   /* bordo oro molto tenue */
  --text: #ece7dd;                        /* bianco caldo */
  --muted: #9b968c;
  --faint: #6c6960;
  --brand: #d4b46a;          /* ORO raffinato — accento unico */
  --brand-2: #a98f4f;
  --accent: #d4b46a;
  --gold-2: #e7d4a2;
  --title: #f2ead8;          /* titoli bianco caldo */
  --green: #62b98a;          /* verde per esiti positivi (leggibile, non acceso) */
  --red: #d17d7d;            /* rosso per esiti negativi */
  --yellow: #d4b46a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --glass-blur: 13px;
  --accent-rgb: 212, 180, 106;
}
/* Il COLORE DEL SITO non cambia più con l'umore del mercato: palette premium oro
   fissa (sopra). Le classi html.vc-mood-* restano nel markup ma non tingono più
   nulla, così tutto il sito ha un accento coerente e professionale. */

body {
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(212, 180, 106, 0.08), transparent 62%),
    var(--bg) !important;
}
a { color: var(--brand); }
h1, h2, h3 { color: var(--title); }

/* --- Card / riquadri in vetro scuro --- */
.panel, .card, .kpi, .plan-card, .step-card, .mood, .ai-note, .connect-hint, .risk-banner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.kpi { border-radius: 16px; }
.price-row { background: var(--card-2); }

/* --- Bottoni sottili, trasparenti, si illuminano appena al hover --- */
.btn, .btn-ghost, .btn-primary {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .1s ease;
}
.btn-primary {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--text);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: none;
  background-image: none;
}
.btn-primary:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.22);
  transform: none;
}
.btn-primary::after, .btn-primary::before { display: none !important; content: none !important; }
.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }

/* --- Input in vetro --- */
input, select, textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14) !important;
}

/* --- Sidebar in vetro --- */
.sidebar { background: rgba(10, 12, 16, 0.55); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-right: 1px solid var(--border); }
.nav-link.active { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.3); }

/* --- Meno blur su telefono (performance) --- */
@media (max-width: 760px) {
  :root { --glass-blur: 8px; }
}

.creator-btn {
  background: rgba(var(--accent-rgb), 0.10) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.38) !important;
  color: var(--text) !important; box-shadow: none !important;
}
.creator-btn:hover {
  background: rgba(var(--accent-rgb), 0.18) !important;
  border-color: rgba(var(--accent-rgb), 0.6) !important;
}

/* --- Umore del mercato: tinta di TUTTA la pagina (oltre agli accenti e alle
   particelle). Freddo/blu in paura, neutro argento, caldo oliva in euforia. --- */
/* Lo sfondo VERO resta nero totale in ogni umore (solo un alito del colore in
   cima, quasi invisibile): il colore vive su testo, card e bordi, non qui. */
html.vc-mood-fear body {
  background: radial-gradient(1200px 800px at 50% -16%, rgba(185,60,60,0.06), transparent 55%),
              #000 !important;
}
html.vc-mood-neutral body {
  background: radial-gradient(1200px 800px at 50% -16%, rgba(120,140,180,0.05), transparent 55%),
              #000 !important;
}
html.vc-mood-greed body {
  background: radial-gradient(1200px 800px at 50% -16%, rgba(150,168,80,0.06), transparent 55%),
              #000 !important;
}

/* --- Mini-IA fluttuante: il logo in particelle 3D (come l'avatar grande) --- */
.mini-orb {
  position: fixed; z-index: 9998; bottom: 24px; right: 16px;
  width: 74px; height: 74px;
  display: block; text-decoration: none; cursor: pointer;
  transition: transform .14s ease;
  touch-action: none;              /* il trascinamento non scrolla la pagina */
}
.mini-orb:hover { transform: scale(1.07); }
.mini-orb:active { transform: scale(.94); }
.mini-orb-cv { display: block; width: 100%; height: 100%; }
.mini-orb-label {
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
  color: var(--title); opacity: .92; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
@media (max-width: 760px) {
  .mini-orb { width: 68px; height: 68px; bottom: 18px; right: 14px; }
  .mini-orb-label { font-size: 9.5px; }
}

/* --- Tasto menu (hamburger) per iPad/PC: apre/chiude la barra laterale --- */
.nav-toggle { display: none; }
@media (min-width: 761px) {
  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    position: fixed; top: 14px; left: 14px; z-index: 60;
    width: 40px; height: 40px; border-radius: 11px; padding: 0; cursor: pointer;
    background: rgba(10, 12, 16, 0.6); border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .22s ease, opacity .22s ease; }
  /* La barra NON è più una colonna della griglia (che schiacciava a 0 quando si
     chiudeva): è un CASSETTO a larghezza fissa che scivola fuori. Il contenuto
     occupa tutta la larghezza e lascia spazio a sinistra quando la barra è aperta.
     Così l'apertura/chiusura è morbida e non si "rompe" più. */
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; width: 248px; z-index: 40;
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(0); transition: transform .25s ease;
  }
  .main { padding-left: 280px; transition: padding-left .25s ease; }
  /* Lascia spazio all'hamburger sopra il logo quando la barra è aperta. */
  .side-brand { padding-left: 46px; }
  /* Stato APERTO: le tre linee diventano una X. */
  body:not(.nav-collapsed) .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body:not(.nav-collapsed) .nav-toggle span:nth-child(2) { opacity: 0; }
  body:not(.nav-collapsed) .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* Stato CHIUSO: il cassetto scivola FUORI (resta 248px, non si schiaccia) e il
     contenuto si allarga; a sinistra resta solo lo spazio per l'hamburger. */
  body.nav-collapsed .sidebar { transform: translateX(-100%); }
  body.nav-collapsed .main { padding-left: 64px; }
}

/* --- Barra in alto della copertina: lingue a sx {
  position: absolute; top: 14px; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 16px;
}

/* =====================================================================
   FASE 3 — "KRAKEN CLEAN": nero pieno, superfici piatte, spazio, minimale.
   Sovrascrive in coda tutto il sito verso un look semplice e professionale.
   NON tocca la tipografia (per lasciare intatta la prima pagina/hero col logo).
   ===================================================================== */
:root {
  /* Stile Kraken: sfondo quasi-nero (NON nero pieno, così le card si staccano) +
     card grigie CHIARE con bordo netto e leggera ombra (niente più "fusione grigia").
     Neutro: grigi/bianco, verde/rosso per i numeri. */
  --bg: #0a0b0e;
  --bg-soft: #131521;
  --card: #1c1f27;
  --card-2: #2a2e39;
  --border: rgba(255, 255, 255, 0.14);
  --shadow: none;
  --glass-blur: 0px;
  --text: #e9ebef;
  --title: #ffffff;
  --muted: #9297a1;
  --faint: #6a6f79;
  --brand: #e7e9ee;          /* accento NEUTRO chiaro (bottoni bianchi stile Kraken) */
  --brand-2: #c3c7cf;
  --accent: #e7e9ee;
  --accent-rgb: 231, 233, 238;
  --gold-2: #e7e9ee;
  --yellow: #cfd3da;
  --green: #37c98a;          /* verde numeri */
  --red: #ff6b6b;            /* rosso numeri */
}
body { background: var(--bg) !important; }
/* Link e accenti neutri (niente oro) */
a { color: #d7dae0; }

/* Superfici PIATTE e pulite, GRIGIE e BEN STACCATE dal nero (niente fusione):
   card grigio chiaro + bordo netto. Vale per tutti i tipi di riquadro. */
.panel, .card, .kpi, .plan-card, .step-card, .mood, .ai-note, .connect-hint,
.risk-banner, .dash-tab, .chart-box,
.danger-panel, .modal-card, .tv-modal-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  /* Ombra morbida: la card si STACCA dallo sfondo invece di fondersi */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* La scheda-contenitore delle tab non deve avere ombra/bordo doppio */
.dash-tab { box-shadow: none !important; border: none !important; background: transparent !important; }
.risk-banner-mini { box-shadow: none !important; }
.panel { padding: 18px !important; }
/* I riquadri interni (dentro una card) un filo più chiari, così non si fondono */
.panel .kpi, .panel .card, .panel .connect-hint, .panel .mood { background: var(--card-2) !important; }
/* Il box del grafico dentro un pannello NON è una card: solo l'area del grafico */
.panel .chart-box, .panel .tv-modal-box { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }

/* Bottoni a PILLOLA, come Kraken */
.btn, .btn-sm, .btn-primary, .btn-ghost { border-radius: 999px !important; }
.btn-primary { background: var(--brand) !important; color: #0b0b0b !important; border: none !important; font-weight: 700 !important; }
.btn-ghost { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.35) !important; }

/* Campi input puliti */
.adm-in, input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="tel"], select, textarea {
  background: #0f1013 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
}

/* Piani: selezione con bordo oro sottile, niente alone azzurro */
.plan-card.selected { border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand) !important; }
.plan-card:hover { border-color: rgba(255, 255, 255, 0.20) !important; box-shadow: none !important; transform: none !important; }

/* --- BARRA DI NAVIGAZIONE IN BASSO (stile app Kraken): 4 sezioni, semplice --- */
.vc-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none;                 /* su desktop resta la barra laterale */
  align-items: stretch;
  background: rgba(16, 18, 22, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Un po' più alta: non schiacciata in fondo, con spazio per la tacca del telefono */
  padding: 10px 6px calc(14px + env(safe-area-inset-bottom, 0px));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.vc-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px; text-decoration: none; color: #868b95;
  font-size: 11.5px; font-weight: 600;
}
.vc-tab svg { width: 26px; height: 26px; }
.vc-tab.on { color: #ffffff; }
.vc-tab:active { opacity: .65; }
/* Tasto "+" centrale prominente (bianco, sporge in alto) come Kraken */
.vc-tab-plus { justify-content: center; }
.vc-plus {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: -16px;
  background: #ffffff; color: #0b0b0b; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.vc-plus svg { width: 26px; height: 26px; }
@media (max-width: 767px) {
  .vc-tabbar { display: flex; }
  /* Barra più alta ⇒ un filo più spazio sotto al contenuto */
  body.has-tabbar { padding-bottom: 84px; padding-top: 52px; }
  /* La sferetta AI sta SOPRA la barra, non la copre */
  body.has-tabbar .mini-orb { bottom: 96px; }
}

/* --- RIORDINO GLOBALE: contenuti centrati, ritmo costante, tab pulite --- */
.panel { margin-bottom: 14px; }                    /* stesso spazio tra tutte le sezioni */
.topbar { margin-bottom: 14px; }
.panel-head h2, .panel h2 { font-size: 17px; letter-spacing: .01em; }
/* Tab (Conto/Prezzi/… e Account/Exchange/…) come segmenti puliti stile app.
   Su UNA riga sola (niente più "Strumenti"/"Sistema" che vanno a capo): se non
   ci stanno si scorrono di lato con il dito. */
.dash-tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab-btn { border-radius: 999px !important; padding: 8px 15px !important; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.dash-tab-btn.on { background: #ffffff !important; color: #0b0b0b !important; border-color: #fff !important; }
@media (max-width: 767px) {
  /* Su telefono: contenuto centrato con margini uguali e spazio per la barra in basso.
     Top più stretto (meno vuoto in cima), stile Kraken. */
  .main { max-width: 680px; margin: 0 auto; padding-left: 16px; padding-right: 16px; padding-top: 6px !important; padding-bottom: 96px !important; }
  h1 { font-size: 23px; }
  .topbar { margin-bottom: 10px !important; }
  .topbar .hint { font-size: 12px; }
  .dash-tabs { margin-bottom: 14px !important; }
  /* La sfilza di icone/stato "bot attivo" sotto al titolo occupa spazio inutile
     sulla Home: la teniamo compatta */
  .bot-status { font-size: 11px; gap: 6px; flex-wrap: wrap; row-gap: 8px; white-space: nowrap; }
}

/* Righe lista stile Kraken (pagina Esplora, "Altro" nelle Impostazioni) */
.vc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 12px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 16px; font-weight: 500;
}
.vc-row:last-child { border-bottom: none; }
.vc-row:active { background: rgba(255, 255, 255, 0.04); }
.vc-row-arr { color: var(--muted); font-size: 22px; line-height: 1; }

/* Su TELEFONO: via la barra laterale e l'hamburger. Si naviga con la barra in
   basso; le voci extra sono in Esplora e Impostazioni. */
@media (max-width: 767px) {
  body.has-tabbar .sidebar { display: none !important; }
  body.has-tabbar .nav-toggle { display: none !important; }
  body.has-tabbar .main { padding-left: 16px !important; }
}

/* La vecchia barra laterale piena non serve più: la navigazione è tutta nella
   barra pulita (in basso su telefono, di lato a sinistra sul computer/iPad).
   Anche il tasto "tre linee" (che apriva la vecchia barra) non serve più. */
.sidebar { display: none !important; }
.nav-toggle { display: none !important; }
.app { display: block !important; }
.main { padding-left: 0 !important; }
/* …ma chi NON ha la barra (visitatore non loggato) deve avere i margini: senza,
   pagine come Esplora finivano attaccate al bordo sinistro dello schermo. */
body:not(.has-tabbar) .main { padding-left: 16px !important; padding-right: 16px; max-width: 1100px; margin: 0 auto; }

/* COMPUTER / iPad: la barra diventa una COLONNA A SINISTRA (stile Kraken desktop). */
@media (min-width: 768px) {
  .vc-tabbar {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    top: 0; bottom: 0; right: auto; width: 96px;
    border-top: none; border-right: 1px solid var(--border);
    padding: 18px 6px; background: rgba(10, 11, 14, 0.96);
  }
  .vc-tab { flex: 0 0 auto; padding: 12px 4px; font-size: 11px; }
  .vc-tab svg { width: 22px; height: 22px; }
  /* Il "+" resta in linea con gli altri, con un po' d'aria sopra e sotto */
  .vc-tab-plus { margin: 8px 0; }
  .vc-plus { margin-top: 0; width: 46px; height: 46px; }
  /* Logo del brand in cima alla colonna (look da app crypto vera) */
  .vc-brand { display: grid; place-items: center; padding: 4px 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
  .vc-brand img { width: 40px; height: 40px; object-fit: contain; }
  /* Contenuto incorniciato: parte dopo la colonna, larghezza comoda (non a tutto schermo) */
  /* .vc-page = pagine SENZA il guscio .app/.main (AI Progettista, Risultati, Dati
     di mercato, Giornale…): su computer/iPad devono partire DOPO la colonna di
     icone come fa .main, sennò finiscono sotto la barra. :has() esclude le pagine
     che il margine ce l'hanno già dal .main, così non raddoppia. */
  body.has-tabbar .main,
  body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) {
    padding-left: 132px !important; padding-right: 40px !important; padding-top: 84px !important;
    max-width: 1280px; box-sizing: border-box;
  }
  .vc-topbar { display: flex; left: 96px; }   /* barra in alto anche su desktop, a destra della colonna */

  /* HERO più grande e allineato a sinistra, come le dashboard crypto sul desktop */
  .acct-hero { text-align: left; padding: 2px 0 0; }
  .acct-hero-label { font-size: 13px; }
  .acct-hero-value { font-size: 64px; }
  .acct-hero-sub { font-size: 13.5px; }
  .acct-wave { height: 240px; margin: 16px 0 8px; }
  .acct-live { text-align: left; }
  /* I numeri secondari su una riga elegante */
  .kpi-grid { gap: 16px; }
}
/* Il logo del brand NON si vede sul telefono (la barra in basso resta 5 icone) */
@media (max-width: 767px) { .vc-brand { display: none !important; } }

/* Barra in alto minimale (account a sinistra, cerca a destra) */
.vc-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 850;
  display: none; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vc-round {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border); color: #dfe2e8; text-decoration: none;
}
.vc-round svg { width: 20px; height: 20px; }
.vc-round:active { opacity: .7; }
@media (max-width: 767px) {
  .vc-topbar { display: flex; }
  body.has-tabbar { padding-top: 52px; }
}
/* FIX visibilità: su computer/iPad la barra in alto (account a sinistra, cerca a
   destra) deve restare visibile. La regola base .vc-topbar{display:none} qui sopra,
   stando più in basso nel file, vinceva sulla regola desktop precedente. La
   ridichiaro in coda così su schermi larghi resta visibile, a destra della colonna. */
@media (min-width: 768px) {
  .vc-topbar { display: flex; left: 96px; }
}

/* ---- Pallino AMMINISTRAZIONE trascinabile (solo admin) ---- */
.admin-orb {
  position: fixed; left: 16px; bottom: 100px; z-index: 1000;
  width: 50px; height: 50px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(20, 22, 28, 0.96); color: #d6b86a;
  border: 1px solid rgba(214, 184, 106, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  text-decoration: none; touch-action: none; cursor: grab;
  transition: transform .12s ease;
}
.admin-orb svg { width: 24px; height: 24px; }
.admin-orb:active { transform: scale(.92); cursor: grabbing; }
.admin-orb.dragging { transition: none; opacity: .92; }
@media (min-width: 768px) { .admin-orb { left: 112px; bottom: 22px; } }

/* ---- HOME stile Kraken: saldo GRANDE + onda pulita ---- */
.acct-hero { text-align: center; padding: 6px 0 2px; }
.acct-hero-label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.acct-hero-value {
  font-size: clamp(38px, 12vw, 56px); line-height: 1.04; font-weight: 800;
  color: #fff; letter-spacing: -.01em; margin-top: 4px;
}
.acct-hero-sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
/* Area onda: nessuna card, solo la linea che ondeggia (come Kraken) */
.acct-wave { position: relative; height: 120px; margin: 6px 0 2px; }
.acct-wave .chart-box,
.acct-wave .acct-wave-deco,
.acct-wave .chart-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
.acct-wave-deco { display: block; opacity: .5; }
/* 'conto reale' piccolo e attaccato all'onda (niente più testo che galleggia) */
.acct-live { display: block; text-align: center; color: var(--muted); margin: 0 0 18px; font-size: 11.5px; min-height: 0; }
.acct-live:empty { display: none; margin: 0; }

/* Barra di RICERCA cripto (scheda Prezzi) */
.crypto-search { display: flex; align-items: center; gap: 8px; background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; margin-bottom: 12px; }
.crypto-search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.crypto-search input { flex: 1; min-width: 0; background: transparent !important; border: none !important; outline: none; color: var(--text); font-size: 15px; padding: 0 !important; }
.crypto-search input::placeholder { color: var(--faint); }

/* RICERCA CRIPTO globale (si apre dalla lente in alto, su ogni pagina) */
.search-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-start; justify-content: center; padding: 56px 16px 16px; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.search-sheet { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); overflow: hidden; }
.search-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.search-bar svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.search-bar input { flex: 1; min-width: 0; background: transparent !important; border: none !important; outline: none; color: var(--text); font-size: 16px; padding: 0 !important; }
.search-bar input::placeholder { color: var(--faint); }
.search-results { max-height: 62vh; overflow-y: auto; }
.search-results .empty { padding: 22px 16px; text-align: center; color: var(--muted); }
.search-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.search-row:last-child { border-bottom: none; }
.search-row:active { background: rgba(255, 255, 255, 0.04); }
.search-coin { font-weight: 700; }
.search-coin .hint { font-weight: 400; }
.search-price { color: var(--muted); font-size: 14px; }
.search-price .pos { color: var(--green); }
.search-price .neg { color: var(--red); }

/* Avviso rischi in versione mini (in fondo alla scheda Conto): discreto, non urla */
.risk-banner-mini {
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: .62;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 2px 0 !important;
}

/* ============================================================================
   RINFRESCO GRAFICO 2026 — più respiro, meno "ammassato", look più nostro.
   Blocco in fondo così sovrascrive senza toccare le regole di sopra. Resta
   mobile-first: su telefono i valori compatti; su desktop più aria e larghezza.
   ============================================================================ */

/* Più aria intorno ai contenuti sul desktop */
@media (min-width: 901px) {
  .main { padding: 34px 44px; }
  .main > * { max-width: 1160px; }
}

/* Pannelli: più imbottitura, angoli più morbidi, ombra leggera e un filo di
   profondità (gradiente impercettibile) così non sembrano schiacciati e piatti. */
.panel {
  padding: 26px 26px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px rgba(0,0,0,.18);
}
.panel + .panel { margin-top: 4px; }
.panel-head { margin-bottom: 18px; }

/* Titolo dei pannelli con una barretta oro a sinistra: identità VcriptoV,
   non il solito titolo "da exchange". */
.panel > h2:first-child,
.panel-head > h2 {
  position: relative;
  padding-left: 14px;
  letter-spacing: .2px;
}
.panel > h2:first-child::before,
.panel-head > h2::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

/* Tabelle: più spaziose, righe alternate (zebra) e evidenziazione al passaggio.
   Così le tabelle "respirano" e non sembrano tutte incollate. */
th { padding: 14px 16px; font-size: 11px; }
td { padding: 16px 16px; }
tbody tr { transition: background .15s; }
tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
tbody tr:hover td { background: rgba(217,178,90,.06); }

/* Righe prezzo / liste: un pizzico più d'aria e un bordo tenue */
.price-row {
  padding: 13px 15px;
  border: 1px solid var(--border);
  background: var(--card-2);
}
.price-list { gap: 12px; }

/* KPI: più imbottitura e un leggero sollevamento al hover */
.kpi { padding: 22px 22px; border-radius: 16px; transition: transform .15s, border-color .15s; }
.kpi:hover { transform: translateY(-2px); border-color: rgba(217,178,90,.35); }
.kpi-grid { gap: 18px; margin-bottom: 26px; }

/* Griglie e sezioni: un filo più di spazio tra i blocchi sul desktop */
@media (min-width: 901px) {
  .dash-cols, .dash-col { gap: 26px; }
  .grid-2 { gap: 26px; }
}

/* Campi form un po' più alti e comodi da toccare */
.field input, .field select, .field textarea, .adm-in {
  border-radius: 12px;
}

/* Barra schede: voce attiva con un tocco di sfondo, meno "nuda" */
.dash-tab-btn.on { background: rgba(217,178,90,.08); border-radius: 10px 10px 0 0; }

/* Tastino volante SURVIVAL MODE (solo titolare): sopra il pallino admin. */
.trading-orb{
  position: fixed; left: 16px; bottom: 320px; z-index: 1000;
  width: 50px; height: 50px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(20,22,28,.96); color: var(--brand,#d6b86a);
  border: 1px solid rgba(214,184,106,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  text-decoration: none; transition: transform .12s ease;
  touch-action: none; cursor: grab;
}
.trading-orb.dragging{ transition: none; opacity: .92; cursor: grabbing; }
.trading-orb svg{ width: 22px; height: 22px; }
.trading-orb:hover{ transform: scale(1.06); }
.trading-orb:active{ transform: scale(.92); }
@media (min-width: 768px){ .trading-orb{ left: 112px; bottom: 80px; } }

/* Pallini dei PROGETTI: "in corso" (solo titolare) con bordo tratteggiato */
.proj-orb.proj-wip{ border-style: dashed; }

/* ---- LA MONETA: barra fissa in cima a tutte le pagine ---- */
.coinbar {
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 960;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(90deg, rgba(212,180,106,.10), rgba(212,180,106,.22), rgba(212,180,106,.10)), #0b0a0d;
  border-bottom: 1px solid rgba(212,180,106,.35);
  color: var(--text); font-size: 13px; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.coinbar:hover { background-color: #141118; }
.coinbar-sym { color: var(--brand); font-weight: 700; letter-spacing: .02em; }
.coinbar-price { font-weight: 600; }
.coinbar-ch.up { color: var(--green); font-weight: 600; }
.coinbar-ch.down { color: var(--red); font-weight: 600; }
.coinbar-lbl { color: var(--muted); font-size: 11px; }
/* tutto ciò che stava attaccato al bordo alto scende di 30px */
body.has-coinbar { padding-top: 30px; }
body.has-coinbar .vc-topbar { top: 30px; }
body.has-coinbar .nav-toggle { top: 44px; }
@media (max-width: 767px) {
  body.has-coinbar.has-tabbar { padding-top: 82px; }
}
@media (min-width: 768px) {
  body.has-coinbar .vc-tabbar { top: 30px; }
}
@media (max-width: 900px) {
  body.has-coinbar .sidebar { top: 30px; }
}
.coin-hero { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 10px; }
.coin-hero-price { font-size: 34px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.coin-hero-ch { font-size: 22px; font-weight: 700; }
.coin-hero-ch.up { color: var(--green); } .coin-hero-ch.down { color: var(--red); }
.coin-addr { word-break: break-all; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); }

body.has-coinbar #scrollProgress { top: 30px; }

/* ===================================================================================
   Ottobre 2026 — riquadri più LEGGERI e un po' TRASPARENTI (stile app bancaria):
   sfondo vetro tenue, bordo sottile, angoli morbidi, niente ombre pesanti.
   =================================================================================== */
.panel, .card, .kpi, .plan-card, .step-card, .mood, .ai-note, .connect-hint,
.risk-banner, .chart-box, .danger-panel {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}
.panel .kpi, .panel .card, .panel .connect-hint, .panel .mood { background: rgba(255, 255, 255, 0.04) !important; }
.faq details { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; }
.kpi .value { font-weight: 700; }
/* Al tocco si illumina solo il bordo: niente "salto" del riquadro (rallentava lo scorrimento) */
.panel.tap-glow, .kpi.tap-glow, .plan-card.tap-glow, .card.tap-glow {
  transform: none !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.26) !important;
}
@media (hover: none) {
  .panel:hover, .kpi:hover, .plan-card:hover, .card:hover { transform: none !important; box-shadow: none !important; }
}
/* Scorrimento su iPhone: "clip" taglia ciò che esce di lato SENZA creare un contenitore
   di scorrimento ("hidden" a volte bloccava lo scorrimento della pagina). */
@supports (overflow: clip) {
  html, body, .main { overflow-x: clip !important; }
}
/* Pallini flottanti: lo scorrimento che parte sopra di loro fa scorrere la pagina;
   per spostarli si tengono premuti un attimo. */
.admin-orb, .mini-orb, .trading-orb { touch-action: manipulation !important; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.admin-orb.drag-armed, .mini-orb.drag-armed, .trading-orb.drag-armed { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

/* App già installata: niente tasto «Installa l'app» (deciso prima del disegno della pagina) */
html.vc-standalone .pwa-install-btn { display: none !important; }
/* Dati in arrivo: grigio neutro { background: rgba(255,255,255,.08); color: var(--muted, #9aa0a6); }

/* Avviso rischi in fondo alla scheda Conto: il riquadro "vetro" del 2026 (sopra) gli dava
   il bordo arrotondato ma con il margine interno della vecchia versione a riga (2px ai
   lati) → la scritta toccava i bordi ed era storta. Ora sta DENTRO il riquadro. */
.risk-banner.risk-banner-mini { padding: 14px 16px !important; border-radius: 18px !important; margin-top: 18px; }

/* =====================================================================
   STILE "TERMINALE DI TRADING" — SOLO COMPUTER (schermi da 1024 px in su)
   Richiesta del titolare: sul PC il sito deve sembrare un software di
   trading professionale (grafite, pannelli netti, titoli ORO, pillole di
   stato verdi). Il telefono e l'iPad in verticale restano come prima.
   ===================================================================== */
.vc-term, .vc-desk, .vc-desk-lbl, .vc-brand-name { display: none !important; }

/* TELEFONO e iPad in verticale: stesso EFFETTO ORO SCURO del PC (solo i colori e il
   bagliore dorato, NON il layout da terminale: resta la barra in basso). Così l'app
   è coerente ovunque, come ha chiesto il titolare. */
@media (max-width: 1023px) {
  body.has-tabbar {
    --bg: #0a0d11; --bg-soft: #0e1217; --card: #11161c; --card-2: #161c24;
    --border: #222a35; --text: #e7ebf0; --muted: #8a94a3; --faint: #5f6875;
    --gold: #f5b301; --brand: #f5b301; --accent: #f5b301; --accent-rgb: 245,179,1;
    --gold-2: #f5b301; --title: #f3f5f8;
    --green: #22c55e; --red: #ef4444; --yellow: #f5b301;
    background:
      radial-gradient(900px 420px at 80% -10%, rgba(245,179,1,.06), transparent 60%),
      radial-gradient(800px 380px at 0% 100%, rgba(34,197,94,.03), transparent 60%),
      #0a0d11 !important;
    color: var(--text);
  }
  body.has-tabbar a { color: #e3e7ec; }
}

@media (min-width: 1024px) {
  body.has-tabbar {
    --bg: #0a0d11; --bg-soft: #0e1217; --card: #11161c; --card-2: #161c24;
    --border: #222a35; --text: #e7ebf0; --muted: #8a94a3; --faint: #5f6875;
    --gold: #f5b301; --brand: #f5b301; --accent: #f5b301; --title: #f3f5f8;
    --green: #22c55e; --red: #ef4444; --yellow: #f5b301;
    --title-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    background:
      radial-gradient(1100px 480px at 75% -12%, rgba(245,179,1,.055), transparent 60%),
      radial-gradient(900px 420px at 0% 100%, rgba(34,197,94,.035), transparent 60%),
      #0a0d11 !important;
    color: var(--text);
  }
  body.has-tabbar a { color: #e3e7ec; }

  /* ---- Barra laterale: colonna larga con voci per esteso (come i terminali) ---- */
  body.has-tabbar .vc-tabbar {
    width: 228px; padding: 16px 12px; gap: 2px; align-items: stretch;
    background: linear-gradient(180deg, #0d1116, #0a0d11) !important;
    border-right: 1px solid var(--border);
  }
  body.has-tabbar .vc-brand {
    display: flex !important; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 4px 10px 16px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
  }
  body.has-tabbar .vc-brand img { width: 30px; height: 30px; }
  body.has-tabbar .vc-brand-name {
    display: inline !important; font-weight: 900; letter-spacing: .08em; font-size: 16px; color: var(--gold);
  }
  body.has-tabbar .vc-tab, body.has-tabbar .vc-tab.vc-desk {
    display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
    padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted) !important;
    text-align: left; transition: background .15s, color .15s;
  }
  body.has-tabbar .vc-tab svg { width: 19px; height: 19px; flex: 0 0 19px; }
  body.has-tabbar .vc-tab:hover { background: rgba(255,255,255,.04); color: #fff !important; }
  body.has-tabbar .vc-tab.on {
    color: var(--gold) !important; background: rgba(245,179,1,.09);
    box-shadow: inset 3px 0 0 var(--gold);
  }
  /* il "+" diventa il tasto oro "Fondi" in fondo alla colonna */
  body.has-tabbar .vc-tab-plus { order: 99; margin: 14px 0 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
  body.has-tabbar .vc-plus {
    width: 100% !important; height: 40px !important; border-radius: 8px !important; gap: 8px;
    display: flex !important; align-items: center; justify-content: center;
    background: var(--gold) !important; color: #111 !important; font-weight: 800; font-size: 14px;
    box-shadow: 0 6px 18px rgba(245,179,1,.18) !important;
  }
  body.has-tabbar .vc-plus svg { width: 18px; height: 18px; }
  body.has-tabbar .vc-desk-lbl { display: inline !important; }

  /* ---- Barra in alto: titolo del prodotto + pillole di stato, cerca e account a destra ---- */
  body.has-tabbar .vc-topbar {
    left: 228px !important; height: 60px; padding: 0 28px;
    background: rgba(12,15,20,.92) !important; border-bottom: 1px solid var(--border);
    justify-content: flex-start; gap: 10px;
  }
  body.has-tabbar .vc-term { display: flex !important; align-items: center; gap: 10px; margin-right: auto; }
  body.has-tabbar .vc-term-title {
    font-weight: 900; font-size: 19px; letter-spacing: .04em; color: var(--gold) !important; text-decoration: none;
  }
  body.has-tabbar .vc-term-title b { color: #fff; font-weight: 900; }
  .vc-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 6px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em; white-space: nowrap;
  }
  .vc-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
  .vc-pill-gold { background: rgba(245,179,1,.14); color: var(--gold); border: 1px solid rgba(245,179,1,.45); }
  .vc-pill-on { color: #22c55e; border: 1px solid rgba(34,197,94,.55); background: rgba(34,197,94,.07); }
  .vc-pill-off { color: #9aa3ae; border: 1px solid #333c48; }
  body.has-tabbar .vc-round { width: 38px; height: 38px; border-radius: 8px !important; background: #141a21 !important; border-color: var(--border) !important; }
  body.has-tabbar .vc-term { order: 0; }
  body.has-tabbar .vc-topbar .vc-round { order: 3; }                 /* account in fondo a destra */
  body.has-tabbar .vc-topbar .vc-round:last-child { order: 2; }      /* cerca subito prima */

  /* ---- Area contenuti: più larga, parte dopo la colonna ---- */
  body.has-tabbar .main,
  body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) {
    padding-left: 260px !important; padding-right: 32px !important; padding-top: 88px !important;
    max-width: 1560px;
  }
  body.has-tabbar .admin-orb { left: 244px; }
  body.has-tabbar .trading-orb { left: 244px; }

  /* ---- Titoli: sans-serif pesante, ORO in maiuscolo per il titolo della pagina ---- */
  body.has-tabbar h1 {
    font-family: var(--title-font) !important; font-weight: 900 !important; text-transform: uppercase;
    letter-spacing: .03em; color: var(--gold) !important; font-size: 26px;
  }
  body.has-tabbar h2, body.has-tabbar h3, body.has-tabbar .brand-name {
    font-family: var(--title-font) !important; color: #f3f5f8 !important; font-weight: 800 !important; letter-spacing: .01em;
  }
  body.has-tabbar .panel-head h2, body.has-tabbar .panel > h2:first-child {
    font-size: 13px !important; text-transform: uppercase; letter-spacing: .09em;
  }
  body.has-tabbar .panel > h2:first-child::before, body.has-tabbar .panel-head > h2::before { background: var(--gold) !important; }

  /* ---- Pannelli: grafite, bordo sottile, angoli più netti, niente ombre pesanti ---- */
  body.has-tabbar .panel, body.has-tabbar .card, body.has-tabbar .kpi, body.has-tabbar .plan-card,
  body.has-tabbar .step-card, body.has-tabbar .mood, body.has-tabbar .ai-note, body.has-tabbar .connect-hint,
  body.has-tabbar .chart-box, body.has-tabbar .danger-panel {
    background: linear-gradient(180deg, #131920, #0f141a) !important;
    border: 1px solid var(--border) !important; border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.35) !important;
  }
  body.has-tabbar .panel .kpi, body.has-tabbar .panel .card, body.has-tabbar .panel .connect-hint {
    background: #0d1116 !important; box-shadow: none !important;
  }
  body.has-tabbar .panel-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
  body.has-tabbar .kpi .label, body.has-tabbar .acct-hero-label {
    font-family: var(--title-font) !important; text-transform: uppercase; letter-spacing: .1em;
    font-size: 11px !important; color: var(--muted) !important; font-weight: 700;
  }
  body.has-tabbar .kpi .value { color: #fff; font-family: var(--mono) !important; }
  body.has-tabbar .acct-hero-value { color: #fff; font-family: var(--title-font) !important; font-weight: 800; letter-spacing: -.01em; }
  body.has-tabbar .pos, body.has-tabbar .green, body.has-tabbar .up { color: var(--green) !important; }
  body.has-tabbar .neg, body.has-tabbar .red, body.has-tabbar .down { color: var(--red) !important; }

  /* ---- Tabelle da terminale: intestazioni piccole in maiuscolo, righe fitte, numeri allineati ---- */
  body.has-tabbar table { font-size: 13.5px; }
  body.has-tabbar th { color: var(--muted) !important; font-size: 11px; letter-spacing: .1em; background: rgba(255,255,255,.02); }
  body.has-tabbar td { border-bottom: 1px solid #1a212b !important; font-variant-numeric: tabular-nums; }
  body.has-tabbar tbody tr:hover td { background: rgba(245,179,1,.035); }

  /* ---- Bottoni: rettangolari stondati; principale ORO, verdi/rossi dove serve ---- */
  body.has-tabbar .btn, body.has-tabbar .btn-sm, body.has-tabbar .btn-primary, body.has-tabbar .btn-ghost { border-radius: 8px !important; }
  body.has-tabbar .btn-primary { background: var(--gold) !important; color: #111 !important; box-shadow: 0 6px 18px rgba(245,179,1,.16); }
  body.has-tabbar .btn-ghost { background: #141a21 !important; border: 1px solid var(--border) !important; }
  body.has-tabbar .btn-ghost:hover { border-color: rgba(245,179,1,.5) !important; }
  body.has-tabbar .btn-green { background: var(--green) !important; color: #06150c !important; }
  body.has-tabbar .btn-red { background: var(--red) !important; color: #fff !important; }

  /* ---- Campi: scuri con bordo sottile, oro quando sono attivi ---- */
  body.has-tabbar input[type="text"], body.has-tabbar input[type="email"], body.has-tabbar input[type="number"],
  body.has-tabbar input[type="password"], body.has-tabbar input[type="tel"], body.has-tabbar select,
  body.has-tabbar textarea, body.has-tabbar .adm-in {
    background: #0b0f14 !important; border: 1px solid var(--border) !important; border-radius: 8px !important;
  }
  body.has-tabbar input:focus, body.has-tabbar select:focus, body.has-tabbar textarea:focus {
    border-color: rgba(245,179,1,.6) !important; outline: none; box-shadow: 0 0 0 3px rgba(245,179,1,.12);
  }

  /* ---- Dashboard: intestazione con pillole di stato come "ENGINE READY" ---- */
  body.has-tabbar .bot-status { gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; }
  body.has-tabbar .bot-status .dot { box-shadow: 0 0 10px var(--green); }
  body.has-tabbar .credits-box { border-radius: 8px !important; background: rgba(245,179,1,.12) !important; border-color: rgba(245,179,1,.5) !important; }
  body.has-tabbar .data-badge { border-radius: 6px !important; }
  body.has-tabbar .dash-cols { gap: 16px; }
}
/* Schermi molto larghi: tre colonne nella dashboard (più dati a colpo d'occhio) */
@media (min-width: 1500px) {
  body.has-tabbar .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Portatili piccoli (1024–1279 px): colonna un filo più stretta, così i contenuti respirano */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.has-tabbar .vc-tabbar { width: 200px; }
  body.has-tabbar .vc-topbar { left: 200px !important; padding: 0 20px; }
  body.has-tabbar .main,
  body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) { padding-left: 224px !important; padding-right: 22px !important; }
  body.has-tabbar .admin-orb, body.has-tabbar .trading-orb { left: 214px; }
  body.has-tabbar .bot-status { font-size: 12px; }
  body.has-tabbar .pwa-install-btn { white-space: nowrap; }
}

/* ===================== SCHERMATA DA TERMINALE (solo computer) =====================
   Copia della schermata scelta dal titolare: barra dei menu in alto, colonna di icone,
   colonna con ricerca e menu che si aprono, intestazione oro con pillole, e in cima
   alla dashboard i riquadri MOTORE · SENTIMENT · CANDELE / COPPIE · RECENTI /
   PROFITTO · VOLUME. Telefono e iPad in verticale restano come prima. */
.vc-menubar, .vc-rail, .vc-side-search { display: none; }
.vc-desk-lbl { display: none; }
.vt { display: none; }

@media (min-width: 1024px) {
  /* ---- barra dei menu (come File / Modifica / Vista… dei programmi) ---- */
  body.has-tabbar .vc-menubar {
    display: flex; position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 960;
    align-items: stretch; gap: 0; padding: 0 8px; background: #06080b; border-bottom: 1px solid #1a2029;
    font-size: 12px; font-weight: 500; user-select: none;
  }
  .vc-mb-item { position: relative; display: flex; align-items: center; padding: 0 10px; color: #9aa3ae; cursor: default; outline: none; }
  .vc-mb-item:hover, .vc-mb-item:focus-within { background: #161c24; color: #fff; }
  .vc-mb-drop {
    display: none; position: absolute; top: 100%; left: 0; min-width: 210px; padding: 6px;
    background: #11161c; border: 1px solid #222a35; border-radius: 0 0 8px 8px; box-shadow: 0 14px 30px rgba(0,0,0,.55);
  }
  .vc-mb-item:hover .vc-mb-drop, .vc-mb-item:focus-within .vc-mb-drop { display: block; }
  .vc-mb-drop a { display: block; padding: 7px 10px; border-radius: 6px; color: #d5dae1 !important; text-decoration: none; font-size: 13px; white-space: nowrap; }
  .vc-mb-drop a:hover { background: rgba(176,124,30,.12); color: #cf9a33 !important; }

  /* ---- tutto scende sotto la barra dei menu ---- */
  body.has-tabbar .vc-tabbar { top: 26px !important; }
  body.has-tabbar .vc-topbar { top: 26px !important; }
  body.has-tabbar .main,
  body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) { padding-top: 102px !important; }
  body.has-tabbar .nav-toggle { display: none !important; }

  /* ---- colonna: logo, casella di ricerca, voci in ordine, menu che si aprono ---- */
  body.has-tabbar .vc-tabbar { padding: 14px 10px; }
  body.has-tabbar .vc-brand { order: -2; }
  body.has-tabbar .vc-brand-name { color: #f3f5f8 !important; font-size: 17px; letter-spacing: .06em; }
  body.has-tabbar .vc-side-search {
    display: flex !important; order: -1; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 8px 10px;
    background: #0b0f14; border: 1px solid #222a35; border-radius: 7px; color: #6b7583; font: inherit; font-size: 12.5px;
    cursor: text; text-align: left;
  }
  body.has-tabbar .vc-side-search:hover { border-color: #3a4552; }
  body.has-tabbar .vc-side-search svg { width: 15px; height: 15px; order: 2; margin-left: auto; flex: 0 0 15px; }
  body.has-tabbar .vc-mob, body.has-tabbar .vc-mob-lbl { display: none !important; }
  body.has-tabbar .vc-tab, body.has-tabbar .vc-tab.vc-desk { padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: #aab2bd !important; }
  body.has-tabbar .vc-tab svg { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; }
  body.has-tabbar .vc-tab.on { color: #cf9a33 !important; background: linear-gradient(90deg, rgba(176,124,30,.24), rgba(176,124,30,.08)) !important; box-shadow: inset 3px 0 0 #a8781c !important; font-weight: 700; }
  body.has-tabbar .vc-side-help { order: 98; margin-top: auto !important; font-size: 12.5px !important; }
  body.has-tabbar .vc-tab-plus { order: 99 !important; margin: 0 !important; }
  body.has-tabbar .vc-tab-plus .vc-plus {
    width: auto !important; height: auto !important; justify-content: flex-start !important; gap: 12px !important;
    padding: 9px 12px !important; border-radius: 8px !important; background: transparent !important; color: #f5a623 !important;
    box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important; color: #c59a2c !important;
  }
  body.has-tabbar .vc-tab-plus .vc-plus:hover { background: rgba(176,124,30,.12) !important; }
  body.has-tabbar .vc-tab-plus .vc-plus svg { width: 17px !important; height: 17px !important; }
  body.has-tabbar .vc-sub-n { color: #c59a2c; font-family: ui-monospace, Menlo, monospace; margin-left: 4px; }
  body.has-tabbar .vc-brand-name { font-family: 'Rajdhani', 'Inter', sans-serif; font-weight: 700; font-size: 22px !important; letter-spacing: .04em !important; }
  body.has-tabbar .vc-o1 { order: 1; } body.has-tabbar .vc-o2 { order: 2; } body.has-tabbar .vc-o3 { order: 3; }
  body.has-tabbar .vc-o4 { order: 4; } body.has-tabbar .vc-o5 { order: 5; }

  body.has-tabbar .vc-o10 { order: 10; } body.has-tabbar .vc-o11 { order: 11; }
  body.has-tabbar details.vc-sub.vc-desk { display: block !important; }
  body.has-tabbar .vc-sub > summary { list-style: none; cursor: pointer; }
  body.has-tabbar .vc-sub > summary::-webkit-details-marker { display: none; }
  body.has-tabbar .vc-caret { margin-left: auto; font-style: normal; font-size: 11px; transition: transform .15s; }
  body.has-tabbar .vc-sub[open] .vc-caret { transform: rotate(180deg); }
  body.has-tabbar .vc-sub > a {
    display: block; padding: 6px 12px 6px 43px; font-size: 13px; color: #8a94a3 !important; text-decoration: none; border-radius: 6px;
  }
  body.has-tabbar .vc-sub > a:hover { color: #fff !important; background: rgba(255,255,255,.04); }

  /* ---- intestazione: titolo ORO, pillole, crediti, campanella, account ---- */
  body.has-tabbar .vc-term-title, body.has-tabbar .vc-term-title b {
    font-family: 'Rajdhani', 'Inter', sans-serif !important; font-weight: 700; font-size: 25px; letter-spacing: .015em;
    color: #c59a2c !important; line-height: 1; text-shadow: none;
  }
  body.has-tabbar .vc-term { gap: 14px !important; }
  body.has-tabbar .vc-term .vc-pill { font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 10px; border-radius: 4px; }
  body.has-tabbar .vc-term .vc-pill-gold { background: #9c7618; color: #f3e6c4; border: 1px solid #9c7618; margin-left: auto; }
  body.has-tabbar .vc-term .vc-pill-on { background: rgba(46,154,90,.08); color: #4caf74; border: 1px solid #2c7a4b; }
  body.has-tabbar .vc-term .vc-pill i { box-shadow: none; }
  body.has-tabbar .vc-term { flex: 1; margin-right: 6px !important; }
  body.has-tabbar .vc-topbar .vc-bell { width: 34px !important; height: 34px !important; background: transparent !important; border: none !important; color: #c9ced6; }
  body.has-tabbar .vc-topbar .vc-bell svg { width: 21px; height: 21px; }
  body.has-tabbar .vc-topbar .vc-round:not(.vc-bell) { border-radius: 50% !important; width: 32px !important; height: 32px !important; background: #b9c0c9 !important; color: #2a313b !important; border: none !important; }
  body.has-tabbar .vc-search-round { display: none !important; }
  body.has-tabbar .vc-topbar .vc-round { order: 3; }
  body.has-tabbar .vc-bell { order: 2 !important; }

  /* ---- la dashboard parte DIRETTAMENTE coi riquadri (come nell'immagine) ---- */
  body.has-tabbar .main:has(> .vt) > .topbar { display: none; }
}
@media (max-width: 1023px) { .vc-bell { display: none !important; } }

/* Colonna di icone a sinistra (come nella schermata): solo su schermi da 1280 px in su */
@media (min-width: 1280px) {
  body.has-tabbar .vc-rail {
    display: flex; flex-direction: column; align-items: center; gap: 6px; position: fixed; top: 26px; bottom: 0; left: 0;
    width: 46px; z-index: 905; padding: 14px 0; background: #06080b; border-right: 1px solid #1a2029;
  }
  .vc-rail a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #6b7583 !important; }
  .vc-rail a:hover { color: #fff !important; background: #161c24; }
  .vc-rail a.on { color: #c59a2c !important; background: rgba(176,124,30,.12); }
  .vc-rail svg { width: 18px; height: 18px; }
  .vc-rail .vc-rail-sp { flex: 1; }
  body.has-tabbar .vc-tabbar { left: 46px !important; }
  body.has-tabbar .vc-topbar { left: 274px !important; }
  body.has-tabbar .main,
  body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) { padding-left: 302px !important; }
  body.has-tabbar .admin-orb, body.has-tabbar .trading-orb { left: 290px; }
}

/* ---------------- RIQUADRI DEL TERMINALE ---------------- */
@media (min-width: 1024px) {
  .vt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
  .vt-p {
    position: relative; min-width: 0; background: linear-gradient(180deg, #141a22, #10151c); border: 1px solid #252d38;
    border-radius: 5px; padding: 9px 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 4px 12px rgba(0,0,0,.28);
  }
  /* ordine e larghezze su portatile piccolo (1024–1279) */
  .vt-engine { order: 1; grid-column: span 5; } .vt-senti { order: 2; grid-column: span 7; }
  .vt-chart { order: 3; grid-column: span 12; } .vt-pairs { order: 4; grid-column: span 12; }
  .vt-recent { order: 5; grid-column: span 5; } .vt-vol { order: 6; grid-column: span 7; }
  .vt-profit { order: 7; grid-column: span 12; } .vt-heat { order: 8; grid-column: span 12; }
  .vt .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
  .vt .up { color: #3fa868 !important; } .vt .dn { color: #c9554a !important; }
  .vt-dim { color: #6b7583 !important; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
  .vt-h {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 22px;
    font-size: 12.5px; font-weight: 700; color: #dfe3e8; letter-spacing: .01em;
  }
  .vt-h > span:first-child { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .vt .vt-sel {
    width: auto !important; height: 22px !important; padding: 1px 6px !important; font-size: 11px !important; font-weight: 600;
    border-radius: 5px !important; background: #1a212b !important; border: 1px solid #2a3340 !important; color: #c3c9d1 !important;
    cursor: pointer; font-family: inherit;
  }
  .vt-icon-btn {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; border: 1px solid #2a3340;
    background: #1a212b; color: #9aa3ae !important; cursor: pointer; font-size: 13px; text-decoration: none !important; font-family: inherit;
  }
  .vt-icon-btn:hover { color: #c59a2c !important; border-color: rgba(176,124,30,.5); }
  .vt-ctrls { display: inline-flex; gap: 6px; align-items: center; }
  .vt-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; border-radius: 4px; border: none;
    font-family: 'Rajdhani', 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: .1em;
    text-decoration: none !important; cursor: pointer; transition: filter .15s, opacity .15s;
  }
  .vt-btn:hover { filter: brightness(1.08); }
  .vt-btn-green { background: linear-gradient(180deg, #2f8f55, #267847); color: #e3f1e8 !important; box-shadow: none; }
  .vt-btn-red { background: linear-gradient(180deg, #a8443a, #8f3830); color: #f6e4e1 !important; box-shadow: none; }
  .vt-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* MOTORE: angolo arancione, ENGINE READY grande oro, STATO con barra verde, tasto verde */
  .vt-engine { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
  .vt-engine::before {
    content: ""; position: absolute; top: -1px; left: -1px; width: 52px; height: 28px; pointer-events: none;
    border-top: 2px solid #a8701a; border-left: 2px solid #a8701a; border-top-left-radius: 5px;
  }
  .vt-engine-title {
    font-family: 'Rajdhani', 'Inter', sans-serif; font-size: 26px; font-weight: 700; color: #c59a2c; letter-spacing: .01em;
    line-height: 1; margin-top: 4px; text-shadow: none; white-space: nowrap;
  }
  .vt-engine-title.off { color: #9aa3ae; text-shadow: none; }
  .vt-status { display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }
  .vt-status-k { color: #8a94a3; }
  .vt-status-bar {
    position: relative; width: 104px; height: 15px; border: 1px solid #2c7a4b; border-radius: 2px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
  }
  .vt-status-bar i { position: absolute; inset: 2px; background: #2c7a4b; border-radius: 1px; animation: vtFill 2.4s ease-in-out infinite; }
  .vt-status-bar em { position: relative; font-style: normal; color: #d9eee0; font-size: 8.5px; }
  .vt-status-bar.off { border-color: #3a4552; } .vt-status-bar.off i { background: #3a4552; animation: none; }
  .vt-status-tag { color: #b5493e; }
  @keyframes vtFill { 50% { opacity: .8; } }
  .vt-engine-btn { height: 34px; font-size: 14.5px; }

  /* SENTIMENT: anello arancione con le scritte sotto, linea del prezzo a destra */
  .vt-senti-body { display: flex; gap: 14px; align-items: stretch; }
  .vt-senti-l { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .vt-ring { position: relative; width: 74px; height: 74px; }
  .vt-ring svg { width: 74px; height: 74px; display: block; }
  .vt-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .vt-ring-in b { font-size: 17px; color: #e4e7eb; line-height: 1; }
  .vt-ring-in span { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; max-width: 70px; line-height: 1.15; }
  .vt-senti-k { display: flex; gap: 8px; font-size: 9.5px; color: #8a94a3; white-space: nowrap; }
  .vt-senti-k b { color: #e7ebf0; }
  .vt-spark { flex: 1; min-width: 0; height: 110px; display: block; }

  /* CANDELE */
  .vt-candles { width: 100%; height: 180px; display: block; }

  /* COPPIE: tabella doppia */
  .vt-table-wrap { max-height: 150px; overflow: auto; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: #3a4552 transparent; }
  .vt-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  .vt-table th {
    position: sticky; top: 0; z-index: 1; background: #121820 !important; text-align: left; padding: 4px 8px !important;
    font-size: 10px !important; color: #7d8794 !important; letter-spacing: .02em; text-transform: none; font-weight: 600;
    border-bottom: 1px solid #252d38;
  }
  .vt-table td { padding: 4px 8px !important; border-bottom: 1px solid #1a212b !important; color: #e7ebf0; white-space: nowrap; cursor: pointer; }
  .vt-table .r { text-align: right !important; }
  .vt-table .mono { font-size: 11px; }
  .vt-table .vt-sep { padding-left: 14px !important; }
  .vt-table td:hover, .vt-table td.on { background: rgba(176,124,30,.08) !important; }
  .vt-table tbody tr:hover td { background: transparent; }
  .vt-coin { display: inline-flex; align-items: center; gap: 9px; }
  .vt-coin b { color: #e4e7eb; font-weight: 700; font-size: 11.5px; }
  .vt-coin small { display: block; font-size: 9.5px; color: #6b7583; font-weight: 600; }
  .vt-sep .vt-coin small { display: inline; font-size: 10px; font-weight: 700; margin-left: 2px; }
  .vt-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #6b7583; }
  .vt-dot.up { background: #2e9a5a; }
  .vt-dot.dn { background: #b8740f; }
  .vt-ic {
    width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 15px;
    background: #2d5596; color: #dfe7f5; font-size: 8px; font-style: normal; font-weight: 800;
  }

  /* RECENTI: ultimo segnale + ordine del bot */
  .vt-recent { display: flex; flex-direction: column; }
  .vt-recent-line {
    display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: #b9c0c9; line-height: 1.35; margin-bottom: 8px;
  }
  .vt-recent-line > i { width: 7px; height: 7px; border-radius: 50%; background: #2e9a5a; flex: 0 0 7px; margin-top: 4px; }
  .vt-recent-line.dn > i { background: #bf463b; }
  .vt-recent-line b { color: #fff; }
  .vt-order { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0 0 8px; }
  .vt-order label { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
  .vt-order label > span:first-child { font-size: 9.5px; color: #8a94a3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vt-in { position: relative; display: block; }
  .vt-in em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; color: #6b7583; font-size: 12px; pointer-events: none; }
  .vt .vt-order input, .vt .vt-order select {
    width: 100% !important; height: 28px !important; padding: 3px 22px 3px 8px !important; border-radius: 4px !important;
    font-size: 13px !important; font-weight: 800; color: #fff !important; background: #0c1015 !important; border: 1px solid #252d38 !important;
    font-family: ui-monospace, Menlo, monospace; margin: 0 !important;
  }
  .vt .vt-order select { padding-right: 6px !important; font-family: inherit; font-size: 12px !important; }
  .vt .vt-order :disabled { opacity: 1; cursor: default; -webkit-text-fill-color: #e7ebf0; }
  .vt-order.editing input, .vt-order.editing select { border-color: rgba(176,124,30,.6) !important; }
  .vt-recent .vt-btn-row { margin-top: auto; }
  .vt-note { font-size: 10px; color: #8a94a3; margin-top: 6px; min-height: 14px; line-height: 1.35; }

  /* PROFITTO e VOLUME */
  .vt-line { width: 100%; height: 140px; display: block; }
  .vt-pchips { display: inline-flex; gap: 8px; font-size: 10.5px; }
  .vt-pchips b { font-weight: 700; }
  .vt-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #8a94a3; font-weight: 600; }
  .vt-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .vt-legend i.o { background: #b8740f; } .vt-legend i.w { background: #aab2bc; margin-left: 6px; }

  /* MAPPA DEL MERCATO */
  .vt-heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 5px; }
  .vt-tile {
    border: none; border-radius: 4px; padding: 6px 7px; color: #e8ebef; text-align: left; cursor: pointer; font-family: inherit;
    transition: transform .12s, filter .12s;
  }
  .vt-tile:hover { transform: translateY(-1px); filter: brightness(1.15); }
  .vt-tile b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
  .vt-tile span { font-size: 10.5px; font-weight: 700; }
  #vcCalc, #vtChartP { scroll-margin-top: 112px; }
  /* l'umore del mercato è già nell'anello del Sentiment in cima: niente doppione sotto */
  body.has-tabbar .main:has(> .vt) #moodBar { display: none !important; }
}
/* Schermi da 1100 px in su (anche iPad in orizzontale): le tre file come nell'immagine,
   tutte in uno schermo */
@media (min-width: 1100px) {
  .vt-engine { grid-column: span 3; } .vt-senti { grid-column: span 4; } .vt-chart { grid-column: span 5; }
  .vt-pairs { grid-column: span 8; } .vt-recent { order: 5; grid-column: span 4; }
  .vt-profit { order: 6; grid-column: span 8; } .vt-vol { order: 7; grid-column: span 4; }
  .vt-candles { height: 128px; }
  .vt-spark { height: 128px; }
  .vt-engine-title { font-size: 25px; }
  body.has-tabbar .main,
  body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) { padding-top: 98px !important; }
}
@media (min-width: 1500px) {
  .vt-engine-title { font-size: 28px; }
}
/* LA MONETA del titolare sul computer/iPad in orizzontale: la sua barra sta in CIMA e
   menu, colonne e intestazione scendono sotto di lei (prima finiva nascosta sotto la
   barra dei menu, che sta anche lei in alto). */
@media (min-width: 1024px) {
  body.has-coinbar.has-tabbar .vc-menubar { top: 30px; }
  body.has-coinbar.has-tabbar .vc-tabbar, body.has-coinbar.has-tabbar .vc-topbar { top: 56px !important; }
  body.has-coinbar.has-tabbar .vc-rail { top: 56px; }
  body.has-coinbar.has-tabbar .gx-list { top: 134px; }
}

/* Lista prezzi con TUTTE le cripto dell'exchange (centinaia): il browser disegna solo
   le righe che si vedono, così resta veloce anche su iPad e telefono. */
#priceList .price-row { content-visibility: auto; contain-intrinsic-size: auto 58px; }

/* ======================================================================
   LINGUE DA DESTRA A SINISTRA (ARABO): adatto il layout, sennò "bucava tutto".
   dir="rtl" è già sul tag <html> (solo per l'arabo). Qui specchio la grafica:
   colonna e barra in alto a destra, margini del contenuto invertiti, testo a destra.
   ====================================================================== */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .main, [dir="rtl"] .vc-page, [dir="rtl"] .panel { text-align: right; }
/* numeri, prezzi, codici e orari restano leggibili da sinistra */
[dir="rtl"] code, [dir="rtl"] .vc-term, [dir="rtl"] .mono, [dir="rtl"] input, [dir="rtl"] time { direction: ltr; unicode-bidi: plaintext; }

/* Colonna laterale (desktop/iPad): da sinistra a DESTRA */
@media (min-width: 768px) {
  [dir="rtl"] .vc-tabbar { left: auto !important; right: 0 !important;
    border-right: none !important; border-left: 1px solid var(--border) !important; }
  /* la barra in alto parte DOPO la colonna (che ora è a destra): stessa larghezza */
  [dir="rtl"] .vc-topbar { left: 0 !important; right: 228px !important; }
  /* il blocco titolo+pillole va spinto a sinistra (margine logico), non più a destra */
  [dir="rtl"] body.has-tabbar .vc-term { margin-right: 0 !important; margin-left: auto !important; }
  [dir="rtl"] body.has-tabbar .vc-brand { justify-content: flex-end; }
  [dir="rtl"] body.has-tabbar .vc-tab, [dir="rtl"] body.has-tabbar .vc-tab.vc-desk { justify-content: flex-start; text-align: right; }
  [dir="rtl"] body.has-tabbar .vc-tab.on { box-shadow: inset -3px 0 0 var(--gold); }
  /* contenuto: il margine che faceva spazio alla colonna passa a DESTRA */
  [dir="rtl"] body.has-tabbar .main,
  [dir="rtl"] body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) {
    padding-left: 40px !important; padding-right: 132px !important; }
}
@media (min-width: 1024px) {
  [dir="rtl"] body.has-tabbar .main,
  [dir="rtl"] body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) {
    padding-left: 32px !important; padding-right: 260px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  [dir="rtl"] body.has-tabbar .vc-tabbar { left: auto !important; right: 0 !important; width: 200px; }
  [dir="rtl"] .vc-topbar { right: 200px !important; }
  [dir="rtl"] body.has-tabbar .main,
  [dir="rtl"] body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) {
    padding-left: 22px !important; padding-right: 224px !important; }
}
@media (min-width: 1280px) {
  [dir="rtl"] body.has-tabbar .vc-tabbar { left: auto !important; right: 46px !important; }
  /* la colonnina di icone passa a DESTRA, accanto alla barra laterale */
  [dir="rtl"] body.has-tabbar .vc-rail { left: auto !important; right: 0 !important;
    border-right: none !important; border-left: 1px solid #1a2029 !important; }
  [dir="rtl"] .vc-topbar { right: 274px !important; }
  [dir="rtl"] body.has-tabbar .main,
  [dir="rtl"] body.has-tabbar .vc-page:not(:has(.main)):not(:has(.app)) {
    padding-left: 32px !important; padding-right: 302px !important; }
}
/* Pulsante lingua fluttuante e sferette: passano dall'altro lato */
[dir="rtl"] .vc-lang-float { right: auto; left: 12px; }
[dir="rtl"] .vc-lang-menu { right: auto; left: 0; }
[dir="rtl"] .mini-orb, [dir="rtl"] .admin-orb, [dir="rtl"] .trading-orb { right: auto !important; left: 16px !important; }
/* liste puntate/numerate: il rientro va a destra */
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 20px; padding-left: 0; }