/* styles.css — dashboard fomo-copytrade. Dark only (SPEC §6). Mobile-first. */

:root {
  color-scheme: dark;

  /* Superfici e inchiostro (SPEC §6.1) */
  --surface-0: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #242422;
  --ring: rgba(255, 255, 255, 0.10);
  --grid: #2c2c2a;
  --axis: #383835;
  --ink-1: #ffffff;
  --ink-2: #c3c2b7;
  --ink-3: #898781;

  /* Stato — riservati, mai usati come colore di serie */
  --status-good: #0ca30c;
  --status-warn: #fab219;
  --status-serious: #ec835a;
  --status-crit: #d03b3b;

  /* Identità leader — slot fissi, mai riassegnati da un filtro */
  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --cat-6: #008300;
  --cat-7: #9085e9;
  --cat-other: var(--ink-3);

  /* Rampa ordinale blu (composizione, meter, dumbbell) */
  --blue-250: #86b6ef;
  --blue-400: #3987e5;
  --blue-600: #184f95;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --r-card: 12px; --r-chip: 6px; --r-bar: 4px;

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --topbar-h: 48px;
  --tabbar-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-0);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink-1); }
a { color: var(--ink-2); text-decoration: none; }
a:hover { color: var(--ink-1); text-decoration: underline; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--cat-1);
  outline-offset: 2px;
  border-radius: 3px;
}

.muted { color: var(--ink-3); }
.good { color: var(--status-good); }
.warn { color: var(--status-warn); }
.serious { color: var(--status-serious); }
.crit { color: var(--status-crit); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- topbar -- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-3);
  background: var(--surface-0);
  border-bottom: 1px solid var(--ring);
}
/* The refresh control must stay reachable "in ogni tab" (SPEC §8), so the
   right-hand group is the one item that never shrinks; when the topbar runs
   out of room it is the left group (status pill + wallet address) that gives
   way — min-width:0 lets it shrink past its nowrap content and overflow:hidden
   clips it there instead of pushing ⟳ past the viewport edge.
   Deliberately no flex-wrap: the topbar's height is pinned by --topbar-h,
   which .filterbar uses as its own `top` sticky offset. */
.topbar-left {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12px; white-space: nowrap;
  /* lo stato attivo/in pausa è informazione di sicurezza: quando la topbar è
     stretta il testo si accorcia con i puntini, non si taglia a metà glifo. */
  min-width: 0; flex: 0 1 auto; overflow: hidden;
}
.pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.pill.is-good .dot { background: var(--status-good); }
.pill.is-warn .dot { background: var(--status-warn); }
.pill.is-crit .dot { background: var(--status-crit); }
.pill.is-crit { color: var(--status-crit); }
.pill.is-warn { color: var(--status-warn); }

/* Freschezza dei prezzi. Sta accanto allo stato del bot perché risponde alla
   stessa domanda ("questi numeri sono di adesso?"), ma non è lo stesso stato:
   colore + parola, mai il solo pallino. flex:none perché è l'ultima cosa che
   deve sparire quando la topbar si stringe. */
.live-pill {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 4px 7px; border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; white-space: nowrap;
}
.live-pill .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.live-pill.is-live { color: var(--status-good); }
.live-pill.is-live .live-dot { background: var(--status-good); animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Badge "live" sul prezzo: piccolo, ma la parola resta leggibile. */
.badge.src-live { margin-left: 5px; padding: 0 4px; font-size: 9px; letter-spacing: .04em; vertical-align: middle; }

.addr-btn {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); border-radius: var(--r-chip);
  /* expendable: truncates with an ellipsis before the topbar overflows */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.addr-btn:hover { color: var(--ink-1); background: var(--surface-2); }
.addr-btn.copied::after { content: ' copiato'; color: var(--status-good); }

.chain-switch { display: inline-flex; background: var(--surface-2); border-radius: var(--r-chip); padding: 2px; }
.chain-switch button {
  border: 0; background: none; cursor: pointer; padding: 4px 8px;
  font-size: 11px; letter-spacing: .04em; color: var(--ink-3); border-radius: 4px;
}
.chain-switch button[aria-pressed='true'] { background: var(--surface-1); color: var(--ink-1); }
.chain-switch .cs-abbr { display: none; }

.btn-ghost {
  border: 1px solid var(--ring); background: none; color: var(--ink-2);
  border-radius: var(--r-chip); padding: 5px 9px; cursor: pointer; font-size: 12px;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink-1); }
.btn-refresh { min-width: 44px; min-height: 36px; }
.btn-refresh.is-busy { color: var(--ink-3); }
.updated { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* Stato per chain: su touch il tooltip del pill non esiste, quindi quando in
   vista TUTTE una chain è degradata lo si dice qui, sempre visibile. */
.chain-status {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 5px var(--sp-3); font-size: 11px; color: var(--ink-3);
  border-bottom: 1px solid var(--ring); background: var(--surface-0);
}
.chain-status:empty { display: none; }
.chain-status .cs-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chain-status .cs-item .chain-badge { margin-left: 0; }
.chain-status .cs-state.is-warn { color: var(--status-warn); }
.chain-status .cs-state.is-crit { color: var(--status-crit); }
.chain-status .cs-state.is-good { color: var(--status-good); }

/* --------------------------------------------------------------- banner -- */

.banners { display: flex; flex-direction: column; gap: 1px; }
.banner {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  border-bottom: 1px solid var(--ring);
}
.banner.is-crit { background: rgba(208, 59, 59, 0.14); color: #f0a3a3; }
.banner.is-warn { background: rgba(250, 178, 25, 0.12); color: #f3d38f; }
.banner.is-info { background: var(--surface-1); color: var(--ink-2); }
/* i messaggi di incidente arrivano grezzi dal backend (JSON di errore senza
   spazi): devono andare a capo comunque, non uscire dal bordo. */
.banner .banner-text { flex: 1; min-width: 0; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.banner button { flex: none; }

/* ----------------------------------------------------------------- tabs -- */

.tabs {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-3); border-bottom: 1px solid var(--ring);
  background: var(--surface-0); position: sticky; top: var(--topbar-h); z-index: 30;
}
.tabs button {
  border: 0; background: none; cursor: pointer; padding: 10px 10px 8px;
  color: var(--ink-3); font-size: 13px; border-bottom: 2px solid transparent;
}
.tabs button[aria-selected='true'] { color: var(--ink-1); border-bottom-color: var(--cat-1); }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-1); border-top: 1px solid var(--ring);
}
.tabbar button {
  flex: 1; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); font-size: 10px; min-height: 56px; padding: 6px 0 4px;
  -webkit-tap-highlight-color: transparent;
}
.tabbar .tb-icon { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; transition: background .15s, color .15s; }
.tabbar .tb-label { letter-spacing: .02em; }
.tabbar button[aria-selected='true'] { color: var(--ink-1); }
.tabbar button[aria-selected='true'] .tb-icon { color: var(--cat-1); background: color-mix(in srgb, var(--cat-1) 18%, transparent); }
.tabbar button:active .tb-icon { transform: scale(.94); }
/* numeri vivi: un lampo discreto quando cambiano, senza ridisegnare la pagina */
.is-live-flash { animation: liveflash .6s ease-out; }
@keyframes liveflash { from { background: color-mix(in srgb, var(--cat-1) 28%, transparent); } to { background: transparent; } }

/* Segmented control (periodo, finestra) */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-chip); padding: 2px; }
.seg button {
  border: 0; background: none; cursor: pointer; padding: 6px 12px; min-height: 32px;
  color: var(--ink-3); font-size: 12px; border-radius: 4px; white-space: nowrap;
}
.seg button[aria-pressed='true'] { background: var(--surface-1); color: var(--ink-1); }

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

main {
  padding: var(--sp-3) var(--sp-3) calc(var(--tabbar-h) + 32px);
  max-width: 1440px; margin: 0 auto; min-width: 0;
}
.card { min-width: 0; }

.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: 0 0 var(--sp-3); margin-bottom: var(--sp-1);
  border-bottom: 1px solid var(--ring);
}
.filterbar .filter-label {
  font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
}
.filterbar .grow { flex: 1; }
/* Block layout, non flex: un contenitore flex in colonna adotta come larghezza
   la min-content del figlio più largo, e una tabella a 13 colonne farebbe
   sfondare l'intera pagina invece di scorrere dentro il proprio .table-wrap. */
.tabpanel > * + * { margin-top: var(--sp-2); }
.tabpanel { min-width: 0; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.card-title { font-size: 15px; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.card-note { font-size: 11px; color: var(--ink-3); }
.section-head { padding: var(--sp-2) 0 0; }
.section-sub { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; }

/* ----------------------------------------------------------------- hero -- */

.hero { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.hero-value {
  font-size: 40px; font-weight: 600; color: var(--ink-1);
  line-height: 1.1; margin-top: 2px;
  font-variant-numeric: proportional-nums; /* hero: cifre proporzionali */
}
.hero-value .unit { font-size: 16px; font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.hero-delta { font-size: 15px; margin-top: var(--sp-1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-delta .period-name { color: var(--ink-3); font-size: 12px; }
.hero-spark { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hero-spark .spark-note { font-size: 11px; color: var(--ink-3); }

/* Barra composizione */
.stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--r-bar); overflow: hidden; }
.stack-seg { min-width: 3px; border-radius: 2px; }
.stack-seg.stack-empty { background: var(--surface-2); flex: 1; }
.stack-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 11px; color: var(--ink-3); }
.stack-key { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
.stack-key-val { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ KPI -- */

.kpi-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr);
  gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 2px; scrollbar-width: none;
}
.kpi-row::-webkit-scrollbar { display: none; }
.kpi {
  scroll-snap-align: start;
  background: var(--surface-1); border: 1px solid var(--ring); border-radius: var(--r-card);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 20px; font-weight: 600; color: var(--ink-1); font-variant-numeric: proportional-nums; }
.kpi-sub { font-size: 11px; color: var(--ink-3); }

.badge {
  display: inline-block; align-self: flex-start; padding: 1px 6px; border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--ink-3); font-size: 10px; letter-spacing: .02em;
}
.badge.is-warn { color: var(--status-warn); }
.badge.is-crit { color: var(--status-crit); }
.badge.is-good { color: var(--status-good); }

/* Badge catena (vista TUTTE): dice da quale chain arriva una riga. Colore +
   sigla, mai il solo colore. */
.chain-badge {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: var(--r-chip);
  font-size: 9px; font-weight: 600; letter-spacing: .06em; vertical-align: middle;
  border: 1px solid var(--ring); color: var(--ink-3); background: var(--surface-2);
}
.chain-badge.is-robinhood { color: var(--blue-250, #7fb2f0); }
.chain-badge.is-bsc { color: #e8b339; }
.chain-badge.is-solana { color: #9d7cf0; }

/* Riga di ripartizione sotto il totale hero: "Robinhood 114,80 · BSC 66,90" */
.hero-chains {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 2px; font-size: 12px; color: var(--ink-3);
}
.hero-chains .sep { color: var(--ink-3); }
.hero-chains .hc-name { color: var(--ink-2); }
.hero-chains .num { color: var(--ink-1); }

.leader-chains { display: flex; gap: 10px; font-size: 11px; color: var(--ink-3); }
.leader-chains .chain-sub .chain-badge { margin-left: 0; }

/* ---------------------------------------------------------- posizioni ---- */

.pos-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.pos-card {
  background: var(--surface-1); border: 1px solid var(--ring); border-radius: var(--r-card);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  border-left: 3px solid transparent;
}
.pos-card:hover { background: #201f1e; }
.pos-card.is-static { cursor: default; }
.pos-card.is-static:hover { background: var(--surface-1); }
.pos-card.is-alert { border-left-color: var(--status-serious); }
.pc-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pc-symbol { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.pc-symbol a { color: var(--ink-1); }
.pc-pnl { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-row2 { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; }
.pc-meta { font-size: 11px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; }

.leader-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.leader-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cat-other); }

/* Dumbbell — un solo hue in due tonalità + forma (pieno = noi, vuoto = leader),
   così l'identità non dipende solo dalla tonalità. */
.dumbbell { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-2); align-items: center; }
.db-legend {
  grid-column: 1 / -1; display: flex; gap: var(--sp-3); align-items: baseline;
  font-size: 10px; color: var(--ink-3);
}
.db-key { display: inline-flex; align-items: center; gap: 4px; }
.db-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.db-swatch-us { background: var(--blue-400); }
.db-swatch-leader { background: var(--surface-1); border: 2px solid var(--blue-250); }
.db-track { position: relative; height: 12px; }
.db-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: var(--surface-2); border-radius: 1px;
}
.db-link { position: absolute; top: 5px; height: 2px; background: var(--blue-600); border-radius: 1px; }
.db-dot {
  position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  box-sizing: border-box; box-shadow: 0 0 0 2px var(--surface-1);
}
.db-us { background: var(--blue-400); z-index: 2; }
.db-leader { background: var(--surface-1); border: 2px solid var(--blue-250); }
.db-label { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-scale { font-size: 10px; color: var(--ink-3); margin-left: auto; }
.dumbbell-compact .db-legend { display: none; }
.dumbbell-compact { min-width: 130px; }

/* Tabelle */
.table-wrap { overflow-x: auto; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--ring);
  white-space: nowrap; position: sticky; top: 0; background: var(--surface-1); z-index: 1;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink-1); }
table.data th.is-sorted { color: var(--ink-1); }
table.data td { padding: 7px 6px; border-bottom: 1px solid var(--ring); vertical-align: middle; }
table.data tbody tr.row-main { height: 34px; }
table.data tbody tr.row-main:hover { background: #201f1e; }
table.data tbody tr.clickable { cursor: pointer; }
table.data td.n, table.data th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.is-alert td:first-child { box-shadow: inset 3px 0 0 var(--status-serious); }
.cell-flag { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.dot-blk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ink-3); }
.dot-blk.is-good { background: var(--status-good); }
.dot-blk.is-warn { background: var(--status-warn); }
.dot-blk.is-crit { background: var(--status-crit); }

.route-tag { color: var(--ink-3); white-space: nowrap; } /* mai colorata in tabella (SPEC §5.3) */

.ext { font-size: 11px; color: var(--ink-3); }

/* Drawer / bottom sheet */
tr.detail-row > td { background: #151514; padding: 0; }
.detail {
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  border-top: 1px solid var(--ring);
}
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3);
}
.dl { display: flex; flex-direction: column; gap: 1px; }
.dl dt { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.dl dd { margin: 0; font-size: 14px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.dl dd.good { color: var(--status-good); }
.dl dd.warn { color: var(--status-warn); }
.dl dd.serious { color: var(--status-serious); }
.dl dd.crit { color: var(--status-crit); }
.dl dd.muted { color: var(--ink-3); }

.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 50;
  display: flex; align-items: flex-end;
}
.sheet {
  background: var(--surface-1); width: 100%; max-height: 88vh; overflow-y: auto;
  border-radius: var(--r-card) var(--r-card) 0 0; border-top: 1px solid var(--ring);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.sheet-head {
  position: sticky; top: 0; background: var(--surface-1); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ring);
}
.sheet-close { min-width: 44px; min-height: 44px; }

/* ------------------------------------------------------------- grafici --- */

.chart-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.chart-def { margin: 2px 0 0; font-size: 11px; color: var(--ink-3); max-width: 62ch; }
.chart-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.btn-table { white-space: nowrap; }
.linechart { position: relative; width: 100%; }
.linechart.is-empty { display: flex; align-items: center; justify-content: center; }
.linechart-svg { display: block; }
.axis-text { fill: var(--ink-3); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-2); border: 1px solid var(--ring); border-radius: var(--r-chip);
  padding: 6px 8px; min-width: 120px;
}
.tip-val { font-size: 14px; color: var(--ink-1); font-weight: 600; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tip-key { width: 10px; height: 2px; border-radius: 1px; display: inline-block; flex: none; }
.tip-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.sparkline { display: block; }

.meter { position: relative; height: 8px; border-radius: var(--r-bar); background: rgba(57, 135, 229, .15); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--blue-400); border-radius: var(--r-bar); }

.divbar { position: relative; height: 10px; background: var(--surface-2); border-radius: var(--r-bar); }
.divbar-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--axis); }
.divbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.divbar-fill.is-pos { background: var(--status-good); }
.divbar-fill.is-neg { background: var(--status-crit); }

.barlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.barlist-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 44px; gap: var(--sp-2); align-items: center; }
.barlist-label { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist-track { height: 10px; background: var(--surface-2); border-radius: var(--r-bar); }
.barlist-fill { height: 100%; background: var(--blue-400); border-radius: 0 var(--r-bar) var(--r-bar) 0; min-width: 2px; }
.barlist-value { font-size: 12px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

.histo { display: flex; align-items: flex-end; gap: 2px; height: 128px; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; min-width: 0; }
.histo-n { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; height: 12px; }
.histo-track { flex: 1; width: 100%; max-width: 24px; display: flex; align-items: flex-end; }
.histo-fill { width: 100%; background: var(--blue-400); border-radius: var(--r-bar) var(--r-bar) 0 0; }
.histo-x { font-size: 10px; color: var(--ink-3); }
.histo-marks { display: flex; gap: var(--sp-4); font-size: 11px; color: var(--ink-3); margin: var(--sp-2) 0 0; }
.histo-marks b { color: var(--ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }

.empty-note { color: var(--ink-3); font-size: 12px; margin: 0; padding: var(--sp-4) 0; text-align: center; }

/* ------------------------------------------------------------- leader ---- */

.leader-grid { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
.leader-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.leader-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.leader-name { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.leader-counts { font-size: 12px; color: var(--ink-3); }
/* colonne 2 e 3 con minmax(0,…): senza il minimo a 0 la terza colonna prende
   la larghezza del suo contenuto più lungo e sfonda la card (overflow reale
   della pagina, non scroll). */
.leader-metric { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, auto); gap: var(--sp-2); align-items: center; font-size: 12px; }
.leader-metric .lm-label { color: var(--ink-3); }
.leader-metric .lm-value { color: var(--ink-1); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ sistema ---- */

.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.tile { background: var(--surface-1); border: 1px solid var(--ring); border-radius: var(--r-card); padding: var(--sp-3); }
.tile-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.tile-value { font-size: 20px; font-weight: 600; color: var(--ink-1); font-variant-numeric: proportional-nums; display: flex; align-items: center; gap: 6px; }
.tile-sub { font-size: 11px; color: var(--ink-3); }

.stream { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.ev {
  display: grid; grid-template-columns: 62px 92px 1fr auto; gap: var(--sp-2); align-items: baseline;
  font-family: var(--mono); font-size: 12px; padding: 5px 4px; border-bottom: 1px solid var(--ring);
  cursor: pointer; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit;
}
.ev.has-chain { grid-template-columns: 62px 38px 92px 1fr auto; }
.ev:hover { background: var(--surface-2); }
.ev-time { color: var(--ink-3); }
.ev-kind { color: var(--ink-3); font-size: 11px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.ev-text { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.sev-good .ev-text { color: var(--ink-1); }
.ev.sev-good .ev-kind { color: var(--status-good); }
.ev.sev-warn .ev-kind, .ev.sev-warn .ev-text { color: var(--status-warn); }
.ev.sev-crit .ev-kind, .ev.sev-crit .ev-text { color: var(--status-crit); }
.ev.is-open .ev-text { white-space: normal; }
.ev-raw { grid-column: 1 / -1; margin: var(--sp-2) 0 0; padding: var(--sp-2); background: var(--surface-0); border-radius: var(--r-chip); color: var(--ink-3); font-size: 11px; white-space: pre-wrap; word-break: break-all; }
.stream-new { position: sticky; top: 0; z-index: 2; align-self: center; }

/* --------------------------------------------------------- filtri/chip --- */

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* riga d'azione (es. Vendi nel dettaglio posizione): staccata dai link */
.pc-actions { display: flex; gap: var(--sp-2); align-items: center; }
.chip {
  border: 1px solid var(--ring); background: var(--surface-1); color: var(--ink-3);
  border-radius: 999px; padding: 5px 10px; min-height: 32px; cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed='true'] { color: var(--ink-1); background: var(--surface-2); border-color: rgba(255,255,255,.2); }
/* niente min-width qui: i campi numerici stretti (USDG, +%, quota) devono
   poter stare in 390px. Chi ha davvero bisogno di larghezza usa .input-wide o
   una delle classi .in-*. */
.input {
  background: var(--surface-1); border: 1px solid var(--ring); border-radius: var(--r-chip);
  color: var(--ink-1); padding: 6px 10px; min-height: 32px; font-size: 12px; min-width: 0;
}
.input::placeholder { color: var(--ink-3); }
.input-wide { min-width: 140px; }
/* larghezze dei campi del pannello leader (prima erano style inline: così su
   mobile una media query può impilarli a piena larghezza) */
.in-xs { width: 78px; }
.in-sm { width: 96px; }
.in-md { width: 170px; }
.in-xl { width: 250px; }
.in-lg { min-width: 260px; flex: 1 1 260px; }
.field-hint { display: block; font-size: 10px; line-height: 1.35; color: var(--ink-3); margin-top: 3px; }

/* --------------------------------------------------------- skeleton ------ */

.skel { background: var(--surface-2); border-radius: var(--r-bar); animation: skelPulse 1.2s ease-in-out infinite; }
@keyframes skelPulse { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
.skel-hero { height: 44px; width: 62%; }
.skel-line { height: 12px; width: 40%; }
.skel-bar { height: 8px; width: 100%; }
.skel-card { height: 96px; width: 100%; }

/* Flash su cambio valore (§8) */
.flash-good { animation: flashGood .6s ease-out; }
.flash-crit { animation: flashCrit .6s ease-out; }
@keyframes flashGood { from { background-color: rgba(12, 163, 12, .12); } to { background-color: transparent; } }
@keyframes flashCrit { from { background-color: rgba(208, 59, 59, .12); } to { background-color: transparent; } }

.is-disconnected main { opacity: .6; }

/* --------------------------------------------------------- token gate ---- */

.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.gate-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--sp-3); }
.gate-box h1 { font-size: 18px; }
.gate-box p { margin: 0; font-size: 12px; color: var(--ink-3); }
.gate-box form { display: flex; gap: var(--sp-2); }
.gate-box .input { flex: 1; }
.btn-primary {
  border: 1px solid var(--cat-1); background: var(--cat-1); color: #fff;
  border-radius: var(--r-chip); padding: 6px 14px; min-height: 32px; cursor: pointer; font-size: 12px;
}
.btn-primary:hover { filter: brightness(1.1); }

/* vendita manuale */
.btn-sell { background: transparent; color: var(--danger, #ff6b6b); border: 1px solid var(--danger, #ff6b6b); border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-sell:hover { background: var(--danger, #ff6b6b); color: #0a0e1a; }
.sell-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.sell-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; }
.sell-head { display: flex; justify-content: space-between; align-items: center; }
.sell-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sell-chips .chip { flex: 1; padding: 10px 0; font-size: 15px; justify-content: center; }
.sell-chips .chip.is-on, .sell-chips .chip[aria-pressed='true'] { color: #0a0e1a; background: var(--danger, #ff6b6b); border-color: var(--danger, #ff6b6b); font-weight: 700; }
.sell-label { font-size: 13px; font-weight: 600; color: var(--ink-1); margin-top: 4px; }
.sell-custom { display: flex; align-items: center; gap: 8px; }
.sell-input { width: 90px; }
.sell-actions .btn-primary { width: 100%; padding: 12px; font-size: 15px; background: var(--danger, #ff6b6b); border-color: var(--danger, #ff6b6b); color: #0a0e1a; }
.sell-status { font-size: 13px; min-height: 18px; }

.btn-refresh { padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); font-size: 12px; }
.btn-refresh:disabled { opacity: .6; cursor: wait; }

/* ------------------------------------------------------------ responsive - */

@media (min-width: 768px) {
  main { padding: var(--sp-4) var(--sp-6) var(--sp-8); }
  .tabbar { display: none; }
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .leader-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
  .hero-value { font-size: 44px; }
  .card { padding: var(--sp-4); }
}

@media (max-width: 767px) {
  .tabs { display: none; }
  .col-lg { display: none !important; }
  .desktop-only { display: none !important; }
  .upd-full { display: none; }
  .topbar { gap: var(--sp-1); padding: 0 var(--sp-2); }
  /* il refresh dentro #updated è già un bottone ⟳: quello standalone sarebbe
     un gemello identico e ruberebbe spazio al pill di stato. */
  #refreshBtn { display: none; }
  .chain-switch { padding: 2px; }
  .chain-switch button { font-size: 11px; padding: 9px 8px; min-height: 38px; }
  .chain-switch .cs-full { display: none; }
  .chain-switch .cs-abbr { display: inline; }
  .pill { font-size: 11px; padding: 6px 7px; }
  /* il pallino live resta con la sua parola anche sul telefono: il title non
     si apre al tocco, quindi il solo colore non direbbe niente */
  .live-pill { font-size: 10px; padding: 5px 6px; gap: 4px; }
  .btn-refresh { min-height: 40px; }
  .hero-spark .spark-cap { display: none; }
  .hero-top { gap: var(--sp-2); }
  .hero-value { font-size: 36px; }
  .filterbar .grow { display: none; }
  /* la nota del periodo non sparisce: va a capo, corta, sotto i filtri */
  .filterbar .card-note { flex-basis: 100%; font-size: 10px; }
  .filterbar .input { flex: 1 1 160px; min-width: 0; }
  /* 16px non è estetica: sotto i 16px iOS zooma la pagina al focus del campo.
     Insieme al min-height dà anche un bersaglio di tocco decente. */
  .input { font-size: 16px; min-height: 44px; }
  .seg button { min-height: 40px; }
  .chip { min-height: 40px; }
  .banner { align-items: flex-start; }

  /* KPI: si vede mezza seconda card e una sfumatura sul bordo, così è chiaro
     che la riga scorre (la scrollbar è nascosta apposta). */
  .kpi-row {
    grid-auto-columns: minmax(132px, 46%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }

  /* bersagli di tocco: azioni che muovono soldi ≥44px */
  .btn-sell { min-height: 44px; padding: 10px 16px; }
  .pc-actions .btn-sell { width: 100%; }
  .leaders-table .btn-ghost, .leaders-table .btn-sell { min-height: 44px; padding: 10px 16px; }

  /* Gestione leader: la tabella diventa una card per leader (niente scroll
     orizzontale per arrivare a Salva/Rimuovi). */
  table.leaders-table, table.leaders-table tbody, table.leaders-table tr, table.leaders-table td { display: block; width: 100%; }
  table.leaders-table thead { display: none; }
  table.leaders-table tr {
    border: 1px solid var(--ring); border-radius: var(--r-card);
    padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--surface-0);
  }
  table.leaders-table tbody tr.row-main { height: auto; }
  table.leaders-table td, table.leaders-table td.n {
    border-bottom: 0; padding: var(--sp-2) 0 0; text-align: left; white-space: normal;
  }
  table.leaders-table td:first-child { padding-top: 0; }
  .leaders-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
    margin-bottom: 3px;
  }
  .leaders-table .cell-actions { display: flex; gap: var(--sp-2); padding-top: var(--sp-3); }
  .leaders-table .cell-actions > button { flex: 1; }
  .leaders-table .in-xs, .leaders-table .in-sm { width: 96px; }
  /* nome su una riga, wallet sotto: così l'indirizzo non si spezza a metà */
  table.leaders-table td:first-child .leader-name { display: block; }
  /* checkbox "attivo": bersaglio pieno, non 13px */
  table.leaders-table label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  table.leaders-table input[type='checkbox'] { width: 20px; height: 20px; }

  /* form "aggiungi leader": impilato, campi a piena larghezza */
  .leader-add { flex-direction: column; align-items: stretch; }
  .leader-add .input, .leader-add .in-xs, .leader-add .in-sm, .leader-add .in-md, .leader-add .in-xl, .leader-add .in-lg {
    width: 100%; min-width: 0; flex: 0 0 auto;
  }
  .leader-add .btn-ghost, .leader-add .btn-primary { width: 100%; min-height: 44px; }

  /* dialogo di vendita a tutto schermo */
  .sell-overlay { padding: 0; align-items: stretch; }
  .sell-box {
    width: 100%; max-width: none; border-radius: 0; border: 0;
    min-height: 100%; overflow-y: auto;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
    justify-content: flex-start;
  }
  .sell-box .btn-ghost { min-height: 44px; min-width: 44px; }
  .sell-chips .chip { min-height: 48px; font-size: 16px; }
  .sell-input { width: 100%; min-height: 44px; font-size: 16px; }
  .sell-custom { align-items: center; }
  .sell-actions .btn-primary { min-height: 52px; }
}
/* 360px (iPhone SE / Android piccoli): la riga "+X % → vendi Y %" deve stare
   su una riga sola, altrimenti il "%" finito a capo si legge come un campo in
   più. */
@media (max-width: 380px) {
  .leaders-table .in-xs, .leaders-table .in-sm { width: 84px; }
}

@media (min-width: 768px) { .upd-short { display: none; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-lg { display: none !important; }
}

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Leader su telefono: card compatte + foglio di modifica */
.lm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.lm-add { min-height: 40px; padding: 8px 14px; }
.lm-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.lm-card { border: 1px solid var(--ring); border-radius: var(--r-card); padding: 12px 14px; background: var(--surface-0); cursor: pointer; }
.lm-card:active { background: var(--surface-2); }
.lm-card.is-off { opacity: .6; }
.lm-row1 { display: flex; align-items: center; gap: 8px; }
.lm-row1 .leader-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lm-chains { display: flex; gap: 4px; }
.lm-chains .badge { font-size: 10px; }
.lm-chev { color: var(--ink-3); font-size: 20px; line-height: 1; }
.lm-row2 { margin-top: 4px; font-size: 13px; }
.lm-row3 { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.lf-sheet { max-height: 92vh; overflow: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.lf-sheet .sheet-head { margin: 0 -16px 8px; padding: 12px 16px; }
.lf-field { display: block; margin: 12px 0; }
.lf-label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.lf-field .input { width: 100%; box-sizing: border-box; }
.lf-hint { display: block; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.lf-inline { display: flex; align-items: center; gap: 6px; }
.lf-inline .input { width: 84px; flex: 0 0 auto; }
.lf-resolve { display: flex; flex-direction: column; gap: 6px; }
.lf-resolve .btn-ghost { min-height: 44px; }
.lf-toggle { display: flex; align-items: center; gap: 8px; margin: 14px 0; min-height: 44px; }
.lf-toggle input { width: 22px; height: 22px; }
.lf-msg { min-height: 18px; margin: 6px 0; }
.lf-submit { width: 100%; min-height: 48px; font-size: 15px; }
.lf-remove { width: 100%; min-height: 44px; margin-top: 8px; color: var(--serious, #e5484d); }

/* ------------------------------------------- scala di uscita (livelli) --- */
/* Vista compatta di default (una riga per leader) e editor a righe alla
   pressione: 5 livelli × 2 input in una colonna di tabella sarebbero
   illeggibili quando la regola non si sta modificando. */

.tp-cell { white-space: normal; text-align: left; }
.tp-summary {
  background: none; border: 0; border-bottom: 1px dashed var(--ring);
  padding: 2px 0; margin: 0; font: inherit; font-size: 12px; text-align: left;
  color: var(--ink-2); cursor: pointer;
}
.tp-summary:hover { color: var(--ink-1); border-bottom-color: var(--blue-400); }
.tp-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.tp-row {
  display: grid; grid-template-columns: auto 1fr auto 1fr auto auto;
  align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3);
}
.tp-row .input { width: 100%; min-width: 56px; }
.tp-del { min-width: 30px; padding: 4px 8px; line-height: 1; color: var(--ink-3); }
.tp-del:hover { color: var(--status-serious); }
.tp-add { margin-top: 6px; font-size: 11px; }
/* uscita dall'editor: finché è aperto il refresh non ricostruisce il pannello,
   quindi serve un modo esplicito di chiuderlo senza salvare. */
.tp-close { margin-top: 6px; margin-left: var(--sp-2); font-size: 11px; color: var(--ink-3); }
.tp-add:disabled { opacity: .45; cursor: not-allowed; }
/* chip "prossima uscita" nella card posizione: informativo, non uno stato */
.pc-next { color: var(--blue-250); }

/* Limiti di copia (blocco `entry`): stessa meccanica della scala di uscita —
   riassunto di una riga, editor solo sulla riga che si tocca. Sei campi aperti
   su ogni leader renderebbero la tabella illeggibile. */
.en-cell { min-width: 130px; }
.en-summary { color: var(--ink-3); }
.en-editor { display: flex; flex-direction: column; gap: var(--sp-1); }
.en-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px; font-size: 12px; color: var(--ink-3);
}
/* l'aiuto occupa la riga sotto i due campi, non una terza colonna */
.en-row .field-hint, .en-row .lf-hint { grid-column: 1 / -1; }
.en-label { white-space: nowrap; }
.en-row-check { grid-template-columns: 1fr; }
.en-row-check input { width: 18px; height: 18px; vertical-align: -3px; }

@media (max-width: 767px) {
  /* bersagli tattili come gli altri campi del foglio: etichetta sopra, campo
     a piena larghezza sotto, aiuto sempre visibile (il tooltip non esiste). */
  .en-row { grid-template-columns: 1fr; gap: 4px; }
  .en-row .input { width: 100%; box-sizing: border-box; min-height: 40px; }
  .en-row-check input { width: 22px; height: 22px; }
  .lf-field .en-row .input { width: 100%; }
}

@media (max-width: 767px) {
  /* bersagli tattili: gli input della scala e la × stanno su una riga sola,
     ma nessuno dei due scende sotto i 40px di altezza. */
  .tp-row { gap: var(--sp-2); }
  .tp-row .input { min-height: 40px; }
  .tp-del { min-height: 40px; min-width: 40px; }
  .tp-add { min-height: 40px; }
  .leaders-table .tp-row .input, .leader-add .tp-row .input { width: 100%; }
  /* dentro il foglio lf-* .lf-field .input è a piena larghezza: qui no,
     altrimenti i due campi del livello si impilano e la riga si spezza. */
  .lf-field .tp-row .input { width: 100%; }
  .lf-field .tp-add { width: 100%; }
}