/* Atlante — stile del prototipo
   Scelte: sfondo blu notte con ombra viola, scritte bianche, verde/rosso riservati alle variazioni,
   ghiaccio (ciano) e ambra riservati ai collegamenti sulla mappa. Un solo carattere: IBM Plex Sans. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }

:root {
  --bg: #000000;
  --panel: rgba(14, 12, 9, 0.64);
  --panel-solid: #0c0a07;
  --line: rgba(255, 170, 60, 0.16);
  --line-strong: rgba(255, 170, 60, 0.32);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.74);
  --ink-3: rgba(255, 255, 255, 0.56);
  --violet: #ff9f1c;
  --violet-soft: rgba(255, 159, 28, 0.2);
  --ice: #ffd166;
  --amber: #ffb547;
  --up: #35e6a4;
  --down: #ff5c7a;
  --font: 'IBM Plex Sans', -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 6px; }
svg { display: block; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-2); }

/* scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 170, 60, 0.28) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 170, 60, 0.25); border-radius: 8px; }

/* ===== struttura generale ===== */
.app {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  height: 100vh;
  transition: grid-template-columns 0.28s ease;
}

/* ===== colonna sinistra ===== */
.rail {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 16px 14px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 15, 10, 0.6), rgba(0, 0, 0, 0.25));
  overflow-y: auto; overflow-x: hidden;
  transition: opacity 0.2s ease;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ice); }
.brand-mark { width: 26px; height: 26px; }
.brand-name { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }

.filters {
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.filters-head { display: flex; justify-content: space-between; align-items: baseline; }
.filters h2 { font-size: 14px; font-weight: 600; }
.link {
  background: none; border: 0; padding: 0;
  color: var(--ink-2); font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3);
}
.link:hover { color: #fff; }
.f-label { font-size: 12.5px; color: var(--ink-3); margin-bottom: 7px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { color: #fff; border-color: rgba(255, 159, 28, 0.6); }
.chip[aria-pressed='true'] { background: var(--violet-soft); border-color: rgba(255, 159, 28, 0.85); color: #fff; }

.seg { display: flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.seg button {
  flex: 1; padding: 5px 0; background: none; border: 0;
  color: var(--ink-2); font-size: 12.5px;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: #fff; }
.seg button[aria-pressed='true'] { background: var(--violet-soft); color: #fff; font-weight: 500; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 12px;
  border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--ink-2); text-align: left; font-size: 14px;
}
.nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.nav button[aria-current='page'] { color: #fff; background: var(--violet-soft); border-color: rgba(255, 159, 28, 0.5); }

.rail-foot { margin-top: auto; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.rail-foot p { margin-top: 8px; }
.demo-badge { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 181, 71, 0.55); background: rgba(255, 181, 71, 0.1); }
.demo-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.demo-badge.real { border-color: rgba(53, 230, 164, 0.5); background: rgba(53, 230, 164, 0.09); }
.demo-badge.real .dot { background: #35e6a4; }

/* ===== barra in alto ===== */
.top {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}
.markets { display: flex; gap: 8px; justify-content: center; }
.mk {
  position: relative;
  width: 134px;
  padding: 10px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit; text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.mk:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.055); }
.mk[aria-pressed='true'] { border-color: rgba(255, 159, 28, 0.8); background: var(--violet-soft); }
.mk-label { display: block; font-size: 12.5px; color: var(--ink-2); }
.mk-pct { display: block; font-size: 18px; font-weight: 500; line-height: 1.25; margin-top: 1px; white-space: nowrap; }
.mk-pct .ar { font-size: 9px; vertical-align: 2px; margin-right: 4px; }
.mk-sub { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search { position: relative; justify-self: end; width: 320px; max-width: 100%; transition: width 0.2s ease; z-index: 3; }
.search:focus-within { width: 420px; }
.search-ico, .map-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.search input, .map-search input {
  width: 100%; height: 40px; padding: 0 14px 0 38px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff; outline-offset: 2px;
}
.search input::placeholder, .map-search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button, .map-search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11.5px var(--font); color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; pointer-events: none; }
.search:focus-within kbd { display: none; }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: #0c0a07; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 6px; z-index: 60; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  max-height: min(440px, 62vh); overflow-y: auto;
}
.suggest li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.suggest li[aria-selected='true'], .suggest li:hover { background: rgba(255, 159, 28, 0.2); }
.suggest .s-name { font-weight: 500; }
.suggest .s-sub { display: block; font-size: 12px; color: var(--ink-3); }
.suggest .s-pct { font-weight: 500; }
.suggest .s-empty { grid-template-columns: 1fr; color: var(--ink-3); cursor: default; }

/* ===== area principale ===== */
.stage {
  grid-column: 2;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
}
.view { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; }
[hidden] { display: none !important; }
#view-dashboard {
  --news-w: 52%;
  display: grid; grid-template-columns: var(--news-w) 16px minmax(300px, 1fr); gap: 0;
  padding: 16px 16px 16px 20px;
}
#view-dashboard > .news { grid-column: 1; }
#view-dashboard > .splitter { grid-column: 2; }
#view-dashboard > .indices { grid-column: 3; }
#view-dashboard.news-collapsed { grid-template-columns: 54px 16px minmax(300px, 1fr); }

.panel {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px 18px; min-height: 48px; }
.panel-head h2 { font-size: 15px; font-weight: 600; }
.count { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 10px; }
.empty { padding: 28px 0; color: var(--ink-3); }
.empty strong { display: block; color: #fff; font-weight: 500; margin-bottom: 4px; }

/* notizie: righe separate, non carte */
.n-item { padding: 16px 0 15px; border-top: 1px solid var(--line); }
.n-item:first-child { border-top: 0; padding-top: 6px; }
.n-title { font-size: 15.5px; font-weight: 500; line-height: 1.38; margin-bottom: 6px; }
.n-sum { color: var(--ink-2); max-width: 70ch; margin-bottom: 11px; }
.n-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.n-chip {
  display: inline-flex; gap: 7px; align-items: baseline;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; font-size: 12.5px; color: #fff;
}
.n-chip:hover { border-color: rgba(255, 159, 28, 0.85); background: var(--violet-soft); }
.n-chip b { font-weight: 500; }
.n-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
.n-foot a { color: #fff; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.n-foot a:hover { text-decoration-color: #fff; }

/* indici */
.i-group { font-size: 12.5px; color: var(--ink-3); padding: 14px 6px 4px; }
.i-group:first-child { padding-top: 4px; }
.i-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px 84px; align-items: center; gap: 10px;
  width: 100%; padding: 8px 6px; border: 0; border-radius: 9px;
  background: none; text-align: left; color: inherit;
}
.i-row:hover { background: rgba(255, 159, 28, 0.14); }
.i-name { font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.i-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.i-val { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i-pct { text-align: right; font-weight: 500; white-space: nowrap; }
.i-pct .ar, .s-pct .ar { font-size: 8.5px; vertical-align: 1px; margin-right: 4px; }

.spark { overflow: visible; }
.spark.up { color: var(--up); }
.spark.down { color: var(--down); }
.spark.flat { color: var(--ink-2); }
.spark .l { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark .a { fill: currentColor; fill-opacity: 0.1; stroke: none; }

/* ===== assistente ===== */
.assistant {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; min-height: 0;
  margin: 16px 20px 16px 0;
  background: linear-gradient(180deg, rgba(22, 18, 12, 0.7), rgba(8, 6, 4, 0.75));
  border: 1px solid rgba(255, 159, 28, 0.32);
  border-radius: 14px;
}
.as-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.as-head h2 { font-size: 15px; font-weight: 600; }
.as-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.icon-btn { display: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); align-items: center; justify-content: center; }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.as-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 100%; }
.msg.me { align-self: flex-end; max-width: 88%; background: var(--violet-soft); border: 1px solid rgba(255, 159, 28, 0.5); padding: 8px 12px; border-radius: 12px 12px 3px 12px; }
.msg.ai { color: #fff; }
.msg.ai p + p { margin-top: 8px; }
.msg.ai .who { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; display: block; }
.msg.ai p { color: var(--ink-2); }
.msg.ai b { color: #fff; font-weight: 500; }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.as-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.as-suggest button { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; color: var(--ink-2); font-size: 12.5px; text-align: left; }
.as-suggest button:hover { color: #fff; border-color: rgba(255, 159, 28, 0.85); background: var(--violet-soft); }
.as-form { display: flex; gap: 8px; padding: 0 16px 8px; }
.as-form input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(0, 0, 0, 0.7); }
.as-form input::placeholder { color: var(--ink-3); }
.send { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--violet); display: flex; align-items: center; justify-content: center; }
.send svg { width: 18px; height: 18px; fill: none; stroke: #1a1206; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send:hover { background: #ffb347; }
.as-note { padding: 0 16px 14px; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* modalità cassetto: mappa, intermediari, schermi stretti */
body.drawer .stage { grid-template-columns: minmax(0, 1fr); }
body.drawer .assistant {
  position: absolute; top: 0; right: 0; bottom: 0; width: 372px; margin: 0;
  border-radius: 0; border-width: 0 0 0 1px;
  background: linear-gradient(180deg, #14110b, #050403);
  transform: translateX(102%); transition: transform 0.25s ease; z-index: 50; visibility: hidden;
}
body.drawer .assistant.open { transform: none; visibility: visible; }
body.drawer .icon-btn { display: inline-flex; }

/* ===== mappa ===== */
.view-map { grid-column: 1 / -1; position: relative; }
.map-wrap { position: absolute; inset: 0; overflow: hidden; }
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#map-canvas.dragging { cursor: grabbing; }
#map-canvas.pointing { cursor: pointer; }
.map-ui { position: absolute; z-index: 5; }
/* pannello Cerca e filtra: si chiude e si allarga */
.map-controls {
  top: 16px; left: 20px; width: 308px; max-width: calc(100% - 330px);
  max-height: calc(100% - 100px);            /* resta sopra la barra dello zoom */
  display: flex; flex-direction: column;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.map-controls.resizing { user-select: none; }
.mc-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
.mc-head h2 { font-size: 14px; font-weight: 600; margin-right: auto; white-space: nowrap; }
.mc-badge { font-size: 12px; color: #fff; padding: 1px 9px; border-radius: 999px; border: 1px solid rgba(255, 159, 28, 0.8); background: var(--violet-soft); white-space: nowrap; }
.mc-main { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 12px 0; }
.mc-body { flex: 1; min-height: 0; overflow-y: auto; margin: 12px -12px 0; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.map-controls.collapsed { width: auto !important; max-width: none; }
.map-controls.collapsed .mc-main { display: none; }
.map-controls.collapsed .mc-head { padding-right: 6px; }
.map-controls.collapsed .pn-btn svg { transform: rotate(180deg); }
.mc-resize {
  position: absolute; top: 14px; bottom: 14px; right: -7px; width: 14px;
  cursor: ew-resize; touch-action: none; z-index: 2;
}
.mc-resize::after { content: ''; position: absolute; top: 50%; left: 5px; width: 4px; height: 38px; margin-top: -19px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transition: background 0.15s, height 0.15s; }
.mc-resize:hover::after, .mc-resize:focus-visible::after, .map-controls.resizing .mc-resize::after { background: var(--violet); height: 54px; margin-top: -27px; }
.map-search { position: relative; }
.map-search .suggest { top: calc(100% + 6px); max-height: 340px; overflow-y: auto; }
.map-row { margin-bottom: 10px; }
.map-row:last-child { margin-bottom: 0; }
.map-row .f-label { margin-bottom: 5px; }
.f-hint { color: var(--ink-3); font-size: 12px; margin-left: 6px; opacity: 0.85; }
.mc-sec .chips + .chips { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.mc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mc-row .f-label { margin-bottom: 0; }
.chip small { font-size: 11.5px; color: var(--ink-3); margin-left: 2px; }
.chip[aria-pressed='true'] small { color: var(--ink-2); }
.chip-sc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; background: var(--violet-soft); border-color: rgba(255, 159, 28, 0.7); color: #fff; }
.chip-sc button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.chip-sc button:hover { background: rgba(255, 255, 255, 0.24); }
.ld { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--ink-3); }
.ld.ok { background: var(--ice); border-color: var(--ice); box-shadow: 0 0 6px var(--ice); }
.ld.wait { border-color: var(--amber); animation: pulse 0.9s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.switch { display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.switch small { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.2; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); flex: none; transition: background 0.15s; }
.sw-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch input:checked + .sw-track { background: var(--violet); border-color: var(--violet); }
.switch input:checked + .sw-track::after { transform: translateX(14px); }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--ice); outline-offset: 2px; }

.mc-mem { font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; }
.mc-mem p { margin-top: 5px; line-height: 1.4; }
.mem-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.mem-line b { color: #fff; font-weight: 600; }
.mem-bar { flex: 0 0 74px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mem-bar i { display: block; height: 100%; background: var(--ice); border-radius: 3px; transition: width 0.3s; }

.mc-legend { font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }
.mc-legend summary { cursor: pointer; list-style: none; color: #fff; font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mc-legend summary::-webkit-details-marker { display: none; }
.mc-legend summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; margin-top: -3px; }
.mc-legend[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.lg-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lg { display: flex; align-items: center; gap: 10px; }
.lg svg { flex: none; }
.sw { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: -4px; box-shadow: 0 0 8px currentColor; }
.sw.up { background: var(--up); color: var(--up); }
.sw.down { background: var(--down); color: var(--down); margin-right: 0; }
.map-hint { left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 12px; color: var(--ink-3); pointer-events: none; text-align: center; max-width: 40%; }
.map-ask {
  top: 16px; right: 20px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 159, 28, 0.6);
  background: rgba(60, 40, 12, 0.7); color: #fff; font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.map-ask svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.map-ask:hover { background: rgba(90, 58, 16, 0.85); }

.tip {
  position: absolute; z-index: 20; pointer-events: none; min-width: 190px; max-width: 260px;
  background: rgba(0, 0, 0, 0.94); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.tip .t-name { font-weight: 600; }
.tip .t-cat { font-size: 12px; color: var(--ink-3); }
.tip .t-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.tip .t-val { font-weight: 500; }
.tip .t-note { margin-top: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }

.node-panel {
  position: absolute; z-index: 12; top: 64px; right: 20px; bottom: 16px; width: 372px;
  display: flex; flex-direction: column;
  background: rgba(0, 0, 0, 0.86); border: 1px solid var(--line-strong); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: slidein 0.28s ease;
}
.node-panel[hidden] { display: none; }
@keyframes slidein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.np-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 16px; }
.np-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.np-top h2 { font-size: 20px; font-weight: 600; line-height: 1.2; }
.np-cat { display: inline-block; margin-top: 5px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 9px; }
.np-close { display: inline-flex; flex: none; }
.np-val { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.np-val .big { font-size: 28px; font-weight: 500; line-height: 1.1; }
.np-val .unit { font-size: 12.5px; color: var(--ink-3); }
.np-val .chg { font-size: 16px; font-weight: 500; }
.np-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.np-stats div { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; }
.np-stats span { display: block; font-size: 11.5px; color: var(--ink-3); }
.np-stats b { font-size: 13px; font-weight: 500; }
.np-spark { margin-top: 12px; }
.np-desc { margin-top: 12px; color: var(--ink-2); }
.np-src { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.np-sec { margin-top: 20px; }
.np-sec h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.np-sec h3 small { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.rel { display: flex; align-items: stretch; gap: 4px; width: 100%; border-radius: 9px; }
.rel:hover { background: rgba(255, 159, 28, 0.1); }
.rel-main { flex: 1; min-width: 0; display: block; background: none; border: 0; border-radius: 9px; padding: 8px 8px; text-align: left; color: inherit; }
.rel-main:hover { background: rgba(255, 159, 28, 0.16); }
.rel-edge { flex: none; align-self: center; background: none; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: 12px; padding: 2px 9px; margin-right: 4px; white-space: nowrap; }
.rel-edge:hover { color: #fff; border-color: rgba(255, 209, 102, 0.8); background: rgba(255, 209, 102, 0.1); }
.rel.rel-solo { display: block; background: none; border: 0; padding: 8px 8px; text-align: left; color: inherit; }
.rel.rel-solo:hover { background: rgba(255, 159, 28, 0.16); }
.rel-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rel-name { font-weight: 500; }
.rel-corr { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cbar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); margin: 6px 0 5px; overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: 3px; }
.cbar i.pos { background: var(--ice); }
.cbar i.neg { background: #78cdff; }
.rel-why { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.np-news { padding: 11px 0; border-top: 1px solid var(--line); }
.np-news:first-of-type { border-top: 0; padding-top: 2px; }
.np-news h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 500; line-height: 1.38; }
.np-news p { font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.np-news .n-foot { font-size: 12px; }
.np-drivers p { color: var(--ink-2); margin-bottom: 8px; font-size: 13px; }
.np-drivers b { color: #fff; font-weight: 500; }
.np-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.np-actions .btn { flex: 1 1 calc(50% - 4px); padding: 8px 10px; font-size: 13px; }
.btn { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: #fff; font-weight: 500; font-size: 13.5px; }
.btn:hover { background: rgba(255, 255, 255, 0.09); }
.btn.primary { background: var(--violet); border-color: var(--violet); color: #1a1206; font-weight: 600; }
.btn.primary:hover { background: #ffb347; }

/* ===== scheda indice ===== */
#view-detail { overflow-y: auto; padding: 16px 16px 24px 20px; }
.d-back { margin-bottom: 12px; }
.d-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.d-head h1 { font-size: 26px; font-weight: 600; line-height: 1.15; }
.d-head .d-cat { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.d-price { text-align: right; }
.d-price .big { font-size: 32px; font-weight: 500; line-height: 1.1; }
.d-price .unit { font-size: 12.5px; color: var(--ink-3); margin-left: 6px; }
.d-price .chg { font-size: 16px; font-weight: 500; }
.d-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.d-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.box { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.box h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.box h2 small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.range { display: inline-flex; width: auto; }
.range button { padding: 3px 12px; }
.chart { position: relative; margin-top: 4px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: rgba(255, 255, 255, 0.08); }
.chart text { fill: var(--ink-3); font-size: 11.5px; font-family: var(--font); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { stroke: none; }
.chart.up .line { stroke: var(--up); } .chart.up .area { fill: var(--up); fill-opacity: 0.1; }
.chart.down .line { stroke: var(--down); } .chart.down .area { fill: var(--down); fill-opacity: 0.1; }
.chart.flat .line { stroke: #fff; }
.chart .cross line { stroke: rgba(255, 255, 255, 0.4); stroke-dasharray: 3 3; }
.chart .cross circle { fill: #000; stroke-width: 2; }
.chart.up .cross circle { stroke: var(--up); } .chart.down .cross circle { stroke: var(--down); } .chart.flat .cross circle { stroke: #fff; }
.ctip { position: absolute; pointer-events: none; transform: translate(-50%, 0); background: rgba(0, 0, 0, 0.95); border: 1px solid var(--line-strong); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; z-index: 4; }
.ctip small { display: block; color: var(--ink-3); font-size: 11.5px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.stats4 div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stats4 span { display: block; font-size: 12px; color: var(--ink-3); }
.stats4 b { font-weight: 500; font-size: 15px; }
.d-about { color: var(--ink-2); max-width: 66ch; }
.where-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.where-list li:first-child { border-top: 0; }
.where-list .w-name { font-weight: 500; }
.where-list .w-kind { display: block; font-size: 12px; color: var(--ink-3); }
.ph { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 6px, transparent 6px 9px); }
.note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }

/* ===== intermediari ===== */
#view-brokers { overflow-y: auto; padding: 18px 20px 28px 22px; }
.b-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.b-head h1 { font-size: 24px; font-weight: 600; }
.b-head p { color: var(--ink-2); margin-top: 6px; max-width: 70ch; }
.b-tabs { margin-bottom: 14px; display: inline-flex; width: auto; }
.b-tabs button { padding: 6px 16px; white-space: nowrap; flex: none; }
.b-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.b-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--ink-2); padding: 10px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.b-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.b-table td:first-child b { display: block; font-weight: 500; font-size: 15px; }
.b-table td:first-child span { font-size: 12px; color: var(--ink-3); }
.b-table tbody tr:hover { background: rgba(255, 159, 28, 0.09); }
.b-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px 8px; overflow-x: auto; }
.b-criteria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-top: 20px; }
.b-criteria div { color: var(--ink-2); font-size: 13px; }
.b-criteria b { display: block; color: #fff; font-weight: 500; margin-bottom: 2px; }

/* ===== tipo di strumento (ETF, azione, dato macro) ===== */
.kbadge { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 17px; vertical-align: 1px; border: 1px solid; white-space: nowrap; flex: none; }
.kbadge.k-etf { color: #ffe2a8; border-color: rgba(255, 209, 102, 0.5); background: rgba(255, 209, 102, 0.08); }
.kbadge.k-az { color: #ffcf8a; border-color: rgba(255, 159, 28, 0.7); background: rgba(255, 159, 28, 0.16); }
.kbadge.k-macro { color: var(--ink-2); border-color: var(--line-strong); }
.i-name .kbadge { margin-left: 0; }
.suggest .s-name .kbadge { margin-left: 8px; }
.tip .kbadge { margin-left: 6px; }
.n-more { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--line-strong); font-size: 12.5px; color: var(--ink-3); cursor: default; }

/* ===== caselle regolabili: pulsante, divisore, binario ridotto ===== */
.pn-btn { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.05); padding: 0; }
.pn-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.pn-btn:hover { background: rgba(255, 255, 255, 0.13); border-color: var(--line-strong); }
.splitter { position: relative; cursor: ew-resize; touch-action: none; border-radius: 6px; }
.splitter::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); transition: background 0.15s, height 0.15s, margin 0.15s; }
.splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after { background: var(--violet); height: 64px; margin-top: -32px; }
body.resizing { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.panel.news.collapsed .panel-head { display: none; }
.news-rail { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0 16px; }
.rail-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; font-weight: 600; white-space: nowrap; }
.rail-count { font-size: 12px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }

/* ===== zoom della mappa ===== */
.map-zoom { left: 20px; bottom: 6px; display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(0, 0, 0, 0.72); border: 1px solid var(--line); border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.map-zoom button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.map-zoom button:hover { background: rgba(255, 255, 255, 0.12); }
.map-zoom svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.z-val { min-width: 48px; text-align: center; font-size: 12.5px; color: var(--ink-2); }
.z-sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
#map-canvas.panning { cursor: move; }
.map-hint { left: 400px; transform: none; text-align: left; bottom: 12px; max-width: min(calc(100% - 640px), 600px); }
@media (max-width: 1100px) { .map-hint { display: none; } }
.tip .t-click { color: var(--ice); }
.np-under { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.np-under span { color: var(--ink-3); }

/* ===== segnaposto di caricamento ===== */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-lines { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.skel-lines i, .skel-spark, .skel-chart i { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06)); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
.skel-lines i { height: 12px; }
.skel-lines i:nth-child(1) { width: 92%; }
.skel-lines i:nth-child(2) { width: 100%; }
.skel-lines i:nth-child(3) { width: 58%; }
.skel-spark { height: 62px; }
.skel-chart { position: relative; display: flex; align-items: center; justify-content: center; }
.skel-chart i { position: absolute; inset: 0; }
.skel-chart span { position: relative; font-size: 12.5px; color: var(--ink-2); background: rgba(0, 0, 0, 0.82); padding: 3px 12px; border-radius: 999px; }

/* ===== pannello del collegamento ===== */
:root { --cmp-a: #ffd166; --cmp-b: #6fe3ff; }
.ep-title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.ep-arrow { margin: 0 8px; color: var(--ice); font-weight: 400; }
.ep-corr { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.ep-big { font-size: 30px; font-weight: 500; line-height: 1; white-space: nowrap; }
.ep-big.pos { color: var(--ice); }
.ep-big.neg { color: #78cdff; }
.ep-words b { display: block; font-weight: 500; }
.ep-words span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; display: block; margin-top: 2px; }
.ep-win { display: grid; grid-template-columns: 78px minmax(0, 1fr) 48px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.ep-win.on { background: rgba(255, 159, 28, 0.15); }
.ep-win .cbar { margin: 0; }
.ep-wl { font-size: 12.5px; color: var(--ink-2); }
.ep-wv { font-size: 12.5px; text-align: right; }
.ep-warn { font-size: 12.5px; color: var(--ink-3); }
.ep-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ep-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(255, 255, 255, 0.03); color: inherit; min-width: 0; }
.ep-card:hover { border-color: rgba(255, 159, 28, 0.85); background: var(--violet-soft); }
.ep-cname { font-weight: 500; font-size: 13px; line-height: 1.3; }
.ep-cname .kbadge { margin-left: 6px; }
.ep-cval { font-size: 15px; font-weight: 500; }
.ep-cval small { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.ep-cchg { font-size: 12.5px; font-weight: 500; }
.ep-tag { font-size: 12px; color: var(--ink-3); margin: 8px 0 2px; }
.np-sec h3 .seg.range { margin-left: auto; }

/* grafico a confronto (due linee, base 100) */
.chart.cmp { margin-top: 2px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.cmp-legend b { font-weight: 500; margin-left: 4px; }
.chart.cmp i.la, .ctip i.la, .chart.cmp i.lb, .ctip i.lb { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chart.cmp i.la, .ctip i.la { background: var(--cmp-a); }
.chart.cmp i.lb, .ctip i.lb { background: var(--cmp-b); }
.chart.cmp .la-line, .chart.cmp .lb-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart.cmp .la-line { stroke: var(--cmp-a); }
.chart.cmp .lb-line { stroke: var(--cmp-b); }
.chart.cmp .base { stroke: rgba(255, 255, 255, 0.28); stroke-dasharray: 4 4; }
.chart.cmp .cross circle.ca { stroke: var(--cmp-a); }
.chart.cmp .cross circle.cb { stroke: var(--cmp-b); }
.chart.cmp .ctip, .ctip div { line-height: 1.5; }
.ctip b { font-weight: 500; margin-left: 6px; }

/* ===== schermi stretti ===== */
@media (max-width: 1240px) {
  .mk { width: 120px; padding: 8px 10px; }
  .app { grid-template-columns: 232px minmax(0, 1fr); }
  .stage { grid-template-columns: minmax(0, 1fr) 320px; }
  .d-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .markets { gap: 6px; }
  .mk { width: 100px; }
  .mk-sub { display: none; }
  .b-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* ===== vista Rete / Globo ===== */
.map-view { left: 206px; bottom: 6px; display: flex; gap: 2px; padding: 4px; background: rgba(0, 0, 0, 0.72); border: 1px solid var(--line); border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.map-view button { height: 34px; padding: 0 13px 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s, color 0.15s; }
.map-view button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.map-view button[aria-pressed='true'] { background: var(--violet-soft); color: #fff; font-weight: 500; }
.map-view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.f-sub { margin-top: 12px; }
.lg-dots { display: inline-flex; gap: 3px; width: 40px; flex: none; }
.lg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(150, 125, 95, 0.7); }
.lg-dots i.up { background: var(--up); }
.lg-dots i.down { background: var(--down); }
.np-geo { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.np-geo svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--ice); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.np-geo b { color: #fff; font-weight: 500; }
.np-geo span { display: block; color: var(--ink-3); }
.np-geo .link { margin-left: 2px; }
.tip .t-geo { color: var(--ice); font-size: 12px; margin-top: 2px; }
@media (max-width: 1100px) { .map-view { left: auto; right: 20px; bottom: 64px; } }

/* filtri della mappa: nota esplicativa, scelte non disponibili */
.f-note { margin: 2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.f-empty { color: var(--down, #ff5c7a); }
.chip:disabled { opacity: 0.38; cursor: not-allowed; }
.chip:disabled:hover { color: inherit; border-color: inherit; }

/* ---------- aggiornamento in diretta, puntino negli elenchi, Modo leggero ---------- */
.upd { margin-top: 10px; }
.upd-btn { display: block; width: 100%; flex: none; padding: 7px 10px; font-size: 13px; }
.upd-btn:disabled { opacity: 0.55; cursor: default; }
.upd-msg { margin-top: 6px !important; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.upd-msg b { color: var(--ink-2); font-weight: 500; }
.upd-msg.err { color: var(--amber); }
.lv { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--ice); vertical-align: middle; box-shadow: 0 0 6px var(--ice); }
.map-slow { left: 50%; bottom: 64px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.94); border: 1px solid var(--line-strong); font-size: 13px; color: var(--ink-2); z-index: 8; max-width: calc(100% - 40px); }
.map-slow[hidden] { display: none; }
.map-slow .btn { flex: none; padding: 7px 12px; }
body.lite * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.lite .ld.wait, body.lite .typing i { animation: none !important; }

.top .upd { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.top .upd-btn { display: inline-block; width: auto; padding: 5px 12px; font-size: 12.5px; }
.top .upd-msg { margin: 0 !important; max-width: 100%; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1240px) { .top .upd-msg { display: none; } }

/* notizie in diretta */
.n-foot a[target="_blank"]::after { content: ' ↗'; display: inline-block; text-decoration: none; }


/* ===== barra laterale richiudibile: la mappa a schermo intero ===== */
body[data-view='map'].rail-off:not(.mob) .app { grid-template-columns: 0 minmax(0, 1fr); }
body[data-view='map'].rail-off:not(.mob) .rail { opacity: 0; visibility: hidden; border-right-width: 0; padding-left: 0; padding-right: 0; transition: opacity 0.2s ease, visibility 0s linear 0.28s; }
.rail-toggle {
  left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 76px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 12px 12px 0;
  background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rail-toggle svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.28s ease; }
.rail-toggle[aria-expanded='false'] svg { transform: rotate(180deg); }
.rail-toggle:hover { background: rgba(90, 58, 16, 0.85); }
body.mob .rail-toggle { display: none; }

/* comandi della mappa (zoom, Rete/Globo, barra laterale): quasi trasparenti se non si usano, pieni al passaggio del mouse o dopo un tocco */
.map-zoom, .map-view, .rail-toggle { opacity: 0.4; transition: opacity 0.3s ease; }
.map-zoom:hover, .map-zoom:focus-within, .map-zoom.use,
.map-view:hover, .map-view:focus-within, .map-view.use,
.rail-toggle:hover, .rail-toggle:focus-visible, .rail-toggle.use { opacity: 1; }
body.mob .map-zoom, body.mob .map-view { opacity: 0.62; }
body.mob .map-zoom.use, body.mob .map-view.use { opacity: 1; }
/* ===== intermediari: categorie, ricerca, schede ===== */
.im-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.im-search { position: relative; flex: 1 1 320px; max-width: 540px; }
.im-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.im-search input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(14, 12, 9, 0.78); color: #fff; outline-offset: 2px; font: inherit; }
.im-search input::placeholder { color: var(--ink-3); }
.im-search input::-webkit-search-cancel-button { display: none; }
.im-bar .b-tabs { margin-bottom: 0; }
.im-table td { vertical-align: top; min-width: 128px; padding: 14px 10px; }
.im-table th { padding: 10px 10px; }
.im-table td:first-child { min-width: 190px; max-width: 230px; }
.im-table th { white-space: nowrap; }
.im-open { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; }
.im-open b { display: block; font-weight: 500; font-size: 15px; }
.im-open span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.im-open:hover b { text-decoration: underline; text-underline-offset: 3px; }
.im-line { margin-bottom: 9px; }
.im-line:last-child { margin-bottom: 0; }
.im-l { display: block; font-size: 11.5px; color: var(--ink-3); }
.im-line b { display: block; font-weight: 500; font-size: 14px; }
.im-line small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.im-line.dim b { color: var(--ink-3); font-weight: 400; }
.im-h2 { font-size: 15px; font-weight: 600; margin: 18px 0 8px; }
.im-h2 small, .im-h3 small { font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
.im-h3 { font-size: 14px; font-weight: 600; margin: 22px 0 10px; }
.im-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.im-hit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) auto; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: #fff; font: inherit; cursor: pointer; }
.im-hit:hover { border-color: rgba(255, 159, 28, 0.6); background: rgba(255, 159, 28, 0.1); }
.im-hit-n b { display: block; font-weight: 500; font-size: 15px; }
.im-hit-n span { font-size: 12px; color: var(--ink-3); }
.im-hit-q { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.im-hit-q b { color: #fff; font-weight: 500; }
.im-hit-c { font-size: 12px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.im-hit-c b { color: #fff; font-weight: 500; }
.im-empty { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.im-empty p { color: var(--ink-2); margin: 6px 0 12px; max-width: 70ch; }
.im-back { background: none; border: 0; color: var(--ink-2); font: inherit; padding: 4px 0; margin-bottom: 8px; cursor: pointer; }
.im-back:hover { color: #fff; }
.im-title h2 { font-size: 22px; font-weight: 600; }
.im-title p { color: var(--ink-2); margin-top: 4px; max-width: 70ch; }
.im-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px !important; }
.im-date { font-size: 12.5px; color: var(--ink-3); }
.im-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 10px 2px 8px; white-space: nowrap; }
.im-conf::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.im-conf.c-alta::before { background: var(--up); }
.im-conf.c-bassa::before { background: var(--down); }
.im-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.im-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.im-card h4 { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 8px; }
.im-why { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.4; }
.im-warn { background: rgba(255, 181, 71, 0.1); border: 1px solid rgba(255, 181, 71, 0.4); color: var(--ink-2); border-radius: 12px; padding: 10px 14px; margin: 14px 0 0; font-size: 13px; max-width: 80ch; }
.im-rows { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.im-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.im-row:first-child { border-top: 0; }
.im-k { color: var(--ink-2); font-size: 13px; }
.im-v b { display: block; font-weight: 500; font-size: 15px; }
.im-row.dim .im-v b { color: var(--ink-3); font-weight: 400; }
.im-basis { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.im-flag { display: block; font-size: 12.5px; color: var(--amber); margin-top: 4px; line-height: 1.4; }
.im-flag i { display: inline-flex; width: 15px; height: 15px; border: 1px solid var(--amber); border-radius: 50%; align-items: center; justify-content: center; font: 600 10px/1 var(--font); font-style: normal; margin-right: 6px; vertical-align: -1px; }
.im-src { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ice); text-decoration: none; }
.im-src:hover { text-decoration: underline; text-underline-offset: 3px; }
.im-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.im-srcs a { color: var(--ice); font-size: 13px; text-decoration: none; }
.im-srcs a:hover { text-decoration: underline; }
.im-notes { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; color: var(--ink-2); font-size: 13px; }
.im-notes summary { cursor: pointer; color: var(--ink-2); }
.im-notes p { margin: 8px 0 2px; line-height: 1.5; max-width: 90ch; }
.im-note { max-width: 90ch; }
.im-foot { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 4px; }
.im-foot h3 { font-size: 14px; font-weight: 600; margin-top: 16px; }
.im-foot .b-criteria { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.where-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; }
.where-btn:hover .w-name { text-decoration: underline; text-underline-offset: 3px; }
.where-list li:has(.where-btn) { display: block; }
.where-list .w-val { font-size: 13px; font-weight: 500; white-space: nowrap; }
.where-list .w-val.dim { color: var(--ink-3); font-weight: 400; }
@media (max-width: 1200px) { .im-foot .b-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Radar delle anomalie (pannello Cerca e filtra) ---------- */
.radar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.radar-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.radar-btn {
  width: 100%; min-height: 40px; margin-top: 8px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color 120ms, background-color 120ms, color 120ms;
}
.radar-btn:hover { border-color: rgba(255, 159, 28, 0.6); color: #fff; }
.radar-btn:focus-visible, .radar-item:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.radar-btn:active { background: var(--violet-soft); }
.radar-btn[aria-pressed='true'] { background: var(--violet-soft); border-color: rgba(255, 159, 28, 0.85); color: #fff; }
.radar-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
.radar-list[hidden] { display: none; }
.radar-item {
  width: 100%; min-height: 40px; display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}
.radar-item:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.radar-item:active { background: var(--violet-soft); }
.radar-item[aria-current='true'] { border-color: rgba(255, 159, 28, 0.85); background: var(--violet-soft); }
.ri-main { font-variant-numeric: tabular-nums; }
.ri-main b { color: var(--ink); font-weight: 500; }
.radar .up { color: var(--up); }
.radar .down { color: var(--down); }
.radar .flat { color: var(--ink-3); }
.ri-why { font-size: 12.5px; color: var(--ink-3); }
.ri-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.ri-lvl { padding: 0 8px; border: 1px solid rgba(255, 181, 71, 0.55); border-radius: 999px; color: var(--amber); font-weight: 500; }
.radar-empty { padding: 12px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .radar-btn, .radar-item { transition: none; } }

/* ---------- Scenari «E se…?» (pannello Cerca e filtra) ---------- */
.scn-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; }
.scn-sum::-webkit-details-marker { display: none; }
.scn-sum::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-left: 4px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 200ms cubic-bezier(.2, .8, .2, 1);
}
.scn[open] > .scn-sum::after { transform: rotate(-135deg); }
.scn-sum:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 8px; }
.scn-state { flex: 1; min-width: 0; text-align: right; font-size: 12px; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scn-body { padding-top: 8px; }
.scn-select {
  display: block; width: 100%; min-height: 40px; margin-top: 4px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel-solid); color: var(--ink);
  font: inherit; font-size: 13px; color-scheme: dark; cursor: pointer;
  transition: border-color 120ms;
}
.scn-select:hover { border-color: rgba(255, 159, 28, 0.6); }
.scn-select:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.scn-res { margin-top: 12px; }
.scn-note { color: var(--ink-2); }
.scn-stat { margin-top: 4px; }
.scn-res .map-row { margin-top: 12px; }
.scn-play { margin-top: 12px; }
.scn-list { max-height: 34vh; }
.scn-grp { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
.scn-grp:first-child { margin-top: 0; }
.scn-item { padding: 8px 12px; gap: 2px; }
.scn-mix { padding: 0 8px; border: 1px solid rgba(255, 181, 71, 0.55); border-radius: 999px; color: var(--amber); font-size: 12px; }
.scn-clear { margin-top: 12px; min-height: 40px; }