/* Scanner esport — thème sombre « terminal d'analyse ». */
:root {
  --bg: #0a0e13;
  --panel: #111821;
  --panel-2: #16202b;
  --panel-3: #1c2835;
  --line: #243242;
  --line-soft: #1b2632;
  --text: #e6edf3;
  --muted: #8a9bb0;
  --faint: #7a8ba0;  /* contraste ≥ 4,5:1 sur le fond (texte secondaire lisible) */
  --accent: #53c1ff;
  --team-a: #3d9bff;
  --team-a-soft: rgba(61, 155, 255, .16);
  --team-b: #ff9d3d;
  --team-b-soft: rgba(255, 157, 61, .16);
  --good: #3ecf8e;
  --warn: #f5b841;
  --bad: #ff5d5d;
  --live: #ff4d6d;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .25);
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Jetons d'interface : chaque couleur a sa valeur sombre ici et claire plus bas (U1). */
  --topbar-bg: linear-gradient(180deg, #0f161f, #0c1219);
  --primary-bg: #173a55; --primary-border: #245a82; --hover-border: #3a5068; --card-hover-border: #33475d;
  --row-hover: rgba(255, 255, 255, .02); --toolbar-active-bg: #193445;
  --rel-faible-bg: #5a3a44; --fold-bg: #7a2e44; --hstrip-idle: #2f5a48;
  --live-badge: #d6284b; --bad-badge: #c73434; --on-warn: #1b1300; --on-good: #04150d; --on-team: #0a0e13;
  --backdrop: rgba(5, 8, 12, .6);
  /* Courbes des graphiques (U2) : lisibles sur les deux thèmes. */
  --series-ensemble: #e6edf3; --series-polymarket: #53c1ff; --series-ml: #b48cff; --series-elo: #8a9bb0;
  --series-books: #3ecf8e; --series-pinnacle: #2fb37a; --series-ia: #ff7ab6; --series-externes: #f5b841;
  --series-violet: #c38bff; --series-pink: #ff7a9a; --series-pm-alt: #2b7fb0;
  /* Échelle des plans (U19). */
  --z-chart-tip: 5; --z-sticky: 10; --z-nav: 15; --z-topbar: 20; --z-fixed-bar: 30; --z-overlay: 50; --z-dock: 60; --z-banner: 70;
  --bottom-nav-h: 50px;
  color-scheme: dark;
}

/* Evidence tools reuse the existing panels and colour semantics. */
.essential-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.essential-tabs .active { border-color:var(--accent); background:var(--panel-3); color:var(--text); }
.essential-form { display:grid; gap:12px; }
.essential-form label { display:grid; gap:5px; min-width:0; color:var(--muted); }
.essential-form input,.essential-form select,.essential-form textarea { width:100%; max-width:100%; min-width:0; padding:8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
.essential-form textarea { resize:vertical; }
.essential-form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.essential-form .btn { justify-self:start; }
.essential-result { margin:0; color:var(--warn); overflow-wrap:anywhere; }
.essential-actions { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin:14px 0; }
.essential-actions form { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.essential-actions label { display:grid; gap:4px; }
.essential-actions form,.essential-actions label { min-width:0; max-width:100%; }
.essential-actions select { min-width:0; max-width:100%; padding:7px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
.essential-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin:14px 0; }
.essential-metrics strong { display:block; font-size:24px; font-variant-numeric:tabular-nums; }
.essential-watch li { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.essential-watch li>div { overflow-wrap:anywhere; min-width:0; }
.essential-json { white-space:pre-wrap; overflow-wrap:anywhere; max-height:480px; overflow:auto; font-size:12px; }
.essential-desk { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); }
.essential-desk.bettor { grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.essential-match-tools { margin-top:20px; }
.essential-facts { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.essential-facts>div { border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; overflow-wrap:anywhere; }
.essential-facts strong { display:block; margin:6px 0; }
@media(max-width:600px){ .essential-form-row { grid-template-columns:1fr 1fr; } .essential-tabs .chip { font-size:12px; } .essential-actions form { width:100%; } .essential-actions select { max-width:100%; } }
@media(max-width:360px){ .essential-form-row { grid-template-columns:1fr; } }

* { box-sizing: border-box; }
/* Le filtre par jeu pose l'attribut hidden : il doit l'emporter sur display:block des cartes. */
[hidden] { display: none !important; }
/* Version publique : outils d'exploitation masqués à l'écran seulement (code et routes conservés). */
[data-private] { display: none !important; }
/* Outils de l'opérateur visibles dans l'app privée seulement (page Membres, 21/10). */
html[data-customer-mode] [data-operator] { display: none !important; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: 3px; }
.form-grid label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 6px; }
.form-grid [role="status"] { grid-column: 1 / -1; }
.form-grid [role="status"]:empty { display: none; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--sans);
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-rows: 52px minmax(0, 1fr) auto;
  grid-template-areas: "top top" "nav main" "nav foot";
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
.num, td.num, .p { font-variant-numeric: tabular-nums; }

/* ---------- barre du haut ---------- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-topbar);
}
.language-picker { margin-left:auto; display:flex; align-items:center; }
.language-picker select { width:auto; min-width:7.5rem; padding:5px 26px 5px 8px; font-size:12px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.settings-span { grid-column:1/-1; }
.locale-settings { margin-top:8px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; }
.brand b { color: var(--accent); font-weight: 700; }
.dots { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.dots::-webkit-scrollbar { display: none; }
/* Liste plus large que la barre : fondu à droite plutôt qu'un nom coupé net (U21). */
.dots.overflowing { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
a.dot:hover { text-decoration: none; color: var(--text); border-color: var(--hover-border); }
.llm a { color: inherit; }
.dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 3px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-soft); white-space: nowrap; }
.dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.ok i, .dot.connected i { background: var(--good); }
.dot.stale i { background: transparent; box-shadow: inset 0 0 0 2px var(--warn); }
.dot.error i, .dot.down i { background: var(--bad); border-radius: 1px; }
.dot.limited i { background: transparent; box-shadow: inset 0 0 0 2px var(--warn); }
.dot.veille i { background: transparent; box-shadow: inset 0 0 0 2px var(--faint); }
.dot.blocked i { background: var(--faint); border-radius: 1px; }
.dot.manual i { background: var(--accent); }
.llm { font-size: 12px; color: var(--muted); white-space: nowrap; }
.llm b { color: var(--text); font-weight: 600; }
.clock { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
/* Pastille temps réel (SSE) */
.sse { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.sse.on { background: var(--good); box-shadow: 0 0 0 3px rgba(62, 207, 142, .15); }
.sse.off { background: transparent; box-shadow: inset 0 0 0 2px var(--warn); animation: sse-blink 1.2s ease-in-out infinite; }
@keyframes sse-blink { 50% { opacity: .35; } }
/* Squelette de chargement */
.skeleton .sk-line, .skeleton .sk-block { background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; border-radius: 8px; margin: 0 0 14px; }
.skeleton .sk-line { height: 18px; }
.skeleton .sk-line.w30 { width: 30%; height: 26px; }
.skeleton .sk-line.w60 { width: 60%; }
.skeleton .sk-block { height: 180px; }
.skeleton .sk-block.short { height: 110px; }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton .sk-line, .skeleton .sk-block, .sse.off { animation: none; } }

/* ---------- navigation ---------- */
.sidenav {
  grid-area: nav;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 52px; height: calc(100vh - 52px);
}
.sidenav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500;
}
.sidenav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.sidenav a.active { background: var(--panel-3); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.sidenav .count { font: 12px var(--mono); color: var(--live); }
.sidenav .sep { height: 1px; background: var(--line-soft); margin: 8px 4px; }

main { grid-area: main; padding: 20px 24px 32px; min-width: 0; outline: none; }
.disclaimer { grid-area: foot; padding: 10px 24px 16px; color: var(--faint); font-size: 12px; }

/* ---------- typographie ---------- */
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: .1px; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }

/* ---------- panneaux ---------- */
.grid { display: grid; gap: 16px; align-content: start; align-items: start; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* Tableau de bord : une colonne bornée, sinon les tableaux larges élargissent la grille
   (débordement horizontal entre ~600 et ~950 px). */
.grid.dash { grid-template-columns: minmax(0, 1fr); }
.live-layout, .live-layout > .grid, .live-box { min-width: 0; }
#view { overflow-anchor: none; }
.live-layout .chart-wrap { max-width: 920px; margin-inline: auto; }
.live-box[data-live-box="lead"] .chart-wrap { max-width: 820px; }
.live-box[data-live-box="lead"] .chart-tip { max-width: calc(100% - 16px); white-space: normal; }
.live-banner > .dot { white-space: normal; max-width: 100%; min-width: 0; }
.live-layout-toolbar { margin: 16px 0 12px; flex-wrap: wrap; }
.live-box > header { gap: 8px; flex-wrap: nowrap; }
.live-box > header h2 { min-width: 0; flex: 1; }
.live-box-controls, .live-arrange-controls { display: flex; gap: 3px; flex-shrink: 0; }
.live-box-controls button { min-width: 30px; min-height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 17px; }
.live-box-controls button:hover, .live-box-controls button:focus-visible { color: var(--text); border-color: var(--accent); }
.live-arrange-controls { display: none; }
.live-layout.arranging .live-arrange-controls { display: flex; }
.live-layout.arranging .live-box { border-color: var(--card-hover-border); }
.live-box-content > .panel, .live-box-content > [data-live-zone] > .panel { border: 0; box-shadow: none; border-radius: 0 0 var(--radius) var(--radius); }
.live-box:not(.composite) .live-box-content > .panel > header,
.live-box:not(.composite) .live-box-content > [data-live-zone] > .panel > header { display: none; }
.live-box:has(> .live-box-content > [data-live-zone]:empty:not([data-live-deferred])) { display: none; }
.live-box.collapsed > header { border-bottom: 0; }
.trader-order { width: 28px; height: 28px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 8px; background: var(--toolbar-active-bg); color: var(--accent); font-weight: 700; }
.trader-sort-method { padding: 8px 0 12px; color: var(--muted); }
.trader-sort-method summary { cursor: pointer; }
.expert-match-context { padding: 12px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.expert-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 6px 0; }
.gold-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px 0; }
.gold-toolbar .gold-zoom { margin-left: auto; display: flex; gap: 4px; }
.gold-toolbar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--toolbar-active-bg); }
.gold-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px; flex-wrap: wrap; }
.gold-current { font-size: 21px; font-weight: 700; }
.gold-peaks { display: grid; align-content: center; gap: 4px; }
.gold-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 14px 8px; font-size: 12px; }
.gold-foot { padding: 8px 14px 14px; font-size: 12px; color: var(--faint); }
.live-box[data-live-box="lead"] { container-type: inline-size; }
/* Sur téléphone, lineChart dessine déjà un graphique plus étroit à texte plus grand (U5). */
@media (min-width: 601px) { @container (max-width: 520px) { .live-box-content .chart text { font-size: 20px; } } }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
}
.panel > header .hint { color: var(--faint); font-size: 12px; }
.panel .body { padding: 12px 14px; }
.panel .body.flush { padding: 0; }
.empty { color: var(--muted); padding: 18px 14px; text-align: center; }
.empty b { color: var(--text); }
.pager { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); }

/* ---------- tableaux ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { color: var(--faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
tbody tr:hover { background: var(--row-hover); }
tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; }
td.nowrap { white-space: nowrap; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--panel-3); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.game { color: var(--text); }
.badge.live { color: #fff; background: var(--live-badge); border-color: transparent; }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.badge.warn { color: var(--on-warn); background: var(--warn); border-color: transparent; }
.badge.good { color: var(--on-good); background: var(--good); border-color: transparent; }
.badge.bad { color: #fff; background: var(--bad-badge); border-color: transparent; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .badge.live::before { animation: none; } }

.team-a { color: var(--team-a); }
.team-b { color: var(--team-b); }
.vs { color: var(--faint); margin: 0 6px; }

/* ---------- barres de probabilité ---------- */
.pbar { display: grid; grid-template-columns: 46px minmax(60px, 1fr) 46px; align-items: center; gap: 8px; min-width: 150px; }
.pbar .track { height: 8px; border-radius: 4px; background: var(--team-b); overflow: hidden; display: flex; }
.pbar .fill { background: var(--team-a); height: 100%; }
.pbar .l { text-align: right; color: var(--team-a); font: 12px var(--mono); }
.pbar .r { color: var(--team-b); font: 12px var(--mono); }
.pbar.na .track { background: var(--line); }
.pbar.big { grid-template-columns: 64px minmax(80px, 1fr) 64px; }
.pbar.big .track { height: 14px; border-radius: 7px; }
.pbar.big .l, .pbar.big .r { font-size: 16px; font-weight: 700; }
.pmini { font: 12px var(--mono); color: var(--muted); }
.pmini b { color: var(--text); font-weight: 600; }

/* ---------- cartes live ---------- */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.card { display: block; color: var(--text); padding: 14px; }
.card:hover { text-decoration: none; border-color: var(--card-hover-border); }
.card .teams { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin: 8px 0 10px; }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- verdict ---------- */
.verdict { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 14px; }
.verdict .side { display: flex; flex-direction: column; gap: 2px; }
.verdict .side.right { text-align: right; }
.verdict .name { font-size: 18px; font-weight: 700; }
.verdict .big { font: 700 34px/1 var(--mono); }
.verdict .center { text-align: center; color: var(--muted); font-size: 12px; }
.scoreline { display: flex; gap: 8px; flex-wrap: wrap; }
.score-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; text-align: center; min-width: 64px; }
.score-chip b { display: block; font: 600 15px var(--mono); }
.score-chip span { font: 12px var(--mono); color: var(--muted); }

/* ---------- divers ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.list li:last-child { border-bottom: 0; }
.form-seq { display: inline-flex; gap: 3px; }
.form-seq i { width: 18px; height: 18px; border-radius: 3px; font: 600 12px/18px var(--mono); text-align: center; font-style: normal; }
.form-seq i.V { background: rgba(62, 207, 142, .2); color: var(--good); }
.form-seq i.D { background: rgba(255, 93, 93, .18); color: var(--bad); }
.form-seq i.q { background: var(--panel-3); color: var(--faint); }
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.btn { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; }
.btn:hover { border-color: var(--hover-border); }
.btn.primary { background: var(--primary-bg); border-color: var(--primary-border); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar select, .toolbar input { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 8px; }
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); padding: 0 14px 12px; }
.legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend button.lg { background: none; border: 0; color: inherit; font: inherit; padding: 2px 0; cursor: pointer; }
.legend button.lg:hover { color: var(--text); }
.legend button.lg.off { opacity: .45; text-decoration: line-through; }
.legend .mk { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }
.legend .mk b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid; background: transparent; }
.chart .band { fill: var(--panel-2); opacity: .6; }
.chart .band.odd { fill: transparent; }
.chart .band-sep { stroke: var(--line); stroke-width: 1; }
.chart .band-label { fill: var(--muted); font-weight: 600; }
.chart .band-result { fill: var(--faint); }
.chart .band-result.side-a { fill: var(--team-a); font-weight: 700; }
.chart .band-result.side-b { fill: var(--team-b); font-weight: 700; }
.chart .area-a { fill: var(--team-a-soft); }
.chart .area-b { fill: var(--team-b-soft); }
.chart .axis-top { fill: var(--team-a); font-weight: 600; opacity: .85; }
.chart .axis-bottom { fill: var(--team-b); font-weight: 600; opacity: .85; }
.chart .ref-line { stroke: var(--faint); stroke-width: 1; opacity: .8; }
.chart .ref-label { fill: var(--faint); }
.chart .chart-gap { fill: var(--panel-2); opacity: .72; stroke: var(--line-soft); stroke-dasharray: 3 4; }
.chart .chart-gap-label { fill: var(--faint); font-size: 12px; }
.chart-tip .note { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); color: var(--muted); max-width: 260px; }
.chart-head { padding: 10px 14px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.swings h3 { margin: 0 0 6px; }
.swings .list li { padding: 5px 0; }
.callout { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--muted); }
.callout.warn { border-left-color: var(--warn); }
#toast { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-overlay); display: flex; flex-direction: column; gap: 8px; }
#toast .t { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; box-shadow: var(--shadow); font-size: 13px; }
.skeleton { color: var(--faint); padding: 40px 0; text-align: center; }
.effect-pos { color: var(--team-a); }
.effect-neg { color: var(--team-b); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "nav" "main" "foot";
  }
  .sidenav {
    position: sticky; top: 52px; height: auto; z-index: var(--z-nav);
    flex-direction: row; overflow-x: auto; padding: 6px 10px;
    border-right: 0; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav a { white-space: nowrap; }
  .sidenav a.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .sidenav .sep { display: none; }
  main { padding: 16px; }
  .disclaimer { padding: 10px 16px 16px; }
  .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .llm { display: none; }
  .verdict { grid-template-columns: 1fr; text-align: center; }
  .verdict .side.right { text-align: center; }
}
@media (max-width: 520px) {
  .topbar .dots .dot-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dot { padding: 4px; }
  .clock { display: none; }
  .pbar { min-width: 120px; grid-template-columns: 40px minmax(40px, 1fr) 40px; }
}
.badge.fold { color: #fff; background: var(--fold-bg); border-color: transparent; }

/* ---------- fiche match : sections ---------- */
.section-nav { position: sticky; top: 52px; z-index: var(--z-sticky); display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 10px; margin-bottom: 6px; background: linear-gradient(180deg, var(--bg) 70%, transparent); }
.chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 12px; font-weight: 600; }
.chip:hover { color: var(--text); border-color: var(--hover-border); }
.msection { margin-top: 22px; scroll-margin-top: 110px; }
.msection-title { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); margin: 0 0 10px; }

/* ---------- logique ---------- */
.logic-summary .sentence, .sentence { font-size: 15px; line-height: 1.5; margin: 0 0 12px; color: var(--text); }
.logic-balance { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 10px; align-items: center; font: 600 13px var(--sans); }
.logic-balance .track { height: 10px; border-radius: 5px; background: var(--team-b); overflow: hidden; }
.logic-balance .fill { height: 100%; background: var(--team-a); }
.timeline li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.timeline .clock { font: 12px var(--mono); color: var(--faint); min-width: 58px; }
.logic-table tr.hit td { background: rgba(83, 193, 255, .05); }
.logic-table .done { color: var(--good); font-weight: 700; }
.measured { margin-top: 4px; color: var(--text); }
.round-strip { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.rnd { width: 22px; height: 22px; border-radius: 4px; font: 600 12px/22px var(--mono); text-align: center; color: var(--on-team); }
.rnd.ra { background: var(--team-a); }
.rnd.rb { background: var(--team-b); }
.rnd.unk { background: var(--panel-3); color: var(--muted); border: 1px dashed var(--line); }
.rnd.pistol { outline: 2px solid var(--text); outline-offset: -2px; }
.half-sep { width: 2px; height: 22px; background: var(--muted); margin: 0 4px; border-radius: 1px; }

/* ---------- IA ---------- */
.ai-verdict { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 12px; }
.ai-verdict .big { font: 700 26px/1.1 var(--mono); }
.callout.warn b { color: var(--warn); }
@media (max-width: 900px) {
  .section-nav { top: 96px; }
  .msection { scroll-margin-top: 150px; }
}

.odds-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.odds-form select, .odds-form input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; min-width: 0; }
.odds-form input { width: 130px; }
.btn.small { padding: 2px 8px; font-size: 12px; }
.chat-spark { width: 100%; height: 46px; margin: 10px 0 4px; fill: var(--team-a); opacity: .8; display: block; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; padding: 14px; }
.stat-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-value { font-size: 24px; font-family: var(--mono); }
.stat-note { font-size: 12px; color: var(--faint); line-height: 1.35; }
.game-filter { flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.chip.active { background: var(--primary-bg); border-color: var(--primary-border); color: var(--text); }

/* ---------- live : score, bandeau, fraîcheur ---------- */
.center { text-align: center; }
.live-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; font-weight: 600; margin: 8px 0 2px; }
.live-score > span { overflow-wrap: anywhere; }
.live-score > span:last-child { text-align: right; }
.live-score b { font: 700 18px var(--mono); color: var(--text); white-space: nowrap; }
.live-score.big { font-size: 18px; padding: 10px 14px 0; }
.live-score.big b { font-size: 30px; }
.live-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px 0; }
.live-head .callout { margin: 10px 14px 0 !important; }
.card .dot { white-space: normal; }
tr.total td { border-top: 1px solid var(--line); }

/* ---------- listes d'affiches ---------- */
tr.day-head td { background: var(--panel-2); color: var(--accent); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.team-line { display: block; }
.team-meta { display: block; font-size: 12px; color: var(--faint); font-weight: 400; white-space: nowrap; }
.match-cell { min-width: 250px; }
.fav { font-weight: 600; }
.gap-big { font-weight: 700; }
.badge.rel-solide { color: var(--on-good); background: var(--good); border-color: transparent; }
.badge.rel-moyenne { color: var(--on-warn); background: var(--warn); border-color: transparent; }
.badge.rel-faible { color: var(--text); background: var(--rel-faible-bg); border-color: transparent; }
.badge.rel-aucune { color: var(--muted); }
.search { min-width: 180px; }
details.explain { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 14px; }
details.explain summary { cursor: pointer; padding: 8px 12px; color: var(--muted); font-weight: 600; }
details.explain dl { margin: 0; padding: 0 12px 12px; }
details.explain dt { color: var(--text); font-weight: 600; margin-top: 8px; }
details.explain dd { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
details.fold-section > summary { cursor: pointer; list-style: none; }
.fold-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
details.fold-section[open] > .fold-head { border-bottom: 1px solid var(--line-soft); }
details.fold-section > summary::-webkit-details-marker { display: none; }
details.fold-section > summary h2::after { content: " ▸"; color: var(--faint); }
details.fold-section[open] > summary h2::after { content: " ▾"; }
.rank { font: 600 12px var(--mono); color: var(--faint); }
.elo-delta.up { color: var(--good); }
.elo-delta.down { color: var(--bad); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; margin: 0 0 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.kpi span { display: block; font-size: 12px; color: var(--muted); }
.kpi > b { font: 700 20px var(--mono); }
.kpi.good { border-color: rgba(62, 207, 142, .45); }
.kpi.good > b { color: var(--good); }
.kpi.warn { border-color: rgba(245, 184, 65, .45); }
.kpi.warn > b { color: var(--warn); }
/* Contributions des sources (fiche match) */
.contrib-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) 2fr minmax(120px, 1fr); gap: 10px; align-items: center; padding: 4px 0; }
.c-bar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.c-bar i { display: block; height: 100%; border-radius: 4px; }
.c-bar i.to-a { background: var(--team-a, #53c1ff); }
.c-bar i.to-b { background: var(--team-b, #ff8a5c); margin-left: auto; }
.c-val { font: 600 12px var(--mono); text-align: right; }
@media (max-width: 600px) { .contrib-row { grid-template-columns: 1fr; } .c-val { text-align: left; } }
/* Intervalle de confiance dessiné */
.ci { position: relative; display: inline-block; width: 120px; height: 10px; background: var(--panel-2); border-radius: 5px; vertical-align: middle; }
.ci i { position: absolute; top: 0; bottom: 0; }
.ci .ci-range { background: rgba(83, 193, 255, .35); border-radius: 5px; }
.ci.weak .ci-range { background: rgba(138, 155, 176, .25); }
.ci .ci-mid { left: 50%; width: 1px; background: var(--faint); }
.ci .ci-p { width: 3px; margin-left: -1px; background: var(--text); border-radius: 2px; }
tr.weak-row td { opacity: .6; }
.chart-dot { cursor: help; }
.chart-dot:hover, .chart-dot:focus { r: 6; outline: none; }
.toolbar.zoom { margin: 0; }
/* Frise de santé 24 h (Sources) */
.hstrip { display: inline-flex; gap: 1px; vertical-align: middle; }
.hstrip i { width: 3px; height: 14px; border-radius: 1px; background: var(--line-soft); }
.hstrip i.ok, .hstrip i.connected { background: var(--good); }
.hstrip i.idle, .hstrip i.manual, .hstrip i.veille { background: var(--hstrip-idle); }
.hstrip i.blocked { background: var(--faint); }
.hstrip i.limited, .hstrip i.stale { background: var(--warn); }
.hstrip i.error, .hstrip i.down { background: var(--bad); }
/* L'IA écrit (flux) */
.ai-typing { margin: 4px 0 0; }
.ai-typing .caret { color: var(--accent); animation: sse-blink 1s steps(2) infinite; margin-left: 2px; }
/* Recherche globale (Ctrl+K) */
.search-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.search-btn:hover { color: var(--text); }
.search-btn kbd { font: 12px var(--mono); background: var(--panel-2); border-radius: 4px; padding: 1px 4px; margin-left: 4px; }
/* Boîte de dialogue modale (U13) : focus piégé, Échap natif, retour au bouton d'origine. */
dialog.srch { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: none; margin: 12vh auto 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
dialog.srch::backdrop { background: var(--backdrop); }
.srch-panel { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); overflow: hidden; }
.srch-panel input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-size: 16px; padding: 14px 16px; }
.srch-panel input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px 12px 0 0; }
.srch-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.srch-list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.srch-list li.sel, .srch-list li[data-i]:hover { background: var(--panel-3); }
.srch-help { padding: 6px 14px 10px; }
@media (max-width: 600px) {
  .search-btn kbd { display: none; }
  .topbar { gap: 8px; padding: 0 8px; }
  .language-picker select { min-width: 6.5rem; max-width: 7rem; }
}
@media (max-width: 360px) {
  .topbar { gap: 6px; }
  .topbar .dots { display: none; }
  .brand { font-size: 12px; gap: 6px; }
  .search-btn { padding: 4px 6px; font-size: 12px; }
  .language-picker select { min-width: 5.5rem; max-width: 6rem; }
}
/* ---------- thème clair (Réglages > Affichage) ---------- */
:root[data-theme="light"] {
  --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef2f6; --panel-3: #e3e9f0; --line: #d3dbe4; --line-soft: #e4e9ef;
  --text: #16202b; --muted: #4b5968; --faint: #5f6d7c; --accent: #0a74b8;
  --team-a: #1d64c8; --team-a-soft: rgba(29, 100, 200, .12); --team-b: #ad5600; --team-b-soft: rgba(173, 86, 0, .12);
  --good: #16865a; --warn: #9a6f00; --bad: #c73434; --live: #d11f47;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --topbar-bg: linear-gradient(180deg, #ffffff, #f4f6f9);
  --primary-bg: #dcecf8; --primary-border: #7fb2d9; --hover-border: #9fb3c8; --card-hover-border: #9fb3c8;
  --row-hover: rgba(16, 24, 40, .035); --toolbar-active-bg: #dcecf8;
  --rel-faible-bg: #f3d9df; --fold-bg: #a3324f; --hstrip-idle: #9cc9b2;
  --live-badge: #c41e44; --bad-badge: #b42d2d; --on-warn: #ffffff; --on-good: #ffffff; --on-team: #ffffff;
  --backdrop: rgba(16, 24, 40, .35);
  --series-ensemble: #16202b; --series-polymarket: #0a74b8; --series-ml: #7445c9; --series-elo: #5f6d7c;
  --series-books: #16865a; --series-pinnacle: #0e6b47; --series-ia: #c2387a; --series-externes: #9a6f00;
  --series-violet: #7445c9; --series-pink: #c7365a; --series-pm-alt: #1d5f8a;
  color-scheme: light;
}
/* Même liste que ci-dessus (thème « comme le système ») : les deux blocs doivent rester identiques. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef2f6; --panel-3: #e3e9f0; --line: #d3dbe4; --line-soft: #e4e9ef;
  --text: #16202b; --muted: #4b5968; --faint: #5f6d7c; --accent: #0a74b8;
  --team-a: #1d64c8; --team-a-soft: rgba(29, 100, 200, .12); --team-b: #ad5600; --team-b-soft: rgba(173, 86, 0, .12);
  --good: #16865a; --warn: #9a6f00; --bad: #c73434; --live: #d11f47;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --topbar-bg: linear-gradient(180deg, #ffffff, #f4f6f9);
  --primary-bg: #dcecf8; --primary-border: #7fb2d9; --hover-border: #9fb3c8; --card-hover-border: #9fb3c8;
  --row-hover: rgba(16, 24, 40, .035); --toolbar-active-bg: #dcecf8;
  --rel-faible-bg: #f3d9df; --fold-bg: #a3324f; --hstrip-idle: #9cc9b2;
  --live-badge: #c41e44; --bad-badge: #b42d2d; --on-warn: #ffffff; --on-good: #ffffff; --on-team: #ffffff;
  --backdrop: rgba(16, 24, 40, .35);
  --series-ensemble: #16202b; --series-polymarket: #0a74b8; --series-ml: #7445c9; --series-elo: #5f6d7c;
  --series-books: #16865a; --series-pinnacle: #0e6b47; --series-ia: #c2387a; --series-externes: #9a6f00;
  --series-violet: #7445c9; --series-pink: #c7365a; --series-pm-alt: #1d5f8a;
  color-scheme: light;
  }
}
/* ---------- densité compacte ---------- */
body.compact td, body.compact th { padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
body.compact .panel .body { padding: 8px 10px; }
body.compact .kpi { padding: 6px 8px; }
body.compact .kpi b { font-size: 16px; }
/* ---------- accessibilité : focus visible au clavier ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
tr.clickable:focus-visible td { background: var(--panel-3); }
/* ---------- hors ligne (cache du service worker) ---------- */
/* Texte posé par ui.js (traduit) dans data-offline-text (U8). */
body.offline::before { content: attr(data-offline-text); position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: var(--z-banner); background: var(--warn); color: var(--on-warn); font: 600 12px var(--sans); padding: 4px 12px; border-radius: 0 0 8px 8px; }
/* ---------- tableau de bord : prochains matchs, mini-courbes ---------- */
.next-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin: 0 0 14px; }
.next-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--text); }
.next-card:hover { text-decoration: none; border-color: var(--accent); }
.mono { font-family: var(--mono); }
.spark { margin-top: 8px; opacity: .9; }
.spark svg { width: 100%; height: 30px; }
/* ---------- graphiques : lecture au survol ---------- */
.chart-wrap { position: relative; }
.chart-tip { position: absolute; top: 8px; z-index: var(--z-chart-tip); background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12px; pointer-events: none; box-shadow: var(--shadow); white-space: nowrap; }
.chart-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
/* ---------- Réglages, Aide ---------- */
.settings { display: grid; gap: 12px; }
.settings label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); max-width: 360px; min-width: 0; }
.settings select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 0; max-width: 100%; }
.settings fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 12px; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--text); }
.glossary dt { font-weight: 700; margin-top: 10px; }
.glossary dd { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
kbd { font: 12px var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
/* ---------- petits écrans : navigation en bas, tableaux en cartes ---------- */
@media (max-width: 600px) {
  .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .sidenav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: var(--z-fixed-bar); border-top: 1px solid var(--line); border-bottom: 0; background: var(--panel);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); align-items: center; }
  main { padding-bottom: 72px; }
  .disclaimer { padding-bottom: 64px; }
  table.stack-sm thead { display: none; }
  table.stack-sm tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.stack-sm tr.day-head { border: 0; }
  table.stack-sm td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 12px; text-align: right; }
  table.stack-sm td::before { content: attr(data-label); color: var(--faint); font-size: 12px; text-align: left; }
  table.stack-sm td.match-cell { display: block; text-align: left; }
  table.stack-sm td.match-cell::before { display: none; }
}
/* ---------- impression d'une fiche ---------- */
@media print {
  .topbar, .sidenav, .disclaimer, #toast, .section-nav, .btn, button, .toolbar, .srch { display: none !important; }
  body { display: block; background: #fff; color: #000; }
  :root { --bg: #fff; --panel: #fff; --panel-2: #f3f3f3; --panel-3: #eee; --text: #000; --muted: #333; --faint: #555; --line: #ccc; --line-soft: #ddd; }
  .panel { break-inside: avoid; box-shadow: none; }
  a { color: #000; text-decoration: none; }
}
/* ---------- tableau de bord : panneaux repliables / réordonnables ---------- */
.dash-ctl { margin-left: auto; display: inline-flex; gap: 2px; }
.dash-ctl button { background: transparent; border: 0; color: var(--faint); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.dash-ctl button:hover { color: var(--text); background: var(--panel-2); }
.dash-item.collapsed .panel > .body, .dash-item.collapsed .grid.two .panel > .body { display: none; }
.dash-item.collapsed .dash-ctl [data-fold] { transform: rotate(-90deg); }
.list.nested { margin: 4px 0 0 12px; }
/* ---------- affiches suivies (étoile) ---------- */
.pin { background: transparent; border: 0; color: var(--faint); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.pin.on { color: var(--warn); }
.pin:hover { color: var(--warn); }
tr.pinned td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* ---------- À venir : pagination, lien externe ---------- */
tr.extra { display: none; }
table.show-all tr.extra { display: table-row; }
a.ext { font-size: 12px; text-decoration: none; }
/* ---------- fiche match : radar, signalement, données brutes, sommaire actif ---------- */
.radar-wrap { display: flex; flex-direction: column; align-items: center; padding: 8px; }
.radar { width: min(320px, 100%); height: auto; overflow: visible; }
.report-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.report-form select, .report-form input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; }
.report-form input { flex: 1; min-width: 200px; }
details.raw pre { max-height: 420px; overflow: auto; padding: 10px 14px; margin: 0; white-space: pre-wrap; word-break: break-all; }
.section-nav .chip.active { color: var(--text); border-color: var(--accent); background: var(--panel-3); }
/* ---------- équipes : pastilles, centiles ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 12px var(--sans); margin-right: 6px; vertical-align: middle; flex: none; }
h1 .avatar { width: 30px; height: 30px; font-size: 13px; }
.pct-bar { display: inline-block; width: 90px; height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.pct-bar i { display: block; height: 100%; background: var(--accent); }
#team-note textarea { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; resize: vertical; }
/* ---------- calendrier ---------- */
.calendar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.cal-day h3 { font-size: 13px; margin: 0 0 8px; position: sticky; top: 0; background: var(--bg); padding: 4px 0; }
.cal-item { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; color: var(--text); font-size: 13px; }
.cal-item:hover { border-color: var(--accent); text-decoration: none; }
.cal-item.focus { box-shadow: inset 3px 0 0 var(--accent); }
.cal-item.live { border-color: var(--live); }
/* ---------- live : stream intégré ---------- */
.stream-wrap { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; margin-bottom: 12px; }
.stream-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- mode écran TV ---------- */
body.tv .sidenav, body.tv .topbar .dots, body.tv .disclaimer { display: none; }
body.tv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "foot"; }
.tv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tv-cards { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
.tv-cards .card { font-size: 16px; }
.tv-cards .live-score { font-size: 22px; }
/* Calculateur (Logique de jeu) */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
.calc > * { min-width: 0; }
.calc label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 13px; color: var(--muted); }
.calc output { color: var(--text); font-weight: 600; }
.calc-out { font-size: 14px; display: grid; gap: 4px; }
/* Tri des tableaux */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.sortable:focus-visible { color: var(--text); }
th[data-dir="asc"]::after { content: " ▲"; }
th[data-dir="desc"]::after { content: " ▼"; }
table.sorted tr.day-head { display: none; }
/* Jeux favoris (LoL, CS2) */
tr.focus td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.why li { padding: 6px 14px; }

/* Statistiques (vague 7) : carte de chaleur, barres horizontales, calibration */
table.heat td, table.heat th { padding: 3px 4px; font-size: 12px; min-width: 22px; text-align: center; }
.hbars { display: grid; gap: 3px; margin-top: 8px; }
.hbar { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 8px; font-size: 12px; }
.hbar i { display: block; height: 10px; border-radius: 3px; background: var(--accent); opacity: .75; }
.hbar b { text-align: right; font-weight: 500; }
svg.calib { display: block; margin: 8px auto; }

/* Lecteur de stream flottant (hors de la page : survit aux mises à jour live) */
#stream-dock { position: fixed; right: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); z-index: var(--z-dock); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
#stream-dock .dock-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 2px 6px; }
#stream-dock .stream-wrap { margin: 0; }
#stream-dock.min .stream-wrap { display: none; }
@media (max-width: 700px) { #stream-dock { bottom: 64px; } }

/* Fiche live (refonte 26/09) : équipes + Elo, récit, chat en direct, levier suivant */
.live-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.live-team { background: var(--line-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.live-team.b { text-align: right; }
.live-banner .dots { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 8px; }
/* 13/10 : la rangée de sources héritait du défilement horizontal de la barre du haut (flex: 1,
   min-width: 0) ; coincée entre l'état du flux et le carnet, chaque pastille était tronquée sur
   sa propre ligne. Elle prend désormais toute une ligne, sous l'état et le carnet. */
.live-banner .dots { order: 3; flex: 1 1 100%; margin: 0; overflow: visible; }
.live-banner .dots .dot span { overflow: hidden; text-overflow: ellipsis; }
details.how { margin: 8px 0 0; }
details.how summary { cursor: pointer; color: var(--muted); }
ul.story { margin: 0; }
ul.story li { padding: 3px 0; }
ul.chat-feed { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 13px; }
ul.chat-feed li { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
ul.chat-feed li.side-a { border-left: 3px solid var(--team-a); }
ul.chat-feed li.side-b { border-left: 3px solid var(--team-b); }
.logic-table tr.next td { background: color-mix(in srgb, var(--good) 10%, transparent); }
@media (max-width: 700px) { .live-teams { grid-template-columns: 1fr; } .live-team.b { text-align: left; } }
/* Écart modèle / marché (panneau « Marchés en direct ») */
b.gap-up { color: var(--good); }
b.gap-down { color: var(--bad); }
/* Infobulle ⓘ des termes techniques */
.info { position: relative; display: inline-block; margin-left: 3px; color: var(--accent); cursor: help; font-size: .85em; font-weight: 400; }
.info:hover::after, .info:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: min(280px, 80vw); white-space: normal; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); color: var(--text); box-shadow: var(--shadow); font: 400 12px/1.4 var(--sans); text-transform: none; letter-spacing: 0; text-align: left; z-index: var(--z-overlay); }
.info:focus-visible { outline: 2px solid var(--accent); border-radius: 50%; }
/* Résumé du jour (IA locale) */
.resume-title { margin: 0 0 6px; font-size: 1.15rem; color: var(--accent); }
.resume-games { gap: 8px; margin-bottom: 8px; }
.resume-game { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .92em; }
.resume-mdj, .resume-trap { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 8px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 4px; }
.resume-trap { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* Aide des chiffres : clic, clavier et mobile, hors du contenu actualisé. */
.metric-help { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 2px 6px; margin-left: 3px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; }
.metric-help:hover { background: var(--panel-3); }
.metric-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comparison { color: var(--accent); font-variant-numeric: tabular-nums; }
.reading-summary { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: var(--radius-sm); }
.reading-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow); overflow: auto; }
.reading-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.reading-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.reading-head h2 { margin: 0; font-size: 18px; }
.reading-body { padding: 4px 14px 14px; overflow-wrap: anywhere; }
.reading-body h3 { margin: 16px 0 6px; font-size: 14px; color: var(--accent); }
.reading-body p { margin: 8px 0; }
.reading-observed, .reading-warning { padding: 4px 10px; margin: 10px 0; border-radius: var(--radius-sm); background: var(--panel-2); }
.reading-warning { border-left: 3px solid var(--warn); }
@media (max-width: 600px) { .metric-help { min-width: 30px; min-height: 30px; } .reading-head { padding: 10px; } }

@media (max-width: 600px) {
  select[data-filter-tour], select[data-team-tour] { max-width: 100%; min-width: 0; }
  table.reading-table td { display: grid; grid-template-columns: minmax(70px, 30%) minmax(0, 1fr); gap: 10px; align-items: start; }
  table.reading-table .cell-value { min-width: 0; overflow-wrap: anywhere; }
  table.reading-table td.match-cell { display: block; }
  table.reading-table .team-meta { white-space: normal; }
  table.reading-table .pbar { max-width: 100%; }
}

/* Un accès discret aux explications par affiche. */
.reading-link { background: transparent; border: 0; padding: 2px 0; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.reading-link:hover { color: var(--accent); }
.reading-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reading-choice { display: grid; gap: 5px; padding: 12px 14px 4px; }
.reading-choice label { color: var(--muted); font-size: 12px; }
.reading-choice select { min-width: 0; max-width: 100%; width: 100%; }
.trader-name { font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.trader-table td { vertical-align: top; white-space: normal; min-width: 125px; }
.trader-table .badge { white-space: normal; }
.trader-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.trader-cards > * { min-width: 0; }
.trader-card { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; overflow-wrap: anywhere; min-width: 0; }
.trader-card[data-trader-side="a"] { --trader-color: var(--team-a); border-left: 3px solid var(--team-a); }
.trader-card[data-trader-side="b"] { --trader-color: var(--team-b); border-left: 3px solid var(--team-b); }
.trader-card .trader-team, .trader-card .trader-value { color: var(--trader-color, var(--text)); }
.trader-card .trader-team { font-weight: 600; }
.trader-card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.trader-card-head > div { min-width: 0; }
.trader-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trader-card-stats .badge { white-space: normal; }
.trader-pnl, .trader-freshness { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.trader-activity { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line-soft); }
.trader-history td { vertical-align: top; white-space: normal; }
.reading-dialog:has(.trader-history) { width: min(850px, calc(100vw - 24px)); }
@media (max-width: 600px) { .trader-card-stats { grid-template-columns: 1fr; gap: 8px; } .trader-card-head { flex-wrap: wrap; } }
.live-attention-preview { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--bg); }
[data-live-zone="attention"] > .panel { margin-top: 16px; }
.live-attention { border-top: 1px solid var(--line-soft); }
.live-attention > summary { padding: 12px 0; cursor: pointer; }
.live-attention > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.attention-proof { padding: 0 8px 12px 18px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .reading-link { min-height: 32px; } }

/* Repères de match : portée explicite, chiffres lisibles, méthode à la demande. */
.match-insights { display:grid; gap:16px; min-width:0; }
.insight-context { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); }
.insight-context p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.insight-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:12px; }
.insight-metric { min-width:0; padding:14px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--panel-2); }
.insight-label { display:block; font-size:13px; color:var(--muted); }
.insight-metric strong { display:block; font-size:28px; line-height:1.3; margin:6px 0; font-variant-numeric:tabular-nums; }
.insight-metric strong small { font-size:14px; color:var(--muted); font-weight:400; }
.insight-metric p { margin:6px 0; font-size:13px; }
.insight-confidence { margin-top:8px; font-size:12px; color:var(--muted); }
.insight-source { padding:10px 14px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--muted); }
.insight-source p { margin:8px 0 0; overflow-wrap:anywhere; }
.insight-confidence summary, .insight-source summary { cursor:pointer; }
.insight-confidence summary:focus-visible, .insight-source summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.insight-teams { gap:0; }
.insight-team { min-width:0; border-top:2px solid var(--team-a); }
.insight-team.side-b { border-top-color:var(--team-b); }
.insight-team.side-a h3 { color:var(--team-a); }
.insight-team.side-b h3 { color:var(--team-b); }
.team-form { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:10px 0 14px; }
.result-chip { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid currentColor; border-radius:5px; font-weight:600; }
.reading-table.compact-view th:nth-child(5), .reading-table.compact-view td:nth-child(5),
.reading-table.compact-view th:nth-child(6), .reading-table.compact-view td:nth-child(6),
.reading-table.compact-view th:nth-child(7), .reading-table.compact-view td:nth-child(7),
.reading-table.compact-view th:nth-child(8), .reading-table.compact-view td:nth-child(8) { display:none; }
.match-read-path { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.match-read-path a { border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; background:var(--panel); }
.live-card-data { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.live-card-data span { padding:5px 8px; background:var(--panel-2); border-radius:5px; font-variant-numeric:tabular-nums; }
@media (max-width:700px) {
 .insight-context { flex-wrap:wrap; padding:12px; }
 .insight-teams { grid-template-columns:1fr; }
 .insight-metric strong { font-size:25px; }
 .match-read-path { display:grid; grid-template-columns:1fr; }
}

.result-chip.good { color:var(--good); background:rgba(62,207,142,.08); }
.result-chip.bad { color:var(--bad); background:rgba(255,93,93,.08); }

/* Lecture du match : les repères utiles avant les détails. */
.quick-read { margin:16px 0; padding:16px; border-top:2px solid var(--accent); }
.quick-read-heading { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; }
.quick-read-grid { display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:20px; }
.quick-read-grid > div { min-width:0; }
.quick-read-grid strong { display:block; font-size:18px; margin:6px 0; overflow-wrap:anywhere; }
.quick-read-grid p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.live-layout-toolbar [aria-pressed="true"], .gold-toolbar [aria-pressed="true"] { border-color:var(--accent); background:var(--panel-2); color:var(--accent); }
.gold-toolbar button:disabled { opacity:.5; cursor:not-allowed; }
.gold-trend { margin:8px 14px 12px; }
.draft-sides { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.draft-lineup { min-width:0; }
.champion-grid { display:grid; gap:8px; }
.champion-card { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line-soft); border-radius:8px; background:var(--panel-2); flex-wrap:wrap; }
.champion-card > div { min-width:0; flex:1; }
.champion-card > div > span { display:block; overflow-wrap:anywhere; }
.champion-card img, .champion-placeholder { border-radius:6px; flex-shrink:0; }
.champion-placeholder { display:flex; align-items:center; justify-content:center; width:52px; height:52px; background:var(--bg); }
.champion-items { display:flex; gap:4px; flex-wrap:wrap; flex-basis:100% !important; }
.draft-visual .fold-section { margin-bottom:8px; }
.live-box:has([data-live-zone="review"]:empty) { display:none; }
.draft-history > summary, .live-review-details > summary { padding: 12px 14px; cursor: pointer; color: var(--muted); }
.draft-visual .gold-toolbar { padding: 0 0 12px; }
@media (max-width:760px) { .quick-read-grid { grid-template-columns:1fr; gap:14px; } .draft-sides { grid-template-columns:1fr; } .quick-read { padding:12px; } }

/* Page live par groupes (07/10), en deux colonnes (14/10) : jeu à gauche, marché et avis à
   droite (colonne collante, défilement propre). Une colonne de blocs pleine largeur chacune :
   plus de bloc seul à mi-largeur ni de hauteurs inégales côte à côte. Écran étroit : une seule
   colonne, groupes entremêlés par leur `order`. */
.live-layout { min-width: 0; container: livelayout / inline-size; }
.live-columns { display: grid; gap: 22px; min-width: 0; }
.live-col { display: contents; }
.live-group { min-width: 0; scroll-margin-top: 110px; }
.live-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.live-group-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.live-group-grid > .live-box { min-width: 0; }
@container livelayout (min-width: 980px) {
  .live-columns { grid-template-columns: minmax(0, 1fr) clamp(340px, 36%, 480px); align-items: start; }
  .live-col { display: grid; gap: 22px; min-width: 0; align-content: start; }
  .live-col-rail { position: sticky; top: 104px; max-height: calc(100vh - 116px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
  .live-col-rail .live-group { scroll-margin-top: 0; }
}
/* Top traders et whales (live) : un tableau compact par équipe. */
.trader-sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.trader-side { border-left: 3px solid var(--team-a); padding-left: 8px; min-width: 0; }
.trader-side[data-trader-side="b"] { border-left-color: var(--team-b); }
.trader-side-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 4px; }
.trader-list { list-style: none; margin: 0; padding: 0; }
.trader-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.trader-row:last-child { border-bottom: 0; }
.trader-row .tr-who, .trader-row .tr-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trader-row .tr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trader-row .badge { font-size: 10.5px; padding: 0 5px; }
.live-traders .trader-feed li { padding: 3px 0; }
.live-nav { margin-top: 8px; }
/* Mobile : barre de score fixe en bas d'écran, visible quand l'en-tête du match défile hors champ. */
.live-mini, .live-mini-spacer { display: none; }
@media (max-width: 900px) {
  .live-mini { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixed-bar); visibility: hidden;
    background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
    transform: translateY(110%); transition: transform .18s ease, visibility .18s; pointer-events: none; }
  .live-mini.show { transform: none; visibility: visible; }
  .live-mini > [data-live-zone] { display: flex; align-items: center; gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
  .live-mini .lm-team { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .live-mini .lm-team.team-b { text-align: right; }
  .live-mini .lm-score { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .live-mini-spacer { display: block; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .live-mini { transition: none; } }
.live-box.wide .trader-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.trader-cards > details { grid-column: 1 / -1; }
.trader-cards > details > .trader-cards { margin-top: 8px; }
.weak-n { opacity: .72; }

/* ---------- audit 12/10 : accessibilité et mobile ---------- */
/* Lien d'évitement (U18) : visible seulement au clavier. */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: var(--z-banner); padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel-3); color: var(--text); border: 1px solid var(--accent); }
.skip-link:focus { top: 8px; }
/* Tri des colonnes : un vrai bouton dans l'en-tête (U18). */
th .th-sort { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
/* Pages longues sur téléphone (U23) : panneaux repliés, ouverts d'un toucher. */
.panel.m-collapsed > :not(header) { display: none; }
.panel.m-collapsed > header { border-bottom: 0; }
.panel > header .panel-toggle { margin-left: auto; flex: none; }
/* Cibles tactiles d'au moins 44 px (U14). */
@media (pointer: coarse) {
  .pin, .dash-ctl button, .live-box-controls button, .metric-help { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.small { min-height: 40px; padding: 6px 12px; display: inline-flex; align-items: center; }
  .chip { min-height: 40px; }
}
@media (max-width: 600px) {
  /* Sommaire de la fiche : une seule ligne défilante, collée sous la barre du haut (U6). */
  .section-nav { top: 52px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav .chip { flex: none; }
  .msection, .live-group { scroll-margin-top: 104px; }
  /* Mini-barre live au-dessus de la navigation du bas, glissant de derrière elle (U6). */
  .live-mini { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-fixed-bar) - 1); }
  .live-mini > [data-live-zone] { padding-bottom: 8px; }
}

/* Stars des équipes (page live) */
.stars-grid { align-items: start; }
.stars-team td:first-child { white-space: nowrap; }
.stars-team .compact th, .stars-team .compact td { padding-left: 6px; padding-right: 6px; }
.stars-team h3 { margin: 0 0 6px; }
.star-card { border-left: 3px solid var(--accent); padding: 6px 10px; margin-bottom: 8px; background: var(--panel); border-radius: 6px; }
.star-card .star-name { font-size: 15px; margin-bottom: 4px; }
.star-card .kv { margin: 4px 0; }