/* ============================================================
   Charte graphique Ellio — socle commun
   Source de référence : EllioCurl 2 (/var/www/html/jcs2i/EllioCurl)
   À copier tel quel dans assets/css/app.css d'un nouveau produit,
   puis ne changer QUE --accent / --accent-soft dans :root et
   [data-theme="dark"]. Tout le reste est commun à la gamme.
   ============================================================ */
:root {
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --surface-2: #f0efec;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;
  --series-2: #1baf7a;
  --series-3: #eda100;
  --series-5: #4a3aa7;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec;
  --seq-400: #3987e5; --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;
  --accent: #4f46e5;                       /* EllioDB : indigo */
  --accent-soft: rgba(79, 70, 229, .12);
  --shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
[data-theme="dark"] {
  --page: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #242423;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --series-1: #3987e5;
  --series-2: #199e70;
  --series-3: #c98500;
  --series-5: #9085e9;
  --accent: #7c74f2;                       /* EllioDB : indigo (variante sombre) */
  --accent-soft: rgba(124, 116, 242, .14);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--page);
}

/* ---------------- structure ---------------- */
#app { display: grid; grid-template-columns: 218px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--seq-400), var(--seq-600));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
}
.brand b { font-size: 16px; letter-spacing: .2px; }
.brand span { display: block; font-size: 11px; color: var(--text-muted); }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--text-secondary); text-decoration: none;
  font-weight: 500; transition: background .12s, color .12s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; stroke-width: 1.9; }
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.active { background: var(--surface-2); color: var(--accent); }
.nav-item .pill {
  margin-left: auto; background: var(--status-critical); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 99px;
  min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px;
}
.sidebar-foot { margin-top: auto; padding: 10px 12px; font-size: 11px; color: var(--text-muted); }

.main { padding: 20px 26px 46px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.topbar h1 { font-size: 21px; font-weight: 650; letter-spacing: .2px; }
.topbar .spacer { flex: 1; }
.live-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 99px; padding: 6px 12px;
}
.live-dot i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--status-good);
  animation: pulse 1.6s infinite;
}
.live-dot.stale i { background: var(--text-muted); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------------- composants ---------------- */
.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1150px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) {
  #app { grid-template-columns: 64px 1fr; }
  .sidebar .label, .brand div, .sidebar-foot { display: none; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card h3 {
  font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-muted); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.card h3 .right { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }

.kpi { display: flex; flex-direction: column; gap: 3px; }
.kpi .v { font-size: 26px; font-weight: 650; line-height: 1.15; }
.kpi .v small { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.kpi .l { font-size: 12px; color: var(--text-muted); }
.kpi .sub { font-size: 12px; color: var(--text-secondary); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 3px 10px;
  background: var(--surface-2); color: var(--text-secondary);
}
.badge.good { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }
.badge.warn { background: color-mix(in srgb, var(--status-warning) 18%, transparent); color: color-mix(in srgb, var(--status-warning) 70%, var(--text-primary)); }
.badge.serious { background: color-mix(in srgb, var(--status-serious) 18%, transparent); color: var(--status-serious); }
.badge.crit { background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); }
.badge.accent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

button, .btn {
  font: inherit; cursor: pointer;
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 14px; font-weight: 550;
  transition: filter .12s, background .12s;
}
button:hover { filter: brightness(1.06); }
.btn-primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-icon { padding: 7px 9px; display: inline-grid; place-items: center; }
.btn-icon svg { width: 16px; height: 16px; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: none; background: transparent; padding: 6px 14px; border-radius: 7px; color: var(--text-secondary); }
.seg button.on { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow); font-weight: 600; }
.seg button.on.mode-auto { color: var(--status-good); }
.seg button.on.mode-suspendu { color: var(--status-critical); }

input, select {
  font: inherit; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 11px; outline: none; min-width: 0;
}
input:focus, select:focus { border-color: var(--accent); }
input[type="number"] { width: 90px; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; margin-bottom: 14px; }
.filters .f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-muted); }

/* ---------------- tables ---------------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--grid); white-space: nowrap;
}
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.tbl th.num { text-align: right; }

.pager { display: flex; gap: 8px; align-items: center; justify-content: end; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); }


/* ---------------- barre de progression & tuiles de valeur ---------------- */
.conf-bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; flex: 1; }
.conf-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--seq-300), var(--seq-500)); }

.sensor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sensor-tile { border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; cursor: pointer; background: var(--surface-1); }
.sensor-tile:hover { background: var(--surface-2); }
.sensor-tile .sv { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sensor-tile .sn { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------------- modal & tooltip ---------------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
  width: min(880px, 100%); max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.modal h2 button { margin-left: auto; }

.chart-tip {
  position: absolute; z-index: 99; pointer-events: none;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 11px; font-size: 12.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); color: var(--text-primary);
  display: none; max-width: 260px;
}
.chart-tip .tt-head { color: var(--text-muted); font-size: 11.5px; margin-bottom: 4px; }
.chart-tip div { line-height: 1.5; }
.chart-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

/* ---------------- utilitaires ---------------- */
.muted { color: var(--text-muted); }
.sec { color: var(--text-secondary); }
.mt { margin-top: 12px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
canvas { display: block; width: 100%; }
.empty { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* ---------------- mobile ---------------- */
/* Socle mobile de la charte Ellio (references/mobile.css, 06/09/2026).
   À coller tel quel à la fin de app.css, après le bloc « spécifique ».
   Palier « téléphone » ≤ 640 px : rien ici ne s'applique au-dessus, le rendu PC
   reste identique au pixel. Le bloc (hover:none) and (pointer:coarse) ne vise que
   les écrans tactiles sans souris (téléphone, tablette) : un PC à écran tactile,
   dont le pointeur principal est la souris, n'y entre pas.
   Décision de la gamme : sous 640 px la barre latérale devient une barre
   d'onglets fixe en bas, défilante, icône + libellé — même HTML, CSS seul. */

@media (max-width: 640px) {
  :root { --tabbar-h: 60px; --sab: env(safe-area-inset-bottom, 0px); }
  html { -webkit-text-size-adjust: 100%; }

  /* -- coque : barre d'onglets en bas (la .sidebar sort du flux de la grille) -- */
  #app { grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; }
  .sidebar {
    position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 40;
    height: auto; flex-direction: row; align-items: stretch; gap: 2px;
    padding: 4px 4px calc(4px + var(--sab));
    border-right: 0; border-top: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
    box-shadow: 0 -2px 10px color-mix(in srgb, var(--text-primary) 8%, transparent);
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand, .sidebar-foot { display: none; }
  .nav-item {
    flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 3px;
    min-width: 64px; min-height: 50px; padding: 5px 6px; border-radius: 9px;
    font-size: 10px; line-height: 1.1; text-align: center; position: relative;
    scroll-snap-align: center;
  }
  .nav-item svg { width: 21px; height: 21px; }
  .sidebar .nav-item .label { display: block; white-space: nowrap; } /* bat le repli 800 px (0,2,1 > 0,1,1) */
  .nav-item .pill { position: absolute; top: 2px; right: 6px; margin: 0;
                    min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

  /* -- contenu : marges réduites, place dégagée sous la barre d'onglets -- */
  .main { padding: 12px 12px calc(var(--tabbar-h) + 16px + var(--sab)); }
  .topbar { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
  .topbar h1 { flex: 1 1 100%; font-size: 18px; line-height: 1.25; }  /* titre seul sur sa ligne */
  .topbar .spacer { flex: 1 1 0; }                                     /* indicateurs à droite, ligne 2 */
  .topbar .badge, .topbar .live-dot, .topbar .chip { white-space: normal; max-width: 100%; }
  .grid { gap: 10px; }
  /* minmax(0, 1fr) : une colonne 1fr ne descend jamais sous la largeur intrinsèque de son contenu
     (un <select>, un texte nowrap) et ferait déborder la page */
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .grid[style] { grid-template-columns: minmax(0, 1fr) !important; }  /* grilles posées en inline par le JS */
  .grid > *, .card { min-width: 0; }
  .card { padding: 12px; border-radius: 11px; }
  .card h3 { flex-wrap: wrap; row-gap: 6px; }
  .card h3 .right { flex-basis: 100%; max-width: 100%; min-width: 0; flex-wrap: wrap; }  /* commandes sous le titre */
  .card h3 .right select { flex: 1 1 100%; width: 100%; }
  .kpi .v { font-size: 24px; }
  .sensor-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .legend { gap: 6px 14px; }
  .pager { flex-wrap: wrap; justify-content: center; }
  .empty { padding: 28px 0; }

  /* -- champs, filtres, segmentés, onglets -- */
  input, select, textarea { font-size: 16px; }   /* sous 16 px, iOS zoome à la prise de focus */
  select { max-width: 100%; }                     /* un <select> prend la largeur de sa plus longue option */
  input[type="number"] { width: 100px; }
  .filters { gap: 8px; }
  .filters .f { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .filters .f select, .filters .f input { width: 100%; min-width: 0; }
  .filters .f input[style], .filters .f select[style] { width: 100% !important; min-width: 0 !important; }
  .filters > button, .filters > .btn { flex: 1 1 100%; }
  .seg { flex-wrap: wrap; max-width: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; }

  /* -- tableaux : ils défilent dans .tbl-wrap ; ombres de bord = indice de défilement
        (les deux calques « surface » suivent le contenu et découvrent l'ombre) -- */
  .tbl-wrap {
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    background:
      linear-gradient(to right, var(--surface-1) 40%, transparent) left / 32px 100% no-repeat local,
      linear-gradient(to left,  var(--surface-1) 40%, transparent) right / 32px 100% no-repeat local,
      linear-gradient(to right, color-mix(in srgb, var(--text-primary) 16%, transparent), transparent) left / 12px 100% no-repeat scroll,
      linear-gradient(to left,  color-mix(in srgb, var(--text-primary) 16%, transparent), transparent) right / 12px 100% no-repeat scroll;
  }
  .tbl td { padding: 12px 10px; }   /* lignes cliquables ≈ 44 px */

  /* -- modales : feuille ancrée en bas, hauteur bornée par le viewport dynamique -- */
  .modal-back { padding: 0; align-items: end; }
  .modal, .modal.wide {
    width: 100%; max-height: 92vh; max-height: calc(100dvh - 24px);
    border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 14px 14px calc(16px + var(--sab));
  }
  .modal h2 { font-size: 16px; flex-wrap: wrap; }

  /* -- info-bulle, toast (au-dessus de la barre d'onglets) -- */
  .chart-tip { max-width: min(300px, calc(100vw - 24px)); }
  .toast { left: 12px; right: 12px; max-width: none; transform: none; animation: none;
           bottom: calc(var(--tabbar-h) + 14px + var(--sab)); }
}

@media (hover: none) and (pointer: coarse) {
  /* cibles tactiles ≥ 44 px ; 40 px pour les commandes compactes */
  button, .btn { min-height: 44px; }
  .btn-icon { min-width: 44px; min-height: 44px; }
  .btn-sm, .seg button, .tabs button, .pager button { min-height: 40px; }
  .btn-sm { min-width: 40px; }
  .seg button { min-width: 40px; }
  a.btn, a.btn-sm { display: inline-flex; align-items: center; }   /* min-height sans effet sur un lien inline */
  a.badge { display: inline-flex; align-items: center; min-height: 40px; }
  input[type="color"] { min-width: 44px; min-height: 40px; }
  summary { min-height: 44px; }
  select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  input[type="range"] { min-height: 44px; }
  .nav-item { min-height: 50px; }
  /* pas de halo au toucher, retour visuel bref à l'appui */
  a, button, .nav-item, .tbl tbody tr, .sensor-tile { -webkit-tap-highlight-color: transparent; }
  button:active, .btn:active, .nav-item:active { filter: brightness(.9); }
  /* le survol « colle » après un toucher : on le neutralise */
  button:hover, .btn:hover { filter: none; }
  .nav-item:hover { background: transparent; color: var(--text-secondary); }
  .nav-item.active:hover { background: var(--surface-2); color: var(--accent); }
  .tbl tbody tr:hover { background: transparent; }
  .sensor-tile:hover { background: var(--surface-1); }
}

/* ---------------- spécifique ---------------- */
/* Parcours mobile EllioDB : pas de barre latérale, barre d'onglets fixe en bas (toutes largeurs). */
/* minmax(0, 1fr) partout : une colonne 1fr ne descend pas sous la largeur intrinsèque de son contenu et,
   sur téléphone, un contenu trop large élargit le viewport de mise en page (la page se dézoome). */
#app { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 800px) { #app { grid-template-columns: minmax(0, 1fr); } }
/* width:100% obligatoire : avec margin:auto seul, un élément de grille se dimensionne à son contenu (max-content) et déborde */
.main { width: 100%; max-width: 760px; margin: 0 auto; min-width: 0; padding: 14px 14px calc(76px + env(safe-area-inset-bottom, 0px)); }
.topbar { gap: 8px 10px; margin-bottom: 12px; flex-wrap: wrap; }
.topbar .brand-logo { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.topbar h1 { font-size: 18px; flex: 1 1 auto; min-width: 0; }
.topbar .live-dot { min-width: 0; max-width: 100%; }
.topbar .live-dot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--surface-1); border-top: 1px solid var(--border); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px;
  color: var(--text-muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tab svg { width: 22px; height: 22px; stroke-width: 1.9; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.tab.active { color: var(--accent); }
.tab:active { filter: brightness(.9); }
.card { padding: 14px; }
.card h3 { margin-bottom: 10px; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi-grid .kpi { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.kpi .v { font-size: 22px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.intro p { line-height: 1.55; color: var(--text-secondary); }
.intro p + p { margin-top: 8px; }
.tiles { display: grid; gap: 8px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 11px; background: var(--surface-2);
  color: var(--text-primary); text-decoration: none; min-height: 56px; -webkit-tap-highlight-color: transparent; }
.tile svg { width: 22px; height: 22px; flex: none; color: var(--accent); stroke-width: 1.9; }
.tile b { display: block; } .tile span { color: var(--text-muted); font-size: 12px; }
.tile .fig { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; text-align: right; font-size: 13px; }
.foot { margin-top: 18px; font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6; }
.foot a { color: var(--accent); display: inline-block; padding: 14px 0; }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.d-stats div { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.d-stats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.d-stats span { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
select { width: 100%; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.list { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; min-height: 48px; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.row .t span { color: var(--text-muted); font-size: 12px; }
.row .n { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.row.clickable { cursor: pointer; }
.row .badge { flex: none; }
.spark { margin: 4px 0 8px; }
.hero { text-align: center; padding: 16px 12px 12px; }
.hero .v { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero .l { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.hero .badge { margin-top: 8px; }
.bob-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.bob-nav .btn-icon { flex: none; }
.bob-nav h2 { flex: 1; text-align: center; font-size: 17px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.kv .k { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .4px; }
.kv .v { font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.small { font-size: 12px; }
.mt { margin-top: 12px; }
.tbl-wrap { margin-top: 6px; }