/* Qualunque regola che dichiari un `display` batte il display:none che il
   browser dà a [hidden]: un pannello con display:flex resta a schermo anche
   nascosto — vuoto, sopra a tutto, e impossibile da chiudere, perché il
   pulsante rimette solo l'attributo. Questa riga chiude la classe di difetti
   una volta per tutte. Nessun codice imposta display inline, quindi non c'è
   niente che voglia essere visibile pur essendo [hidden]. */
[hidden] { display: none !important; }

/* ==========================================================================
   EA Dashboard — layout and components
   Shell: sidebar (fixed nav) + main (topbar, filters, stat cards, table)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.45;
  font-feature-settings: "tnum" 1;
}

button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- App shell ------------------------------------------------------------ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* --- Sidebar ---------------------------------------------------------------- */

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
}

.sidebar__brand {
  padding: 0 var(--s-3) var(--s-5);
}

.sidebar__name {
  margin: 0;
  /* off the type scale on purpose: "ULTIMATE DASHBOARD" at --t-md is ~190px
     and the brand has 184px of room, so it would break across two lines */
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar__tag {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

.nav-label {
  padding: 0 var(--s-3);
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.nav-label:first-of-type { margin-top: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: var(--t-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover { color: var(--ink); background: var(--surface); }
.nav-item[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(45, 212, 200, 0.25);
  font-weight: 500;
}
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; flex: none; }

.sidebar__footer {
  margin-top: auto;
  padding: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.sidebar__footer strong { display: block; color: var(--ink-dim); font-size: var(--t-sm); font-weight: 500; margin-bottom: 2px; }

/* --- Main ------------------------------------------------------------------- */

.main { min-width: 0; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}

.topbar__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 700;
  margin-right: var(--s-2);
}

.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--pill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: var(--t-xs);
}
.pill__label { color: var(--ink-muted); letter-spacing: 0.03em; }
.pill__value { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.pill__ccy { color: var(--ink-muted); font-size: var(--t-xs); }

.topbar__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

.sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sync__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up);
}
.sync__dot[data-feed="stale"]   { background: var(--warn); }
.sync__dot[data-feed="offline"] { background: var(--down); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--t-sm);
  cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--accent); }

/* --- Filter bar --------------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
}
/* display:flex above would otherwise beat the [hidden] attribute; the bar is
   hidden when a scope has no accounts to filter */
.filterbar[hidden] { display: none; }

.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--t-sm);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
  font-weight: 600;
}

.chip-group {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.chip-group .chip { border: none; background: none; padding: 5px 12px; }
.chip-group .chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* how many accounts the unselected scope holds, so switching to an empty one
   is never a surprise */
.chip__count { margin-left: 5px; font-size: var(--t-xs); opacity: 0.65; }

.scope-empty__hint { display: block; margin-top: var(--s-3); color: var(--ink-muted); }

/* --- Hidden EAs: one list per scope, told apart by colour ----------------
   The lists are independent, so the menu has to say which one is open before
   anything is ticked. Blue is the real fleet, green the demo one. */
.dropdown__trigger[data-scope="real"] { border-color: var(--scope-real); color: var(--scope-real); }
.dropdown__trigger[data-scope="demo"] { border-color: var(--scope-demo); color: var(--scope-demo); }
.dropdown__trigger[data-scope="real"]:hover,
.dropdown__trigger[data-scope="real"][aria-expanded="true"] { background: var(--scope-real-soft); }
.dropdown__trigger[data-scope="demo"]:hover,
.dropdown__trigger[data-scope="demo"][aria-expanded="true"] { background: var(--scope-demo-soft); }

.dropdown__panel[data-scope="real"] { border-color: var(--scope-real); }
.dropdown__panel[data-scope="demo"] { border-color: var(--scope-demo); }
.dropdown__trigger[data-scope="cent"] { border-color: var(--scope-cent); color: var(--scope-cent); }
.dropdown__trigger[data-scope="cent"]:hover,
.dropdown__trigger[data-scope="cent"][aria-expanded="true"] { background: var(--scope-cent-soft); }
.dropdown__panel[data-scope="cent"] { border-color: var(--scope-cent); }

.hidden-scope {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hidden-scope__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
[data-scope="real"] .hidden-scope { background: var(--scope-real-soft); color: var(--scope-real); }
[data-scope="real"] .hidden-scope__dot { background: var(--scope-real); }
[data-scope="demo"] .hidden-scope { background: var(--scope-demo-soft); color: var(--scope-demo); }
[data-scope="demo"] .hidden-scope__dot { background: var(--scope-demo); }
[data-scope="cent"] .hidden-scope { background: var(--scope-cent-soft); color: var(--scope-cent); }
[data-scope="cent"] .hidden-scope__dot { background: var(--scope-cent); }

/* A name the demo view inherits from the real fleet. It is shown as the
   proposal, so it has to look like one — otherwise there is no telling an
   inherited name from one pinned here, and overwriting it looks like an edit
   that was already made. */
.ea-name-row--inherited input[type="text"] { color: var(--ink-dim); font-style: italic; }
.ea-name-row--inherited input[type="text"]:focus { color: var(--ink); font-style: normal; }
.ea-name-row__tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--scope-demo-soft);
  color: var(--scope-demo);
  font-size: var(--t-xs);
  white-space: nowrap;
}
.scope-empty__hint code { color: var(--ink-dim); }

.search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font-size: var(--t-sm);
  flex: 1 1 220px;
  max-width: 300px;
}
.search::placeholder { color: var(--ink-muted); }

.filterbar__spacer { flex: 1 1 auto; }

/* --- Dropdown ------------------------------------------------------------- */

.dropdown { position: relative; }

.dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dropdown__trigger::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
}
.dropdown__trigger[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--ink);
}

.dropdown__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 232px;
  /* the sidebar is only there on a wide screen; subtracting it unconditionally
     squeezed every panel down to a strip on a phone */
  max-width: min(320px, calc(100vw - var(--s-6)));
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: var(--s-2);
}
.dropdown__panel[hidden] { display: none; }
/* a picker sitting at the right edge of a panel has to open inwards, or it
   is clipped by the card it lives in */
.dropdown__panel--right { left: auto; right: 0; }

.dropdown__group-label {
  padding: 6px 8px 2px;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  cursor: pointer;
}
.dropdown__item:hover { background: var(--surface); }
.dropdown__item input[type="checkbox"],
.dropdown__item input[type="radio"] { accent-color: var(--accent); flex: 0 0 auto; }
.dropdown__item span.count { margin-left: auto; color: var(--ink-muted); font-size: var(--t-xs); }

/* One account: its checkbox label, then the demo/real override. The selector
   is a sibling of the label, not a child — inside it, opening the menu would
   also tick the account. */
.acct-row { display: flex; align-items: center; gap: var(--s-1); }
.acct-row .dropdown__item { flex: 1 1 auto; min-width: 0; }
.acct-type {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: var(--t-xs);
  padding: 3px 4px;
  cursor: pointer;
}
.acct-type:hover { border-color: var(--accent); color: var(--ink); }
/* forced by hand: no report overwrites it, and it should not look like a
   value the terminal happened to send */
.acct-type--manual { border-color: var(--accent); color: var(--ink); }
/* one line per option: a wrapped label makes the list twice as tall and
   twice as hard to scan */
.dropdown__item > span:not(.count) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown__divider { height: 1px; background: var(--line-soft); margin: var(--s-2) 4px; }

/* Magic-number -> EA name editor. A fleet has dozens of magic numbers, so
   this panel gets as much of the window as it can use: picking several rows
   at once is the whole point, and that needs them on screen together. */
.dropdown__panel--wide {
  min-width: 360px;
  max-height: min(72vh, 760px);
}

/* Compact rows: the more magic numbers fit at once, the easier it is to pick
   the group that belongs to one EA. */
.ea-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
}
.ea-name-row > .num {
  flex: 0 0 auto;
  min-width: 108px;
  color: var(--ink-muted);
  font-size: var(--t-xs);
}
.ea-name-row input[type="checkbox"] {
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.ea-name-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-sm);
  padding: 3px 8px;
}
.ea-name-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.ea-name-row input::placeholder { color: var(--ink-dim); }

/* One line per account under a magic two accounts share: indented past the
   checkbox, so it reads as belonging to the magic above it. */
.ea-name-row--acct { padding-left: 29px; }
.ea-name-row__acct {
  flex: 0 0 auto;
  min-width: 108px;
  color: var(--ink-dim);
  font-size: var(--t-xs);
}

/* Stays reachable however long the magic-number list gets. */
.ea-name-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-raised);
  padding-top: 2px;
}

.ea-name-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--s-2) 8px 4px;
}
.ea-name-bulk input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-sm);
  padding: 5px 8px;
}
.ea-name-bulk input:focus { outline: none; border-color: var(--accent); }
.ea-name-bulk input::placeholder { color: var(--ink-dim); }
.ea-name-bulk .btn { flex: 0 0 auto; }

/* Adding a magic by hand: the number is a fixed, narrow field — it is never
   longer than a magic — and the name takes the rest of the line. */
.ea-name-add { padding-bottom: var(--s-2); }
.ea-name-add #ea-add-magic {
  flex: 0 0 124px;
  font-family: var(--font-num);
}

/* A magic that exists only because it was typed in: no trade has arrived from
   it yet, so the row says so rather than looking like an EA that has run. */
.ea-name-row--pending > .num { color: var(--ink-dim); }
.ea-name-row__tag--pending {
  background: var(--surface);
  color: var(--ink-dim);
  border: 1px solid var(--line);
}

.ea-hidden-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 8px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.ea-hidden-row > .num { flex: 0 0 auto; min-width: 96px; font-size: var(--t-xs); }
.ea-hidden-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
}
.ea-hidden-row__count { color: var(--ink-muted); font-size: var(--t-xs); }

/* --- Import start ----------------------------------------------------------- */

.imp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 8px;
}
.imp-row__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.imp-row__meta {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imp-row__set {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}
.imp-row__set input[type="date"] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: var(--t-xs);
  padding: 4px 6px;
  color-scheme: dark;
}
.imp-row__set input[type="date"]:focus { outline: none; border-color: var(--accent); }

.dropdown__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 8px 2px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--t-xs);
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* --- Date range ------------------------------------------------------------ */

.daterange {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.daterange input[type="date"] {
  background: none;
  border: none;
  color: var(--ink);
  font-size: var(--t-sm);
  font-family: var(--font-num);
  color-scheme: dark;
}
.daterange span { color: var(--ink-muted); font-size: var(--t-sm); }

/* --- Content -------------------------------------------------------------- */

.content { padding: 0 var(--s-5) var(--s-7); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.panel__title { margin: 0; font-size: var(--t-md); font-weight: 700; }
.panel__hint { margin: 2px 0 0; font-size: var(--t-xs); color: var(--ink-muted); }
.panel__right { font-size: var(--t-xs); color: var(--ink-muted); display: flex; align-items: center; gap: var(--s-2); }

/* --- Stat cards row -------------------------------------------------------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
}

.stat {
  padding: var(--s-4);
  border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: none; }

.stat__label { font-size: var(--t-xs); color: var(--ink-muted); }
.stat__value {
  margin-top: 4px;
  font-size: var(--t-lg);
  font-weight: 700;
}

/* The positions row carries one card more than the others. */
.stats-row--5 { grid-template-columns: repeat(5, 1fr); }

/* --- Last closed trade, as a pill -------------------------------------------
   Not a figure like its neighbours but a verdict: the fill answers "did the
   last trade make money" from across the room, the number confirms it. */

.lastpill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.35;
}
.lastpill.up   { color: var(--up);      background: var(--up-soft); }
.lastpill.down { color: var(--down);    background: var(--down-soft); }
.lastpill.flat { color: var(--ink-dim); background: var(--surface); }

/* A strategy name can be far longer than the card is wide, so it is the part
   that gives way: it truncates, the figure never does. */
.lastpill__name {
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lastpill__pl { font-weight: 700; flex: none; }

/* --- Table ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 1080px;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  text-align: left;
  font-weight: 500;
  color: var(--ink-muted);
  font-size: var(--t-xs);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
thead th:hover { color: var(--ink); }
thead th[aria-sort] { color: var(--accent); }
thead th[aria-sort="descending"]::after { content: " ↓"; }
thead th[aria-sort="ascending"]::after  { content: " ↑"; }

tbody td {
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-raised); }

.right { text-align: right; }

.sym {
  font-weight: 500;
}
.sym__ticket { color: var(--ink-muted); font-size: var(--t-xs); }

.side {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.side[data-side="buy"]  { color: var(--up); }
.side[data-side="sell"] { color: var(--down); }
.side::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.side[data-side="buy"]::before  { border-bottom: 6px solid var(--up); }
.side[data-side="sell"]::before { border-top: 6px solid var(--down); }

.strategy-tag {
  font-size: var(--t-xs);
  color: var(--ink-dim);
  background: var(--pill);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* Positions page only: a strategy with nothing open and no closed trade in a
   while — 12 days gets a soft warning ring, 30 the harder one. The ring is a
   box-shadow rather than widening the border, so the pill's size and the
   table's alignment do not shift when one lights up. */
.strategy-tag--stale-blue { border-color: var(--scope-real); box-shadow: 0 0 0 1px var(--scope-real); }
.strategy-tag--stale-red  { border-color: var(--down);       box-shadow: 0 0 0 1px var(--down); }

.dash { color: var(--ink-muted); }

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

/* --- Positions page: account type ------------------------------------------
   Real/demo/contest is not a P&L state, so it borrows the scope colours
   already used for the same distinction elsewhere (the hidden-EA menu),
   rather than the up/down palette that means profit and loss. */
.type-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.type-chip[data-type="real"]    { background: var(--scope-real-soft); color: var(--scope-real); }
.type-chip[data-type="demo"]    { background: var(--scope-demo-soft); color: var(--scope-demo); }
.type-chip[data-type="cent"]    { background: var(--scope-cent-soft); color: var(--scope-cent); }
.type-chip[data-type="contest"] { background: var(--surface-raised);  color: var(--offline); }

/* --- Correlation ------------------------------------------------------------ */

.cr-table { border-collapse: separate; border-spacing: 2px; }
.cr-table thead th { background: none; border: none; cursor: default; }

.cr-head {
  vertical-align: bottom;
  padding: 0 0 var(--s-2);
  max-width: 92px;
}
.cr-head span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-dim);
  white-space: normal;
  line-height: 1.25;
}

.cr-row-head {
  background: none;
  border: none;
  text-align: left;
  padding: 0 var(--s-3) 0 0;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  cursor: default;
}
.cr-row-head__days {
  margin-left: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

.cr-cell {
  position: relative;
  min-width: 74px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: center;
  overflow: hidden;
}
.cr-cell__fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}
/* the direction is intentional: moving together stacks risk, so it is the
   one that reads as a warning */
.cr-cell__fill--together { background: var(--down); }
.cr-cell__fill--opposite { background: var(--up); }
.cr-cell__fill--flat     { background: var(--ink-muted); }

.cr-cell__val {
  position: relative;
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-num);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.cr-cell--self { background: var(--line-soft); }
.cr-cell--self .cr-cell__val, .cr-cell--none .cr-cell__val { color: var(--ink-muted); }
.cr-cell--none { background: var(--surface); }
/* a figure resting on few days is dimmed rather than hidden */
.cr-cell--thin .cr-cell__val { opacity: 0.6; }
/* how many days it rests on, always visible: it is what makes the number
   worth trusting or not */
.cr-cell__days {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 9px;
  color: var(--ink-muted);
}

.cr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-dim);
}
.cr-legend__item { display: flex; align-items: center; gap: 6px; }
.cr-legend__item--note { color: var(--ink-muted); }
.cr-swatch { width: 22px; height: 8px; border-radius: var(--radius-pill); }
.cr-swatch--together { background: var(--down); }
.cr-swatch--opposite { background: var(--up); }
.cr-swatch--flat     { background: var(--ink-muted); }

.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.cr-list__row:last-child { border-bottom: 0; }
.cr-list__pair {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-list__vs { margin: 0 6px; color: var(--ink-muted); font-size: var(--t-xs); }
.cr-list__bar {
  flex: 0 0 140px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.cr-list__bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.cr-list__bar-fill--together { background: var(--down); }
.cr-list__bar-fill--opposite { background: var(--up); }
.cr-list__bar-fill--flat     { background: var(--ink-muted); }
.cr-list__val  { flex: 0 0 56px; text-align: right; font-weight: 600; color: var(--ink); }
.cr-list__days { flex: 0 0 44px; text-align: right; font-size: var(--t-xs); color: var(--ink-muted); }

/* --- Overview --------------------------------------------------------------- */

.ov {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.ov-tile {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
/* the day's net leads the page, so it gets the space of two tiles */
.ov-tile--lead { grid-column: span 2; }

.ov-tile__label {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.ov-tile__note {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-muted);
}

/* proportional figures at display size: tabular loosens large numbers */
.ov-hero {
  margin: 0;
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: normal;
}
.ov-figure {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: normal;
  color: var(--ink);
}
.ov-unit {
  font-family: var(--font-text);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.ov-line {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ov-line--split { justify-content: space-between; }
.ov-line strong { color: var(--ink); font-weight: 600; }
.ov-sub { color: var(--ink-muted); font-size: var(--t-xs); }
.ov-delta { font-weight: 600; }

.ov-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}
.ov-dot--up   { background: var(--up); }
.ov-dot--down { background: var(--down); }

/* profit against loss, as a share of the two together */
.ov-split {
  display: flex;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--down);
  overflow: hidden;
}
.ov-split__up { background: var(--up); border-radius: var(--radius-pill) 0 0 var(--radius-pill); }

/* value on its own track, with the break-even point marked on it */
.ov-meter {
  position: relative;
  display: block;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.ov-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}
.ov-meter__fill--up   { background: var(--up); }
.ov-meter__fill--down { background: var(--down); }
.ov-meter__mark {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 1px;
  background: var(--ink-muted);
}

@media (max-width: 700px) {
  .ov-tile--lead { grid-column: span 1; }
}

/* --- Equity curve ----------------------------------------------------------- */

.ec { position: relative; margin-top: var(--s-3); overflow: hidden; }
.ec__svg { display: block; max-width: 100%; }

/* chrome stays recessive: the data is the only thing meant to be read */
/* The grid is a reading aid, so it stays quiet — but quiet is not invisible:
   at --line-soft the vertical lines could not be made out at all. Both
   directions now get the same weight, so a point can be read across and down. */
.ec__grid { stroke: var(--line); stroke-width: 1; opacity: 1; }
.ec__grid--v { stroke: var(--line); opacity: 1; }
.ec__zero { stroke: var(--line); stroke-width: 1; }
.ec__ytick, .ec__xtick {
  fill: var(--ink-muted);
  font-family: var(--font-num);
  font-size: 11px;
}
.ec__xtick { font-family: var(--font-text); }

/* accent = "the subject"; in this palette it never means profit or loss */
.ec__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* the fill fades out downwards so the line stays the thing being read */
.ec__area { fill: url(#ec-grad-eq); stroke: none; }
.ec__stop-a { stop-color: var(--accent); stop-opacity: 0.28; }
.ec__stop-b { stop-color: var(--accent); stop-opacity: 0; }
.ec__last { fill: var(--accent); stroke: var(--surface-raised); stroke-width: 2; }

/* depth below the high-water mark is a loss, so it wears the loss colour */
.ec__dd-line { fill: none; stroke: var(--down); stroke-width: 1.4; stroke-linejoin: round; }
.ec__dd-area { fill: url(#ec-grad-dd); stroke: none; }
.ec__stop-c { stop-color: var(--down); stop-opacity: 0.05; }
.ec__stop-d { stop-color: var(--down); stop-opacity: 0.3; }

.ec__cross { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }

.ec__caption {
  margin: var(--s-3) 0 var(--s-1) 64px;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

/* the figures that head the page: one card each, side by side */
.ec__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-2);
}

.ec-sum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ec-sum__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.ec-sum__value {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* proportional figures: tabular loosens a number at display size */
  font-variant-numeric: normal;
}
.ec-sum__unit {
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.ec-sum__sub {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec__tip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  min-width: 168px;
  padding: var(--s-2);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  font-size: var(--t-xs);
}
.ec__tip[hidden] { display: none; }
.ec__tip-date { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.ec__tip-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--ink-dim);
}

/* --- Deepest drawdowns ------------------------------------------------------ */

.dd__amount {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.dd__bar {
  display: block;
  margin-top: 4px;
  width: 120px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.dd__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--down);
}

/* --- Calendar --------------------------------------------------------------- */

.cal__nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cal__label {
  min-width: 148px;
  text-align: center;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
}
.btn--icon {
  padding: 4px 10px;
  line-height: 1.2;
  font-size: var(--t-md);
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(84px, 0.7fr);
  gap: var(--s-1);
  margin-top: var(--s-4);
}

.cal__dow {
  padding: 0 var(--s-2) var(--s-1);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.cal__dow--week { text-align: right; }

.cal__cell {
  min-height: 78px;
  padding: var(--s-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* a day outside the month is a gap in the grid, not an empty trading day */
.cal__cell--blank {
  background: none;
  border-style: dashed;
  border-color: var(--line-soft);
}
.cal__cell--traded { background: var(--surface-raised); }
.cal__cell--today { border-color: var(--accent); }

.cal__day {
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.cal__cell--traded .cal__day { color: var(--ink-dim); }

.cal__net {
  font-size: var(--t-base);
  font-weight: 600;
}
.cal__trades {
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

/* length = size of the day against the month's biggest; colour = direction */
.cal__bar {
  margin-top: auto;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.cal__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
}
.cal__bar-fill--up   { background: var(--up); }
.cal__bar-fill--down { background: var(--down); }
.cal__bar-fill--flat { background: var(--ink-muted); }

.cal__week {
  min-height: 78px;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.cal__stat-value { font-weight: 600; }
.cal__stat-ccy {
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal__dow--week, .cal__week { display: none; }
}

/* --- Strategy cards --------------------------------------------------------- */

/* What the strategy is carrying right now. Absent when nothing is open, so
   its presence alone says "this one is live". A circle for a short figure,
   stretching to a pill rather than clipping a long one. */
.scard__live {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 58px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.scard__live.up   { color: var(--up);   background: var(--up-soft); }
.scard__live.down { color: var(--down); background: var(--down-soft); }
.scard__live.flat { color: var(--ink-dim); background: var(--surface); }
/* the name must not run under the badge */
.scard__live + .scard__head { padding-right: 68px; }

.scards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}

.scard {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.scard__name {
  margin: 0;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
}
.scard__ident {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.scard__since {
  margin: 3px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-dim);
}

.scard__net {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}
.scard__net-label {
  font-size: var(--t-xs);
  color: var(--ink-dim);
}
.scard__net-value {
  font-size: var(--t-lg);
  font-weight: 600;
  /* a display-size figure reads better proportional; tabular is for columns */
  font-variant-numeric: normal;
}

.scard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.stat-pair { display: flex; flex-direction: column; gap: 2px; }
.stat-pair__label {
  font-size: var(--t-xs);
  color: var(--ink-dim);
}
.stat-pair__value {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
}
.stat-pair__sub {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

.scard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}
.scard__foot-label {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}

.spark { display: block; overflow: visible; }
.spark--empty { font-size: var(--t-xs); color: var(--ink-muted); }
/* the baseline is chrome: it must not compete with the bars */
.spark__zero { stroke: var(--line); stroke-width: 1; }
.spark__bar--up   { fill: var(--up); }
.spark__bar--down { fill: var(--down); }
.spark__bar:hover { fill: var(--ink); }
.flat { color: var(--ink-dim); }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
}
.badge[data-state="up"]      { background: var(--up-soft);   color: var(--up); }
.badge[data-state="down"]    { background: var(--down-soft); color: var(--down); }
.badge[data-state="warn"]    { background: var(--warn-soft); color: var(--warn); }
.badge[data-state="offline"] { background: var(--surface-raised); color: var(--offline); }

.empty {
  padding: var(--s-6) var(--s-4);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  text-align: center;
}

.sortbar { display: none; }
.sortbar label { font-size: var(--t-xs); color: var(--ink-muted); }
.sortbar select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-sm);
  padding: 5px 8px;
  max-width: 150px;
}
.sortbar select:focus { outline: none; border-color: var(--accent); }
.sortbar .btn { padding: 5px 10px; font-size: var(--t-xs); white-space: nowrap; }

.panel__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4);
}

.group-row {
  cursor: pointer;
}
.group-row td { font-weight: 500; }
.group-row .strategy-tag { font-weight: 400; }

/* --- Motion --------------------------------------------------------------- */

.chip, .nav-item, thead th, .btn { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }

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

/* --- Narrow screens --------------------------------------------------------- */

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: var(--s-3);
  }
  .sidebar__brand, .nav-label, .sidebar__footer { display: none; }
  .nav-item { white-space: nowrap; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row--5 { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stats-row--5 .stat:nth-child(4) { border-right: none; }
  .topbar, .filterbar, .content { padding-left: var(--s-4); padding-right: var(--s-4); }
  .dropdown__panel--wide { min-width: 0; max-width: calc(100vw - var(--s-5)); }
}

/* --- Phones ------------------------------------------------------------------
   A table of eleven columns cannot be read on a 390px screen: sideways
   scrolling hides most of the row, and the header scrolls away with it. Below
   this width each row becomes a card instead, every cell carrying its own
   label. Nothing here touches the desktop layout — it all lives in the query. */

@media (max-width: 640px) {
  .topbar, .filterbar, .content {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }
  .topbar { gap: var(--s-2); padding-top: var(--s-4); padding-bottom: var(--s-3); }
  .topbar__title { font-size: var(--t-md); width: 100%; margin-right: 0; }
  .topbar__meta { margin-left: 0; width: 100%; justify-content: space-between; }
  .filterbar { gap: 6px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .chip { padding: 5px 10px; font-size: var(--t-xs); }
  .chip-group .chip { padding: 4px 9px; }

  .panel { padding: var(--s-4) var(--s-3); }
  .panel__head { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

  /* one figure per line, so nothing is cut in half */
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row--5 { grid-template-columns: 1fr 1fr; }
  .lastpill { font-size: var(--t-sm); padding: 4px 11px; }
  .ov { grid-template-columns: 1fr; }
  .ov-tile { padding: var(--s-3) var(--s-4); }
  .ov-hero { font-size: var(--t-xl); }
  .scards { grid-template-columns: 1fr; }

  /* --- tables become cards --- */
  .table-wrap { overflow-x: visible; }
  table { min-width: 0; display: block; }
  table thead { display: none; }               /* the labels move into the cells */
  table tbody { display: block; }

  tbody tr {
    display: block;
    margin-bottom: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
  }
  tbody tr:hover td { background: none; }

  tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 3px 0;
    border-bottom: none;
    white-space: normal;
    text-align: left;
  }
  tbody td.right { text-align: right; }
  tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--ink-muted);
    font-size: var(--t-xs);
    font-family: var(--font-text);
    font-weight: 400;
  }
  /* a cell with nothing in it is noise on a card */
  tbody td:empty { display: none; }
  /* the empty-state row must stay a plain block, not a labelled card */
  tbody td[colspan] { display: block; }
  tbody td[colspan]::before { content: none; }

  /* the header is gone, so this is the only way to reorder */
  .sortbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  /* --- calendar: the month still has to fit --- */
  .cal__cell, .cal__week { min-height: 56px; padding: 4px; }
  .cal__net { font-size: var(--t-xs); }
  .cal__trades { display: none; }
  .cal__label { min-width: 0; font-size: var(--t-base); }

  /* --- charts and matrices keep their own scroll --- */
  .ec { overflow-x: auto; }
  .cr-table { min-width: 0; }
  .cr-cell { min-width: 62px; height: 40px; }

  /* --- alerts: la riga è diventata una scheda, quindi il filo rosso passa
         dalla cella al bordo, e il testo del messaggio può andare a capo --- */
  .al-row--quiet td:first-child { box-shadow: none; }
  tbody tr.al-row--quiet { border-color: var(--down); }
  .al-logtext { max-width: none; white-space: normal; }
  /* nella scheda il pulsante è l'unica cella senza etichetta: va da solo,
     a tutta larghezza, come ultima riga della scheda */
  .al-controls { width: auto; text-align: left; padding-top: var(--s-2); }
  .al-controls .btn--mini { width: 100%; justify-content: center; padding: 6px 12px; }
}

/* --- Sign-in gate ----------------------------------------------------------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: var(--ground);
}
.gate[hidden] { display: none; }

.gate__box {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.gate__brand {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.gate__title { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.gate__hint { margin: -6px 0 var(--s-2); font-size: var(--t-sm); color: var(--ink-muted); }

.gate__input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-base);
  padding: 10px 12px;
}
.gate__input:focus { outline: none; border-color: var(--accent); }

.gate__btn {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ground);
  font-size: var(--t-base);
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
}
.gate__btn:disabled { opacity: 0.6; cursor: default; }

.gate__error { margin: 0; font-size: var(--t-sm); color: var(--down); }
.gate__error[hidden] { display: none; }

.gate__success { margin: 0; font-size: var(--t-sm); color: var(--up); }
.gate__success[hidden] { display: none; }

.gate__forgot { align-self: center; margin-top: -4px; font-size: var(--t-sm); }

/* --- Strategy detail --------------------------------------------------------- */

/* Cent view: account cards above the open positions. Same card as a strategy,
   lined up with the filters below it; the picked one wears the cent colour. */
.acards { padding: 0 var(--s-4) var(--s-4); }
.acards[hidden] { display: none; }
.acard { cursor: pointer; }
.acard:hover { border-color: var(--scope-cent); }
.acard:focus-visible { outline: 2px solid var(--scope-cent); outline-offset: 2px; }
.acard--on { border-color: var(--scope-cent); box-shadow: inset 0 0 0 1px var(--scope-cent); }
/* a sixth figure, today's closed profit, in every scope */
.stat[hidden] { display: none; }
@media (min-width: 981px) {
  .stats-row--5.stats-row--6 { grid-template-columns: repeat(6, 1fr); }
}

/* the totals moved above the cards: a line and some room before the first one */
.stats-row + .acards { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

/* On a phone a full card is a screen of its own. Compact: EA name and
   floating on one line, the four figures in a single row under them, so a
   screen holds four or five accounts instead of two. */
@media (max-width: 640px) {
  .acards { gap: var(--s-2); }
  .acard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3);
  }
  .acard .scard__head { min-width: 0; }
  .acard .scard__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acard .scard__net { border-top: 0; padding-top: 0; align-self: center; }
  .acard .scard__net-label { display: none; }
  .acard .scard__net-value { font-size: var(--t-md); }
  .acard .scard__grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--line-soft);
  }
  .acard .stat-pair__label { font-size: 10px; }
  .acard .stat-pair__value { font-size: var(--t-xs); }
}

.scard[data-skey] { cursor: pointer; }
.scard[data-skey]:hover { border-color: var(--accent); }
.scard[data-skey]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sdetail {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(4, 7, 14, 0.72);
}
.sdetail[hidden] { display: none; }

.sdetail__box {
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.sdetail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-2);
}
.sdetail__title { margin: 0; font-size: var(--t-md); font-weight: 600; }

.sdetail__body {
  padding: 0 var(--s-5) var(--s-5);
  overflow-y: auto;
}
.sdetail__body .scard__net { margin-top: var(--s-3); }
.sdetail__body .scard__grid { margin-top: var(--s-3); }

/* --- the trades behind the figures --- */

.tlist__head, .tline {
  display: grid;
  grid-template-columns: 1fr 1.1fr auto auto;
  gap: var(--s-3);
  align-items: baseline;
}
.tlist__head {
  margin-top: var(--s-4);
  padding: 0 0 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.tlist__head span:nth-child(3), .tlist__head span:nth-child(4) { text-align: right; }

.tlist { list-style: none; margin: 0; padding: 0; }
.tline {
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-xs);
}
.tline:last-child { border-bottom: 0; }

.tline__when { color: var(--ink-dim); }
.tline__what { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tline__side {
  display: inline-block;
  min-width: 14px;
  text-align: center;
  border-radius: 3px;
  font-weight: 600;
}
.tline__side[data-side="buy"]  { color: var(--up);   background: var(--up-soft); }
.tline__side[data-side="sell"] { color: var(--down); background: var(--down-soft); }
.tline__lots { margin-left: 5px; color: var(--ink-muted); }
.tline__pl  { text-align: right; font-weight: 600; }
/* the running total is context, not the figure being read */
.tline__cum { text-align: right; color: var(--ink-muted); }

@media (max-width: 640px) {
  .sdetail__box { max-height: 92vh; }
  .sdetail__body { padding: 0 var(--s-4) var(--s-4); }
  .tlist__head, .tline { grid-template-columns: 1fr auto auto; }
  .tlist__head span:nth-child(2), .tline__what { display: none; }
}

/* --- Strategies behind the floating result ---------------------------------- */

.spills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.spill {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: none;
  font-size: var(--t-xs);
  cursor: pointer;
  max-width: 260px;
}
.spill.up   { color: var(--up);   background: var(--up-soft); }
.spill.down { color: var(--down); background: var(--down-soft); }
.spill.flat { color: var(--ink-dim); background: var(--surface); }
.spill--all { color: var(--accent); background: var(--accent-soft); }
.spill--all .spill__pl { color: var(--ink-dim); font-weight: 500; }

.spill__name {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spill__pl { font-weight: 600; }

/* the picked one is filled rather than outlined, so the choice is unmistakable */
.spill--on { box-shadow: inset 0 0 0 1px currentColor; }
.spill--on .spill__name { color: currentColor; }
.spill:hover { filter: brightness(1.18); }

/* --- Strategy PDF report ------------------------------------------------------
   The dialog is dashboard-dark like everything else; the sheet inside it is the
   printed page, and it uses the paper tokens instead. Two palettes on screen at
   once is deliberate: what is white is what comes out of the printer. */

.btn--primary {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent); color: var(--ground); }
.btn--primary:disabled {
  background: none;
  border-color: var(--line);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.sdetail__actions { display: flex; align-items: center; gap: var(--s-2); }

.sreport {
  position: fixed;
  inset: 0;
  z-index: 95;                 /* over the detail panel it was opened from */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(4, 7, 14, 0.82);
}
.sreport[hidden] { display: none; }

.sreport__box {
  width: 100%;
  max-width: 920px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.sreport__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-2);
}
.sreport__title { margin: 0; font-size: var(--t-md); font-weight: 600; }
.sreport__sub { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-dim); }

.sreport__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: 0 var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.sreport__count {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--ink-dim);
  font-family: var(--font-num);
}

.sreport__preview {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5);
  background: var(--ground);
}

/* --- the sheet ---------------------------------------------------------------- */

.report {
  display: block;
  max-width: 794px;            /* A4 at 96dpi, so the preview is the page */
  margin: 0 auto;
  padding-bottom: var(--s-2);
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  font-size: var(--t-sm);
  /* the report is the one place colour has to survive the printer */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* P&L direction, restated in ink that holds on white */
.report .up   { color: var(--paper-up); }
.report .down { color: var(--paper-down); }
.report .flat { color: var(--paper-ink-dim); }

.report__band {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-band);
  color: var(--paper);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.report__brand {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.report__brandsub, .report__scope, .report__gen {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  opacity: 0.72;
}
.report__bandmeta { text-align: right; }
.report__scope { font-weight: 600; opacity: 1; }
.report__gen { font-family: var(--font-num); }

.report__id { padding: var(--s-5) var(--s-5) var(--s-4); }
.report__title {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.15;
}
.report__meta {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  color: var(--paper-ink-dim);
}
.report__period {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-num);
  font-size: var(--t-sm);
  color: var(--paper-accent);
  font-weight: 600;
}
.report__periodsub { color: var(--paper-ink-muted); font-weight: 400; }

.report__empty {
  padding: var(--s-5);
  color: var(--paper-ink-dim);
  line-height: 1.5;
}

.report__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  padding: 0 var(--s-5);
}
.rp-tile {
  padding: var(--s-3);
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}
/* the figure the report exists to report */
.rp-tile--wide {
  background: var(--paper-accent-soft);
  border-color: var(--paper-accent);
}
.rp-tile__label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-ink-muted);
}
.rp-tile__value {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-lg);
  font-weight: 700;
  font-family: var(--font-num);
  line-height: 1.1;
}
.rp-tile__unit { font-size: var(--t-sm); color: var(--paper-ink-muted); font-weight: 400; }
.rp-tile__sub {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--paper-ink-dim);
}

.report__section { padding: 0 var(--s-5); margin-top: var(--s-5); }
.report__h2 {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--paper-line);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-accent);
}
.report__h2sub {
  margin-left: var(--s-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--paper-ink-muted);
}
.report__caption {
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  color: var(--paper-ink-muted);
  line-height: 1.45;
}

/* --- the curve ---------------------------------------------------------------- */

.rp__svg { display: block; width: 100%; height: auto; }
.rp__plotbg { fill: var(--paper-tint); }
.rp__grid { stroke: var(--paper-line-soft); stroke-width: 1; }
.rp__ytick, .rp__xtick {
  fill: var(--paper-ink-muted);
  font-family: var(--font-num);
  font-size: var(--t-xs);
}
.rp__base { stroke: var(--paper-ink-dim); stroke-width: 1; stroke-dasharray: 4 3; }
.rp__baselabel {
  fill: var(--paper-ink-dim);
  font-family: var(--font-num);
  font-size: var(--t-xs);
}
.rp__area { fill: url(#rp-grad); }
.rp__stop-a--up   { stop-color: var(--paper-up);   stop-opacity: 0.28; }
.rp__stop-a--down { stop-color: var(--paper-down); stop-opacity: 0.28; }
.rp__stop-b       { stop-color: var(--paper);      stop-opacity: 0; }
.rp__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp__line--up   { stroke: var(--paper-up); }
.rp__line--down { stroke: var(--paper-down); }
.rp__last--up   { fill: var(--paper-up); }
.rp__last--down { fill: var(--paper-down); }
.rp__endlabel { font-family: var(--font-num); font-size: var(--t-xs); font-weight: 700; }
.rp__endlabel--up   { fill: var(--paper-up); }
.rp__endlabel--down { fill: var(--paper-down); }
/* the deepest peak-to-trough stretch, shown rather than described */
.rp__ddband { fill: var(--paper-down-soft); }
.rp__ddlabel {
  fill: var(--paper-down);
  font-family: var(--font-num);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* --- best / worst / span ------------------------------------------------------- */

.report__extremes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.rp-note {
  padding-left: var(--s-3);
  border-left: 3px solid var(--paper-line);
}
.rp-note--up   { border-left-color: var(--paper-up); }
.rp-note--down { border-left-color: var(--paper-down); }
.rp-note__label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-ink-muted);
}
.rp-note__value {
  display: block;
  font-family: var(--font-num);
  font-size: var(--t-md);
  font-weight: 700;
}
.rp-note__sub { display: block; font-size: var(--t-xs); color: var(--paper-ink-dim); }

/* --- tables -------------------------------------------------------------------- */

/* Two columns by float, not by grid or flex: in a paginated context Chrome
   resolves a table's percentage width against the page rather than against its
   flex or grid item, and the two tables print on top of each other. A float
   gives an ordinary block to measure against, and prints. */
.report__split::after { content: ""; display: block; clear: both; }
.report__split > div { float: left; width: 48%; }
.report__split > div + div { float: right; }

.rp-table {
  width: 100%;
  /* the dashboard's own tables carry a min-width so their columns never crush;
     the sheet is 794px wide and its tables have to fit inside it */
  min-width: 0;
  border-collapse: collapse;
  font-size: var(--t-xs);
}
.rp-table th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper-ink-muted);
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper);
}
.rp-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--paper-line-soft);
}
.rp-table tbody tr:nth-child(even) { background: var(--paper-tint); }
.rp-table .num { font-family: var(--font-num); }
.rp-t__n   { color: var(--paper-ink-muted); }
.rp-t__acc { color: var(--paper-ink-dim); }
.rp-t__pl  { text-align: right; font-weight: 600; }
.rp-t__idx { text-align: right; color: var(--paper-ink-dim); }
.rp-dim    { color: var(--paper-ink-muted); }

.rp-side {
  display: inline-block;
  min-width: 34px;
  padding: 1px 4px;
  border-radius: 3px;
  text-align: center;
  font-weight: 700;
  font-size: var(--t-xs);
}
.rp-side[data-side="buy"]  { color: var(--paper-up);   background: var(--paper-up-soft); }
.rp-side[data-side="sell"] { color: var(--paper-down); background: var(--paper-down-soft); }

.report__foot {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--paper-line);
  font-size: var(--t-xs);
  color: var(--paper-ink-muted);
}

/* a grid track is as wide as its widest cell unless it is told otherwise, and
   a table will happily be wider than the column it sits in */
.report__split > div { min-width: 0; }
/* fixed layout, and the first column told how much room it needs: an account
   name is long and the two figures beside it are short */
.report__split .rp-table { table-layout: fixed; }
.rp-table--month th:first-child { width: 34%; }
.rp-table--acc th:first-child { width: 54%; }

/* Only the preview narrows. The sheet is A4 whatever the screen does, and the
   printed page is ~718px wide — inside this breakpoint — so a media query here
   would quietly restyle the PDF as well. */
@media (max-width: 720px) {
  .sreport__count { margin-left: 0; }
}

/* On a narrow screen the dashboard's tables become cards. The sheet keeps its
   tables: it is a page, and it prints at A4 whatever the window is doing. */
@media (max-width: 640px) {
  .rp-table { display: table; }
  .rp-table thead { display: table-header-group; }
  .rp-table tbody { display: table-row-group; }
  .rp-table tbody tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .rp-table tbody td { display: table-cell; padding: 3px 6px; }
  .rp-table tbody td::before { content: none; }
}

/* --- Printing -------------------------------------------------------------------
   The dashboard does not print; the sheet does. Everything else is taken off the
   page, the sheet loses its screen chrome, and the browser's own dialog is what
   writes the PDF — no library, and the preview above is the page below. */

@page {
  size: A4 portrait;
  margin: 12mm 10mm 14mm;
}

@media print {
  html, body { background: var(--paper); }

  .app, .gate { display: none !important; }

  .sreport {
    position: static;
    display: block;
    padding: 0;
    background: none;
  }
  .sreport[hidden] { display: none !important; }
  .sreport__box {
    max-width: none;
    max-height: none;
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sreport__head, .sreport__controls { display: none !important; }
  .sreport__preview {
    overflow: visible;
    padding: 0;
    background: none;
  }

  .report {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* the page margin is set by @page, so the sheet keeps none of its own */
  .report__band, .report__id, .report__kpis, .report__section, .report__foot {
    padding-left: 0;
    padding-right: 0;
  }
  .report__band { border-radius: 0; padding-left: var(--s-4); padding-right: var(--s-4); }

  /* nothing that reads as one block may be split down the middle */
  .rp-tile, .rp-note, .report__extremes, .report__chartwrap, .report__split { break-inside: avoid; }
  .rp-table tr { break-inside: avoid; }
  .rp-table thead { display: table-header-group; }   /* repeated on every page */
  .report__h2 { break-after: avoid; }
  .report__foot { break-inside: avoid; }
}

/* --- EA Stress Test ------------------------------------------------------------
   Una pagina che parte da un modulo e finisce con un verdetto. Le cinque fasce
   di rischio hanno i loro colori (verde -> rosso) e sono l'unico posto della
   dashboard in cui il verde/rosso non significa P&L ma "quanto mi fido": è una
   scala di giudizio, e viene detta anche a parole accanto al colore. */

.st-form {
  border-top: 1px solid var(--line-soft);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.st-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-field label {
  font-size: var(--t-xs);
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}
.st-field label em {
  font-style: normal;
  color: var(--ink-muted);
  font-size: var(--t-xs);
}

.st-field input[type="number"],
.st-field input[type="text"] {
  background: var(--pill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: var(--t-sm);
  padding: 8px 10px;
  width: 100%;
}
.st-field input[type="file"] {
  background: var(--pill);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: var(--t-sm);
  padding: 10px;
  width: 100%;
}
.st-field input:focus { outline: none; border-color: var(--accent); }
.st-field input[type="file"]::file-selector-button {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  cursor: pointer;
  font: inherit;
  margin-right: var(--s-3);
  padding: 4px 10px;
}
.st-field input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.st-note { margin: 0; font-size: var(--t-xs); color: var(--ink-muted); }

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3) var(--s-4);
}

.st-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.st-status { font-size: var(--t-xs); color: var(--ink-muted); }
.st-status--error { color: var(--down); }

/* --- Il verdetto ------------------------------------------------------------- */

.st-verdict {
  border-top: 1px solid var(--line);
  padding: var(--s-5) var(--s-4) var(--s-4);
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--s-5);
  align-items: center;
}

.st-score { text-align: center; }
.st-score__value {
  font-family: var(--font-num);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1;
}
.st-score__of { font-size: var(--t-sm); color: var(--ink-muted); }
.st-score__band {
  margin-top: var(--s-2);
  display: inline-block;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  text-transform: uppercase;
}

.st-band--bassa       { color: var(--up);   background: var(--up-soft); }
.st-band--media       { color: var(--warn); background: var(--warn-soft); }
.st-band--alta        { color: #f59e5c;     background: rgba(245, 158, 92, 0.14); }
.st-band--altissima   { color: var(--down); background: var(--down-soft); }
.st-band--quasi_certa { color: #fff;        background: rgba(242, 113, 111, 0.85); }

.st-verdict__label { font-size: var(--t-md); font-weight: 700; margin: 0 0 var(--s-2); }
.st-verdict__why { margin: 0 0 var(--s-3); font-size: var(--t-sm); color: var(--ink-dim); }

/* La scala: cinque tacche e un indicatore, così il numero ha un posto. */
.st-scale { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.st-scale span { flex: 1; }
.st-scale span:nth-child(1) { background: var(--up-soft); }
.st-scale span:nth-child(2) { background: var(--warn-soft); }
.st-scale span:nth-child(3) { background: rgba(245, 158, 92, 0.2); }
.st-scale span:nth-child(4) { background: var(--down-soft); }
.st-scale span:nth-child(5) { background: rgba(242, 113, 111, 0.45); }

.st-scale-wrap { position: relative; padding-bottom: var(--s-4); }
.st-scale-mark {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--ink);
  transform: translateX(-50%);
}
.st-scale-ticks {
  display: flex;
  margin-top: 6px;
  font-size: var(--t-xs);
  color: var(--ink-muted);
}
.st-scale-ticks span { flex: 1; text-align: center; }

/* --- Componenti del punteggio -------------------------------------------------- */

.st-components { border-top: 1px solid var(--line-soft); padding: var(--s-4); }
.st-comp {
  display: grid;
  grid-template-columns: 200px 1fr 52px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.st-comp__label { font-size: var(--t-sm); }
.st-comp__weight { color: var(--ink-muted); font-size: var(--t-xs); }
.st-comp__bar { background: var(--pill); border-radius: var(--radius-pill); height: 6px; }
.st-comp__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
.st-comp__score { font-family: var(--font-num); font-size: var(--t-sm); text-align: right; }
.st-comp__detail {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  margin-top: -4px;
}

/* --- Bandiere ------------------------------------------------------------------ */

.st-flags { border-top: 1px solid var(--line-soft); padding: var(--s-4); display: grid; gap: var(--s-2); }
.st-flag {
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: var(--s-3);
}
.st-flag--alto  { border-left-color: var(--down); }
.st-flag--medio { border-left-color: var(--warn); }
.st-flag--ok    { border-left-color: var(--up); }
.st-flag__title { font-size: var(--t-sm); font-weight: 600; }
.st-flag__detail { font-size: var(--t-xs); color: var(--ink-dim); margin-top: 3px; }

/* --- Le schede dei singoli test ------------------------------------------------ */

.st-cards {
  border-top: 1px solid var(--line-soft);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}

.st-card {
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.st-card__title { font-size: var(--t-sm); font-weight: 700; margin: 0; }
.st-card__hint { font-size: var(--t-xs); color: var(--ink-muted); margin: 3px 0 var(--s-3); }
.st-card--wide { grid-column: 1 / -1; }

.st-rows { display: grid; gap: 6px; }
.st-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.st-row__k { color: var(--ink-dim); min-width: 0; }
.st-row__v { font-family: var(--font-num); white-space: nowrap; }
.st-row__v--up { color: var(--up); }
.st-row__v--down { color: var(--down); }
.st-row__v--warn { color: var(--warn); }

.st-card table { min-width: 0; }
.st-card table td, .st-card table th { padding: 6px var(--s-2); }

/* --- Il commento AI ------------------------------------------------------------ */

.st-ai { border-top: 1px solid var(--line); padding: var(--s-4); }
.st-ai__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.st-ai__hint { font-size: var(--t-xs); color: var(--ink-muted); }
.st-ai__text {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}
.st-ai__usage { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-muted); }

@media (max-width: 780px) {
  .st-verdict { grid-template-columns: 1fr; }
  .st-comp { grid-template-columns: 1fr 44px; }
  .st-comp__bar { grid-column: 1 / -1; }
}

/* --- Stress test: esportazione PDF e costo dell'interrogazione ------------------
   Due blocchi che stanno sotto i risultati e rispondono a due domande diverse:
   "come lo porto via" e "quanto mi è costato". Il secondo compare solo dopo
   aver premuto il pulsante del commento — prima non c'è niente da dire. */

.st-export { border-top: 1px solid var(--line-soft); padding: var(--s-4); }
.st-export__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.st-export__label { font-size: var(--t-xs); color: var(--ink-muted); }
.st-export__hint { font-size: var(--t-xs); color: var(--ink-muted); flex: 1; min-width: 220px; }

.st-cost {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pill);
  padding: var(--s-3) var(--s-4);
}
.st-cost__head {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-3);
}
.st-cost__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3) var(--s-4);
}
.st-cost__label { font-size: var(--t-xs); color: var(--ink-muted); }
.st-cost__value {
  font-family: var(--font-num);
  font-size: var(--t-base);
  margin-top: 2px;
}
/* la cifra che si va a cercare è una sola: quella si legge da lontano */
.st-cost__cell--big .st-cost__value {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--accent);
}
.st-cost__note {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

/* --- Correlation: the tight pairs, and what they share --------------------------
   Blue is not on the P&L scale and not on the together/opposite scale either:
   it is a fourth thing — "look at this one". A ring rather than a fill, so the
   cell keeps saying what it said before and gains a mark on top. */

/* Un blu pieno e profondo, non il celeste dei chip di ambito: deve staccare
   sul fondo blu notte e leggersi da lontano anche in una griglia fitta. Il
   bordo è spesso quattro pixel e porta un alone appena percettibile, così il
   rettangolo si vede prima del numero che contiene. */
.cr-cell--tight {
  cursor: pointer;
  box-shadow: inset 0 0 0 4px var(--corr-tight),
              inset 0 0 12px rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-sm);
}
.cr-cell--tight:hover,
.cr-cell--tight:focus-visible {
  box-shadow: inset 0 0 0 4px var(--corr-tight-hi),
              inset 0 0 14px rgba(37, 99, 235, 0.45),
              0 0 0 3px rgba(37, 99, 235, 0.35);
  outline: none;
}
.cr-cell--tight .cr-cell__val { color: #dbe9ff; font-weight: 700; }
.cr-cell--tight .cr-cell__days { color: #93b8f5; }
/* poche giornate sotto: il rettangolo c'è ma non promette solidità */
.cr-cell--tight-thin {
  box-shadow: inset 0 0 0 4px rgba(37, 99, 235, 0.5);
}
.cr-swatch--tight {
  background: none;
  box-shadow: inset 0 0 0 3px var(--corr-tight);
}

/* --- Il pannello della coppia ------------------------------------------------- */

.crpair {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(4, 7, 14, 0.72);
}
.crpair[hidden] { display: none; }
.crpair__box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(1040px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.crpair__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.crpair__title { margin: 0; font-size: var(--t-md); font-weight: 700; }
.crpair__sub { margin: 3px 0 0; font-size: var(--t-xs); color: var(--ink-muted); }
.crpair__body { overflow-y: auto; padding: var(--s-4); }
.crpair__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
}
.crpair__status { font-size: var(--t-xs); color: var(--ink-muted); }
.crpair__legend {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  line-height: 1.55;
}

/* --- Intestazione: quanto si somigliano, e le prove ---------------------------- */

.crhead {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.crhead__score {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  padding: var(--s-4);
  text-align: center;
}
.crhead__value {
  font-family: var(--font-num);
  font-size: var(--t-xl);
  font-weight: 700;
}
.crhead__label { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 4px; }
.crhead__score--very .crhead__value { color: var(--scope-real); }
.crhead__score--some .crhead__value { color: var(--warn); }
.crhead__score--different .crhead__value { color: var(--ink-dim); }
.crhead__side { display: grid; gap: var(--s-2); align-content: start; }

.crnote {
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: var(--s-3);
}
.crnote--alert { border-left-color: var(--down); }
.crnote--info  { border-left-color: var(--scope-real); }
.crnote--ok    { border-left-color: var(--up); }
.crnote__title { font-size: var(--t-sm); font-weight: 600; }
.crnote__body { font-size: var(--t-xs); color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }
/* le varianti dello stesso strumento, dette a mezza voce sotto la nota */
.crnote__merged { display: block; margin-top: 4px; color: var(--ink-muted); }

/* --- La tabella dei tratti ------------------------------------------------------ */

.crtraits { border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.crtraits__head,
.crtrait {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1.3fr 90px 52px 96px;
  gap: var(--s-3);
  align-items: center;
  padding: 9px var(--s-3);
}
.crtraits__head {
  background: var(--surface-raised);
  font-size: var(--t-xs);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}
.crtrait { border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.crtrait:last-child { border-bottom: none; }
.crtrait--very { background: rgba(91, 157, 255, 0.07); }

.crtrait__name { font-weight: 600; display: flex; flex-direction: column; gap: 1px; }
.crtrait__weight { font-size: var(--t-xs); color: var(--ink-muted); font-weight: 400; }
.crtrait__a, .crtrait__b { font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-dim); }
.crtrait__bar { background: var(--pill); border-radius: var(--radius-pill); height: 6px; }
.crtrait__fill { height: 100%; border-radius: var(--radius-pill); background: var(--ink-muted); }
.crtrait--very .crtrait__fill { background: var(--scope-real); }
.crtrait--some .crtrait__fill { background: var(--warn); }
.crtrait__pct { font-family: var(--font-num); font-size: var(--t-sm); text-align: right; }
.crtrait__verdict { font-size: var(--t-xs); color: var(--ink-muted); }
.crtrait--very .crtrait__verdict { color: var(--scope-real); font-weight: 600; }

@media (max-width: 860px) {
  .crhead { grid-template-columns: 1fr; }
  .crtraits__head { display: none; }
  .crtrait { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .crtrait__bar { grid-column: 1 / -1; }
}

/* --- Correlation: la vista sugli orari ------------------------------------------
   Stessa griglia, altra domanda. Qui non c'è un segno da rendere — nessun
   "insieme" contro "opposto" — solo quanta parte delle due operatività scatta
   nello stesso istante, e per quello basta una tinta sola che cresce. */

.cr-modes { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.cr-cell__fill--timing { background: var(--corr-tight); }
.cr-swatch--timing { background: var(--corr-tight); opacity: 0.55; }
/* nella vista orari il numerino in basso è un conteggio di operazioni, non
   di giorni: non deve leggersi come la stessa cosa */
.cr-cell--timing .cr-cell__days { color: var(--ink-muted); font-style: italic; }

/* --- Le coppie di trade che hanno prodotto la correlazione ----------------------
   Un blocco per coppia, due righe: sopra la prima strategia, sotto la seconda.
   Il rientro e il filetto laterale tengono insieme le due righe, così la
   lettura è "questa con questa" e non una tabella lunga da decifrare. */

.crmatched { margin-top: var(--s-5); }
.crmatched__title { margin: 0; font-size: var(--t-sm); font-weight: 700; }
.crmatched__hint { margin: 3px 0 var(--s-3); font-size: var(--t-xs); color: var(--ink-muted); }

.crmatched__head,
.crtrade {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr 0.6fr 1.5fr 1fr 1.5fr 1fr 1fr;
  gap: var(--s-2);
  align-items: center;
  padding: 5px var(--s-3);
  font-size: var(--t-xs);
}
.crmatched__head {
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.crpairblock {
  border-left: 2px solid var(--corr-tight);
  margin-top: var(--s-2);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  overflow: hidden;
}
.crpairblock__n {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 4px var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-muted);
  font-family: var(--font-num);
  border-bottom: 1px solid var(--line-soft);
}
.crpairblock__gap { color: var(--corr-tight); }
.crpairblock__tag {
  font-family: var(--font-text);
  color: var(--down);
  background: var(--down-soft);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}
.crpairblock__tag--soft { color: var(--ink-dim); background: var(--pill); }
.crpairblock__rows > .crtrade:first-child { border-bottom: 1px dashed var(--line); }

.crtrade__who { font-weight: 600; color: var(--ink); }
.crtrade--b .crtrade__who { color: var(--ink-dim); }
.crtrade__sym, .crtrade__in, .crtrade__out, .crtrade__price, .crtrade__lots {
  font-family: var(--font-num);
  color: var(--ink-dim);
}
.crtrade__side.up { color: var(--up); }
.crtrade__side.down { color: var(--down); }
.crtrade__pl { font-family: var(--font-num); text-align: right; }
.crtrade__pl.up { color: var(--up); }
.crtrade__pl.down { color: var(--down); }

@media (max-width: 900px) {
  .crmatched__head { display: none; }
  .crtrade { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Alerts --------------------------------------------------------------
   Riusa il modulo dello stress test (.st-form e figli): è la stessa forma —
   qualche campo, un pulsante, una riga di esito — e non merita un secondo
   vocabolario. Qui c'è solo quello che lì non serviva: le spunte, il menù a
   tendina e le due tabelle. */

/* Il modulo è diviso in due blocchi con un titolo ciascuno: le credenziali
   sono una cosa sola e vanno trovate senza cercarle, le soglie sono un'altra. */
.al-section {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.al-section__title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.al-section__hint { margin: -6px 0 0; font-size: var(--t-xs); color: var(--ink-muted); }

.al-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
}

.al-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-dim);
  cursor: pointer;
}
.al-check input { accent-color: var(--accent); cursor: pointer; }
.al-check:hover { color: var(--ink); }

.st-field select {
  background: var(--pill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  padding: 8px 10px;
  width: 100%;
}
.st-field select:focus { outline: none; border-color: var(--accent); }
.st-field input[type="password"] {
  background: var(--pill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: var(--t-sm);
  padding: 8px 10px;
  width: 100%;
}

/* Il pulsante sta dentro un rigo di tabella: deve stare sulla riga senza
   allargarla, quindi è lo stesso .btn rimpicciolito, non un altro oggetto. */
.btn--mini { padding: 3px 9px; font-size: var(--t-xs); white-space: nowrap; }
.al-controls { text-align: right; width: 1%; white-space: nowrap; }

/* Silenziata per scelta: resta leggibile, smette di chiedere attenzione. */
.al-row--muted td { opacity: 0.55; }
.al-row--muted td.al-controls { opacity: 1; }

/* Valuta che non si sa convertire: si mostra nativa, e si vede che è un'altra
   cosa dalle cifre in euro della colonna. */
.al-native { color: var(--ink-dim); font-family: var(--font-num); }

.al-login { color: var(--ink-muted); }
.al-muted { color: var(--ink-muted); font-size: var(--t-xs); }

/* Un terminale fermo è l'unica riga della pagina che chiede una risposta:
   il filo rosso a sinistra la fa trovare senza leggere la colonna State. */
.al-row--quiet td:first-child { box-shadow: inset 2px 0 0 var(--down); }

.al-kind { color: var(--ink); }
.al-logtext {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}

/* --- Backtests (report window of the public page) ------------------------- */
.bt-text {
  background: var(--pill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  padding: 8px 10px;
  width: 100%;
  resize: vertical;
}
.bt-text:focus { outline: none; border-color: var(--accent); }
.bt-report { white-space: normal; min-width: 240px; }
.bt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.bt-actions .btn { padding: 4px 10px; }
.bt-result {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
}
.bt-result p { margin: 0 0 var(--s-3); }

/* --- Connect MetaTrader (Ultimate) ---------------------------------------------
   Keys, MT5 accounts and password of the signed-in user. Same tokens as the rest. */
.input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-sm);
  padding: 8px 10px;
  min-width: 0;
}
.input:focus { outline: none; border-color: var(--accent); }
.acct-form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.acct-form .input { flex: 1 1 260px; max-width: 420px; }
.acct-form--col { flex-direction: column; align-items: flex-start; }
.acct-form--col .input { width: 100%; max-width: 360px; flex: none; }
.acct-new {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.acct-new p { margin: 0 0 var(--s-2); }
.acct-key {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  word-break: break-all;
  user-select: all;
  margin-bottom: var(--s-2);
}
.acct-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.acct-msg { font-size: var(--t-sm); color: var(--ink-muted); margin: var(--s-2) 0; }
.acct-msg--error { color: var(--down); }
.acct-h { margin: var(--s-5, 28px) 0 var(--s-2); font-size: var(--t-md, 15px); }
.acct-steps { margin: 0 0 var(--s-2); padding-left: 1.3em; font-size: var(--t-sm); line-height: 1.6; }
.acct-steps code, .acct-msg code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.95em; }
.acct-muted { color: var(--ink-muted); }
#page-account > :not(.panel__head):not(.table-wrap) { margin-left: var(--s-4); margin-right: var(--s-4); }
#page-account > :last-child { margin-bottom: var(--s-4); }
.acct-steps a { color: var(--accent); }
/* Public page (Ultimate) */
.pp-prefix { align-self: center; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--t-sm); color: var(--ink-muted); }
.acct-form .input.pp-slug { flex: 0 1 200px; }
.acct-form .al-check { align-self: center; }
.pe-date { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-muted); }
.pe-magics { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-2) 0 var(--s-3); }
#page-public > :not(.panel__head):not(.table-wrap) { margin-left: var(--s-4); margin-right: var(--s-4); }
#page-public > :last-child { margin-bottom: var(--s-4); }
#pp-msg a { color: var(--accent); }
#page-users > :not(.panel__head):not(.table-wrap) { margin-left: var(--s-4); margin-right: var(--s-4); }
#page-users > :last-child { margin-bottom: var(--s-4); }
#us-new-text { white-space: pre-wrap; word-break: normal; }
#us-body select.input { padding: 4px 6px; }