/* wallet_watcher — vue desktop « PolyRape v2 »
   Port de « Wallet Watcher v2.dc.html » (projet claude.ai/design « Refonte dashboard
   wallet Polymarket »).

   NB sur les tokens : le :root du design déclare --acc #ff2fa0 / --acc2 #8f6bff / IBM Plex
   Mono, mais applyTheme() les écrase au montage avec les props (accent #c026ff, accent2
   #ff2fa0, Space Mono, densité « compact »). Ce sont ces valeurs-là qui rendent réellement :
   c'est donc elles qui sont reprises ici. Les props du design tool restent des variables
   CSS surchargeables au runtime (cf. applyTheme dans app.js). */

:root {
  --ui: 'Space Mono', ui-monospace, monospace;
  --fs: 0.94;                  /* densité « compact » */
  --acc: #c026ff;
  --acc2: #ff2fa0;
  --acc-soft: rgba(192, 38, 255, 0.07);
  --acc-line: rgba(192, 38, 255, 0.32);
  --bd: rgba(255, 255, 255, 0.08);
  --bs: solid;
  --panel: rgba(255, 255, 255, 0.017);
  --rad: 2px;
  --pad: 12px;
  --rowpad: 6px;
  --gap: 10px;
  --ink: #ece4f5;
  --dim: #9c8bb2;
  --faint: #6d5f82;
  --up: #6ff2b6;
  --down: #ff5c7a;
  --blue: #5aa9ff;
  --gold: #f5c542;
  --glow-sh: 0 0 14px -6px rgba(192, 38, 255, 0.59);
  --glow-tx: 0 0 12px rgba(192, 38, 255, 0.25);
  --tex: none;
  --tex-size: auto;
  --bg: #08060a;
  --lbPre: "";
  --lbPost: "";
  --lbCase: uppercase;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }

[data-lb] { text-transform: var(--lbCase); letter-spacing: 0.11em; }
[data-lb]::before { content: var(--lbPre); opacity: .55; }
[data-lb]::after { content: var(--lbPost); opacity: .55; }
a { color: var(--acc); text-decoration: none; border-bottom: 1px dotted var(--acc-line); }
a:hover { color: #fff; }
::selection { background: var(--acc); color: #0a0710; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb { background: var(--acc-line); }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Tout doit tenir dans UN viewport : la page ne défile pas, seule la table active le fait. */
.root {
  position: relative; height: 100vh; overflow: hidden; display: flex;
  background: var(--bg); font-family: var(--ui); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tex {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background-image: var(--tex); background-size: var(--tex-size);
  mix-blend-mode: screen; opacity: .85;
}
.halo {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -20%,
    color-mix(in srgb, var(--acc2) 12%, transparent), transparent 70%);
}

/* ---------- rail ---------- */
.rail {
  position: relative; z-index: 2; width: 236px; flex: 0 0 236px;
  border-right: 1px var(--bs) var(--bd); padding: 14px 0;
  display: flex; flex-direction: column; gap: 20px;
}
.rail[hidden] { display: none; }
.rail-tgl {
  border: 1px solid var(--acc-line); color: var(--acc); background: none;
  font-family: inherit; font-size: calc(11px * var(--fs)); cursor: pointer;
  padding: 2px 7px; border-radius: var(--rad); line-height: 1.5;
}
.rail-tgl:hover { background: var(--acc); color: #0a0710; border-color: var(--acc); }
.rail-top { padding: 0 14px 14px; border-bottom: 1px var(--bs) var(--bd); }
.brand { display: flex; align-items: center; gap: 8px; }
.led { width: 7px; height: 7px; background: var(--acc); box-shadow: var(--glow-sh); flex: none; }
.led.stale { background: var(--down); }
.bname { font-size: calc(13px * var(--fs)); font-weight: 700; color: #fff; }
.bmeta { font-size: calc(10px * var(--fs)); color: var(--faint); margin-top: 6px; letter-spacing: .05em; }
.rail-blk { display: flex; flex-direction: column; }
.rail-lb { font-size: calc(9.5px * var(--fs)); color: var(--faint); padding: 0 14px 8px; }
.wrow {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px; cursor: pointer;
  border-left: 2px solid transparent; background: none; border-top: 0; border-right: 0;
  border-bottom: 0; font-family: inherit; color: inherit; width: 100%; text-align: left;
}
.wrow:hover { background: var(--acc-soft); }
.wrow.on { border-left-color: var(--acc); background: var(--acc-soft); }
.wrow .mark { font-size: calc(11px * var(--fs)); color: transparent; }
.wrow.on .mark { color: var(--acc); }
.wrow img, .wrow .ph {
  width: 26px; height: 26px; flex: 0 0 26px; object-fit: cover; border-radius: var(--rad);
  filter: grayscale(.6) brightness(.75);
}
.wrow.on img, .wrow.on .ph { filter: none; }
.ph { background: linear-gradient(140deg, var(--acc), var(--acc2)); display: block; }
.wrow .wt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wrow .wn {
  font-size: calc(12px * var(--fs)); color: #f4ecff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wrow .we { font-size: calc(10px * var(--fs)); color: var(--faint); }
.wrow .wp { font-size: calc(10.5px * var(--fs)); }
.vrow {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  font-size: calc(12px * var(--fs)); color: var(--dim); text-decoration: none; border-bottom: 0;
}
.vrow:hover { color: #fff; background: var(--acc-soft); }
.vrow .dot { color: var(--faint); }
.vrow .meta { margin-left: auto; font-size: calc(10px * var(--fs)); color: var(--faint); }
.rail-foot {
  margin-top: auto; padding: 12px 14px; border-top: 1px var(--bs) var(--bd);
  font-size: calc(10px * var(--fs)); line-height: 1.55; color: var(--faint);
}

/* ---------- main ---------- */
main {
  position: relative; z-index: 2; flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.cmdbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px calc(var(--pad) + 4px); border-bottom: 1px var(--bs) var(--bd);
  font-size: calc(11.5px * var(--fs)); background: var(--acc-soft);
}
.c-acc { color: var(--acc); }
.c-faint { color: var(--faint); }
.c-dim { color: var(--dim); }
.c-right { margin-left: auto; color: var(--faint); }
.c-live { color: var(--up); }
.c-live.stale { color: var(--down); }
/* quand le rail est replié, le changement de wallet passe dans la barre de commande */
.cmd-switch { display: inline-flex; gap: 4px; margin-left: 6px; }
.seg-w {
  border: 1px solid var(--bd); background: none; color: var(--dim);
  font-family: inherit; font-size: calc(10.5px * var(--fs)); cursor: pointer;
  padding: 2px 8px; border-radius: var(--rad);
}
.seg-w:hover { color: #fff; border-color: var(--acc-line); }
.seg-w.on { background: var(--acc); color: #0a0710; border-color: var(--acc); }
.caret { width: 7px; height: calc(13px * var(--fs)); background: var(--acc); animation: blink 1.1s step-end infinite; }

.page {
  padding: var(--pad) calc(var(--pad) + 2px);
  display: flex; flex-direction: column; gap: var(--gap);
  flex: 1; min-height: 0; overflow: hidden;
}
.sec.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tab-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rail { overflow-y: auto; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.head-l { display: flex; align-items: center; gap: 14px; }
.pfp-lg {
  width: 52px; height: 52px; border-radius: var(--rad); object-fit: cover;
  border: 1px var(--bs) var(--acc-line); box-shadow: var(--glow-sh); flex: none;
}
.pfp-lg.ph { background: linear-gradient(140deg, var(--acc), var(--acc2)); display: block; }
.head-txt { display: flex; flex-direction: column; gap: 5px; }
.head-1 { display: flex; align-items: center; gap: 10px; }
.head-1 h1 {
  margin: 0; white-space: nowrap; font-size: calc(24px * var(--fs));
  font-weight: 700; letter-spacing: -0.01em; color: #fff;
}
.tag-us {
  font-size: calc(9.5px * var(--fs)); color: var(--up);
  border: 1px var(--bs) rgba(111, 242, 182, 0.35); padding: 2px 6px;
}
.head-2 { font-size: calc(10.5px * var(--fs)); color: var(--faint); }
.head-r { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; border: 1px var(--bs) var(--bd); }
.seg > button {
  padding: 7px 12px; font-size: calc(11px * var(--fs)); cursor: pointer;
  color: var(--dim); background: none; border: 0; font-family: inherit;
}
.seg > button.on { background: var(--acc); color: #0a0710; }
.btn-br {
  padding: 8px 14px; border: 1px solid var(--acc); color: var(--acc);
  font-size: calc(11.5px * var(--fs)); cursor: pointer; border-radius: var(--rad);
  background: none; font-family: inherit;
}
.btn-br:hover { background: var(--acc); color: #0a0710; }

/* ---------- sections ---------- */
.sec { border: 1px var(--bs) var(--bd); border-radius: var(--rad); background: var(--panel); }
.sec-h {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px var(--bs) var(--bd); background: var(--acc-soft);
}
.sec-h .mk { color: var(--acc); }
.sec-h .t { font-size: calc(11px * var(--fs)); font-weight: 700; white-space: nowrap; color: #fff; }
.sec-h .hint { font-size: calc(10.5px * var(--fs)); color: var(--faint); }
.sec-h .r { margin-left: auto; font-size: calc(10.5px * var(--fs)); color: var(--faint); }

.row-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap); flex: none; }
.row-2 > .sec { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* grille dense des 9 métriques (3x3) : tient à droite du graphique */
.mgrid {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  gap: 1px; background: var(--bd);
}
.mi {
  background: var(--bg); padding: 7px 10px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.mi-l { font-size: calc(8.5px * var(--fs)); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-v { font-size: calc(19px * var(--fs)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.mi-s { font-size: calc(9px * var(--fs)); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* onglets de la section unique */
.tabs-h { gap: 0; padding: 0 12px; }
.stab {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim);
  font-family: inherit; font-size: calc(11px * var(--fs)); font-weight: 700;
  padding: 9px 12px; cursor: pointer; letter-spacing: 0.11em;
}
.stab:hover { color: #fff; }
.stab.on { color: #fff; border-bottom-color: var(--acc); }
.btn-csv {
  margin-left: 10px; padding: 3px 9px; border: 1px solid var(--acc-line);
  background: none; color: var(--acc); font-family: inherit;
  font-size: calc(10px * var(--fs)); cursor: pointer; border-radius: var(--rad);
  white-space: nowrap;
}
.btn-csv:hover { background: var(--acc); color: #0a0710; border-color: var(--acc); }

/* bloc PnL */
.pnl-b { padding: 14px 16px 10px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pnl-b .big {
  font-size: calc(38px * var(--fs)); font-weight: 700; letter-spacing: -0.03em;
  text-shadow: var(--glow-tx); line-height: 1;
}
.pnl-b .side { display: flex; flex-direction: column; gap: 3px; padding-bottom: 3px; }
.pnl-b .p { font-size: calc(12px * var(--fs)); white-space: nowrap; }
.pnl-b .s { font-size: calc(10.5px * var(--fs)); color: var(--faint); white-space: nowrap; }
/* ---------- courbe ---------- */
.chart-wrap { position: relative; }
.chart { width: 100%; display: block; cursor: crosshair; }
.gl { stroke: var(--bd); stroke-width: 1; stroke-dasharray: 3 5; }
.gl.vt { opacity: .5; }
.gz { stroke: var(--faint); stroke-width: 1; opacity: .75; }
.ylab { fill: var(--faint); font-size: 10px; text-anchor: end; font-family: var(--ui); }
.xlab { fill: var(--faint); font-size: 10px; font-family: var(--ui); }
.gcut { stroke: var(--acc2); stroke-width: 1; stroke-dasharray: 4 4; }
.gcut-h { fill: var(--acc2); }
.ghov { stroke: var(--acc); stroke-width: 1; opacity: .55; }
.ghovd { stroke: var(--bg); stroke-width: 1.5; }
.ch-tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: var(--bg); border: 1px solid var(--acc-line); border-radius: var(--rad);
  padding: 5px 8px; display: flex; flex-direction: column; gap: 1px;
  font-size: calc(10px * var(--fs)); color: var(--faint); white-space: nowrap;
  box-shadow: 0 4px 14px -6px #000;
}
.ch-tip b { font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: -0.02em; }
.ch-tip[hidden] { display: none; }

/* grilles de cellules : le gap laisse voir le fond = filets de 1px */
.kpi-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px var(--bs) var(--bd); border-radius: var(--rad); background: var(--bd);
}
.gr { display: grid; gap: 1px; background: var(--bd); }
.gr-5 { grid-template-columns: repeat(5, 1fr); }
.gr-7 { grid-template-columns: repeat(7, 1fr); }
.gr-6 { grid-template-columns: repeat(6, 1fr); border-bottom: 1px var(--bs) var(--bd); }
.gr-3 { grid-template-columns: 1fr 1fr 1.3fr; }

.cell {
  background: var(--bg); display: flex; flex-direction: column; min-width: 0;
  padding: 12px; gap: 6px;
}
.cell.kpi { padding: calc(var(--rowpad) + 5px) 14px; }
.cell.tr { padding: 13px 14px; gap: 7px; }
.kpi-2 .cell:hover { background: var(--acc-soft); }
.cell .c-l {
  font-size: calc(9.5px * var(--fs)); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell.gr7-l .c-l { font-size: calc(9px * var(--fs)); }
.cell .c-v { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cell .c-s {
  font-size: calc(10px * var(--fs)); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell.tr .c-s { white-space: normal; line-height: 1.45; text-wrap: pretty; }

.up { color: var(--up); }
.down { color: var(--down); }
.neutral { color: var(--ink); }
.white { color: #fff; }
.acc { color: var(--acc); }
.acc2 { color: var(--acc2); }
.blue { color: var(--blue); }

/* sous-blocs de performance */
.sub { background: var(--bg); padding: 12px 14px; min-width: 0; }
.sub-t { font-size: calc(10px * var(--fs)); color: var(--dim); margin-bottom: 10px; }
.th, .tr-g { display: grid; align-items: center; }
.th {
  font-size: calc(9.5px * var(--fs)); color: var(--faint);
  padding-bottom: 6px; border-bottom: 1px var(--bs) var(--bd);
}
.tr-g {
  font-size: calc(11.5px * var(--fs)); padding: var(--rowpad) 0;
  border-bottom: 1px dotted var(--bd); color: var(--ink);
}
.tr-g:last-child { border-bottom: 0; }
.ops-g { grid-template-columns: 1fr 42px 62px 78px; }
.coh-g { grid-template-columns: 1fr 36px 80px 74px 58px; font-size: calc(11px * var(--fs)); }
.coh-g.tr-g { padding: calc(var(--rowpad) - 2px) 0; }
.coh-g.tr-g:hover { background: var(--acc-soft); }
.ta-r { text-align: right; }
.ta-c { text-align: center; }
.mix-r { padding: calc(var(--rowpad) - 1px) 0; border-bottom: 1px dotted var(--bd); display: flex; flex-direction: column; gap: 6px; }
.mix-r:last-child { border-bottom: 0; }
.mix-1 { display: flex; align-items: baseline; justify-content: space-between; font-size: calc(11.5px * var(--fs)); }
.mix-1 .c { color: #f4ecff; }
.mix-1 .m { color: var(--faint); }
.bar { height: 4px; background: rgba(255, 255, 255, 0.06); }
.bar > i { display: block; height: 100%; }

/* ---------- tables event / clos ---------- */
.thead {
  display: grid; font-size: calc(9.5px * var(--fs)); color: var(--faint);
  padding: 7px 12px; border-bottom: 1px var(--bs) var(--bd);
}
.erow {
  display: grid; align-items: center; padding: var(--rowpad) 12px; cursor: pointer;
  border-bottom: 1px dotted var(--bd); width: 100%; font-family: inherit;
  background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; text-align: left;
}
.erow:hover { background: var(--acc-soft); }
.erow.open { background: var(--acc-soft); box-shadow: inset 2px 0 0 var(--acc); }
.inv-c { grid-template-columns: 1fr 74px 96px 96px 104px; }
.cl-c { grid-template-columns: 1fr 86px 50px 84px 88px 96px 78px; }
.erow .nm {
  display: flex; align-items: center; gap: 9px; min-width: 0;
}
.erow .nm .txt {
  font-size: calc(12px * var(--fs)); min-width: 0; color: #f4ecff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caret { font-size: calc(8px * var(--fs)); color: var(--faint); display: inline-block; transition: transform .12s; }
.erow.open .caret { color: var(--acc); transform: rotate(90deg); }
.erow .sm { font-size: calc(10.5px * var(--fs)); text-align: right; color: var(--faint); }
.erow .md { font-size: calc(11.5px * var(--fs)); text-align: right; color: var(--ink); }
/* le PnL ($ et %) doit rester vert/rouge : sans ces règles, `.erow .md` (0,2,0) écrase
   les utilitaires .up/.down (0,1,0) et tout ressort en couleur d'encre. */
.erow .md.up, .erow .sm.up, .tr-g .up { color: var(--up); }
.erow .md.down, .erow .sm.down, .tr-g .down { color: var(--down); }
.erow .md.neutral, .erow .sm.neutral { color: var(--ink); }

/* corps de table scrollable : 10 lignes visibles, on remonte dans l'historique dedans.
   Le max-height est affiné en JS d'après la hauteur réelle d'une ligne ; celui-ci sert
   de repli et évite un saut de mise en page au premier rendu. */
.tbl-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.detail {
  padding: 8px 12px 12px 28px;
  background: color-mix(in srgb, var(--acc2) 7%, transparent);
  border-bottom: 1px var(--bs) var(--bd);
}
.leg-c { grid-template-columns: 1fr 58px 58px 58px 58px 80px 80px 88px; }
.trd-c { grid-template-columns: 72px 62px 56px 1fr 68px 64px 80px; }
.detail .tr-g { font-size: calc(11px * var(--fs)); padding: calc(var(--rowpad) - 2px) 0; }
.detail .tr-g .el { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill {
  font-size: calc(9px * var(--fs)); font-weight: 700; letter-spacing: .06em;
  padding: 2px 6px; border: 1px solid currentColor; border-radius: var(--rad); white-space: nowrap;
}
/* lien vers l'event sur polymarket : discret, ne déplie pas la ligne */
.poly {
  flex: none; margin-left: 2px; padding: 0 4px; border-bottom: 0;
  color: var(--faint); font-size: calc(11px * var(--fs)); line-height: 1;
  text-decoration: none;
}
.poly:hover { color: var(--acc); }
.erow:hover .poly { color: var(--acc2); }
.rail-sub { padding-top: 12px; }
.tag-us.tracked { color: var(--dim); border-color: var(--bd); }

.tfoot { padding: 9px 12px; font-size: calc(10px * var(--fs)); color: var(--faint); }
.foot { font-size: calc(10px * var(--fs)); color: var(--faint); padding-bottom: 20px; }
.empty { padding: 22px 12px; color: var(--faint); font-size: calc(11px * var(--fs)); text-align: center; }
.err { color: var(--down); }


/* ---------- onglet bot_kpi ---------- */
.gr-4 { grid-template-columns: repeat(4, 1fr); }
.bot-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bot-wrap .blk-t { padding: 9px 12px 5px; margin: 0; }
.bot-wrap .gr { border-top: 1px var(--bs) var(--bd); border-bottom: 1px var(--bs) var(--bd); }
.bot-wrap .sub { padding: 10px 12px 14px; }
.bot-wrap .note { padding: 0 0 6px; }
.ctrl {
  margin: 10px 12px; padding: 9px 11px; border-radius: var(--rad);
  border: 1px solid var(--bd); color: var(--dim);
  font-size: calc(10.5px * var(--fs)); line-height: 1.5;
}
.ctrl b { color: var(--ink); }
.ctrl.ok { border-color: rgba(111, 242, 182, .35); }
.ctrl.ko { border-color: rgba(255, 92, 122, .40); color: var(--down); }
.bot-wrap code {
  background: var(--acc-soft); border: 1px solid var(--acc-line);
  padding: 1px 5px; border-radius: var(--rad); color: var(--acc);
}
@media (max-width: 1100px) { .gr-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .gr-4 { grid-template-columns: 1fr 1fr; } }

/* ---------- responsive ---------- */
@media (max-width: 1300px) { .gr-6 { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 1100px) {
  .rail { display: none; }
  .row-2 { grid-template-columns: 1fr; }
  .gr-3 { grid-template-columns: 1fr; }
  .mgrid { grid-auto-rows: auto; }
}

@media (max-width: 860px) {
  :root { --pad: 9px; --gap: 7px; }
  .gr-6 { grid-template-columns: repeat(2, 1fr); }
  .head-r { width: 100%; justify-content: space-between; }
  .cmdbar { flex-wrap: wrap; row-gap: 5px; }
  .sec-h { flex-wrap: wrap; row-gap: 3px; }
  .sec-h .hint, .sec-h .r { flex-basis: 100%; margin-left: 0; }
  .tabs-h .r { display: none; }
}

/* Sous 760px les colonnes fixes ne tiennent plus : lignes en cartes empilées, chaque
   cellule portant son intitulé via data-l — l'entête devient inutile, rien n'est perdu. */
@media (max-width: 760px) {
  .thead { display: none; }
  .erow, .erow.inv-c, .erow.cl-c {
    display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 9px 11px; align-items: baseline;
  }
  .erow .nm { flex: 1 1 100%; }
  .erow .nm .txt { white-space: normal; }
  .erow .sm, .erow .md { text-align: left; }
  .erow [data-l]::before { content: attr(data-l) " "; color: var(--faint); font-size: .82em; }
  .tbl-scroll { overflow-x: hidden; }
  .detail { padding: 8px 10px 10px 16px; }
  .detail .th { display: none; }
  .detail .tr-g { display: flex; flex-wrap: wrap; gap: 3px 10px; }
  .detail .tr-g .el { white-space: normal; flex: 1 1 100%; }
  .detail .tr-g > span { text-align: left; }
}

@media (max-width: 620px) {
  :root { --fs: 0.88; }
  .mgrid { grid-template-columns: repeat(2, 1fr); }
  .mi-v { font-size: calc(17px * var(--fs)); }
  .gr-6 { grid-template-columns: repeat(2, 1fr); }
  .head-1 h1 { font-size: calc(18px * var(--fs)); white-space: normal; }
  .pfp-lg { width: 38px; height: 38px; }
  .pnl-b { padding: 9px 12px 6px; }
  .pnl-b .big { font-size: calc(26px * var(--fs)); }
  .cmd-switch { order: 5; flex-basis: 100%; margin-left: 0; overflow-x: auto; }
  .stab { padding: 8px 9px; font-size: calc(10px * var(--fs)); letter-spacing: .05em; }
  /* en portrait, empiler graphique + métriques ferait déborder : la page reprend le
     défilement vertical, seule contrainte qu'on relâche pour rester lisible. */
  .root { height: auto; min-height: 100vh; overflow: visible; }
  main, .page { overflow: visible; }
  .page { min-height: 0; }
  .tbl-scroll { max-height: 62vh; }
}

@media (max-width: 380px) { .mgrid { grid-template-columns: 1fr 1fr; } }