/* ============================================================
   Instrument — sistema di design
   Fondo nero-freddo con tinta verde; accento menta speso con
   parsimonia; il colore semantico (up/down/warn/danger) e' separato
   dall'accento, cosi' "va bene" e "attenzione" non competono con
   "questo e' cliccabile". I numeri hero sono in serif da stampa
   finanziaria: danno carattere dove un mono in piu' era solo rumore.
   ============================================================ */
:root {
  --bg: #f4f6f5;
  --bg-panel: #ffffff;
  --bg-raised: #eef1ef;
  --bg-sunk: #e6eae7;
  --grid: rgba(14, 21, 19, 0.05);
  --grid-major: rgba(14, 21, 19, 0.10);
  --border: #dfe4e1;
  --border-strong: #c9d1cc;
  --ink: #0e1513;
  --ink-dim: #54615c;
  --ink-faint: #84918c;
  --accent: #0b8f68;
  --accent-soft: rgba(11, 143, 104, 0.10);
  --accent-ink: #ffffff;
  --bull: #0b8f68;
  --bull-soft: rgba(11, 143, 104, 0.14);
  --bear: #cf3a2a;
  --bear-soft: rgba(207, 58, 42, 0.12);
  --warn: #a86a06;
  --warn-soft: rgba(168, 106, 6, 0.13);
  --danger: #c02616;
  --danger-soft: rgba(192, 38, 22, 0.12);
  --violet: #5847c9;
  --violet-soft: rgba(88, 71, 201, 0.12);
  --stamp: #a86a06;
  --shadow: 0 1px 2px rgba(16, 32, 28, 0.06), 0 8px 24px -16px rgba(16, 32, 28, 0.28);

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-num: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 19px;
  --text-xl: 26px;

  --radius: 7px;
  --nav-w: 216px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080b0c;
    --bg-panel: #0f1416;
    --bg-raised: #141b1e;
    --bg-sunk: #1a2327;
    --grid: rgba(230, 238, 236, 0.05);
    --grid-major: rgba(230, 238, 236, 0.10);
    --border: #1e282c;
    --border-strong: #2c393e;
    --ink: #e6eeec;
    --ink-dim: #93a49f;
    --ink-faint: #63736f;
    --accent: #4fd8a8;
    --accent-soft: rgba(79, 216, 168, 0.12);
    --accent-ink: #05130e;
    --bull: #3ecf8e;
    --bull-soft: rgba(62, 207, 142, 0.14);
    --bear: #ff6b5e;
    --bear-soft: rgba(255, 107, 94, 0.13);
    --warn: #f2a93b;
    --warn-soft: rgba(242, 169, 59, 0.14);
    --danger: #ff4d3d;
    --danger-soft: rgba(255, 77, 61, 0.14);
    --violet: #9b8cff;
    --violet-soft: rgba(155, 140, 255, 0.14);
    --stamp: #f2a93b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  --bg: #080b0c;
  --bg-panel: #0f1416;
  --bg-raised: #141b1e;
  --bg-sunk: #1a2327;
  --grid: rgba(230, 238, 236, 0.05);
  --grid-major: rgba(230, 238, 236, 0.10);
  --border: #1e282c;
  --border-strong: #2c393e;
  --ink: #e6eeec;
  --ink-dim: #93a49f;
  --ink-faint: #63736f;
  --accent: #4fd8a8;
  --accent-soft: rgba(79, 216, 168, 0.12);
  --accent-ink: #05130e;
  --bull: #3ecf8e;
  --bull-soft: rgba(62, 207, 142, 0.14);
  --bear: #ff6b5e;
  --bear-soft: rgba(255, 107, 94, 0.13);
  --warn: #f2a93b;
  --warn-soft: rgba(242, 169, 59, 0.14);
  --danger: #ff4d3d;
  --danger-soft: rgba(255, 77, 61, 0.14);
  --violet: #9b8cff;
  --violet-soft: rgba(155, 140, 255, 0.14);
  --stamp: #f2a93b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -20px rgba(0, 0, 0, 0.9);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* iOS Safari's address bar changes 100vh mid-session; dvh tracks the actual visible height */
  overflow: hidden;
  background-color: var(--bg);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  flex-wrap: nowrap;
  overflow-x: auto;
}

.brand {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chart-settings-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.toolbar-intervals {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.toolbar-strategy {
  flex-shrink: 1;
  min-width: 120px;
  max-width: 220px;
}

.toolbar-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.toolbar-check input { accent-color: var(--accent); }

.toolbar-spacer {
  flex: 1;
  min-width: 8px;
}

.asset-toggle {
  display: flex;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}

.asset-btn {
  background: transparent;
  color: var(--ink-dim);
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.asset-btn.active {
  background: var(--accent);
  color: var(--bg);
}

.ticker-field {
  position: relative;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 260px;
}

#ticker-input {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  padding: 7px 10px;
  border-radius: 8px;
  width: 100%;
  font-size: 13px;
  font-family: var(--font-mono);
}

#ticker-input:focus, .interval-select:focus, .params-form input:focus, .params-form select:focus,
.watchlist-quickbar input:focus, .wl-options-details select:focus, .active-strategy-select:focus {
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
}

.suggestions {
  /* position:fixed with coordinates set from JS (not absolute) — the
     toolbar needs its own horizontal scroll (overflow-x:auto) when its
     items don't all fit, and that implicitly clips vertical overflow too
     (an absolutely-positioned child included), which was hiding this list
     entirely. Fixed positioning escapes that ancestor clipping. */
  position: fixed;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 3px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.suggestions li {
  padding: 6px 8px;
  border-radius: 1px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: var(--font-mono);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.suggestions li:hover,
.suggestions li.active {
  background: var(--accent);
  color: var(--bg);
}

.sug-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}

.suggestions .sug-symbol {
  font-weight: 700;
  flex-shrink: 0;
}

.suggestions .sug-name {
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.suggestions li:hover .sug-name,
.suggestions li.active .sug-name {
  color: rgba(255, 255, 255, 0.85);
}

.sug-exchange {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid currentColor;
}

.sug-exchange-stock { color: var(--accent); }
.sug-exchange-mexc { color: var(--stamp); }
.sug-exchange-binance { color: var(--bull); }
.sug-exchange-kucoin { color: var(--ink); }

.suggestions li:hover .sug-exchange,
.suggestions li.active .sug-exchange {
  color: var(--bg);
  border-color: rgba(255, 255, 255, 0.55);
}

#search-btn {
  background: var(--ink);
  color: var(--bg);
  border: 1.5px solid var(--ink);
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#search-btn:disabled { opacity: 0.5; cursor: default; }

.error-banner {
  background: rgba(242, 54, 69, 0.10);
  color: var(--bear);
  padding: 8px 16px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  border-bottom: 1.5px solid var(--bear);
}

.error-banner.hidden { display: none; }

.cockpit {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

.rail {
  flex: 0 0 44px;
  border-right: 1.5px solid var(--border-strong);
  background: rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
}

.rail-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 16px;
  color: var(--ink-dim);
  cursor: pointer;
}

.rail-btn.active { background: var(--accent); color: var(--bg); }

.levels-panel {
  display: none;
  flex-direction: column;
  width: 260px;
  padding: 14px;
  overflow-y: auto;
  background: var(--bg);
  border-right: 1.5px solid var(--border-strong);
}

.levels-panel.open { display: flex; }

.right-panel {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
}

.tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1.5px solid var(--border-strong);
}

.tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  padding: 9px 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  cursor: pointer;
}

.tab:last-child { border-right: none; }

.tab.active {
  background: var(--bg-panel);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2.5px 0 var(--ink);
}

.tab-content {
  display: none;
  flex-direction: column;
  padding: 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.tab-content.active { display: flex; }

.panel {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}

.panel:last-child { border-bottom: none; }

/* I titoli sono neutri: l'ambra resta riservata a cio' che avvisa, se
   colora anche le intestazioni non avvisa piu' di niente. */
.panel h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 9px;
}

.interval-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.interval-select {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}


.layer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ink);
}

.layer-toggle input[type="checkbox"] {
  accent-color: var(--accent);
}

.chart-area {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.live-badge {
  position: absolute;
  top: 10px;
  left: 46px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--bull);
  border: 1.5px solid var(--bull);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bull);
  animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.polling-badge {
  position: absolute;
  top: 10px;
  left: 46px;
  z-index: 15;
  background: var(--bg);
  color: var(--ink-dim);
  border: 1.5px solid var(--border-strong);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.loading, .empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 13px;
  font-family: var(--font-mono);
}

.server-wake-hint {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  padding: 0 24px;
  text-align: left;
}
.server-wake-hint.hidden { display: none; }

.server-wake-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: server-wake-pulse 1.1s ease-in-out infinite;
}

@keyframes server-wake-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.server-wake-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.server-wake-sub {
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: 2px;
  max-width: 320px;
}

.hidden { display: none !important; }

.chart-row {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.draw-rail {
  flex: 0 0 36px;
  border-right: 1.5px solid var(--border-strong);
  background: rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  z-index: 5;
}

.draw-tool-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: var(--ink-dim);
  cursor: pointer;
}

.draw-tool-btn svg { width: 15px; height: 15px; }
.draw-tool-btn:hover { background: rgba(15, 23, 42, 0.06); color: var(--ink); }
.draw-tool-btn.selected { background: var(--accent); color: var(--bg); }

.draw-rail-divider {
  width: 20px;
  height: 1px;
  background: var(--border-strong);
  margin: 4px 0;
}

.draw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.draw-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.draw-list-remove {
  background: transparent;
  border: none;
  color: var(--bear);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
}

@media (max-width: 760px) {
  .draw-rail { display: none; }
}

.chart-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.main-chart {
  flex: 1;
  min-height: 300px;
}

.sub-chart {
  height: 130px;
  border-top: 1.5px solid var(--border-strong);
}

.chart-tooltip {
  position: fixed;
  z-index: 20;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink);
  pointer-events: none;
  max-width: 260px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.summary-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-title-row h3 {
  margin: 0;
}

.position-badge {
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.05em;
}

.position-badge.long {
  background: color-mix(in srgb, var(--bull) 12%, transparent);
  color: var(--bull);
  border: 1.5px solid var(--bull);
}

.position-badge.short {
  background: rgba(242, 54, 69, 0.12);
  color: var(--bear);
  border: 1.5px solid var(--bear);
}

.position-badge.flat {
  background: var(--bg-raised);
  color: var(--ink-dim);
  border: 1.5px solid var(--border-strong);
}

.alert-log {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 11.5px;
  font-family: var(--font-mono);
}

.alert-log li {
  padding: 4px 6px;
  border-radius: 1px;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-panel);
}

.alert-log li.long-signal { border-left-color: var(--bull); }
.alert-log li.short-signal { border-left-color: var(--bear); }

.alert-log .alert-time {
  color: var(--ink-dim);
  font-size: 9.5px;
  margin-left: 6px;
}

.strategy-disclaimer {
  font-size: 10px;
  color: var(--ink-dim);
  margin: 6px 0 0;
  line-height: 1.45;
  font-style: italic;
}

.active-strategy-select {
  width: 100%;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  margin-bottom: 10px;
}

.panel-hint {
  font-size: 10.5px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin: 0 0 8px;
}

.marker-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 8px;
  padding: 0;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-dim);
}

.legend-swatch {
  font-size: 11px;
  color: var(--ink-dim);
}

.legend-swatch.bull { color: var(--bull); }
.legend-swatch.bear { color: var(--bear); }
.legend-swatch.stamp { color: var(--stamp); }

.wl-ticker-field {
  position: relative;
  width: 100%;
}

.wl-ticker-field input {
  width: 100%;
}

.wl-resolved-pair {
  margin: -2px 0 0;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--bull);
}

.wl-resolved-pair.wl-resolved-pair-error {
  color: var(--bear);
}

.wl-options-details select {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-family: var(--font-mono);
}

/* .asset-toggle.small inherits layout from .asset-toggle; no additional overrides needed */

.wl-asset-btn {
  flex: 1;
  font-size: 10.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 0;
  background: transparent;
  color: var(--ink-dim);
  border: none;
  cursor: pointer;
}

.wl-asset-btn.active {
  background: var(--accent);
  color: var(--bg);
}

/* ---- Auth: toolbar widget + login/register modal ---- */
.auth-widget {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-user-email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#auth-toggle-btn, #auth-logout-btn {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal.hidden { display: none; }

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.auth-modal-box {
  position: relative;
  z-index: 1;
  width: min(340px, 90vw);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  padding: 22px 20px;
}

.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 14px;
  cursor: pointer;
}

.auth-modal.gate .auth-modal-close { display: none; }
.auth-modal.gate .auth-modal-backdrop { cursor: default; }

.auth-modal-box h3 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 16px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-dim);
}

.auth-form input {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12.5px;
}

.auth-form button[type="submit"] {
  margin-top: 4px;
  background: var(--accent);
  color: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.auth-error {
  color: var(--bear);
  font-size: 11px;
  margin: 0;
}

.auth-switch {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--ink-dim);
  display: flex;
  gap: 6px;
  align-items: center;
}

#auth-switch-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.alert-login-prompt {
  text-align: center;
  padding: 20px 10px;
}

.alert-login-prompt #alert-login-btn {
  background: var(--accent);
  color: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.telegram-setup {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.telegram-setup label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.telegram-setup input {
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.telegram-setup #telegram-chat-id-save {
  background: var(--ink);
  color: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 6px;
}

.telegram-setup code {
  font-size: 10px;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 8px;
}

/* Collapsed one-line replacement for .telegram-setup once a chat ID is
   already saved — the full box with its raw bot-API URL only needs to be
   seen once, not every time Alert is opened (see updateTelegramSetupUI). */
.telegram-status-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.tg-status-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink);
}

.tg-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bull);
  flex-shrink: 0;
}

.tg-edit-link {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
}

.section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 8px;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.section-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

/* Ticker input + submit on one line, matching the header search bar's own
   pattern — everything else (asset/exchange/timeframe/on-close) collapses
   behind .wl-options-details so adding a ticker isn't a 6-field form. */
.watchlist-quickbar {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.watchlist-quickbar .wl-ticker-field { flex: 1; }

.watchlist-quickbar input[type="text"] {
  width: 100%;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
}

.watchlist-quickbar button[type="submit"] {
  flex-shrink: 0;
  width: 36px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.wl-options-details {
  margin-bottom: 10px;
  font-size: 12px;
}

.wl-options-details summary {
  cursor: pointer;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 0;
}

.wl-options-details > *:not(summary) {
  margin-top: 6px;
}

/* Browser notifications are the lesser-used of the two alert systems here
   — pushed to the bottom, visually separated, so it stops competing with
   the Telegram watchlist (the one people actually rely on) for attention. */
.alert-footnote {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.watchlist-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Watchlist tab — a plain list of favorite tickers for one-click chart
   navigation, visually distinct from the Alert tab's .tick-card entries
   (those carry per-strategy toggles; these are just "load this ticker"). */
.wl-rows {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wl-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

.wl-row:hover { background: var(--bg-panel); }

.wl-row.active {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.wl-row.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.wl-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.wl-main { flex: 1; min-width: 0; }

.wl-sym-row { display: flex; align-items: center; gap: 6px; }

.wl-sym { font-weight: 700; font-size: 13px; color: var(--ink); }

.wl-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: var(--bg-raised);
  border-radius: 4px;
  padding: 1px 4px;
}

.wl-bell { font-size: 10px; color: var(--stamp); flex-shrink: 0; }

.wl-exch { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); margin-top: 1px; }

.wl-spark-wrap { flex: 0 0 auto; width: 48px; height: 24px; display: flex; align-items: center; justify-content: center; }
.wl-spark { display: block; width: 48px; height: 24px; }
.wl-spark-empty { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

.wl-right { text-align: right; flex-shrink: 0; }

.wl-price {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wl-change {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.wl-change.up { color: var(--bull); }
.wl-change.down { color: var(--bear); }
.wl-change.flat { color: var(--ink-dim); }

.wl-remove {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wl-row:hover .wl-remove { display: flex; }
.wl-row:hover .wl-right { opacity: 0.15; }

.wl-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1.5;
}

.wl-empty-icon { font-size: 22px; opacity: 0.4; }

.wl-hint {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.wl-hint b { color: var(--stamp); font-weight: 600; }

.tick-card {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  overflow: hidden;
}

.tick-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: pointer;
  gap: 8px;
}

.tick-card-head .wl-symbol {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
}

.tick-card-head .wl-exch {
  font-size: 9.5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  margin-left: 6px;
}

.tick-card-head .wl-summary {
  flex: 1;
  text-align: right;
  font-size: 10px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tick-card-head .wl-caret {
  color: var(--ink-dim);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.tick-card.open .wl-caret { transform: rotate(180deg); }

.tick-card-body {
  display: none;
  padding: 2px 10px 10px;
  border-top: 1px dashed var(--border);
  flex-direction: column;
  gap: 6px;
}

.tick-card.open .tick-card-body { display: flex; }

.strat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  padding: 3px 0;
}

.wl-interval-row {
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px dashed var(--border);
}

.wl-interval-select {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-panel);
  color: var(--ink);
}

.wl-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 10px;
  background: var(--border-strong);
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

.wl-toggle.on { background: var(--accent); }

.wl-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  transition: left 0.15s;
}

.wl-toggle.on .knob { left: 16px; }

.wl-onclose-check {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--bg-panel);
}

.wl-close-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
}

.wl-custom-badge {
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
}

.wl-onclose-row {
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px dashed var(--border);
}

.strat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strat-gear {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
}

.strat-gear svg { width: 12px; height: 12px; }

.strat-gear:hover { background: rgba(15, 23, 42, 0.05); color: var(--ink); }

.strat-gear.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

.strat-params-inline {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin: -2px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strat-params-inline.hidden { display: none; }

.param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.param-label {
  font-size: 11px;
  color: var(--ink-dim);
  flex: 1;
  min-width: 0;
}

.param-input,
.param-select {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink);
  width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.param-select { width: auto; text-align: left; }

.param-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-dim);
  cursor: pointer;
}

.param-check input { accent-color: var(--accent); }

.param-actions {
  display: flex;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}

.param-btn-reset {
  font-size: 10px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}

.param-btn-save {
  font-size: 10px;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: auto;
  font-family: var(--font-sans);
}

.pine-secondary-link {
  display: block;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
  padding: 10px 0 0;
  cursor: pointer;
  text-decoration: underline;
}

.backtest-heading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stamp);
  margin: 14px 0 8px;
}

.backtest-interval-tag {
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: normal;
}

/* Equity chart is the hero of the Strategia screen — the % return and
   final equity are stamped directly on it (not a separate KPI tile) so the
   number that matters is the first thing read, and the time axis stays on
   (see initCharts) so the curve reads against real dates instead of
   floating with no time reference. */
.eq-hero-wrap {
  position: relative;
  margin-bottom: 8px;
}

.equity-chart {
  height: 180px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
}

.equity-hero-stamp {
  position: absolute;
  top: 10px;
  right: 12px;
  text-align: right;
  pointer-events: none;
}

.equity-stamp-pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.equity-stamp-pct.positive { color: var(--bull); }
.equity-stamp-pct.negative { color: var(--bear); }

.equity-stamp-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-dim);
  margin-top: 1px;
}

/* Only the 3 ratios worth scanning at a glance stay always-visible; trade
   count / final equity move behind "Dettagli backtest" below. */
.backtest-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.chip {
  flex: 1;
  text-align: center;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 4px;
  min-width: 0;
}

.chip-label {
  color: var(--ink-dim);
  font-size: 8.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chip-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 1px;
}

.chip-value.positive { color: var(--bull); }
.chip-value.negative { color: var(--bear); }

.backtest-details {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
}

.backtest-details .stat {
  flex: 1;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 5px 7px;
}

.backtest-details .stat-label {
  color: var(--ink-dim);
  font-size: 9.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.backtest-details .stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.operations-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stamp);
}

.operations-count {
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
}

.operations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.operation-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  font-size: 11px;
  border-bottom: 1px dashed var(--border);
}

.operation-row:last-child { border-bottom: none; }

.op-dir {
  font-size: 11px;
  flex-shrink: 0;
  width: 12px;
}

.op-dir.long { color: var(--bull); }
.op-dir.short { color: var(--bear); }

.op-dates {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.op-pnl {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.op-pnl.positive { color: var(--bull); }
.op-pnl.negative { color: var(--bear); }

.operations-empty {
  padding: 12px 9px;
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-dim);
}

.legend-thin {
  font-size: 9px;
  margin-top: 12px;
}

.params-details {
  margin-top: 12px;
  font-size: 12px;
}

.params-details summary {
  cursor: pointer;
  color: var(--stamp);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
}

.params-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.params-form fieldset {
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.params-form legend {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stamp);
  padding: 0 4px;
}

.params-form label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--ink);
}

.params-form input[type="number"],
.params-form input[inputmode="decimal"],
.params-form select {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 3px 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  width: 90px;
}

.params-form input[type="checkbox"] {
  margin-right: auto;
  accent-color: var(--accent);
}

.params-form button {
  background: var(--ink);
  color: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 7px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Distinct from "Applica e ricalcola" (a plain re-run) — the accent color
   marks this as the one button that actually rewrites the fields below it. */
.optimize-btn {
  background: var(--accent);
  color: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  padding: 7px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-bottom: 4px;
}

.optimize-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.optimize-result {
  font-size: 10.5px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: -2px 0 4px;
}

.optimize-result b { color: var(--bull); font-weight: 700; }

.indicator-readout {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink);
}

/* Righe-card come il resto del restyle (confluence-list, wl-rows): un
   accento a sinistra invece del bordo tratteggiato, coerente con Livelli
   e Sorveglia. */
.indicator-readout li {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 2.5px solid var(--violet);
  border-radius: 6px;
  padding: 6px 9px;
  line-height: 1.4;
  transition: border-color 0.12s, background 0.12s;
}
.indicator-readout li:hover { background: var(--bg-raised); border-color: var(--border-strong); }

.confluence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confluence-list li {
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--stamp);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  line-height: 1.45;
}

.confluence-list .cz-range {
  color: var(--ink-dim);
  font-size: 10.5px;
}

/* ---- Saldi tab (read-only exchange balances) ---- */
.readonly-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bull);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--bull);
  border-radius: 100px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.balance-acct {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.balance-acct-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-panel);
  font-weight: 700;
  font-size: 12.5px;
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}

.balance-row .b-asset { font-weight: 600; }

.balance-row .b-qty {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.balance-empty, .balance-error {
  padding: 10px;
  font-size: 11px;
  color: var(--ink-dim);
}

.balance-error { color: var(--bear); }

.disclaimer {
  text-align: center;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--ink-dim);
  padding: 8px 16px;
  border-top: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
}

/* ---- Script Pine panel ---- */

.pine-panel .panel-hint { margin: 0 0 10px; font-size: 11px; line-height: 1.4; color: var(--ink-dim); }

/* Select, nome script, upload e campi param: stessi controlli unificati del
   resto dell'app (bg-raised, bordo 1px, raggio 6px) invece del vecchio
   bordo 1.5px / raggio 8px che stonava con Livelli e Bacheca. */
.pine-script-select {
  width: 100%;
  margin-bottom: 8px;
}

#pine-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#pine-script-name,
.pine-params-form input[type="text"],
.pine-params-form input[type="number"],
.pine-signal-mapping select {
  width: 100%;
}

#pine-file-input {
  font-size: 10.5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
}

.pine-editor {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.pine-editor .CodeMirror {
  height: 220px;
  background: var(--bg-panel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}

.pine-editor .CodeMirror-gutters {
  background: rgba(15, 23, 42, 0.03);
  border-right: 1px solid var(--border);
  color: var(--ink-dim);
}

.pine-editor .CodeMirror-cursor { border-left: 1.5px solid var(--accent); }
.pine-editor .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pine-editor .CodeMirror-activeline-background { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.pine-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* Stesso linguaggio bottoni del resto dell'app: sans-serif, case normale,
   bg-raised/border-strong per i secondari — non piu' mono maiuscolo su
   fondo pieno, che era rimasto indietro rispetto al restyle. */
.pine-actions button,
.pine-params-form button[type="submit"] {
  flex: 1;
  background: var(--bg-raised);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 11.5px;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  min-width: 0;
  transition: filter 0.12s, border-color 0.12s;
}
.pine-actions button:hover { border-color: var(--ink-faint); }

.pine-danger { background: var(--bear-soft) !important; color: var(--bear) !important; border-color: color-mix(in srgb, var(--bear) 32%, transparent) !important; }
.pine-secondary { background: transparent !important; color: var(--ink-dim) !important; }

.pine-status {
  font-size: 11px;
  font-family: var(--font-mono);
  margin: 6px 0 0;
  color: var(--ink-dim);
  white-space: pre-wrap;
}

.pine-status.error { color: var(--bear); }
.pine-status.ok { color: var(--bull); }

.pine-params-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pine-params-form.hidden { display: none; }

#pine-params-fields { display: flex; flex-direction: column; gap: 6px; }

.pine-param-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.pine-param-row label { color: var(--ink-dim); flex: 1; }
.pine-param-row input, .pine-param-row select { max-width: 55%; }

.pine-signal-mapping { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pine-signal-mapping label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--ink-dim); }

/* ---- Responsive: tablet & phone (iOS/Android) ---- */

@media (max-width: 900px) and (min-width: 761px) {
  .right-panel { flex-basis: 260px; }
}

/* ---- Mobile app-shell (≤760px): five real full-screen destinations reached
   from a bottom tab bar — Grafico, Livelli, Strategia, Alert, Altro. Each tap
   shows exactly one screen and hides the rest; there is no sheet, no
   backdrop, no "tap again to close". Header (brand + a persistent, always-
   visible search bar) and bottom nav are the only fixed chrome; every screen
   fills the space between them with its own single scroll container. ---- */

.mobile-nav, .drawer-header, .mobile-chart-strip, .mobile-ticker-search { display: none; }

@media (max-width: 760px) {
  html, body { height: 100%; overflow: hidden; }

  /* iOS Safari auto-zooms the whole page in on focus whenever a text
     input's computed font-size is below 16px — every text-entry field
     needs to clear that threshold here regardless of its desktop size
     (select elements are exempt: iOS shows a picker wheel for those,
     never a zoom). Without this every text field on mobile — ticker
     search, auth forms, watchlist ticker, Pine params, Telegram token —
     triggered the zoom, forcing the user to manually pinch back out. */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea {
    font-size: 16px !important;
  }

  /* Nothing lives in the toolbar on mobile any more — ticker entry moved to
     the chart-strip symbol (openMobileTickerSearch in app.js), "Analizza"
     is pointless since selecting a result already runs the analysis, and
     the brand wordmark just cost a whole row of vertical space for a label
     the user only needs once. The whole bar collapses to 0 height, so the
     chart starts right at the top of the screen. #ticker-input stays in
     the DOM (inside the hidden .search-form) until it's physically moved
     into the search overlay on open — see .mts-field-slot for its styling
     once there. */
  .toolbar { display: none; }

  /* The small dropdown never shows on mobile — full-screen search
     (.mobile-ticker-search) replaces it entirely once the field is
     relocated there by openMobileTickerSearch(). */
  #ticker-suggestions { display: none !important; }

  .mobile-ticker-search {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--bg);
    flex-direction: column;
  }
  .mobile-ticker-search:not(.hidden) { display: flex; }

  .mts-header { flex-shrink: 0; padding: 10px 12px 0; border-bottom: 1px solid var(--border); }
  .mts-searchrow { display: flex; align-items: center; gap: 10px; }
  .mts-field-slot { flex: 1; min-width: 0; height: 42px; }
  .mts-field-slot .ticker-field { height: 100%; max-width: none; }
  .mts-field-slot #ticker-input {
    width: 100%; height: 100%; padding: 0 12px; font-size: 15px; box-sizing: border-box;
    background: var(--bg-panel); border: 1.5px solid var(--border-strong); border-radius: 9px; color: var(--ink);
  }
  .mts-close { flex-shrink: 0; background: none; border: none; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 8px 2px; }

  .mts-tabs { display: flex; gap: 20px; padding: 12px 4px 0; }
  .mts-tab { background: none; border: none; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-dim); padding: 0 0 10px; position: relative; cursor: pointer; }
  .mts-tab.active { color: var(--ink); }
  .mts-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: var(--ink); border-radius: 2px 2px 0 0; }

  .mts-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
  .mts-empty { padding: 24px 14px; text-align: center; font-size: 12.5px; color: var(--ink-dim); }

  .mts-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .mts-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: #fff;
  }
  .mts-main { flex: 1; min-width: 0; }
  .mts-sym-row { display: flex; align-items: baseline; gap: 7px; }
  .mts-sym { font-weight: 700; font-size: 14px; color: var(--accent); }
  .mts-badge {
    font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; text-transform: uppercase;
    padding: 1.5px 6px; border-radius: 4px; background: var(--bg-panel); color: var(--ink-dim); border: 1px solid var(--border);
  }
  .mts-name { font-size: 11.5px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
  .mts-right { text-align: right; flex-shrink: 0; }
  .mts-exch { font-weight: 600; font-size: 12.5px; color: var(--ink); }

  #levels-panel .chart-settings-group {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 14px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--border);
  }
  #levels-panel .toolbar-intervals { width: 100%; }
  #levels-panel .interval-select { width: 100%; padding: 10px; font-size: 14px; }
  #levels-panel .toolbar-strategy { width: 100%; max-width: none; padding: 10px; font-size: 14px; }

  /* Strategy select relocated to the top of the Strategia screen itself
     (see relocateStrategySelect in app.js) — same full-width treatment as
     its Livelli counterpart above. */
  .strategy-select-slot { margin: 2px 0 12px; }
  .strategy-select-slot .toolbar-strategy { width: 100%; max-width: none; padding: 10px; font-size: 14px; }
  #levels-panel .toolbar-check {
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    padding: 7px 12px;
    background: var(--bg-panel);
  }

  .rail { display: none; }
  .live-badge, .polling-badge { left: 10px; }

  .cockpit {
    display: block;
    position: relative;
    overflow: hidden;
    height: auto;
    margin-bottom: 112px; /* clears the fixed bottom nav (52px) + chart-strip (60px) */
  }

  .chart-area {
    height: 100%;
    border: none;
  }

  #chart-wrap { height: 100%; }
  .main-chart { height: 100%; }

  /* One screen at a time, filling everything from the very top of the
     screen (there's no toolbar left to clear) down to the bottom nav —
     not a partial sheet, not an overlay over the chart. */
  #levels-panel, #script-panel, #issues-panel, .right-panel, .altro-panel {
    position: fixed;
    left: 0;
    right: 0;
    width: auto; /* #levels-panel/#script-panel/.altro-panel otherwise inherit the desktop flyout's fixed 260px width, which — combined with left+right both set on a fixed element — wins over "right:0" and leaves the chart showing through the remaining strip */
    top: 0;
    bottom: 52px;
    max-height: none;
    overflow-y: auto;
    background: var(--bg);
    z-index: 40;
    padding: 0;
    /* The fixed .disclaimer footer bar (z-index 45) sits on top of these
       panels near the bottom nav — without this, its last ~30px covered
       whatever content the panel happened to scroll to (e.g. Opera's
       Notional/Margine richiesto rows, right above the execute button). */
    padding-bottom: 30px;
    display: none;
  }

  #levels-panel.mobile-open, #script-panel.mobile-open, #issues-panel.mobile-open, .right-panel.mobile-open, .altro-panel.mobile-open {
    display: flex;
    flex-direction: column;
  }

  #levels-panel .panel, #script-panel .panel, .right-panel .tabs, .altro-panel .panel { padding-left: 16px; padding-right: 16px; }
  #levels-panel .panel:first-of-type, #script-panel .panel:first-of-type, .altro-panel .panel:first-of-type { padding-top: 14px; }

  /* The internal Strategia/Alert/Analisi/Saldi tab strip is superseded by
     the bottom nav on mobile (Strategia merges the first two, Alert reaches
     the third, Saldi is reached from Altro) — JS drives which tab-content
     is active directly, this bar would just be a second, redundant level of
     navigation sitting on top of it. */
  .right-panel .tabs { display: none; }

  /* Plain screen title, not a colored bar with a close affordance — there is
     nothing to "close" now, only another tab to switch to. */
  .drawer-header {
    display: block;
    padding: 14px 16px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--stamp);
  }
  .drawer-close-btn { display: none; }

  .mobile-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 50;
  }

  /* Slim symbol/timeframe strip pinned above the bottom nav, matching
     TradingView mobile's compact info bar that stays visible while
     looking at the chart — not shown until a chart is actually loaded. */
  .mobile-chart-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom));
    height: 60px;
    padding: 0 14px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 49;
  }
  .mobile-chart-strip.hidden { display: none; }

  .mobile-chart-symbol {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .mobile-strategy-pill {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--ink);
    border: none;
    border-radius: 20px;
    padding: 3px 9px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
  }

  /* The real #interval-primary <select> stays relocated here (so its
     value/change-event logic doesn't get duplicated) but is now driven by
     the wheel below instead of being the visible control itself. */
  #mobile-chart-interval-slot { display: none; }

  /* A small self-contained rounded capsule sized to the text, not a rail
     spanning the strip — scroll-snap wheel of interval values, the
     selected one sitting in a solid dark pill at its center. */
  .tf-wheel {
    position: relative;
    width: 46px;
    height: 54px;
    flex-shrink: 0;
    border: 1.5px solid var(--ink);
    border-radius: 16px;
    background: var(--bg);
    overflow: hidden;
  }
  .tf-wheel::before, .tf-wheel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    z-index: 2;
    pointer-events: none;
  }
  .tf-wheel::before { top: 0; background: linear-gradient(var(--bg), transparent); }
  .tf-wheel::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }

  .tf-wheel-band {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 18px;
    height: 18px;
    background: var(--ink);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
  }

  .tf-wheel-track {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 18px 0;
  }
  .tf-wheel-track::-webkit-scrollbar { display: none; }

  .tf-wheel-item {
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    position: relative;
    z-index: 2;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10.5px;
    color: #9a9ea5;
  }
  .tf-wheel-item.near { color: var(--ink-dim); }
  .tf-wheel-item.current { color: #fff; font-size: 12px; font-weight: 800; }

  /* Drawing tools have no home at all below 760px otherwise (.draw-rail is
     hidden outright) — these two buttons, next to the timeframe wheel, open
     the same tool strip used on desktop as a horizontal dock right above
     this row, instead of a FAB floating on top of the candles. */
  .strip-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }

  .strip-tool-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg);
    color: var(--ink-dim);
  }
  .strip-tool-btn svg { width: 16px; height: 16px; }
  .strip-tool-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  .strip-tools { display: flex; align-items: center; gap: 8px; }
  .strip-tools.hidden { display: none; }

  .draw-rail.mobile-tools-open {
    display: flex;
    flex-direction: row;
    position: fixed;
    right: 14px;
    bottom: calc(52px + env(safe-area-inset-bottom) + 60px + 10px);
    width: auto;
    height: 48px;
    padding: 0 6px;
    border-radius: 24px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 46;
    gap: 2px;
  }
  .draw-rail.mobile-tools-open .draw-rail-divider { width: 1px; height: 22px; margin: 0 2px; }
  .draw-rail.mobile-tools-open .draw-tool-btn { width: 36px; height: 36px; }
  .draw-rail.mobile-tools-open .draw-tool-btn svg { width: 17px; height: 17px; }

  /* Rounder, lighter controls read as an app, not a technical form —
     Blueprint's sharp 2px corners work on a dense desktop panel, less so
     stretched across a phone screen with lots of open space around them. */
  #ticker-input, #search-btn, .interval-select, .toolbar-strategy {
    border-radius: 9px;
    border-width: 1px;
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .mobile-nav-icon { width: 19px; height: 19px; }

  .mobile-nav-btn.active { color: var(--ink); font-weight: 700; border-top: 2px solid var(--ink); }

  /* Sniper link — same visual as a nav button but navigates to a new page */
  .mobile-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
  }

  /* ---- Altro: account row + menu items (Script Pine, Saldi) ---- */
  .altro-account-slot .auth-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .altro-account-slot .auth-user-email {
    max-width: none;
    flex: 1;
    font-size: 13px;
  }
  .altro-account-slot #auth-toggle-btn,
  .altro-account-slot #auth-logout-btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  .altro-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 4px;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
  }
  .altro-menu-item:first-of-type { border-top: none; }
  .altro-menu-item.hidden { display: none; }

  .altro-menu-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bg-panel);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .altro-menu-icon svg { width: 15px; height: 15px; }

  .altro-menu-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
  .altro-menu-title { font-size: 13.5px; color: var(--ink); }
  .altro-menu-sub { font-size: 10.5px; color: var(--ink-dim); }
  .altro-menu-chev { color: var(--ink-dim); font-size: 15px; }

  .wl-asset-btn {
    padding: 9px 0;
    font-size: 13px;
  }

  .layer-toggle { padding: 8px 0; font-size: 14px; }

  .watchlist-quickbar button[type="submit"],
  .pine-actions button,
  .pine-params-form button[type="submit"] {
    min-height: 40px;
  }

  .params-form input[type="number"],
  .params-form input[inputmode="decimal"],
  .params-form select,
  .interval-select,
  #pine-script-name,
  .pine-script-select {
    font-size: 14px;
    padding: 9px 8px;
  }

  .suggestions { font-size: 14px; }

  /* Compliance: the disclaimer must stay reachable even in the fixed
     app-shell, not disappear because there's no room for a normal footer.
     Default clears just the bottom nav (52px) -- the extra 60px for the
     chart-strip only applies on the chart screen itself (see override
     below); every other screen (Opera, Lab, Sorveglia, Struttura, Script
     Pine, Bacheca...) was losing an extra unexplained 60px at the bottom
     to a floating gap, with the disclaimer bar sitting mid-air above it
     and covering the last row of real content (e.g. Notional/Margine
     richiesto on Opera). */
  .disclaimer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom));
    z-index: 45;
    font-size: 8px;
    line-height: 1.25;
    padding: 3px 8px;
    border-top: 1px solid var(--border-strong);
  }
  /* Chart screen only: the chart-strip sits between the disclaimer and the
     bottom nav, so push the disclaimer up to clear it too. */
  .mobile-chart-strip:not(.hidden) ~ .disclaimer {
    bottom: calc(52px + env(safe-area-inset-bottom) + 60px);
  }
}

/* ── Backtest Lab (independent panel) ─────────────────────────────── */
.lab-panel { padding: 12px !important; }

.lab-ticker-row { display: flex; align-items: center; gap: .5rem; }
.lab-ticker-row .lab-ticker-hero { flex: 1; }
.lab-exchange-select { padding: .35rem .4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); font-size: .78rem; cursor: pointer; white-space: nowrap; }

.lab-ticker-hero {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
  cursor: text;
}
.lab-ticker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.lab-ticker-text { flex: 1; min-width: 0; }
.lab-ticker-val {
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 700;
  color: var(--ink); display: block;
  line-height: 1; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lab-ticker-sub { font-size: 9.5px; color: var(--ink-dim); }
.lab-ticker-input {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  border: none; outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  padding: 10px 12px 10px 28px;
  border-radius: 10px;
  cursor: text;
  opacity: 0;
}
.lab-ticker-input:focus {
  opacity: 1;
  background: var(--bg-panel);
  z-index: 2;
}
/* #lab-suggestions inherits position:fixed + z-index:60 from .suggestions
   (JS sets left/top via getBoundingClientRect). No override needed. */

.lab-tf-row {
  display: flex; gap: 5px; margin-bottom: 12px;
}
.lab-tf-btn {
  flex: 1;
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 7px;
  padding: 6px 2px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  color: var(--ink-dim); cursor: pointer;
  text-align: center; text-transform: uppercase;
}
.lab-tf-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.lab-divider {
  height: 1px; background: var(--border);
  margin: 0 -12px 12px;
}

.lab-strat-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}
.lab-strat-label {
  font-size: 11px; font-weight: 600; color: var(--ink-dim);
}
.lab-strategy-select {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 7px;
  padding: 4px 7px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--stamp); font-weight: 700;
  max-width: 140px;
}

.lab-params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px; margin-bottom: 12px;
}
.lab-params-grid label {
  display: flex; flex-direction: column;
  gap: 3px; font-size: 9px; font-weight: 500;
  color: var(--ink-dim); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lab-params-grid label.full-width { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
.lab-params-grid input[type=number],
.lab-params-grid input[inputmode="decimal"],
.lab-params-grid select {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 7px;
  padding: 5px 7px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink);
  outline: none; width: 100%;
}
.lab-params-grid input[type=number]:focus,
.lab-params-grid input[inputmode="decimal"]:focus,
.lab-params-grid select:focus { border-color: var(--accent); }

.lab-bt-details {
  margin-bottom: 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
  font-size: 11px; color: var(--ink-dim);
}
.lab-bt-details summary {
  cursor: pointer; font-size: 10.5px; color: var(--ink-dim); user-select: none;
}
.lab-bt-params {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.lab-bt-params label {
  display: flex; flex-direction: column;
  gap: 3px; font-size: 9px; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.lab-bt-params input {
  background: var(--bg-panel); border: 1.5px solid var(--border-strong);
  border-radius: 7px; padding: 5px 7px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink);
}

.lab-action-row { display: flex; gap: 7px; margin-bottom: 12px; }
.lab-btn-opt {
  flex: 1; background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 9px; padding: 9px 6px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink-dim); cursor: pointer;
}
.lab-btn-opt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lab-btn-opt:disabled, .lab-btn-run:disabled { opacity: 0.55; cursor: not-allowed; }
.lab-grid-toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 10.5px; color: var(--ink-dim); margin-bottom: 4px;
}
.lab-grid-toggle input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
#lab-grid-toggle-wrap.hidden { display: none; }
.lab-btn-run {
  flex: 1.4; background: var(--ink); border: 1.5px solid var(--ink);
  border-radius: 9px; padding: 9px 6px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--bg); cursor: pointer;
}

.lab-status {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim);
  text-align: center; padding: 8px; margin-bottom: 8px;
}

.lab-result-block {
  background: var(--bg-panel);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px; padding: 12px; margin-bottom: 9px;
}
.lab-result-meta {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-dim); margin-bottom: 10px;
  line-height: 1.6;
}
.lab-result-meta span { color: var(--accent); }
.lab-result-meta .meta-dates { color: var(--ink-dim); font-size: 9px; }
.lab-trades-link {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}

.lab-return-hero {
  display: flex; align-items: baseline;
  gap: 10px; margin-bottom: 12px;
}
.lab-return-val {
  font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  color: var(--bull); line-height: 1;
}
.lab-return-val.neg { color: var(--bear); }
.lab-return-side { font-size: 10px; color: var(--ink-dim); line-height: 1.6; }
.lab-return-side b { color: var(--bull); }
.lab-return-side b.neg { color: var(--bear); }

.lab-equity-canvas {
  display: block; width: 100%; margin-bottom: 12px;
  border-radius: 4px;
}

.lab-stat-chips {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 6px;
  margin-top: 2px;
}
.lab-stat-chips > div:nth-child(n+4) {
  grid-column: auto;
}
.lab-stat-chips .chip-lbl {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-dim); margin-bottom: 3px;
}
.lab-stat-chips .chip-val {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink);
}
.lab-stat-chips .chip-val.pos { color: var(--bull); }
.lab-stat-chips .chip-val.neg { color: var(--bear); }

.lab-apply-strip {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--bull) 6%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--bull) 25%, transparent);
  border-radius: 10px; padding: 10px 12px;
}
.lab-apply-actions {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.lab-apply-text {
  flex: 1; font-size: 10.5px; color: var(--ink); line-height: 1.5;
}
.lab-apply-text b { color: var(--accent); }
.lab-apply-btn {
  background: var(--bull); color: #fff; border: none;
  border-radius: 7px; padding: 7px 11px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  white-space: nowrap;
}
.lab-signal-btn {
  background: var(--bg-panel); color: var(--ink); border: 1.5px solid var(--border);
  border-radius: 7px; padding: 5px 10px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.lab-signal-btn:hover { border-color: var(--accent); color: var(--accent); }
.lab-signal-btn:disabled { opacity: 0.6; cursor: default; }
.lab-signal-status {
  font-size: 10.5px; padding: 6px 10px;
  border-radius: 7px; margin-top: 6px;
}
.lab-signal-status.ok {
  background: color-mix(in srgb, var(--bull) 10%, transparent);
  color: var(--bull); border: 1px solid color-mix(in srgb, var(--bull) 25%, transparent);
}
.lab-signal-status.error {
  background: color-mix(in srgb, var(--bear) 10%, transparent);
  color: var(--bear); border: 1px solid color-mix(in srgb, var(--bear) 25%, transparent);
}

/* Lab — trade detail drawer */
.lab-trades-drawer {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 12px 12px 16px;
}
.lab-trades-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.lab-trades-header span {
  font-size: 11px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.lab-trades-close {
  background: none; border: none; padding: 2px 6px;
  font-size: 13px; color: var(--ink-dim); cursor: pointer;
  border-radius: 4px;
}
.lab-trades-close:hover { background: var(--border); }
.lab-trades-body { overflow-x: auto; }
.lab-trades-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}
.lab-trades-table th {
  text-align: right; padding: 3px 6px;
  color: var(--ink-dim); font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.lab-trades-table th:first-child,
.lab-trades-table th:nth-child(2) { text-align: left; }
.lab-trades-table td {
  padding: 4px 6px; text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  vertical-align: middle;
}
.lab-trades-table td.td-num,
.lab-trades-table td.td-dir,
.lab-trades-table td.td-date { text-align: left; }
.lab-trades-table .bull { color: var(--bull); font-weight: 600; }
.lab-trades-table .bear { color: var(--bear); font-weight: 600; }
.lab-trades-table .pos { color: var(--bull); font-weight: 600; }
.lab-trades-table .neg { color: var(--bear); font-weight: 600; }
.lab-trades-table tr:last-child td { border-bottom: none; }
.lab-trades-table tr.oos-row td { opacity: 0.65; }
.lab-trades-table tr.oos-separator td {
  text-align: center;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--ink-dim);
  background: var(--surface-alt, var(--surface));
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  letter-spacing: 0.02em;
}
.oos-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 14px;
  opacity: 0.8;
}

@media (max-width: 480px) {
  .brand { font-size: 12px; }
  .stat-value { font-size: 14px; }
  .pine-editor .CodeMirror { height: 180px; font-size: 12px; }
}

/* ── Trading automatico ── */
.trading-auto-section { margin-top: 1.5rem; }
.trading-auto-header { align-items: center; }
.trading-auto-badge { font-size: .7rem; font-weight: 600; color: #e67e22; background: #fff3cd; border-radius: 4px; padding: 2px 6px; }
.trading-auto-hint { margin-bottom: .75rem; }
.trading-cred-list { display: flex; flex-direction: column; gap: .75rem; }
.trading-cred-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.trading-cred-exchange-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; background: var(--bg-raised); }
.trading-cred-name { font-weight: 600; font-size: .85rem; }
.trading-enabled-toggle { display: flex; align-items: center; gap: .4rem; font-size: .8rem; cursor: pointer; }
.trading-enabled-toggle input[type="checkbox"] { accent-color: var(--accent); }
.trading-cred-details { border-top: 1px solid var(--border); }
.trading-cred-details > summary { padding: .5rem .75rem; cursor: pointer; font-size: .8rem; color: var(--accent); }
.trading-cred-fields { display: flex; flex-direction: column; gap: .6rem; padding: .75rem; background: var(--bg-panel); }
.trading-cred-fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; font-weight: 500; color: var(--ink); }
.trading-cred-fields input, .trading-cred-fields select { width: 100%; padding: .35rem .5rem; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg); color: var(--ink); font-size: .82rem; font-family: var(--font-sans); }
.trading-size-row { display: flex; gap: .75rem; }
.trading-size-row label { flex: 1; }
.trading-save-btn { align-self: flex-start; padding: .35rem .9rem; background: var(--accent); color: #fff; border: none; border-radius: 4px; font-size: .82rem; cursor: pointer; }
.trading-save-btn:hover { opacity: .88; }
.trading-save-status { font-size: .75rem; color: var(--accent); }

/* ── Ordine manuale ── */
/* ── Manual order form (TV-Hub style) ── */
.manual-order-form { display: flex; flex-direction: column; gap: .65rem; }

/* Exchange + Pair row */
.mo-row { display: flex; gap: .6rem; }
.mo-field { display: flex; flex-direction: column; gap: .22rem; }
.mo-field-grow { flex: 1; }
.mo-label { font-size: .72rem; font-weight: 600; color: var(--fg-muted, #888); text-transform: uppercase; letter-spacing: .04em; }
.mo-select, .mo-input { width: 100%; padding: .38rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); font-size: .82rem; }

/* BUY / SELL tabs */
.mo-side-tabs { display: flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.mo-side-tab { flex: 1; padding: .45rem; border: none; background: var(--bg); color: var(--fg-muted, #888); font-size: .85rem; font-weight: 700; cursor: pointer; letter-spacing: .05em; transition: background .15s, color .15s; }
.mo-buy-tab.mo-tab-active { background: var(--bull); color: var(--accent-ink); }
.mo-sell-tab.mo-tab-active { background: var(--bear); color: #fff; }
.mo-side-tab:not(.mo-tab-active):hover { background: var(--bg-panel); }

/* Size mode radios */
.mo-size-mode-row { display: flex; gap: 1rem; }
.mo-radio-label { display: flex; align-items: center; gap: .3rem; font-size: .78rem; cursor: pointer; }

/* Slider row */
.mo-slider-row { display: flex; align-items: center; gap: .5rem; }
.mo-slider { flex: 1; height: 4px; accent-color: #3a7bd5; cursor: pointer; }
.mo-slider-val-wrap { display: flex; align-items: center; gap: .2rem; }
.mo-slider-val-input { width: 54px; padding: .3rem .35rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }
.mo-slider-unit { font-size: .78rem; color: var(--fg-muted, #888); min-width: 2rem; }

/* Execute button */
.mo-execute-btn { width: 100%; padding: .55rem; border: none; border-radius: 4px; font-size: .9rem; font-weight: 700; cursor: pointer; letter-spacing: .06em; transition: background .15s; }
.mo-execute-buy { background: var(--bull); color: var(--accent-ink); }
.mo-execute-buy:hover { filter: brightness(1.08); }
.mo-execute-sell { background: var(--bear); color: #fff; }
.mo-execute-sell:hover { filter: brightness(1.08); }

.manual-order-status { font-size: .8rem; padding: .35rem .5rem; border-radius: 4px; background: var(--bg-raised, var(--bg-panel)); }
.manual-order-status.ok { color: var(--bull); }
.manual-order-status.error { color: var(--bear); }

/* Token Sniper now lives at /sniper as its own standalone app (frontend/sniper.html) */
.tab-link { display: flex; align-items: center; text-decoration: none; }

/* ── Alert log (storico) ── */
.section-title-row { display: flex; align-items: center; justify-content: space-between; }
.section-action-btn { padding: .2rem .6rem; font-size: .75rem; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--ink-dim); cursor: pointer; }
.section-action-btn:hover { border-color: var(--ink-dim); color: var(--ink); }

.alert-log-cards { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .3rem; }
/* ── Storico alert: timeline invece della lista piatta ──
   Stessa <li class="alert-log-row"> generata da renderAlertLog(), solo il
   contenitore diventa una linea temporale: pallino colorato a sinistra +
   traccia verticale che collega le voci, come nel prototipo. */
#alert-log-list { position: relative; padding-left: 2px; }
.alert-log-row { display: flex; align-items: flex-start; gap: .55rem; padding: 0 0 .85rem; font-size: .8rem; position: relative; }
.alert-log-row::before {
  content: ""; position: absolute; left: 5px; top: 15px; bottom: 0; width: 1px;
  background: var(--border);
}
.alert-log-row:last-child::before { display: none; }
.al-icon {
  font-size: .62rem; width: 11px; height: 11px; line-height: 11px; text-align: center;
  border-radius: 50%; flex: 0 0 auto; margin-top: 2px; z-index: 1;
  background: var(--bg-panel); border: 2px solid var(--border-strong);
}
.al-icon.bull { color: var(--bull); border-color: var(--bull); }
.al-icon.bear { color: var(--bear); border-color: var(--bear); }
.al-body { flex: 1; display: flex; flex-wrap: wrap; gap: .15rem .4rem; min-width: 0; }
.al-symbol { font-weight: 700; font-size: .82rem; }
.al-strat { color: var(--ink-dim); font-size: .74rem; }
.al-label { font-size: .78rem; flex-basis: 100%; }
.al-time { color: var(--ink-faint); font-size: .7rem; font-family: var(--font-mono); white-space: nowrap; }

/* ── Price alerts form + list ── */
.pa-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0; }
.pa-form input[type="text"],
.pa-form input[type="number"],
.pa-form select { padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--ink); font-size: .82rem; }
.pa-form input[type="text"] { width: 7rem; }
.pa-form input[type="number"] { width: 8rem; }
.pa-form label { display: flex; align-items: center; gap: .25rem; font-size: .78rem; cursor: pointer; }
.pa-form button[type="submit"] { padding: .3rem .7rem; background: var(--accent); color: var(--bg); border: none; border-radius: 4px; font-size: .88rem; font-weight: 700; cursor: pointer; }
.pa-form button[type="submit"]:hover { opacity: .85; }

.pa-list { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .4rem; }
/* ── Card alert su prezzo: piu' chiare per gli alert attivi ── */
.pa-card {
  padding: .7rem .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  font-size: .8rem;
}
.pa-card.pa-inactive { opacity: .55; box-shadow: none; }
.pa-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pa-symbol { font-weight: 700; font-size: .85rem; }
.pa-dir { font-weight: 600; font-size: .8rem; }
.pa-dir.bull { color: var(--bull); }
.pa-dir.bear { color: var(--bear); }
.pa-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .82rem; margin-left: auto; }
.pa-badge { padding: .12rem .4rem; border-radius: 99px; font-size: .68rem; font-weight: 600; letter-spacing: .03em; }
.pa-badge.once { background: var(--warn-soft); color: var(--warn); }
.pa-badge.repeat { background: var(--bull-soft); color: var(--bull); }
.pa-badge.inactive { background: var(--bg-sunk); color: var(--ink-faint); border: 1px solid var(--border); }
.pa-note { font-size: .75rem; color: var(--ink-dim); margin: .35rem 0 0; }
.pa-meta { font-size: .72rem; color: var(--ink-faint); font-family: var(--font-mono); margin: .3rem 0 0; }
.pa-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.pa-toggle-btn, .pa-del-btn { padding: .25rem .55rem; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--ink); font-size: .75rem; cursor: pointer; }
.pa-toggle-btn:hover { border-color: var(--ink-dim); }
.pa-del-btn { color: var(--bear); border-color: transparent; }
.pa-del-btn:hover { border-color: var(--bear); background: var(--bear-soft); }

/* ── Watchlist per-strategy sub-rows ── */
.strat-sub-row { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; flex-wrap: wrap; }
.wl-freq-select { padding: .2rem .35rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--ink); font-size: .75rem; cursor: pointer; }
.wl-test-btn { padding: .2rem .45rem; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; font-size: .8rem; }
.wl-test-btn:hover { background: var(--bg-raised); }
.strat-stats { color: var(--ink-dim); font-size: .73rem; }

/* ── Alert toast notifications ── */
.alert-toast-container { position: fixed; bottom: 1.2rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
.alert-toast { padding: .55rem .8rem; border-radius: 6px; font-size: .8rem; font-family: var(--font-sans); box-shadow: 0 4px 16px rgba(0,0,0,.25); pointer-events: auto; max-width: 260px; border-left: 3px solid transparent; opacity: 1; transition: opacity .4s ease; }
.alert-toast.bull { background: var(--bg-panel); border-color: var(--bull); color: var(--ink); }
.alert-toast.bear { background: var(--bg-panel); border-color: var(--bear); color: var(--ink); }
.alert-toast.fade-out { opacity: 0; }
.toast-strat { display: block; font-size: .72rem; color: var(--ink-dim); margin-top: .1rem; }

/* ---- Lab: optimisation mode picker ---- */
/* The three modes differ in a way the user has to be able to weigh: speed
   against whether the answer is reproducible. The copy says that outright
   rather than naming the algorithms. */
.lab-mode-picker {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border, #e0e0e0);
  border: 1px solid var(--border, #e0e0e0);
  margin: 10px 0;
}
.lab-mode-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio name" "radio desc";
  gap: 2px 10px;
  align-items: start;
  padding: 9px 12px;
  background: var(--bg, #fff);
  cursor: pointer;
}
.lab-mode-opt input { grid-area: radio; margin-top: 3px; }
.lab-mode-name {
  grid-area: name;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink, #111);
}
.lab-mode-name em {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 5px; margin-left: 6px;
  background: var(--ink, #111); color: var(--bg, #fff);
}
.lab-mode-desc {
  grid-area: desc;
  font-size: 11px; line-height: 1.45; color: var(--ink-dim, #666666);
}
.lab-mode-desc strong { color: var(--ink, #111); font-weight: 600; }
.lab-mode-opt:has(input:checked) { background: var(--bg-raised, #f5f5f5); }
.lab-mode-opt:has(input:checked) .lab-mode-desc { color: var(--ink, #444); }
.lab-mode-opt.hidden { display: none; }

/* ---- Lab: regime gate ---- */
.lab-regime-box {
  border: 1px solid var(--border, #e0e0e0);
  border-left-width: 3px;
  padding: 10px 12px; margin: 10px 0;
  font-size: 11.5px; line-height: 1.5;
}
.lab-regime-head { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.lab-regime-head.ok { color: var(--bull, #00c97d); }
.lab-regime-head.warn { color: var(--bear, #ff4560); }
.lab-regime-reason { color: var(--ink-dim, #666666); }
.lab-regime-stats {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; color: var(--ink-dim, #666666);
  margin-top: 6px; letter-spacing: .02em;
}
.lab-regime-det { margin-top: 7px; font-size: 11px; }
.lab-regime-det.ok { color: var(--bull, #00c97d); }
.lab-regime-det.warn { color: var(--bear, #ff4560); }
.lab-regime-note {
  margin-top: 5px; font-size: 10.5px; color: var(--ink-dim, #666666); font-style: italic;
}

/* ---- Lab: branch comparison ---- */
.lab-branch-box { margin: 10px 0; }
.lab-branch-title {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim, #666666); margin-bottom: 6px;
}
.lab-branch-tbl {
  width: 100%; border-collapse: collapse; font-size: 11px;
  border: 1px solid var(--border, #e0e0e0);
}
.lab-branch-tbl th {
  text-align: left; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-dim, #666666);
  padding: 6px 8px; border-bottom: 1px solid var(--border, #e0e0e0);
  white-space: nowrap;
}
.lab-branch-tbl td {
  padding: 6px 8px; border-bottom: 1px solid var(--border, #1a2535);
  color: var(--ink-dim, #666666);
}
.lab-branch-tbl tr:last-child td { border-bottom: none; }
.lab-branch-tbl td.n {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.lab-branch-tbl tr.chosen td { color: var(--ink, #111); font-weight: 600; }
.lab-branch-pick {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 5px; background: var(--ink, #111); color: var(--bg, #fff);
}
.lab-branch-samp {
  font-size: 9px; font-weight: 600; letter-spacing: .06em;
  color: var(--bear, #ff4560); cursor: help;
}
.lab-branch-tr { color: var(--ink-dim, #666666); font-size: 10px; }
/* ---- Segnalazioni ---- */
.issues-counts { display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.issues-count {
  font-size: 11px; color: var(--ink-dim, #666666);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.issues-count b {
  font-family: var(--font-mono, monospace); font-size: 14px;
  color: var(--ink, #111); font-variant-numeric: tabular-nums;
}
.issues-count.is-aperto b { color: var(--bear, #ff4560); }

.issue-form { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.issue-form input, .issue-form textarea, .issue-form select {
  font-family: inherit; font-size: 12px; padding: 7px 9px;
  border: 1px solid var(--border, #e0e0e0); background: var(--bg, #fff);
  color: var(--ink, #111); border-radius: 2px; width: 100%;
}
.issue-form textarea { resize: vertical; line-height: 1.45; }
.issue-form-row { display: flex; gap: 7px; }
.issue-form-row select { flex: 1; }
.issue-form-row button {
  padding: 7px 16px; font-size: 12px; font-weight: 600; font-family: inherit;
  background: var(--ink, #111); color: var(--bg, #fff);
  border: none; border-radius: 2px; cursor: pointer; white-space: nowrap;
}
.issue-form-status { font-size: 11px; color: var(--ink-dim, #666666); min-height: 14px; margin: 0; }

.issues-list { display: flex; flex-direction: column; gap: 1px; background: var(--border, #e0e0e0); }
.issues-empty { font-size: 12px; color: var(--ink-dim, #666666); padding: 14px 0; }

.issue-card { background: var(--bg, #fff); padding: 11px 12px; border-left: 3px solid transparent; }
.issue-card.is-aperto { border-left-color: var(--bear, #ff4560); }
.issue-card.is-in-corso { border-left-color: #b8860b; }
.issue-card.is-risolto { border-left-color: var(--bull, #00c97d); opacity: .72; }
.issue-card.is-scartato { opacity: .5; }

/* ── Bacheca: board a tre colonne invece della lista piatta ──
   Stessa card di prima (issue-card, invariata) e stesso form di risposta;
   qui cambia solo come vengono raggruppate — per stato, in tre colonne.
   "riaperto" resta nella colonna Aperto (e' ancora da fare), "scartato"
   in Risolto (e' comunque chiuso). Di default le colonne sono impilate
   (il pannello di sinistra e' stretto, 260px); solo alla vista larga
   della bacheca (vedi piu' sotto) stanno una accanto all'altra. */
.issues-board { display: flex; flex-direction: column; gap: 14px; }
.board-col { min-width: 0; }
.board-col-hd {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-dim); margin-bottom: 8px; padding: 0 2px;
}
.board-col-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ink-faint); }
.board-col-dot.is-aperto { background: var(--bear); }
.board-col-dot.is-in-corso { background: var(--warn); }
.board-col-dot.is-risolto { background: var(--bull); }
.board-count {
  margin-left: auto; background: var(--bg-sunk); border-radius: 99px;
  padding: 1px 7px; font-size: 10px; color: var(--ink-faint); font-family: var(--font-mono);
}
.board-col-body { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.board-col-body:empty { display: none; }
.board-col-empty { padding: 10px 12px; margin: 0; background: var(--bg); }

.issue-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.issue-status {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim, #666666); flex-shrink: 0;
}
.issue-prio {
  font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 5px; border: 1px solid var(--border, #e0e0e0); color: var(--ink-dim, #666666); flex-shrink: 0;
}
.issue-prio.p-alta { color: var(--bear, #ff4560); border-color: currentColor; }
.issue-title { font-size: 12.5px; font-weight: 600; color: var(--ink, #111); flex: 1 1 100%; line-height: 1.4; }
.issue-detail { font-size: 11.5px; color: var(--ink-dim, #666666); margin: 5px 0 0; line-height: 1.5; white-space: pre-wrap; }
.issue-meta { font-size: 10px; color: var(--ink-dim, #666666); margin: 6px 0 0; }
.issue-meta code { font-size: 9.5px; }

/* Il blocco di Claude si distingue dal testo della segnalazione: chi legge
   deve poter dire a colpo d'occhio cosa ha scritto e cosa gli è stato risposto. */
.issue-res {
  margin-top: 9px; padding: 9px 11px;
  background: var(--bg-raised, #f5f5f5); border-left: 2px solid var(--accent, #000000);
}
.issue-res-head {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, #000000); margin-bottom: 5px;
}
.issue-res-summary { font-size: 12px; color: var(--ink, #222); margin: 0; line-height: 1.5; font-weight: 500; }
.issue-res-detail {
  font-family: var(--font-mono, monospace); font-size: 10.5px; line-height: 1.55;
  color: var(--ink-dim, #666666); margin: 7px 0 0; white-space: pre-wrap;
  max-height: 260px; overflow-y: auto;
}
.issue-res-next { font-size: 11.5px; color: var(--ink, #333); margin: 7px 0 0; line-height: 1.5; }
.issue-res-commit { font-size: 10px; color: var(--ink-dim, #666666); margin: 5px 0 0; }

/* Conteggio delle segnalazioni aperte sulla voce in "Altro": serve a vedere
   che c'e' qualcosa in sospeso senza dover aprire il pannello. */
.altro-issues-badge {
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bear, #ff4560); color: #fff; border-radius: 9px;
  margin-left: auto; margin-right: 6px; flex-shrink: 0;
}
.altro-issues-badge.hidden { display: none; }

/* ---- Lab: su quali dati e' girata l'ottimizzazione ---- */
/* Mostrato sempre, non solo quando diverge: il risultato non e' riproducibile
   a mano finche' non si sa su che feed e' stato prodotto. */
.lab-data-used {
  border: 1px solid var(--border, #e0e0e0); border-left-width: 3px;
  padding: 9px 11px; margin: 10px 0; font-size: 11.5px;
}
.lab-data-used.mismatch { border-left-color: var(--bear, #ff4560); }
.lab-du-head {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim, #666666); margin-bottom: 7px;
}
.lab-data-used.mismatch .lab-du-head { color: var(--bear, #ff4560); }
.lab-du-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 2px 0; color: var(--ink-dim, #666666);
}
.lab-du-row b {
  font-family: var(--font-mono, monospace); color: var(--ink, #111); font-weight: 600;
}
.lab-du-note {
  margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-dim, #666666);
}
.lab-data-used.mismatch .lab-du-note { color: var(--ink, #333); }
.issues-retry {
  display: inline-block; margin-top: 8px; padding: 5px 12px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  background: var(--ink, #111); color: var(--bg, #fff);
  border: none; border-radius: 2px; cursor: pointer;
}

/* ---- Interruttore tema ---- */
.theme-toggle-btn {
  background: none; border: 1px solid var(--border, #e0e0e0);
  color: var(--ink-dim, #666); border-radius: 2px;
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  font-size: 13px; line-height: 1; flex-shrink: 0;
}
.theme-toggle-btn:hover { color: var(--ink, #000); border-color: var(--border-strong, #000); }

/* --- Filtri sul risultato dell'ottimizzazione ------------------------------
   Chiusi di default: sono un'eccezione, non il percorso normale. Il badge sul
   summary esiste perche' un filtro attivo dentro un pannello chiuso spiega da
   solo un risultato che altrimenti sembra sbagliato. */
.lab-filters {
  border: 1px solid var(--border, #e0e0e0);
  background: var(--bg-panel, #fff);
  margin: 10px 0;
  font-size: 12px;
}
.lab-filters > summary {
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink, #111);
  display: flex; align-items: center; gap: 8px;
}
.lab-filters-badge {
  font-weight: 500;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent, #2962ff);
  color: #fff;
}
.lab-filters-hint {
  margin: 0 12px 10px;
  color: var(--ink-dim, #666);
  line-height: 1.45;
}
.lab-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px;
  padding: 0 12px 10px;
}
.lab-filters-grid label { display: flex; flex-direction: column; gap: 4px; }
.lab-filters-grid span { color: var(--ink-dim, #666); font-size: 11px; }
.lab-filters-grid input {
  padding: 6px 8px;
  border: 1px solid var(--border, #e0e0e0);
  background: var(--bg, #fff);
  color: var(--ink, #111);
  font: inherit;
  min-width: 0;
}
.lab-filters-clear {
  margin: 0 12px 12px;
  padding: 5px 10px;
  border: 1px solid var(--border, #e0e0e0);
  background: var(--bg-raised, #f7f7f7);
  color: var(--ink-dim, #666);
  cursor: pointer;
  font: inherit; font-size: 11px;
}
.lab-filters-clear:hover { color: var(--ink, #111); }

/* Valore della serie ancorato al punto sulla curva, non alla punta del
   cursore. `pointer-events: none` perche' altrimenti l'etichetta si mette fra
   il mouse e il grafico e il crosshair si blocca sotto di essa. */
.series-value-badge {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  padding: 1px 6px;
  font: 500 11px/1.5 'JetBrains Mono', 'IBM Plex Mono', monospace;
  color: var(--ink, #111);
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-left-width: 3px;
  white-space: nowrap;
}

/* --- Archivio strategie ---------------------------------------------------- */
.archive-cards { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arch-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  padding: 8px 10px;
  font-size: 12px;
}
.arch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.arch-symbol { font-weight: 700; color: var(--ink); }
.arch-strat { color: var(--ink-dim); }
.arch-src {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-dim); border: 1px solid var(--border); padding: 0 5px;
}
.arch-date { margin-left: auto; color: var(--ink-dim); font-size: 11px; }
.arch-metrics {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.arch-metrics .bull { color: var(--bull); font-weight: 600; }
.arch-metrics .bear { color: var(--bear); font-weight: 600; }
.arch-pending, .arch-failed { margin-top: 6px; color: var(--ink-dim); font-style: italic; }
.arch-failed { color: var(--bear); font-style: normal; }
.arch-params {
  margin-top: 6px; color: var(--ink-dim); font-size: 11px;
  word-break: break-word;
}
.arch-note { margin-top: 4px; color: var(--ink); }
.arch-actions { display: flex; gap: 6px; margin-top: 8px; }
.arch-actions button {
  font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--ink-dim);
}
.arch-actions button:hover { color: var(--ink); }
.arch-del:hover { color: var(--bear); border-color: var(--bear); }
.lab-archive-btn {
  font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--ink-dim);
}
.lab-archive-btn:hover { color: var(--ink); }

/* --- Diario degli ordini automatici ---------------------------------------- */
.journal-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.journal-row {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-dim);
  background: var(--bg-panel);
  padding: 6px 8px;
  font-size: 11.5px;
}
.journal-row.eseguito { border-left-color: var(--bull); }
.journal-row.fallito { border-left-color: var(--bear); }
.journal-row.saltato { border-left-color: var(--accent); }
.jr-mark { font-weight: 700; width: 12px; text-align: center; color: var(--ink-dim); }
.journal-row.eseguito .jr-mark { color: var(--bull); }
.journal-row.fallito .jr-mark { color: var(--bear); }
.jr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jr-head { color: var(--ink); }
.jr-detail { color: var(--ink-dim); font-size: 10.5px; word-break: break-word; }
.jr-when { margin-left: auto; color: var(--ink-dim); font-size: 10.5px; white-space: nowrap; }
.lab-regime-sub { color: var(--ink-dim); font-weight: 400; }

/* --- Finestra di avanzamento dell'ottimizzazione ---------------------------
   Una ricerca lunga, senza niente a schermo, è indistinguibile da una bloccata:
   è la ragione per cui è stata chiesta. */
.opt-progress {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  padding: 16px;
}
@media (min-width: 761px) { .opt-progress { align-items: center; } }
.opt-progress-card {
  width: min(560px, 100%);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
}
.opt-progress.done .opt-progress-card { border-top-color: var(--bull); }
.opt-progress.failed .opt-progress-card { border-top-color: var(--bear); }
.opt-progress-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.opt-progress-time { margin-left: auto; color: var(--ink-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.opt-progress-close {
  border: 0; background: transparent; color: var(--ink-dim);
  font: inherit; cursor: pointer; padding: 0 2px;
}
.opt-progress-close:hover { color: var(--ink); }
.opt-spinner {
  width: 11px; height: 11px; flex: 0 0 auto;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%;
  animation: opt-spin .9s linear infinite;
}
.opt-progress.done .opt-spinner, .opt-progress.failed .opt-spinner { animation: none; border-top-color: var(--border); }
@keyframes opt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .opt-spinner { animation: none; } }
.opt-progress-sub { padding: 8px 12px 0; color: var(--ink-dim); font-size: 11.5px; }
.opt-progress-anim {
  display: block; width: 100%; height: 148px;
  margin: 8px 0 0;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.opt-progress-log {
  flex: 1 1 auto;
  overflow: auto;
  margin: 8px 0 0;
  padding: 0 12px 12px;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.55;
}
.opt-progress-log li { display: flex; gap: 8px; color: var(--ink); }
.opt-progress-log .opt-t {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  flex: 0 0 44px;
  text-align: right;
}
.opt-progress-foot {
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink);
}
.opt-progress-foot.ok { color: var(--bull); }
.opt-progress-foot.error { color: var(--bear); }
.arch-how { margin-top: 5px; font-size: 10.5px; color: var(--ink-dim); }
.arch-warn { margin-top: 4px; font-size: 10.5px; color: var(--accent); }

/* --- Risposte alle segnalazioni ------------------------------------------- */
.issue-reply {
  margin-top: 6px; padding: 6px 9px; font-size: 12px;
  border-left: 2px solid var(--border); background: var(--bg-raised);
}
.issue-reply.from-claude { border-left-color: var(--accent); }
.issue-reply p { margin: 3px 0 0; color: var(--ink); white-space: pre-wrap; }
.ir-who { font-size: 10.5px; color: var(--ink-dim); font-weight: 600; }
.ir-reopen {
  font-size: 10px; margin-left: 6px; padding: 0 5px;
  border: 1px solid var(--bear); color: var(--bear);
}
.issue-reply-form { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.issue-reply-form textarea {
  width: 100%; padding: 6px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink); resize: vertical;
}
.irf-row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-dim); }
.irf-row button {
  margin-left: auto; font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--ink);
}
.irf-status { margin: 0; font-size: 11px; color: var(--ink-dim); }
.issue-card.is-riaperto { border-left-color: var(--bear); }
.issues-count.is-riaperto b { color: var(--bear); }

/* --- Pastiglia della ricerca in corso -------------------------------------
   Sta sopra la barra di navigazione su mobile e in basso a destra altrove. */
.opt-pill {
  position: fixed;
  right: 14px;
  bottom: 74px;
  z-index: 55;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-panel);
  color: var(--ink);
  font: inherit; font-size: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
@media (min-width: 761px) { .opt-pill { bottom: 18px; } }
.opt-pill.done { border-left-color: var(--bull); }
.opt-pill.failed { border-left-color: var(--bear); }
.opt-pill .op-text { font-variant-numeric: tabular-nums; }
.opt-pill .op-mark { font-weight: 700; }
.opt-pill.done .op-mark { color: var(--bull); }
.opt-pill.failed .op-mark { color: var(--bear); }
.op-spin {
  width: 11px; height: 11px; flex: 0 0 auto;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%;
  animation: opt-spin .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .op-spin { animation: none; border-top-color: var(--accent); }
}
.opt-progress-stop {
  font: inherit; font-size: 11px; padding: 2px 9px; cursor: pointer;
  border: 1px solid var(--bear); background: transparent; color: var(--bear);
}
.opt-progress-stop:hover { background: var(--bear); color: var(--bg-panel); }
.opt-progress-stop:disabled { opacity: .5; cursor: default; }

/* --- Ricerca e schede richiudibili sulla bacheca --------------------------- */
.issues-tools { display: flex; gap: 6px; margin: 10px 0 6px; }
.issues-tools input[type="search"] {
  flex: 1; min-width: 0; padding: 7px 9px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
}
.issues-tools select {
  padding: 7px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--ink);
}
.issues-found { margin: 0 0 6px; font-size: 11px; color: var(--ink-dim); }
details.issue-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
details.issue-card > summary::-webkit-details-marker { display: none; }
details.issue-card > summary::after {
  content: "▸"; margin-left: auto; color: var(--ink-dim); font-size: 11px;
}
details.issue-card[open] > summary::after { content: "▾"; }
details.issue-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-trades-export {
  margin-left: auto; margin-right: 8px;
  font: inherit; font-size: 11.5px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--bull); background: transparent; color: var(--bull);
}
.lab-trades-export:hover { background: var(--bull); color: var(--bg-panel); }

/* Campo Pair dell'ordine manuale: i suggerimenti si ancorano al campo, non
   alla riga, altrimenti l'elenco si apre spostato rispetto a dove si scrive. */
.mo-pair-field { position: relative; }
.mo-pair-hint {
  margin: 4px 0 0; font-size: 10.5px; line-height: 1.35;
  color: var(--ink-dim);
}
.mo-pair-hint.ok { color: var(--accent); }
.mo-pair-hint.warn { color: var(--ink-dim); }

/* Archivio: il pulsante che porta la configurazione salvata sull'alert, e la
   riga che dice cosa e' stato applicato — senza, "attivato" e "attivato con i
   parametri giusti" si leggono uguali. */
.arch-alert {
  background: transparent; border: 1.5px solid var(--accent);
  color: var(--accent); border-radius: 7px;
  padding: 4px 9px; font-size: 10.5px; cursor: pointer;
}
.arch-alert:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.arch-alert:disabled { opacity: 0.6; cursor: default; }
.arch-status { margin: 6px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--ink-dim); }
.arch-status.ok { color: var(--accent); }
.arch-status.error { color: var(--bear, #ff4560); }

/* ============================================================
   Instrument — componenti nuovi
   ============================================================ */

/* I numeri che contano davvero prendono il serif: uno o due per
   schermata, mai in colonna (Instrument Serif non e' tabellare). */
.hero-num {
  font-family: var(--font-num);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

.risk-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  border-radius: 99px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 7px;
}

/* ── Ordine futures ── */
.futures-section {
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--warn);
  padding: 12px;
  margin-top: 14px;
}
.futures-badge {
  color: var(--warn) !important;
  background: var(--warn-soft) !important;
  border-color: color-mix(in srgb, var(--warn) 40%, transparent) !important;
}

.lev-block {
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: var(--warn-soft);
  border-radius: 6px;
  padding: 10px 11px;
  margin: 10px 0;
}
.lev-head { display: flex; align-items: baseline; gap: 9px; }
.lev-spacer { flex: 1; }
.lev-val {
  font-family: var(--font-num);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}
.lev-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  padding: 2px 8px;
}
.lev-cap-hot { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

.lev-slider, .mo-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 99px;
  background: var(--bg-sunk); outline: none; margin: 10px 0 5px;
}
.lev-slider::-webkit-slider-thumb, .mo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--bg-panel);
  cursor: grab; box-shadow: var(--shadow);
}
.lev-slider::-moz-range-thumb, .mo-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--bg-panel); cursor: grab;
}
.mo-slider::-webkit-slider-thumb { background: var(--accent); }
.mo-slider::-moz-range-thumb { background: var(--accent); }

.lev-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint);
}
.lev-mode {
  font-size: 11px; color: var(--ink-dim); margin-top: 7px;
  padding-top: 7px; border-top: 1px solid var(--border);
}
/* Kraken non ha isolated margin (vedi registry.py sul backend): qui il
   messaggio cambia colore per non farlo leggere come lo stesso avviso
   rassicurante che vale per gli altri quattro exchange. */
.lev-mode-warn { color: var(--danger); }

.futures-risk-note {
  color: var(--danger);
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  border-radius: 6px;
  padding: 6px 9px;
  margin: 6px 0;
}

.trading-cred-missing {
  color: var(--danger);
  font-size: 10px;
  font-weight: 600;
}

.futures-quote {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-raised);
  padding: 9px 11px;
  margin: 10px 0;
}
.fq-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.fq-row:last-child { border-bottom: none; }
.fq-row > span:first-child { color: var(--ink-dim); }
.fq-row > span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fq-liq > span:last-child { font-weight: 600; }
.fq-bad { color: var(--danger) !important; }
.fq-warn { color: var(--warn) !important; }
.fq-ok { color: var(--bull) !important; }

.futures-confirm {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px; font-size: 12px; line-height: 1.45;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  border-radius: 6px; cursor: pointer; margin-bottom: 10px;
}
.futures-confirm input { margin-top: 2px; flex-shrink: 0; }
#futures-execute-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Posizioni aperte ── */
.positions-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.pos-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); padding: 11px 12px;
}
.pos-item.leveraged { border-color: color-mix(in srgb, var(--warn) 45%, transparent); box-shadow: inset 3px 0 0 var(--warn); }
.pos-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pos-pnl { font-family: var(--font-num); font-size: 30px; line-height: 1; }
.pos-empty { color: var(--ink-faint); font-size: 12px; padding: 10px 0; }

/* Distanza dalla liquidazione: una lancetta su un nastro si legge prima
   di un numero in tabella — e' l'unico dato che conta finche' la
   posizione resta aperta. */
.liq-gauge { display: flex; flex-direction: column; align-items: center; margin: 8px 0 2px; }
.liq-gauge-svg { width: 168px; max-width: 100%; height: auto; }
.liq-arc { fill: none; stroke-width: 9; stroke-linecap: round; opacity: 0.55; }
.liq-arc-danger { stroke: var(--danger); }
.liq-arc-warn { stroke: var(--warn); }
.liq-arc-bull { stroke: var(--bull); }
.liq-gauge-needle { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transition: x2 .3s ease, y2 .3s ease; }
.liq-gauge-hub { fill: var(--ink); }
.liq-gauge-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; margin-top: -6px; font-weight: 600;
}
.liq-gauge-label.bear { color: var(--danger); }
.liq-gauge-label.warnc { color: var(--warn); }
.liq-gauge-label.bull { color: var(--bull); }
.liq-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; margin-top: 2px; }

/* ============================================================
   Instrument — impianto di navigazione
   Una sola barra a sinistra al posto di tre sistemi paralleli
   (rail + tab a destra + menu "Altro"). Ogni voce e' un intento:
   Analizza / Lab / Sorveglia / Opera / Scopri. Fuori da Analizza il
   grafico si toglie di mezzo e l'area di lavoro prende tutta la
   larghezza — il Lab, che e' la schermata piu' densa del prodotto,
   non puo' vivere in una colonna da 300px.
   ============================================================ */
.sidenav {
  flex: 0 0 var(--nav-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.sidenav-group { padding-bottom: 10px; }
.sidenav-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 6px 8px 7px;
}
.sidenav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink-dim);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sidenav-item:hover { background: var(--bg-raised); color: var(--ink); }
.sidenav-item.active { background: var(--bg-sunk); color: var(--ink); font-weight: 600; }
.sidenav-item.active::before {
  content: "";
  position: absolute;
  left: -8px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.sidenav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidenav-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--warn-soft);
  color: var(--warn);
}
.sidenav-foot {
  margin-top: auto;
  padding: 10px 8px 4px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* .sidenav is the desktop "single navigation" (see the comment above it in
   index.html) — it duplicates the bottom .mobile-nav below 760px and had no
   mobile rule at all, so it rendered as a full-height list of text items
   stacked above the chart, pushing every screen's real content off the
   bottom of a 375px viewport. This has to come after the unconditional
   `.sidenav { display: flex }` above (same specificity, source order wins)
   rather than living in the big ≤760px block earlier in the file, which sits
   before this rule and would otherwise lose the cascade. The bottom nav is
   the mobile router; .sidenav-item clicks/`.active` toggling in app.js are
   unaffected by hiding the container, since it's plain CSS display and not
   conditional rendering. */
@media (max-width: 760px) {
  .sidenav { display: none; }
}
.sys-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.sys-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bull);
  box-shadow: 0 0 0 3px var(--bull-soft);
  flex-shrink: 0;
}
.sys-led.off { background: var(--ink-faint); box-shadow: none; }

/* Il rail vecchio e il menu Altro sono sostituiti dalla sidebar: restano
   nel DOM perche' app.js ci si appoggia, ma non si vedono piu' su desktop. */
@media (min-width: 761px) {
  .cockpit > .rail { display: none; }
  .cockpit > .altro-panel { display: none; }

  /* Le tab del pannello restano il motore (app.js le usa per scegliere il
     contenuto), ma la sidebar e' l'interfaccia: mostrarle entrambe
     significherebbe di nuovo due navigazioni per la stessa cosa. */
  .right-panel > .tabs { display: none; }
  .right-panel > .drawer-header { display: none; }

  /* Il grafico non sparisce mai: e' il contesto di tutto il resto. Cambia
     solo quanto spazio si prende. In Analizza comanda lui; altrove si
     stringe a colonna e lascia il lavoro davanti, ma resta guardabile e
     vivo — un backtest o un ordine si leggono meglio con la serie sotto
     gli occhi. */
  .cockpit .chart-area { display: flex; min-width: 0; }
  .cockpit[data-area="analizza"] .chart-area { flex: 1 1 auto; }
  .cockpit[data-area="analizza"] .right-panel { flex: 0 0 320px; }

  .cockpit:not([data-area="analizza"]) .chart-area {
    flex: 0 0 clamp(300px, 32%, 520px);
    border-right: 1px solid var(--border);
  }
  .cockpit:not([data-area="analizza"]) .levels-panel.open { display: none; }

  /* Sotto i 1250px la colonna del grafico toglierebbe troppo al lavoro:
     diventa una fascia bassa sopra il contenuto invece che una colonna. */
  @media (max-width: 1250px) {
    .cockpit:not([data-area="analizza"]) { flex-wrap: wrap; }
    .cockpit:not([data-area="analizza"]) .chart-area {
      flex: 1 1 100%;
      max-height: 230px;
      border-right: none;
      border-bottom: 1px solid var(--border);
      order: -1;
    }
  }
  .cockpit:not([data-area="analizza"]) .right-panel {
    flex: 1 1 auto;
    border-left: none;
    background: var(--bg);
  }
  /* A tutta larghezza il contenuto va incolonnato, non steso su 1600px:
     una riga di testo lunga quanto lo schermo non si legge. */
  .cockpit:not([data-area="analizza"]) .tab-content.active {
    padding: 22px 26px 40px;
  }
  .cockpit:not([data-area="analizza"]) .tab-content.active > .panel {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
  }

  /* Il Lab su larghezza piena: impostazione a sinistra, risultato a destra.
     I blocchi del risultato stanno in un contenitore solo (creato da
     groupLabResultColumn), altrimenti la griglia li spinge nella riga che
     occupano nel DOM e la colonna destra resta vuota per mezzo schermo. */
  .cockpit[data-area="lab"] .lab-panel {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 0 26px;
    align-items: start;
    max-width: 1180px;
  }
  .cockpit[data-area="lab"] .lab-panel > *:not(.lab-results-col) { grid-column: 1; }
  .cockpit[data-area="lab"] .lab-results-col {
    grid-column: 2;
    grid-row: 1 / span 99;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  /* Sorveglia e Opera: le sezioni diventano colonne affiancate invece di
     una pila infinita da scorrere. */
  .cockpit[data-area="sorveglia"] .tab-content.active > .panel,
  .cockpit[data-area="opera"] .tab-content.active > .panel { max-width: 1180px; }
}

/* Il pannello a tutta larghezza non deve stirare i controlli: un campo di
   testo largo 1100px e' peggio di uno largo 300. Ma limitare il form e
   basta lasciava vuota meta' schermo, quindi le sezioni di Opera si
   affiancano invece di incolonnarsi sotto un form stretto. */
.cockpit:not([data-area="analizza"]) .manual-order-form,
.cockpit:not([data-area="analizza"]) .futures-order-form { max-width: 560px; }

@media (min-width: 1100px) {
  .cockpit[data-area="opera"] #opera-authenticated { column-count: 2; column-gap: 24px; }
  .cockpit[data-area="opera"] #opera-authenticated > * { break-inside: avoid; }
  .cockpit[data-area="opera"] #opera-authenticated > .section-title-row { break-after: avoid; }
}
@media (min-width: 1700px) {
  .cockpit[data-area="opera"] #opera-authenticated { column-count: 3; }
}

/* ============================================================
   Instrument — componenti
   Il vocabolario di classi resta quello che app.js gia' genera: qui
   cambia solo come si vedono. Un pannello diventa una scheda con un
   bordo vero, i controlli hanno tutti la stessa altezza e lo stesso
   raggio, e il colore semantico compare solo dove c'e' davvero uno
   stato da leggere.
   ============================================================ */

/* ── superfici ── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  padding-bottom: 14px;
}
.panel:last-child { border-bottom: 1px solid var(--border); }
.cockpit[data-area="analizza"] .right-panel .panel { border-radius: 6px; }

.panel-hint {
  color: var(--ink-dim);
  font-size: 11.5px;
  line-height: 1.55;
  margin: 0 0 10px;
}

/* ── controlli: stessa altezza, stesso raggio, stesso peso ── */
input[type="text"], input[type="search"], input[type="number"],
input[type="email"], input[type="password"], select, textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 9px;
  outline: none;
  transition: border-color 0.12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select { cursor: pointer; }

/* ── bottoni ── */
#search-btn, .lab-btn-run, #issue-submit, #auth-submit-btn,
#telegram-chat-id-save, #pine-apply-btn, #alert-login-btn, #opera-login-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: filter 0.12s;
}
#search-btn:hover, .lab-btn-run:hover, #issue-submit:hover,
#auth-submit-btn:hover, #alert-login-btn:hover, #opera-login-btn:hover { filter: brightness(1.08); }

.lab-btn-opt, .section-action-btn, #pine-analyze-btn, #auth-toggle-btn,
#auth-logout-btn, .lab-apply-btn, .lab-signal-btn, .lab-archive-btn,
.lab-trades-export, .drawer-close-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 11px;
  cursor: pointer;
}
.lab-btn-opt:hover, .section-action-btn:hover, #auth-toggle-btn:hover { border-color: var(--ink-faint); }

/* ── segmenti (timeframe, filtri asset) ── */
.lab-tf-row, .asset-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 7px;
  width: fit-content;
}
.lab-tf-btn, .wl-asset-btn {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  cursor: pointer;
}
.lab-tf-btn.active, .wl-asset-btn.active {
  background: var(--bg-panel);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* ── pillole di stato ── */
.section-count, .trading-auto-badge, .readonly-badge, .lab-filters-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  color: var(--ink-dim);
}
.trading-auto-badge {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}
.readonly-badge {
  color: var(--bull);
  background: var(--bull-soft);
  border-color: color-mix(in srgb, var(--bull) 32%, transparent);
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

/* ── righe di elenco: watchlist, archivio, storico, diario ── */
.wl-rows, .watchlist-cards, .archive-cards, .alert-log-cards,
.journal-list, .pa-list, .trading-cred-list, .issues-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.wl-rows > li, .watchlist-cards > li, .archive-cards > li,
.alert-log-cards > li, .journal-list > li, .pa-list > li {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12px;
  transition: border-color 0.12s, background 0.12s;
}
.wl-rows > li:hover, .watchlist-cards > li:hover { border-color: var(--border-strong); background: var(--bg-raised); }

/* ── toolbar ── */
.toolbar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  gap: 10px;
  padding: 9px 16px;
}
.brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ticker-field input {
  min-width: 230px;
  font-family: var(--font-mono);
}
.theme-toggle-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
}
.theme-toggle-btn:hover { color: var(--ink); }

/* ── tabelle ── */
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* ── Lab: il risultato e' il pezzo forte, trattalo come tale ── */
.lab-return-hero { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; }
.lab-return-val {
  font-family: var(--font-num);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.lab-result-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
/* Stat cards: same markup/classes app.js already fills (chip-lbl/chip-val),
   redrawn as a grid of small cards instead of pills — matches the
   prototype's stat-tile treatment. */
.lab-stat-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.lab-stat-chips > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 9px 11px;
}
.lab-stat-chips .chip-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.lab-stat-chips .chip-val {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.lab-stat-chips .chip-val.pos { color: var(--bull); }
.lab-stat-chips .chip-val.neg { color: var(--bear); }

.lab-mode-opt {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  margin-bottom: 6px;
  cursor: pointer;
}
.lab-mode-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.lab-mode-name { font-weight: 600; font-size: 12px; display: block; margin-bottom: 2px; }
.lab-mode-desc { font-size: 11px; color: var(--ink-dim); line-height: 1.45; display: block; }

/* ── livelli: interruttori, non spunte ──
   La checkbox nativa e' ridisegnata come uno switch (traccia + pallino
   che scorre) invece di una spunta quadrata — stesso <input
   type="checkbox">, stesso data-layer/id letto da app.js, cambia solo
   l'aspetto. */
.layer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 6px 7px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.layer-toggle:hover { background: var(--bg-raised); }

.layer-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  margin: 0;
  border-radius: 20px;
  background: var(--bg-sunk);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.layer-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: left .15s, background .15s;
}
.layer-toggle input[type="checkbox"]:checked {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.layer-toggle input[type="checkbox"]:checked::after {
  left: 14px;
  background: var(--accent);
}
.layer-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Livelli: due gruppi visivamente separati — struttura di mercato prima,
   indicatori classici dopo — come nel prototipo. */
.levels-panel .panel h3,
.tab-content[data-tab-content="analisi"] .panel h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.levels-panel .panel h3::before,
.tab-content[data-tab-content="analisi"] .panel h3::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── stato vuoto ── */
.empty-state {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Mappa del plateau ──────────────────────────────────────────────
   I dieci candidati migliori disegnati sui due parametri che variano di
   piu'. Non e' decorazione: dice se il vincitore sta dentro un'area che
   regge o se e' un punto isolato — la domanda che la ricerca stabile si
   pone, resa guardabile. */
.lab-plateau-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.plateau-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.plateau-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
}
.plateau-badge-bull { color: var(--bull); background: var(--bull-soft); }
.plateau-badge-warn { color: var(--warn); background: var(--warn-soft); }
.plateau-badge-bear { color: var(--bear); background: var(--bear-soft); }
.plateau-svg { display: block; overflow: visible; }
.plateau-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 8px 0 0;
}
.bull { color: var(--bull); }
.bear { color: var(--bear); }
.warnc { color: var(--warn); }

/* Ipotesi di esecuzione, accanto al risultato: due rendimenti ottenuti con
   ipotesi diverse non si confrontano, quindi l'ipotesi va letta insieme al
   numero e non cercata nelle impostazioni. */
.fill-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  color: var(--ink-dim);
  cursor: help;
}
.fill-tag.fill-optimistic { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.fill-tag.fill-real { color: var(--bull); background: var(--bull-soft); border-color: color-mix(in srgb, var(--bull) 32%, transparent); }
.lab-fill-at { grid-column: 1 / -1; }
.lab-fill-hint { grid-column: 1 / -1; margin-top: 4px; }

/* Con il grafico che resta in colonna, il Lab a due colonne ha senso solo
   se ne avanza abbastanza: sotto questa soglia impostazione e risultato
   tornano incolonnati invece di stringersi entrambi fino a diventare
   illeggibili. */
@media (max-width: 1560px) {
  .cockpit[data-area="lab"] .lab-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cockpit[data-area="lab"] .lab-panel > *:not(.lab-results-col),
  .cockpit[data-area="lab"] .lab-results-col {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Bacheca e Script non sono sbirciate di sfuggita: si leggono. Aperti dalla
   sidebar diventano una colonna larga, e il pannello di destra si toglie di
   mezzo invece di contendere lo spazio a un testo che va letto per intero. */
@media (min-width: 761px) {
  .cockpit[data-area="issues"] #issues-panel.open,
  .cockpit[data-area="script"] #script-panel.open {
    display: flex;
    width: clamp(420px, 46vw, 760px);
    border-right: 1px solid var(--border);
  }
  .cockpit[data-area="issues"] .right-panel,
  .cockpit[data-area="script"] .right-panel { display: none; }
  .cockpit[data-area="script"] .chart-area {
    flex: 1 1 auto;
    border-right: none;
  }
  /* Nella Bacheca il grafico non serve: si leggono segnalazioni, non prezzi.
     Via il grafico, la bacheca prende tutta la pagina. */
  .cockpit[data-area="issues"] .chart-area { display: none; }
  .cockpit[data-area="issues"] #issues-panel.open {
    width: auto;
    flex: 1 1 auto;
    border-right: none;
  }
  /* Le segnalazioni a colonna larga stanno in board, tre colonne affiancate
     invece che impilate — Aperto / In corso / Risolto. */
  .cockpit[data-area="issues"] .issues-board {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .cockpit[data-area="issues"] .board-col { flex: 1 1 0; min-width: 0; }
}

/* ── Striscia di lettura sotto il grafico ── */
.chart-stats { display: flex; border-top: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0; }
.cs-cell { flex: 1; padding: 8px 12px; border-right: 1px solid var(--border); min-width: 0; }
.cs-cell:last-child { border-right: none; }
.cs-k { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.cs-v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Confluenze: il punteggio come barra ── */
.confluence-list > li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.confluence-list > li:last-child { border-bottom: none; }
.cz-range { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.cz-bar { grid-column: 1; height: 4px; border-radius: 99px; background: var(--bg-sunk); overflow: hidden; }
.cz-bar i { display: block; height: 100%; background: var(--violet); border-radius: 99px; }
.cz-tf { grid-column: 2; grid-row: 3; font-family: var(--font-mono); font-size: 9.5px; color: var(--violet); }

/* ── Sorveglia a colonne: le sezioni si affiancano invece di impilarsi in
   una pila lunga due schermate. Le colonne del testo tengono insieme
   titolo e lista perche' un titolo orfano in fondo a una colonna non dice
   piu' a cosa si riferisce. ── */
@media (min-width: 1100px) {
  .cockpit[data-area="sorveglia"] #alert-authenticated { column-count: 2; column-gap: 22px; }
  .cockpit[data-area="sorveglia"] #alert-authenticated > * { break-inside: avoid; }
  .cockpit[data-area="sorveglia"] #alert-authenticated > .section-title-row { break-after: avoid; }
}
@media (min-width: 1600px) {
  .cockpit[data-area="sorveglia"] #alert-authenticated { column-count: 3; }
}

/* ── Allargare il grafico da qualsiasi area ── */
.chart-expand-btn {
  position: absolute; top: 8px; right: 10px; z-index: 6;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-panel); color: var(--ink-dim); cursor: pointer;
}
.chart-expand-btn:hover { color: var(--ink); border-color: var(--border-strong); }
.chart-expand-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

@media (min-width: 761px) {
  /* Allargato, il grafico si prende la parte del leone e il lavoro si
     stringe a una colonna ancora usabile — non sparisce, cosi' non si
     perde il punto in cui si era. */
  .cockpit.chart-wide:not([data-area="analizza"]):not([data-area="issues"]) .chart-area {
    flex: 1 1 auto;
  }
  .cockpit.chart-wide:not([data-area="analizza"]):not([data-area="issues"]) .right-panel {
    flex: 0 0 clamp(300px, 30%, 460px);
  }
  .cockpit.chart-wide[data-area="analizza"] .right-panel { display: none; }
  .cockpit.chart-wide[data-area="analizza"] .levels-panel.open { display: none; }
}

/* ============================================================
   Instrument — movimento
   Il movimento qui non decora: dice qualcosa. Un pannello che entra
   spiega da dove viene, un numero che sale si fa guardare, una riga che
   si illumina al passaggio conferma che e' viva. Tutto il resto sta
   fermo, perche' un'interfaccia dove si muove tutto e' una in cui non si
   nota piu' niente — e questa mostra denaro vero.

   Durate: 120-260 ms. Sotto i 100 non si percepisce, sopra i 300 si
   aspetta.
   ============================================================ */

/* Chi ha chiesto meno animazioni ne riceve zero. Non una versione
   ridotta: zero. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── entrata dei pannelli ──────────────────────────────────────────── */
@keyframes lae-sali {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Solo il contenuto che cambia davvero quando si passa da un'area
   all'altra. Non ogni elemento della pagina: la sidebar che rientra a
   ogni clic sarebbe nausea, non raffinatezza. */
.tab-content.active > .panel {
  animation: lae-sali 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Sfalsati appena, cosi' si legge un ordine invece di un lampo unico. */
.tab-content.active > .panel:nth-child(2) { animation-delay: 40ms; }
.tab-content.active > .panel:nth-child(3) { animation-delay: 80ms; }
.tab-content.active > .panel:nth-child(4) { animation-delay: 110ms; }

.levels-panel.open .panel {
  animation: lae-sali 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── il risultato del Lab ──────────────────────────────────────────── */
/* E' il momento che conta: la ricerca e' finita e c'e' un numero. Entra
   con una scala appena percettibile, non con un rimbalzo da cartone. */
@keyframes lae-risultato {
  from { opacity: 0; transform: scale(0.985) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lab-result-block:not(.hidden) {
  animation: lae-risultato 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.lab-return-val {
  /* Il rendimento e' il numero per cui esiste la schermata. */
  animation: lae-risultato 380ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}
.lab-stat-chips > div {
  animation: lae-sali 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.lab-stat-chips > div:nth-child(1) { animation-delay: 140ms; }
.lab-stat-chips > div:nth-child(2) { animation-delay: 180ms; }
.lab-stat-chips > div:nth-child(3) { animation-delay: 220ms; }
.lab-stat-chips > div:nth-child(4) { animation-delay: 260ms; }
.lab-stat-chips > div:nth-child(5) { animation-delay: 300ms; }

/* ── righe vive ────────────────────────────────────────────────────── */
.wl-rows > li,
.watchlist-cards > li,
.archive-cards > li,
.alert-log-cards > li,
.journal-list > li,
.issues-list > * {
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.wl-rows > li:hover,
.watchlist-cards > li:hover {
  transform: translateX(2px);   /* appena: conferma il passaggio, non sposta la pagina */
  border-color: var(--accent);
}

/* ── controlli ─────────────────────────────────────────────────────── */
button, .sidenav-item, .lab-tf-btn, .wl-asset-btn, .tab, .subtab {
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
/* Il tasto si abbassa quando lo premi. E' l'unico riscontro tattile che
   un browser sa dare. */
button:active:not(:disabled) { transform: translateY(1px); }

#search-btn, .lab-btn-run, .mo-execute-btn, #futures-execute-btn {
  position: relative;
  overflow: hidden;
}
/* Un lampo che attraversa il tasto principale al passaggio: si nota, e
   non sposta nulla. */
#search-btn::after, .lab-btn-run::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 520ms ease;
}
#search-btn:hover::after, .lab-btn-run:hover::after { transform: translateX(100%); }

/* ── stati che devono farsi notare ─────────────────────────────────── */
@keyframes lae-battito {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--bull-soft); }
  50%      { opacity: 0.65; box-shadow: 0 0 0 5px transparent; }
}
.live-badge .live-dot, .sys-led:not(.off) {
  animation: lae-battito 2.4s ease-in-out infinite;
}

/* La leva alta e' l'unica cosa in tutta l'interfaccia a cui e' concesso
   pulsare in rosso: quando succede, e' esattamente cio' che va guardato. */
@keyframes lae-allarme {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.lev-cap-hot { animation: lae-allarme 1.8s ease-in-out infinite; }

/* ── caricamento ───────────────────────────────────────────────────── */
/* Un'attesa senza segnale e' indistinguibile da un blocco: e' successo
   davvero, ed e' la ragione per cui questa riga esiste. */
@keyframes lae-scorri { to { background-position: 200% 0; } }
.loading:not(.hidden), .lab-status:not(.hidden) {
  background-image: linear-gradient(90deg,
    transparent 0%, var(--accent-soft) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: lae-scorri 1.4s linear infinite;
  border-radius: var(--radius);
}

/* ── profondita', misurata ─────────────────────────────────────────── */
.panel { transition: border-color 160ms ease, box-shadow 160ms ease; }
.tab-content.active > .panel:hover { border-color: var(--border-strong); }

/* Il pannello del grafico e' l'oggetto principale: gli si concede
   un'ombra vera, a nessun altro. */
.chart-area { transition: flex-basis 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ── messa a fuoco visibile ────────────────────────────────────────── */
/* Non e' estetica: senza, chi naviga da tastiera non sa dove si trova. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── avvisi che arrivano ───────────────────────────────────────────── */
@keyframes lae-entra-da-destra {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.alert-toast-container > * {
  animation: lae-entra-da-destra 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}