/* Matrix design system components, ported verbatim from the 0.36.0 prototype
   baseline. Every class is .mx-* prefixed, so these never collide with the
   legacy .card / .btn / .sect rules still used by un-migrated views. */

/* --- VLC-style token alignment layer (Founder 2026-08-20) -------------------
   Matrix's dark product surface adopts VLCode's design language (the GitHub-
   dark family VLC ships in VLCode-2.0 public/index.html): #0d1117 canvas /
   #161b22 panels / #21262d raised surfaces / #30363d lines, accent #58a6ff,
   state colors green #3fb950 · yellow #d29922 · red #f85149, the system font
   stack, and tighter 6/12px radii. Declared here — same .mx-next scope as
   tokens.css but later in the cascade — so tokens.css stays the prototype
   record and this layer is the product skin. Values only: no selector,
   spacing or layout changes. */
.mx-next {
  --mx-bg: #0d1117;
  --mx-bg-soft: #0a0f14;
  --mx-panel: #161b22;
  --mx-panel-2: #21262d;
  --mx-panel-3: #2d333b;
  --mx-ink: #e6edf3;
  --mx-dim: #8b949e;
  --mx-faint: #6e7681;
  --mx-line: #30363d;
  --mx-line-strong: #3d444d;
  --mx-iris: #58a6ff;
  --mx-iris-soft: #79c0ff;
  --mx-gold: #d29922;
  --mx-ok: #3fb950;
  --mx-warn: #d29922;
  --mx-danger: #f85149;
  --mx-cyan: #5ccfe6;
  --mx-radius: 12px;
  --mx-radius-sm: 6px;
  --mx-shadow: 0 6px 20px -10px rgba(0, 0, 0, .55);
  --mx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mx-mono: "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
}
/* Page canvas: VLC paints a flat dark canvas. Keep only a whisper of the old
   radial glow, re-hued to the VLC accent so it stays one family. Same
   selector + !important as the tokens.css rule it overrides — cascade order
   decides, for exactly the reason documented there. */
html[data-theme] .mx-next.mx-next {
  background:
    radial-gradient(circle at 12% -8%, rgba(88, 166, 255, .06), transparent 32%),
    var(--mx-bg) !important;
}
/* First-paint / boot backgrounds must match the new canvas or every load
   flashes indigo before settling on GitHub-dark. Mirrors the tokens.css
   selectors exactly; later cascade position wins at equal specificity. */
html.mx-next-active { background: #0d1117 !important; }
body.mx-next-active { background: #0d1117 !important; }
html.mx-next-boot { background: #0d1117 !important; }
html.mx-next-boot body { background: #0d1117 !important; }
html.mx-next-boot .page[id^="view-"] { background: #0d1117 !important; }

/* matrix-light-glass.css sets element-level colours for the light theme and
   wins on specificity over the inherited .mx-next colour, which would leave
   dark text on the dark surface. Re-assert them inside redesigned views only. */
.mx-next h1, .mx-next h2, .mx-next h3, .mx-next h4, .mx-next strong, .mx-next b { color: var(--mx-ink); }
.mx-next p, .mx-next span, .mx-next small, .mx-next li, .mx-next td, .mx-next th { color: inherit; }
.mx-next table { color: var(--mx-dim); }

.mx-topbar {
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(48, 54, 61, .9);
  background: rgba(13, 17, 23, .92);
  backdrop-filter: blur(20px) saturate(1.25);
}
.mx-brand { display:flex; align-items:center; gap:10px; min-width:168px; font-weight:750; letter-spacing:-.02em; }
.mx-brand__mark {
  width:29px; height:29px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--mx-iris), #316dca);
  box-shadow:0 8px 24px -10px rgba(88,166,255,.55);
  font-size:13px;
}
.mx-brand small { display:block; color:var(--mx-faint); font-size:9px; letter-spacing:.12em; font-weight:650; }
/* Live control-plane version. Visible on every redesigned view so a stale cached
   bundle is diagnosable on sight, the way the legacy "World vX.Y.Z" heading was. */
.mx-version {
  color:var(--mx-faint); font-size:10px; font-weight:650; letter-spacing:.04em;
  padding:2px 7px; border:1px solid var(--mx-line); border-radius:999px; white-space:nowrap;
}
.mx-nav { display:flex; align-items:stretch; height:100%; gap:4px; }
.mx-nav a, .mx-nav button {
  min-width:76px; display:grid; place-items:center; padding:0 13px; color:var(--mx-dim);
  border:0; border-bottom:2px solid transparent; background:transparent;
  font-weight:620; cursor:pointer; transition:.15s ease;
}
.mx-nav a:hover, .mx-nav button:hover { color:var(--mx-ink); background:rgba(88,166,255,.08); }
.mx-nav a.active, .mx-nav button.active { color:var(--mx-ink); border-color:var(--mx-iris); }
.mx-topbar__spacer { flex:1; }
.mx-context { color:var(--mx-faint); font-size:11px; max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-icon-btn, .mx-account-btn {
  border:1px solid var(--mx-line); background:var(--mx-panel); cursor:pointer;
  transition:border-color .14s, background .14s, transform .14s;
}
.mx-icon-btn:hover, .mx-account-btn:hover { border-color:var(--mx-line-strong); background:var(--mx-panel-2); }
.mx-icon-btn { position:relative; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--mx-dim); }
.mx-icon-btn b { position:absolute; right:-3px; top:-4px; min-width:17px; height:17px; border-radius:9px; padding:0 4px; background:var(--mx-danger); font:700 9px/17px var(--mx-sans); color:white; }
.mx-account-btn { height:38px; border-radius:19px; padding:3px 10px 3px 4px; display:flex; align-items:center; gap:8px; text-align:left; }
.mx-avatar { width:29px; height:29px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg,#f1bd73,#b6745c); color:#20150f; font-weight:800; }
.mx-account-btn strong { display:block; font-size:11.5px; line-height:1.2; }
.mx-account-btn small { display:block; color:var(--mx-faint); font-size:9.5px; line-height:1.3; }

.mx-page { max-width:1540px; margin:0 auto; padding:26px 24px 70px; }
.mx-page--narrow { max-width:1260px; }
.mx-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.mx-eyebrow { color:var(--mx-gold); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:750; }
.mx-page-head h1 { font-size:27px; line-height:1.15; letter-spacing:-.035em; margin:4px 0 0; }
.mx-page-head p { margin:7px 0 0; color:var(--mx-dim); font-size:12px; }
.mx-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.mx-btn {
  border:1px solid var(--mx-line-strong); background:var(--mx-panel-2); color:var(--mx-ink);
  border-radius:var(--mx-radius-sm); padding:8px 13px; cursor:pointer; font-weight:630;
  transition:transform .12s, border-color .12s, background .12s;
}
.mx-btn:hover { border-color:var(--mx-iris); transform:translateY(-1px); }
.mx-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.mx-btn--primary { background:linear-gradient(180deg,#58a6ff,#3f8ae8); border-color:#58a6ff; color:white; }
.mx-btn--ghost { background:transparent; border-color:var(--mx-line); color:var(--mx-dim); }
.mx-btn--danger { color:#ffd7d5; border-color:rgba(248,81,73,.45); background:rgba(248,81,73,.1); }
.mx-btn--small { padding:5px 9px; font-size:11px; }
.mx-btn--wide { width:100%; justify-content:center; }

.mx-panel {
  background:linear-gradient(180deg, rgba(22,27,34,.97), rgba(16,20,26,.97));
  border:1px solid var(--mx-line); border-radius:var(--mx-radius); box-shadow:var(--mx-shadow);
}
.mx-panel__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 15px; border-bottom:1px solid rgba(48,54,61,.8); }
.mx-panel__head h2 { font-size:13px; margin:0; letter-spacing:-.01em; }
.mx-panel__head p { color:var(--mx-faint); font-size:10.5px; margin:2px 0 0; }
.mx-panel__body { padding:14px 15px; }
.mx-card { background:var(--mx-panel-2); border:1px solid var(--mx-line); border-radius:11px; padding:12px; }
.mx-card:hover { border-color:var(--mx-line-strong); }
.mx-subtle { color:var(--mx-dim); }
.mx-faint { color:var(--mx-faint); }
.mx-mono { font-family:var(--mx-mono); }
.mx-divider { height:1px; background:var(--mx-line); margin:12px 0; }
.mx-stack { display:flex; flex-direction:column; gap:10px; }
.mx-row { display:flex; align-items:center; gap:10px; }
.mx-row--between { justify-content:space-between; }
.mx-grow { flex:1; min-width:0; }

.mx-stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.mx-stat { padding:13px 14px; background:rgba(33,38,45,.6); border:1px solid var(--mx-line); border-radius:11px; }
.mx-stat span { display:block; color:var(--mx-faint); font-size:10.5px; }
.mx-stat strong { display:block; font-size:23px; line-height:1.05; margin-top:5px; letter-spacing:-.04em; }
.mx-stat small { display:block; color:var(--mx-dim); font-size:10px; margin-top:5px; }
.mx-tag { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--mx-line-strong); border-radius:999px; padding:2px 7px; color:var(--mx-dim); font-size:10px; white-space:nowrap; }
.mx-tag--ok { border-color:rgba(63,185,80,.42); color:var(--mx-ok); background:rgba(63,185,80,.08); }
.mx-tag--warn { border-color:rgba(210,153,34,.45); color:var(--mx-warn); background:rgba(210,153,34,.08); }
.mx-tag--danger { border-color:rgba(248,81,73,.45); color:var(--mx-danger); background:rgba(248,81,73,.08); }
.mx-tag--iris { border-color:rgba(88,166,255,.45); color:var(--mx-iris-soft); background:rgba(88,166,255,.1); }
.mx-tag--gold { border-color:rgba(210,153,34,.4); background:rgba(210,153,34,.1); color:var(--mx-gold); }
.mx-dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

.mx-tabs { display:flex; gap:5px; flex-wrap:wrap; }
.mx-tab { border:1px solid var(--mx-line); background:transparent; color:var(--mx-dim); border-radius:999px; padding:5px 10px; cursor:pointer; font-size:11px; }
.mx-tab:hover { border-color:var(--mx-line-strong); color:var(--mx-ink); }
.mx-tab.active { border-color:var(--mx-iris); background:rgba(88,166,255,.12); color:var(--mx-ink); }
.mx-segment { display:inline-flex; padding:3px; border:1px solid var(--mx-line); border-radius:10px; background:var(--mx-bg-soft); }
.mx-segment button { border:0; background:transparent; color:var(--mx-dim); border-radius:7px; padding:6px 10px; cursor:pointer; font-size:11px; }
.mx-segment button.active { background:var(--mx-panel-3); color:var(--mx-ink); box-shadow:0 3px 10px -5px #000; }

.mx-locale-switch { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--mx-line); border-radius:8px; background:rgba(13,17,23,.72); white-space:nowrap; }
.mx-locale-switch button { min-width:28px; height:24px; padding:0 6px; border:0; border-radius:6px; background:transparent; color:var(--mx-faint); font:700 9px/1 var(--mx-mono); cursor:pointer; }
.mx-locale-switch button:hover { color:var(--mx-ink); background:var(--mx-panel-2); }
.mx-locale-switch button[aria-pressed="true"] { color:var(--mx-ink); background:var(--mx-panel-3); box-shadow:0 2px 8px -5px #000; }
.mx-locale-switch--floating { position:fixed; z-index:190; right:18px; top:14px; box-shadow:var(--mx-shadow); }

.mx-input, .mx-select, .mx-textarea {
  width:100%; border:1px solid var(--mx-line-strong); border-radius:8px; background:var(--mx-bg-soft);
  color:var(--mx-ink); padding:8px 9px; outline:none;
}
.mx-input:focus, .mx-select:focus, .mx-textarea:focus { border-color:var(--mx-iris); box-shadow:0 0 0 3px rgba(88,166,255,.13); }
.mx-field > span { display:block; color:var(--mx-faint); font-size:10px; margin:0 0 4px 2px; }
.mx-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mx-help, .mx-hint { color:var(--mx-dim); font-size:9.5px; margin:4px 0 0; line-height:1.55; }
.mx-callout { padding:10px; border:1px solid var(--mx-line); border-radius:9px; background:var(--mx-bg-soft); }
.mx-callout p { color:var(--mx-dim); font-size:9.5px; margin:4px 0 0; line-height:1.55; }
.mx-choice { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px; border:1px solid var(--mx-line); border-radius:9px; background:var(--mx-panel-2); color:var(--mx-text, var(--mx-ink)); text-align:left; cursor:pointer; }
.mx-choice:hover, .mx-choice:focus-visible { border-color:var(--mx-iris); outline:none; }
.mx-choice strong { font-size:11px; }
.mx-choice span { color:var(--mx-dim); font-size:9.5px; }

.mx-menu {
  /* Overlay mounts on document.body, outside .mx-next, so theme tokens do not
     resolve here. Colors are literal (VLC GitHub-dark family): a white-ink-on-
     dark card must stay readable on the signed-out Pool page. */
  --mx-ink: #e6edf3;
  --mx-dim: #c9d1d9;
  --mx-faint: #8b949e;
  --mx-line: #30363d;
  --mx-line-strong: #3d444d;
  --mx-panel-2: #21262d;
  --mx-iris: #58a6ff;
  position:fixed; right:22px; top:58px; width:min(320px, calc(100vw - 24px)); z-index:120; padding:10px;
  border:1px solid #3d444d; border-radius:13px; background:#161b22;
  color:#e6edf3;
  box-shadow:0 26px 90px -35px #000, 0 0 0 1px rgba(88,166,255,.14);
  backdrop-filter:blur(20px);
}
.mx-menu__profile { display:flex; align-items:center; gap:10px; padding:9px; color:#e6edf3; }
.mx-menu__profile .mx-avatar { width:38px; height:38px; }
.mx-menu__profile strong { display:block; color:#e6edf3; font-size:14px; }
.mx-menu__profile small { color:#c9d1d9; font-size:11px; line-height:1.4; }
.mx-menu__section { border-top:1px solid #30363d; padding-top:8px; margin-top:6px; }
.mx-menu__label { padding:5px 9px; color:#8b949e; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.mx-menu button, .mx-menu a { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:transparent; color:#e6edf3; border-radius:8px; padding:10px 11px; min-height:40px; cursor:pointer; text-align:left; font:inherit; }
.mx-menu button:hover, .mx-menu a:hover { background:#21262d; color:#fff; }
.mx-menu .active-membership { background:rgba(88,166,255,.15); color:#e6edf3; }
.mx-menu__signin { background:#58a6ff !important; color:#0d1117 !important; font-weight:750; justify-content:center; }

.mx-scrim { position:fixed; inset:0; z-index:100; background:rgba(1,4,9,.6); backdrop-filter:blur(3px); animation:mx-fade .15s ease; }
.mx-modal {
  /* Overlay is mounted on document.body, so .mx-next tokens do not apply.
     Keep a readable VLC GitHub-dark card with explicit ink. */
  --mx-ink: #e6edf3;
  --mx-dim: #c9d1d9;
  --mx-faint: #8b949e;
  --mx-line: #30363d;
  --mx-line-strong: #3d444d;
  --mx-panel: #161b22;
  --mx-panel-2: #21262d;
  --mx-bg-soft: #0d1117;
  position:fixed; z-index:110; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto;
  background:#161b22; color:#e6edf3; border:1px solid #3d444d; border-radius:16px;
  box-shadow:0 30px 100px -35px #000, 0 0 0 1px rgba(88,166,255,.13); animation:mx-pop .16s ease;
}
.mx-modal h3, .mx-modal label, .mx-modal strong { color:#e6edf3; }
.mx-modal p, .mx-modal .mx-help, .mx-modal .mx-hint, .mx-modal .mx-callout { color:#c9d1d9; }
.ws-picker { display:grid; gap:10px; }
.ws-browser { display:grid; gap:8px; }
.ws-crumbs { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; font-size:12px; color:#c9d1d9; }
.ws-crumb { border:0; background:transparent; color:#cfe2ff; padding:0; font:inherit; cursor:pointer; }
.ws-crumb:hover { color:#fff; text-decoration:underline; }
.ws-crumb-sep { opacity:.45; }
.ws-folder-list { display:grid; gap:4px; max-height:min(360px,46vh); overflow:auto; }
.ws-folder { display:grid; grid-template-columns:20px 1fr; gap:8px; align-items:center; width:100%; text-align:left; border:1px solid #30363d; border-radius:10px; background:#21262d; color:#e6edf3; padding:9px 12px; font:inherit; cursor:pointer; }
.ws-folder:hover, .ws-folder.is-selected { border-color:#58a6ff; background:#2d333b; }
.ws-folder i { font-style:normal; }
.ws-current { margin:0; color:#8b949e; font:11px/1.4 var(--mx-mono, ui-monospace, monospace); word-break:break-all; }
.ws-picker__search { width:100%; min-height:40px; border:1px solid #3d444d; border-radius:10px; padding:10px 12px; background:#0d1117; color:#e6edf3; font:inherit; }
.ws-picker__list { display:grid; gap:6px; max-height:min(360px, 46vh); overflow:auto; padding-right:2px; }
.ws-picker__item { width:100%; display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:10px 12px; border:1px solid #30363d; border-radius:10px; background:#21262d; color:#e6edf3; text-align:left; font:inherit; cursor:pointer; }
.ws-picker__item:hover, .ws-picker__item.is-selected { border-color:#58a6ff; background:#2d333b; }
.ws-picker__item strong { display:block; font-size:13px; }
.ws-picker__item small { color:#8b949e; font:11px/1.4 var(--mx-mono, ui-monospace, monospace); word-break:break-all; }
.ws-picker__src { padding:3px 7px; border-radius:999px; background:#21262d; color:#79c0ff; font-size:10px; font-weight:700; text-transform:uppercase; }
.ws-picker__empty { margin:0; padding:16px; border:1px dashed #30363d; border-radius:10px; color:#c9d1d9; font-size:12px; line-height:1.5; }
.mx-modal--wide { width:min(820px, calc(100vw - 32px)); }
.mx-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:17px 18px; border-bottom:1px solid var(--mx-line); }
.mx-modal__head h3 { font-size:16px; margin:0; }
.mx-modal__head p { margin:4px 0 0; color:var(--mx-dim); font-size:11px; }
.mx-modal__body { padding:18px; }
.mx-modal__foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid #3a467c; }
html[data-theme] .mx-modal .mx-btn,
html[data-theme] .mx-modal .mx-btn--ghost,
html[data-theme] .mx-modal button[type="submit"],
html[data-theme] .mx-modal button[data-overlay-close]:not(.mx-close),
.mx-modal .mx-btn,
.mx-modal .mx-btn--ghost,
.mx-modal button[type="submit"],
.mx-modal button[data-overlay-close]:not(.mx-close) {
  min-height:40px;
  min-width:88px;
  padding:0 16px;
  border:1px solid #3d444d !important;
  border-radius:10px;
  background:#21262d !important;
  color:#e6edf3 !important;
  font:700 13px/1 inherit;
  cursor:pointer;
}
html[data-theme] .mx-modal .mx-btn--primary,
html[data-theme] .mx-modal .mx-btn--wide,
.mx-modal .mx-btn--primary,
.mx-modal .mx-btn--wide {
  background:#58a6ff !important;
  border-color:#79c0ff !important;
  color:#0d1117 !important;
}
.mx-modal .mx-btn--wide { width:100%; justify-content:center; }
.mx-close { border:0; background:transparent; color:#c6cce8; font-size:20px; line-height:1; cursor:pointer; padding:3px 6px; border-radius:6px; }
.mx-close:hover { color:var(--mx-ink); background:var(--mx-panel-2); }

.mx-drawer {
  position:fixed; z-index:110; right:0; top:0; bottom:0; width:min(420px,100vw);
  background:var(--mx-panel); border-left:1px solid var(--mx-line-strong); box-shadow:-25px 0 80px -40px #000;
  display:flex; flex-direction:column; animation:mx-slide .18s ease;
}
.mx-drawer__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px; border-bottom:1px solid var(--mx-line); }
.mx-drawer__head h3 { font-size:16px; margin:0; }
.mx-drawer__body { padding:14px; overflow:auto; flex:1; }
.mx-drawer__foot { padding:14px; border-top:1px solid var(--mx-line); }
.mx-notice { display:flex; gap:10px; padding:12px; border-bottom:1px solid var(--mx-line); }
.mx-notice:last-child { border-bottom:0; }
.mx-notice__dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--mx-iris); }
.mx-notice strong { display:block; font-size:11.5px; }
.mx-notice p { margin:3px 0; color:var(--mx-dim); font-size:10.5px; }
.mx-notice time { color:var(--mx-faint); font-size:9.5px; }
.mx-assistant-fab {
  position:fixed; z-index:75; right:24px; bottom:22px; width:48px; height:48px; border-radius:16px;
  border:1px solid rgba(88,166,255,.55); background:linear-gradient(155deg,#1d2733,#111822);
  box-shadow:0 16px 45px -20px rgba(88,166,255,.6); cursor:pointer; font-size:17px; font-weight:800;
}
.mx-chat-bubble { max-width:88%; padding:10px 11px; border-radius:11px; background:var(--mx-panel-2); color:var(--mx-dim); font-size:11.5px; margin-bottom:9px; }
.mx-chat-bubble--me { margin-left:auto; background:rgba(88,166,255,.15); color:var(--mx-ink); }

.mx-toast {
  position:fixed; z-index:160; left:50%; bottom:28px; transform:translate(-50%,12px);
  background:var(--mx-panel-3); border:1px solid var(--mx-line-strong); border-radius:10px;
  padding:9px 13px; box-shadow:var(--mx-shadow); opacity:0; pointer-events:none; transition:.18s;
}
.mx-toast.show { opacity:1; transform:translate(-50%,0); }
.mx-empty { text-align:center; padding:26px 14px; color:var(--mx-faint); border:1px dashed var(--mx-line-strong); border-radius:11px; }
.mx-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; }

@keyframes mx-fade { from { opacity:0; } to { opacity:1; } }
@keyframes mx-pop { from { opacity:0; transform:translate(-50%,-48%) scale(.985); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes mx-slide { from { transform:translateX(18px); opacity:0; } to { transform:none; opacity:1; } }

@media (max-width:900px) {
  .mx-topbar { padding:0 14px; gap:8px; }
  .mx-brand { min-width:auto; }
  .mx-brand__text { display:none; }
  .mx-nav { overflow-x:auto; }
  .mx-nav a, .mx-nav button { min-width:64px; padding:0 9px; }
  .mx-context { display:none; }
  .mx-page { padding:20px 14px 58px; }
  .mx-page-head { align-items:flex-start; flex-direction:column; }
  .mx-actions { justify-content:flex-start; }
  .mx-stat-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .mx-account-btn strong, .mx-account-btn small { display:none; }
  .mx-account-btn { padding-right:4px; }
  .mx-field-grid { grid-template-columns:1fr; }
  .mx-stat-grid { grid-template-columns:1fr 1fr; }
}
/* --- legacy-theme override layer -------------------------------------------
   index.html declares `html[data-theme="light"] input, select, textarea, button,
   .mini, .btn { color: var(--ink); border-color: var(--line) }` at specificity
   (0,2,1), which outranks the plain .mx-* component classes above and leaves
   dark text on the dark surface. These rules restate the same declarations at
   (0,2,2) so the design system wins. Scoped to .mx-next, so no legacy view is
   touched. Delete this block once .page is off the light theme. */
html[data-theme] .mx-next .mx-btn { color: var(--mx-ink); border-color: var(--mx-line-strong); }
html[data-theme] .mx-next .mx-btn--primary { color: #fff; border-color: #58a6ff; }
html[data-theme] .mx-next .mx-btn--ghost { color: var(--mx-dim); border-color: var(--mx-line); }
html[data-theme] .mx-next .mx-btn--danger { color: #ffd7d5; border-color: rgba(248,81,73,.45); }
html[data-theme] .mx-next .mx-input,
html[data-theme] .mx-next .mx-select,
html[data-theme] .mx-next .mx-textarea {
  color: var(--mx-ink);
  background: var(--mx-bg-soft);
  border-color: var(--mx-line-strong);
}
html[data-theme] .mx-next .mx-icon-btn,
html[data-theme] .mx-next .mx-account-btn { color: var(--mx-dim); border-color: var(--mx-line); }
html[data-theme] .mx-next .mx-tab { color: var(--mx-dim); border-color: var(--mx-line); }
html[data-theme] .mx-next .mx-tab.active { color: var(--mx-ink); border-color: var(--mx-iris); }
html[data-theme] .mx-next .mx-tag { color: var(--mx-dim); border-color: var(--mx-line-strong); }
html[data-theme] .mx-next .mx-close { color: var(--mx-faint); border-color: transparent; }
html[data-theme] .mx-next .mx-locale-switch button { color: var(--mx-faint); border-color: transparent; }
html[data-theme] .mx-next .mx-locale-switch button[aria-pressed="true"] { color: var(--mx-ink); }
html[data-theme] .mx-next .mx-menu button,
html[data-theme] .mx-next .mx-menu a { color: var(--mx-dim); border-color: transparent; }
html[data-theme] .mx-next .mx-nav button { color: var(--mx-dim); border-color: transparent; }
html[data-theme] .mx-next .mx-nav button.active { color: var(--mx-ink); border-bottom-color: var(--mx-iris); }

@media (prefers-reduced-motion:reduce) {
  .mx-next *, .mx-next *:before, .mx-next *:after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}