/* Matrix — unified AI research hub + live cockpit (/matrix).
   Plain CSS (no Tailwind purge dependency). Reuses global tokens from base.css
   (var(--mint), var(--coral), var(--muted), var(--line), var(--ink-800), …). */

:root {
  --mx-mint: var(--mint, #00d4a8);
  --mx-coral: var(--coral, #ff5d6c);
  --mx-amber: #f5a623;
  --mx-blue: #42a5f5;
  --mx-line: var(--line, #1e2730);
  --mx-card: var(--ink-800, #131a22);
  --mx-muted: var(--muted, #8b97a3);
}

.mx-hub {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mx-hub .num { font-variant-numeric: tabular-nums; }
.mx-hub .pos { color: var(--mx-mint); }
.mx-hub .neg { color: var(--mx-coral); }

/* ════════════ AI DESK ════════════ */
.mx-desk {
  position: relative;
  border: 1px solid var(--mx-line);
  border-radius: 20px;
  padding: 1.6rem 1.6rem 1.1rem;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(0,212,168,.12) 0%, rgba(0,212,168,.02) 46%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  overflow: hidden;
}
.mx-desk::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(rgba(0,212,168,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,168,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(80% 90% at 30% 0%, #000, transparent 78%);
}
.mx-desk > * { position: relative; }
.mx-desk-intro.is-hidden { display: none; }
.mx-desk-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em;
  color: var(--mx-mint);
}
.mx-desk-eyebrow .candle-icon { width: 20px; height: 20px; color: var(--mx-mint); }
.mx-desk-title {
  font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.02em;
  color: #fff; margin: .55rem 0 0; line-height: 1.05;
}
.mx-desk-sub { font-size: 13.5px; line-height: 1.6; color: var(--mx-muted); margin: .6rem 0 0; max-width: 760px; }
.mx-desk-sub b { color: #e6ecf2; }

/* Composer (search-bar style, at top) */
.mx-composer { display: flex; align-items: flex-end; gap: .55rem; margin-top: 1.1rem; }
.mx-input {
  flex: 1 1 auto; resize: none; max-height: 180px;
  background: rgba(8,12,17,.85); border: 1px solid var(--mx-line); border-radius: 14px;
  padding: .85rem 1rem; color: #fff; font-size: 15px; line-height: 1.5; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mx-input:focus { border-color: rgba(0,212,168,.5); box-shadow: 0 0 0 3px rgba(0,212,168,.12); }
.mx-input::placeholder { color: var(--mx-muted); }
.mx-send {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px;
  border: 1px solid rgba(0,212,168,.45); background: rgba(0,212,168,.16); color: var(--mx-mint);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, transform .05s;
}
.mx-send svg { width: 20px; height: 20px; }
.mx-send:hover { background: rgba(0,212,168,.3); }
.mx-send:active { transform: translateY(1px); }
.mx-send:disabled { opacity: .45; cursor: default; }

.mx-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.mx-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--mx-line); background: var(--mx-card); color: #e6edf3;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, transform .05s;
}
.mx-chip:hover { border-color: rgba(0,212,168,.45); color: var(--mx-mint); }
.mx-chip:active { transform: translateY(1px); }
.mx-chip:disabled { opacity: .5; cursor: default; }

/* Recents */
.mx-recents { margin-top: 1rem; }
.mx-recents.is-empty { display: none; }
.mx-recents-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.mx-recents-head span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mx-muted); font-weight: 700; }
.mx-recents-clear { font-size: 12px; color: var(--mx-muted); background: none; border: none; cursor: pointer; padding: .15rem .35rem; border-radius: 6px; transition: color .15s; }
.mx-recents-clear:hover { color: var(--mx-coral); }
.mx-recents-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; }
.mx-recent { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--mx-line); background: var(--mx-card); cursor: pointer; transition: border-color .15s; }
.mx-recent:hover { border-color: rgba(0,212,168,.45); }
.mx-recent-title { font-size: 13px; font-weight: 600; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-recent-meta { font-size: 12px; color: var(--mx-muted); }

/* Thread */
.mx-thread { display: flex; flex-direction: column; gap: .85rem; padding: .5rem 0 .25rem; }
.mx-thread:empty { display: none; }
.mx-msg { display: flex; flex-direction: column; max-width: 92%; }
.mx-msg.user { align-self: flex-end; align-items: flex-end; }
.mx-msg.ai { align-self: flex-start; align-items: flex-start; }
.mx-bubble { border-radius: 14px; padding: .7rem .95rem; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.mx-msg.user .mx-bubble { background: rgba(0,212,168,.12); border: 1px solid rgba(0,212,168,.3); color: #eafff8; }
.mx-msg.ai .mx-bubble { background: rgba(8,12,17,.7); border: 1px solid var(--mx-line); color: #e6edf3; }
.mx-bubble a { color: var(--mx-mint); text-decoration: underline; }
.mx-role { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mx-muted); margin-bottom: .25rem; font-weight: 700; }
.mx-bubble.streaming::after { content: "▍"; color: var(--mx-mint); animation: mx-blink 1s steps(2) infinite; }
@keyframes mx-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
/* "Thinking…" typing dots — painted on the server's instant status event and
   replaced by the first real text chunk. */
.mx-dots { display: inline-flex; gap: 5px; align-items: center; padding: .2rem 0; }
.mx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-mint); opacity: .3; animation: mx-dot 1.05s ease-in-out infinite; }
.mx-dots i:nth-child(2) { animation-delay: .18s; }
.mx-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes mx-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.mx-route { display: inline-block; margin-top: .5rem; font-size: 12px; padding: .3rem .7rem; border-radius: 8px; background: rgba(0,212,168,.15); border: 1px solid rgba(0,212,168,.3); color: var(--mx-mint); }
.mx-route:hover { background: rgba(0,212,168,.25); }
.mx-cites { margin-top: .55rem; display: flex; flex-direction: column; gap: .25rem; }
.mx-cite { font-size: 12px; color: var(--mx-muted); }
.mx-cite a { color: var(--mx-muted); }
.mx-cite a:hover { color: var(--mx-mint); }
.mx-err { color: var(--mx-coral); font-size: 13px; }
/* Credit-gate notice (sign in / top up) — informational, not an error. */
.mx-err.mx-gate { color: #e6edf3; }
.mx-err.mx-gate a { color: var(--mx-mint); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.mx-err.mx-gate a:hover { opacity: .85; }

/* Rendered-markdown AI bubbles: the base bubble keeps white-space:pre-wrap for
   plain streamed text, but once markdown is parsed into real block elements we
   switch to normal flow so paragraphs/lists don't carry raw newlines. */
.mx-bubble.md { white-space: normal; }
.mx-bubble.md > :first-child { margin-top: 0; }
.mx-bubble.md > :last-child { margin-bottom: 0; }
.mx-bubble.md p { margin: .5rem 0; }
.mx-bubble.md h3 { font-size: 15px; font-weight: 800; color: #fff; margin: .7rem 0 .3rem; }
.mx-bubble.md h4 { font-size: 14px; font-weight: 700; color: #f2f6fa; margin: .6rem 0 .25rem; }
.mx-bubble.md h5, .mx-bubble.md h6 { font-size: 13px; font-weight: 700; color: #e6edf3; margin: .55rem 0 .2rem; }
.mx-bubble.md ul, .mx-bubble.md ol { margin: .4rem 0; padding-left: 1.25rem; }
.mx-bubble.md li { margin: .2rem 0; }
.mx-bubble.md strong { color: #fff; font-weight: 700; }
.mx-bubble.md code {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px;
  background: rgba(255,255,255,.07); border: 1px solid var(--mx-line);
  border-radius: 5px; padding: .05rem .3rem;
}

/* Tappable follow-up suggestion chips shown under an answer. */
.mx-followups { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.mx-followup {
  font-size: 12.5px; color: var(--mx-mint); background: rgba(0,212,168,.1);
  border: 1px solid rgba(0,212,168,.3); border-radius: 999px;
  padding: .35rem .8rem; cursor: pointer; line-height: 1.3; text-align: left;
  transition: background .15s, border-color .15s;
}
.mx-followup:hover { background: rgba(0,212,168,.2); border-color: rgba(0,212,168,.55); }
.mx-followup:disabled { opacity: .5; cursor: default; }
.mx-disclaimer { font-size: 12px; color: var(--mx-muted); margin: .4rem 0 0; }

/* ════════════ STAT STRIP ════════════ */
.mx-stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
  background: var(--mx-line); border: 1px solid var(--mx-line); border-radius: 14px; overflow: hidden;
}
.mx-stat { background: var(--mx-card); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.mx-stat-n { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; }
.mx-stat-l { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--mx-muted); }
.mx-stat--meta .mx-stat-n { font-size: 13px; }

/* ════════════ PANEL GRID ════════════ */
.mx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mx-panel {
  border: 1px solid var(--mx-line); border-radius: 16px; background: var(--mx-card);
  padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; min-height: 220px;
}
.mx-panel-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.mx-panel-h h2 { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.mx-panel-more { font-size: 12px; font-weight: 700; color: var(--mx-mint); white-space: nowrap; }
.mx-panel-more:hover { text-decoration: underline; }
.mx-panel-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .55rem; }
.mx-panel-err { color: var(--mx-muted); font-size: 12.5px; padding: .5rem 0; }
.mx-skel { height: 16px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: mx-shimmer 1.3s linear infinite; }
.mx-skel:nth-child(2) { width: 80%; } .mx-skel:nth-child(3) { width: 60%; }
@keyframes mx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* macro rows */
.mx-macro-group + .mx-macro-group { margin-top: .7rem; }
.mx-macro-gt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mx-muted); font-weight: 700; margin-bottom: .35rem; }
.mx-macro-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .2rem 0; font-size: 13px; }
.mx-macro-label { color: #cbd5e1; }
.mx-macro-rv { display: flex; align-items: baseline; gap: .5rem; }
.mx-macro-val { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.mx-macro-delta { font-size: 12px; font-variant-numeric: tabular-nums; }

/* internals gauge */
.mx-gauge { display: flex; align-items: center; gap: 1rem; }
.mx-gauge-svg { flex: 0 0 auto; width: 116px; height: 72px; }
.mx-gauge-score { font-size: 26px; font-weight: 900; }
.mx-gauge-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.mx-comps { margin-top: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.mx-comp { font-size: 12px; }
.mx-comp-top { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.mx-comp-top b { color: #fff; font-weight: 700; }
.mx-comp-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.mx-comp-fill { height: 100%; border-radius: 999px; }

/* sector rotation rows */
.mx-sec-row { display: grid; grid-template-columns: 78px 1fr 56px; align-items: center; gap: .55rem; font-size: 12.5px; padding: .12rem 0; }
.mx-sec-name { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-sec-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.05); }
.mx-sec-fill { position: absolute; top: 0; height: 100%; border-radius: 999px; }
.mx-sec-fill.pos { background: var(--mx-mint); left: 50%; } .mx-sec-fill.neg { background: var(--mx-coral); right: 50%; }
.mx-sec-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.18); }
.mx-sec-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.mx-bench-note { font-size: 12px; color: var(--mx-muted); margin-top: .55rem; }

/* ════════════ ROTATING VIZ ════════════ */
.mx-panel--viz { background: linear-gradient(180deg, rgba(0,212,168,.05), rgba(255,255,255,0)); }
.mx-viz-ctrl { display: flex; gap: .3rem; }
.mx-viz-btn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--mx-line); background: rgba(8,12,17,.6); color: #cbd5e1; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; }
.mx-viz-btn:hover { border-color: rgba(0,212,168,.5); color: var(--mx-mint); }
.mx-viz-cap { font-size: 12px; color: var(--mx-muted); margin: -.4rem 0 .55rem; min-height: 14px; }
.mx-viz-stage { flex: 1 1 auto; display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.mx-viz-dots { display: flex; gap: .35rem; justify-content: center; margin-top: .7rem; }
.mx-viz-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.18); border: none; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.mx-viz-dot.is-on { background: var(--mx-mint); transform: scale(1.25); }

/* generic bar rows (viz) */
.mx-bar-row { display: grid; grid-template-columns: 64px 1fr 58px; align-items: center; gap: .5rem; font-size: 12px; }
.mx-bar-label { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mx-bar-track { height: 14px; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.mx-bar-fill { height: 100%; border-radius: 6px; }
.mx-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.mx-stack { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.05); }

/* ════════════ SECTIONS ════════════ */
.mx-section { border: 1px solid var(--mx-line); border-radius: 18px; background: var(--mx-card); padding: 1.3rem 1.4rem; }
.mx-section-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.mx-section-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--mx-mint); margin-bottom: .35rem; }
/* ESPN-style section headers: bold uppercase title behind a left accent bar. */
.mx-section-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; color: #fff; letter-spacing: .01em; text-transform: uppercase; position: relative; padding-left: .8rem; }
.mx-section-title::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .1em; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--mx-mint), rgba(0,212,168,.2)); }
.mx-section-sub { font-size: 13px; color: var(--mx-muted); margin-top: .4rem; max-width: 640px; line-height: 1.5; }
.mx-inline-link { color: var(--mx-mint); font-weight: 700; }
.mx-inline-link:hover { text-decoration: underline; }
.mx-empty { padding: 2.5rem 1rem; text-align: center; color: var(--mx-muted); border: 1px dashed var(--mx-line); border-radius: 12px; }

/* ════════════ WORLD MAP ════════════ */
.mx-map-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.mx-mi { padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--mx-line); background: rgba(8,12,17,.5); color: #cbd5e1; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.mx-mi:hover { border-color: rgba(0,212,168,.4); color: #fff; }
.mx-mi.is-on { border-color: rgba(0,212,168,.6); background: rgba(0,212,168,.14); color: var(--mx-mint); }
.mx-map-wrap { display: grid; grid-template-columns: 1fr 260px; gap: 1.1rem; }
.mx-map-stage { position: relative; border: 1px solid var(--mx-line); border-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, rgba(0,212,168,.05), transparent 60%), #0a0e13; overflow: hidden; min-height: 320px; }
.mx-map-canvas { width: 100%; }
.mx-map-canvas svg { width: 100%; height: auto; display: block; }
.mx-map-loading { padding: 4rem 1rem; text-align: center; color: var(--mx-muted); font-size: 13px; }
.mx-country { stroke: #0a0e13; stroke-width: .15; transition: fill .2s, opacity .2s; cursor: default; }
.mx-country.is-data { cursor: pointer; }
.mx-country.is-dim { opacity: .18; }
.mx-country.is-hot { stroke: #fff; stroke-width: .5; }
.mx-map-tip { position: absolute; pointer-events: none; z-index: 5; background: rgba(8,12,17,.96); border: 1px solid rgba(0,212,168,.4); border-radius: 10px; padding: .5rem .65rem; font-size: 12px; color: #fff; box-shadow: 0 10px 30px -12px #000; max-width: 200px; }
.mx-map-tip b { color: var(--mx-mint); }
.mx-map-tip .mx-tip-val { font-size: 16px; font-weight: 800; }
.mx-map-tip .mx-tip-sub { color: var(--mx-muted); font-size: 12px; }
.mx-map-legend { position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 4; background: rgba(8,12,17,.7); border: 1px solid var(--mx-line); border-radius: 10px; padding: .5rem .65rem; }
.mx-legend-bar { height: 9px; border-radius: 999px; margin-bottom: .3rem; }
.mx-legend-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--mx-muted); }
.mx-map-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.mx-map-regions { display: flex; flex-wrap: wrap; gap: .3rem; }
.mx-rg { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--mx-line); background: rgba(8,12,17,.5); color: #cbd5e1; font-size: 12px; cursor: pointer; transition: all .15s; }
.mx-rg:hover { border-color: rgba(0,212,168,.4); }
.mx-rg.is-on { border-color: rgba(0,212,168,.6); background: rgba(0,212,168,.14); color: var(--mx-mint); }
.mx-map-rank { display: flex; flex-direction: column; gap: .2rem; }
.mx-rank-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mx-muted); font-weight: 700; margin: .3rem 0 .15rem; }
.mx-rank-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 12px; padding: .2rem .4rem; border-radius: 7px; cursor: pointer; transition: background .12s; }
.mx-rank-row:hover { background: rgba(0,212,168,.08); }
.mx-rank-name { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-rank-val { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }

/* ════════════ DATA EXPLORER ════════════ */
.mx-xp-tools { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.mx-xp-search, .mx-xp-sel { background: rgba(8,12,17,.6); border: 1px solid var(--mx-line); border-radius: 10px; padding: .45rem .7rem; color: #fff; font-size: 12.5px; outline: none; transition: border-color .15s; }
.mx-xp-search { min-width: 180px; }
.mx-xp-search:focus, .mx-xp-sel:focus { border-color: rgba(0,212,168,.5); }
.mx-xp-csv { padding: .45rem .8rem; border-radius: 10px; border: 1px solid rgba(0,212,168,.4); background: rgba(0,212,168,.14); color: var(--mx-mint); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
.mx-xp-csv:hover { background: rgba(0,212,168,.26); }
.mx-xp-tablewrap { max-height: 520px; overflow: auto; border: 1px solid var(--mx-line); border-radius: 12px; }
.mx-xp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mx-xp-table thead th { position: sticky; top: 0; z-index: 1; background: #0d141b; text-align: left; padding: .55rem .7rem; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mx-muted); font-weight: 700; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--mx-line); user-select: none; }
.mx-xp-table thead th.num { text-align: right; }
.mx-xp-table thead th:hover { color: #fff; }
.mx-xp-table thead th.sorted-asc::after { content: " ▲"; color: var(--mx-mint); }
.mx-xp-table thead th.sorted-desc::after { content: " ▼"; color: var(--mx-mint); }
.mx-xp-table tbody td { padding: .45rem .7rem; border-bottom: 1px solid rgba(255,255,255,.04); color: #d5dde5; white-space: nowrap; }
.mx-xp-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mx-xp-table tbody tr:hover td { background: rgba(0,212,168,.05); }
.mx-xp-tk { font-weight: 800; color: #fff; }
.mx-xp-name { color: var(--mx-muted); font-weight: 400; margin-left: .4rem; font-size: 12px; }
.mx-grade-badge { display: inline-block; min-width: 22px; text-align: center; padding: .05rem .35rem; border-radius: 6px; font-weight: 800; font-size: 12px; }
.mx-g-a { background: rgba(0,212,168,.16); color: var(--mx-mint); } .mx-g-b { background: rgba(245,166,35,.16); color: var(--mx-amber); } .mx-g-c { background: rgba(66,165,245,.16); color: var(--mx-blue); } .mx-g-x { color: var(--mx-muted); }
.mx-xp-empty { padding: 2rem; text-align: center; color: var(--mx-muted); }
.mx-xp-foot { font-size: 12px; color: var(--mx-muted); margin-top: .6rem; }

/* ════════════ DOSSIERS ════════════ */
.mx-dossier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.mx-dossier-card { display: block; border: 1px solid var(--mx-line); border-radius: 14px; padding: 1.1rem; background: rgba(8,12,17,.4); transition: border-color .15s, transform .15s; }
.mx-dossier-card:hover { border-color: rgba(0,212,168,.45); transform: translateY(-2px); }
.mx-dc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.mx-dc-top h3 { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.2; }
.mx-dossier-card:hover .mx-dc-top h3 { color: var(--mx-mint); }
.mx-dc-top .num { font-size: 13px; font-weight: 700; flex-shrink: 0; }
.mx-dc-meta { font-size: 12px; color: var(--mx-muted); margin-top: .25rem; }
.mx-dc-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.3); margin-top: .9rem; }
.mx-dc-up { background: var(--mx-mint); } .mx-dc-dn { background: var(--mx-coral); }
.mx-dc-bl { display: flex; justify-content: space-between; font-size: 12px; margin-top: .3rem; }
.mx-dc-lead { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-wrap: wrap; gap: .35rem; }
.mx-dc-pill { font-size: 12px; padding: .15rem .45rem; border-radius: 7px; border: 1px solid var(--mx-line); color: #fff; }
.mx-dc-go { display: inline-block; margin-top: .9rem; font-size: 12px; font-weight: 700; color: var(--mx-mint); }
.mx-dossier-card:hover .mx-dc-go { text-decoration: underline; }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 880px) {
  .mx-grid { grid-template-columns: 1fr; }
  .mx-map-wrap { grid-template-columns: 1fr; }
  .mx-map-side { flex-direction: row; flex-wrap: wrap; }
  .mx-map-rank { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .mx-desk { padding: 1.2rem 1.1rem 1rem; }
  .mx-section { padding: 1.1rem 1rem; }
  .mx-recents-list { grid-template-columns: 1fr; }
}

/* ── Task #1219 mobile pass: when a folded section is closed on a phone,
   hide its heavy toolbars so the collapsed header is just the title row. */
@media (max-width: 767px) {
  .mx-section details.m-fold:not([open]) .mx-map-picker,
  .mx-section details.m-fold:not([open]) .mx-xp-tools { display: none; }
}