:root {
    --ui-ground: #f4f4f1;
    --ui-surface: #ffffff;
    --ui-surface-2: #f9f9f7;
    --ui-ink: #171717;
    --ui-ink-2: #3a3a37;
    --ui-mute: #6b6b66;
    --ui-mute-2: #9a9a94;
    --ui-line: #e4e3de;
    --ui-line-2: #eeede9;
    --ui-accent: #2f5fd0;
    --ui-accent-soft: #e7edfb;
    --ui-cta: #2f5fd0;
    --ui-cta-ink: #ffffff;
    --ui-good: #1f9d55;
    --ui-good-soft: #e5f5ec;
    --ui-bad: #d13b3b;
    --ui-bad-soft: #fbe9e9;
    --ui-warn: #c98a12;
    --ui-warn-soft: #fbf1dc;
    --viz-1: #3b6fd6;
    --viz-2: #e5a256;
    --viz-3: #4aa48a;
    --viz-4: #8b6fe0;
    --viz-grid: #e6e5e0;
    --ui-shadow: 0 1px 2px rgba(23, 23, 23, .06), 0 4px 14px rgba(23, 23, 23, .05);
    --ui-shadow-lift: 0 1px 2px rgba(23, 23, 23, .08), 0 10px 30px rgba(23, 23, 23, .10);
    --ui-good-tint: rgba(31, 157, 85, 0.12);

    --bg:        var(--ui-ground);
    --panel:     var(--ui-surface);
    --panel-2:   var(--ui-surface-2);
    --border:    var(--ui-line);
    --text:      var(--ui-ink);
    --muted:     var(--ui-mute);
    --accent:    var(--ui-accent);
    --accent-2:  var(--ui-accent);
    --good:      var(--ui-good);
    --warn:      var(--ui-warn);
    --bad:       var(--ui-bad);
    --mt-ink:    var(--ui-ink);
    --mt-ink-soft: var(--ui-ink-2);
    --mt-bone:   var(--ui-surface);
    --mt-mute:   var(--ui-mute);
    --mt-accent: var(--ui-accent);
    --mt-warn:   var(--ui-bad);
    --mt-paper:  var(--ui-ground);
    --mt-paper-dim: var(--ui-line-2);
    --mt-paper-line: var(--ui-line);
    --mt-surface: var(--ui-surface);
    --mt-accent-soft: var(--ui-accent-soft);
    --mt-coral:  #d97757;
    --mt-mono:   'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --mt-sans:   'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-radius: 14px;
    --ui-radius-sm: 9px;
    --ui-sidebar: 264px;
    --ui-sidebar-collapsed: 68px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --ui-ground: #181817;
    --ui-surface: #212120;
    --ui-surface-2: #272726;
    --ui-ink: #ececea;
    --ui-ink-2: #cfcfca;
    --ui-mute: #9d9d96;
    --ui-mute-2: #6f6f69;
    --ui-line: #31312f;
    --ui-line-2: #2c2c2a;
    --ui-accent: #7a9ff0;
    --ui-accent-soft: #1f2a45;
    --ui-cta: #5b84e6;
    --ui-cta-ink: #ffffff;
    --ui-good: #4cc27d;
    --ui-good-soft: #17301f;
    --ui-bad: #ec6b6b;
    --ui-bad-soft: #3a1f1f;
    --ui-warn: #e0a72e;
    --ui-warn-soft: #3a2d10;
    --viz-1: #5b8be6;
    --viz-2: #e8ad68;
    --viz-3: #5fb89c;
    --viz-4: #a08ee8;
    --viz-grid: #313130;
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
    --ui-shadow-lift: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .5);
    --ui-good-tint: rgba(76, 194, 125, 0.16);
    }
  }
  :root[data-theme="dark"] {
    --ui-ground: #181817;
    --ui-surface: #212120;
    --ui-surface-2: #272726;
    --ui-ink: #ececea;
    --ui-ink-2: #cfcfca;
    --ui-mute: #9d9d96;
    --ui-mute-2: #6f6f69;
    --ui-line: #31312f;
    --ui-line-2: #2c2c2a;
    --ui-accent: #7a9ff0;
    --ui-accent-soft: #1f2a45;
    --ui-cta: #5b84e6;
    --ui-cta-ink: #ffffff;
    --ui-good: #4cc27d;
    --ui-good-soft: #17301f;
    --ui-bad: #ec6b6b;
    --ui-bad-soft: #3a1f1f;
    --ui-warn: #e0a72e;
    --ui-warn-soft: #3a2d10;
    --viz-1: #5b8be6;
    --viz-2: #e8ad68;
    --viz-3: #5fb89c;
    --viz-4: #a08ee8;
    --viz-grid: #313130;
    --ui-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
    --ui-shadow-lift: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .5);
    --ui-good-tint: rgba(76, 194, 125, 0.16);
  }

  * { box-sizing: border-box; }
  html { color-scheme: light dark; }
  body { margin: 0; background: var(--ui-ground); color: var(--ui-ink); font-family: var(--mt-sans);
    font-size: 14.5px; line-height: 1.5; letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  a { color: var(--ui-accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
  svg.i { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
  h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
  h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }
  h2 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.75rem; }
  h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
  p { margin: 0.5rem 0; }
  code { background: var(--ui-surface-2); border: 1px solid var(--ui-line-2); padding: 0.1rem 0.4rem;
    border-radius: 5px; font-size: 0.9em; font-family: var(--mt-mono); }
  pre { background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: 10px;
    padding: 1rem; overflow-x: auto; font-size: 0.85rem; font-family: var(--mt-mono); }

  /* Wordmark: the one brand element carried into the console. Never split
     "mytesla"; the slash carries the coral, the tail is muted. */
  .wordmark { font-family: var(--mt-mono); font-weight: 500; letter-spacing: -0.01em;
    line-height: 1; white-space: nowrap; font-size: 0.95rem; color: var(--ui-ink); }
  .wordmark .wm-slash { color: var(--mt-coral); }
  .wordmark .wm-tail { opacity: 0.42; font-weight: 400; }

  /* ---- Shell grid ---- */
  .shell { display: grid; grid-template-columns: var(--ui-sidebar) minmax(0, 1fr); min-height: 100vh; }
  html.side-collapsed .shell { grid-template-columns: var(--ui-sidebar-collapsed) minmax(0, 1fr); }

  /* ---- Sidebar ---- */
  .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
    background: var(--ui-ground); border-right: 1px solid var(--ui-line); overflow: hidden; }
  .side-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; }
  .ws { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border-radius: 10px; padding: 4px; color: inherit; }
  .ws:hover { background: var(--ui-line-2); text-decoration: none; }
  .avatar { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; display: grid; place-items: center;
    background: linear-gradient(135deg, #1f2a45, #3b6fd6); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0; }
  .avatar.admin { background: linear-gradient(135deg, #3a1f1f, #d97757); }
  .ws-text { min-width: 0; line-height: 1.2; }
  .ws-sub { display: block; font-size: 12px; color: var(--ui-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
  .side-btn { width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center;
    color: var(--ui-mute); background: transparent; cursor: pointer; }
  .side-btn:hover { background: var(--ui-line-2); color: var(--ui-ink); filter: none; }

  .side-search { margin: 2px 12px 8px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
    border-radius: 10px; background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-mute); font-size: 13.5px; }
  .side-search span { flex: 1; }
  .kbd { font-family: var(--mt-mono); font-size: 11px; padding: 1px 6px; border-radius: 5px;
    border: 1px solid var(--ui-line); color: var(--ui-mute); background: var(--ui-surface-2); }

  .nav { flex: 1; overflow-y: auto; padding: 2px 10px 10px; scrollbar-width: thin; display: flex; flex-direction: column; }
  .nav ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .nav-group { margin-top: 10px; }
  .nav-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--ui-mute); cursor: pointer; user-select: none; border-radius: 7px; }
  .nav-group > summary::-webkit-details-marker { display: none; }
  .nav-group > summary:hover { color: var(--ui-ink); }
  .nav-group > summary .nav-caret { margin-left: auto; transition: transform 0.15s; display: inline-flex; }
  .nav-group[open] > summary .nav-caret { transform: rotate(180deg); }
  .nav-group[open] > summary .nav-badge { display: none; }
  .nav-items { display: flex; flex-direction: column; gap: 2px; }
  .nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px;
    color: var(--ui-ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
  .nav a:hover { background: var(--ui-line-2); color: var(--ui-ink); text-decoration: none; }
  .nav a.active, .nav a[aria-current="page"] { background: var(--ui-surface); color: var(--ui-ink);
    box-shadow: var(--ui-shadow); font-weight: 600; }
  .nav a .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: 11.5px; font-weight: 600; background: var(--ui-accent); color: #fff; font-variant-numeric: tabular-nums;
    font-family: var(--mt-sans); line-height: 1; }
  .nav-badge:empty { display: none; }
  .nav-badge.soft { background: var(--ui-line-2); color: var(--ui-mute); }
  .nav-badge.alert { background: var(--ui-bad); }

  .side-foot { padding: 8px 10px 12px; border-top: 1px solid var(--ui-line); display: flex; flex-direction: column; gap: 2px; }
  .side-foot a, .side-foot button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; margin: 0;
    border: 0; border-radius: 10px; background: transparent; color: var(--ui-ink-2); font: inherit; font-size: 13.5px;
    font-weight: 500; white-space: nowrap; cursor: pointer; width: 100%; text-align: left; }
  .side-foot a:hover, .side-foot button:hover { background: var(--ui-line-2); color: var(--ui-ink); text-decoration: none; filter: none; }

  /* Setup card at the foot of the sidebar (opts.setup). */
  .promo { margin: 8px 10px 12px; border-radius: 14px; overflow: hidden; background: var(--ui-surface);
    border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); }
  .promo-art { height: 72px; position: relative; display: grid; place-items: center;
    background: radial-gradient(120% 90% at 30% 20%, var(--ui-accent-soft) 0%, var(--ui-warn-soft) 55%, var(--ui-line-2) 100%); }
  .promo-art .ring { width: 40px; height: 40px; border-radius: 50%; background: var(--ui-surface); display: grid; place-items: center;
    box-shadow: var(--ui-shadow); color: var(--mt-coral); }
  .promo-body { padding: 12px 12px 8px; }
  .promo-body h4 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
  .promo-body p { margin: 0; font-size: 12.5px; color: var(--ui-mute); line-height: 1.35; }
  .promo-foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px 12px; font-size: 12.5px; color: var(--ui-mute); }
  .promo-foot .spacer { flex: 1; }
  .promo-foot .next { padding: 5px 10px; border-radius: 7px; background: var(--ui-cta); color: var(--ui-cta-ink); font-weight: 600; }
  .promo-foot .next:hover { text-decoration: none; filter: brightness(1.15); }

  html.side-collapsed .ws-text, html.side-collapsed .side-search, html.side-collapsed .nav-group > summary,
  html.side-collapsed .lbl, html.side-collapsed .promo, html.side-collapsed .nav .nav-badge,
  html.side-collapsed .side-foot .lbl { display: none; }
  html.side-collapsed .side-head { flex-direction: column; gap: 8px; }
  html.side-collapsed .ws { padding: 0; }
  html.side-collapsed .nav a, html.side-collapsed .side-foot a, html.side-collapsed .side-foot button { justify-content: center; padding: 0; }
  html.side-collapsed .nav-group { margin-top: 6px; }
  html.side-collapsed .nav-items { margin: 0; padding: 0; border: 0; }

  /* ---- Main column ---- */
  .main { min-width: 0; display: flex; flex-direction: column; }
  .topbar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 28px; border-bottom: 1px solid var(--ui-line);
    position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ui-ground) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .topbar .page-title { margin: 0; min-width: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
  .topbar .page-title-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .page-title svg.i { width: 20px; height: 20px; color: var(--ui-mute); }
  .topbar .spacer { flex: 1; }
  .nav-toggle { display: none; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 8px;
    place-items: center; color: var(--ui-mute); background: transparent; cursor: pointer; }
  .status-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ui-mute);
    padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-surface); text-decoration: none; }
  .status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-good); }
  .status-chip.warn .dot { background: var(--ui-warn); }
  .status-chip.bad .dot { background: var(--ui-bad); }
  .status-chip:hover { border-color: var(--ui-mute-2); color: var(--ui-ink); text-decoration: none; }
  .acct { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px;
    border: 1px solid var(--ui-line); background: var(--ui-surface); font-size: 13px; font-weight: 500; color: var(--ui-ink); }
  .acct:hover { border-color: var(--ui-mute-2); text-decoration: none; }
  .acct { flex-shrink: 0; }
  .acct .acct-label { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
  .acct .avatar { width: 26px; height: 26px; border-radius: 50%; flex-basis: 26px; font-size: 11px; }
  .acct svg.i { width: 14px; height: 14px; color: var(--ui-mute); }

  .content { padding: 22px 28px 40px; max-width: 1240px; width: 100%; flex: 1; }
  body[data-surface="admin"] .content { max-width: 1400px; }
  .site-foot { margin: 0 28px; padding: 18px 0 24px; border-top: 1px solid var(--ui-line); color: var(--ui-mute);
    font-family: var(--mt-mono); font-size: 0.76rem; line-height: 1.55; letter-spacing: 0; max-width: 1240px; }
  .site-foot p { margin: 0.35rem 0; }
  .site-foot a { color: var(--ui-mute); text-decoration: underline; text-underline-offset: 2px; }
  .site-foot a:hover { color: var(--ui-ink); }

  /* ---- Bare layout: signed-out and sessionless pages ---- */
  .bare { min-height: 100vh; display: flex; flex-direction: column; }
  .bare-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px;
    border-bottom: 1px solid var(--ui-line); }
  .bare-head nav { display: flex; gap: 6px; }
  .bare-head nav a { padding: 7px 12px; border-radius: 8px; color: var(--ui-ink-2); font-weight: 500; font-size: 13.5px; }
  .bare-head nav a:hover { background: var(--ui-line-2); text-decoration: none; color: var(--ui-ink); }
  .bare .content { max-width: 760px; margin: 0 auto; padding-top: 32px; }
  .bare .site-foot { margin: 0 auto; width: calc(100% - 56px); }

  /* ---- Mobile: sidebar becomes a drawer ---- */
  @media (max-width: 899px) {
    .shell, html.side-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
    .side { position: fixed; left: 0; top: 0; width: min(300px, 86vw); z-index: 50; transform: translateX(-100%);
      transition: transform 0.2s ease; box-shadow: var(--ui-shadow-lift); }
    .side.open { transform: none; }
    html.side-collapsed .ws-text, html.side-collapsed .side-search, html.side-collapsed .nav-group > summary,
    html.side-collapsed .lbl, html.side-collapsed .promo, html.side-collapsed .nav .nav-badge,
    html.side-collapsed .side-foot .lbl { display: revert; }
    html.side-collapsed .nav a, html.side-collapsed .side-foot a, html.side-collapsed .side-foot button { justify-content: flex-start; padding: 0 10px; }
    html.side-collapsed .side-head { flex-direction: row; }
    .side-collapse { display: none; }
    .nav-toggle { display: grid; }
    .nav a, .side-foot a, .side-foot button { min-height: 44px; }
    /* On a phone the chip is its dot: the label wrapped to three lines. */
    .status-chip [data-status-text] { display: none; }
    .status-chip { padding: 8px; }
    .topbar .page-title { font-size: 17px; }
    .topbar { padding: 0 16px; }
    .acct .acct-label { max-width: 96px; }
    .content { padding: 16px 16px 32px; }
    .site-foot { margin: 0 16px; }
    .bare-head { padding: 12px 16px; }
    .bare .site-foot { width: calc(100% - 32px); }
    /* Wide by nature (the users list is 7 columns): scroll the table, never the page. */
    .admin-main table, body[data-surface="admin"] .content table { display: block; overflow-x: auto; }
    .chart-scroll svg { min-width: 620px; }
    .info-grid { grid-template-columns: 1fr; gap: 0 0; }
    .info-grid dt { margin-top: 0.7rem; }
    .toolbar { flex-wrap: wrap; gap: 0.6rem; }
    .toolbar form { flex: 1 1 100%; }
    /* Specificity beats the 320px desktop width declared later in COMPONENTS. */
    .toolbar form input[type=text] { width: 100%; flex: 1 1 auto; min-width: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .side { transition: none; }
  }

  /* ---- Cards and panels ---- */
  .card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
    padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
  .card > h1:first-child, .card > h2:first-child, .card h2[style*="margin-top: 0"] { margin-top: 0; }
  details.card > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 0.5rem; }
  details.card > summary::-webkit-details-marker { display: none; }
  details.card > summary::before { content: "\25B8"; display: inline-block; transition: transform 0.15s; color: var(--ui-mute); font-size: 0.85rem; }
  details.card[open] > summary::before { transform: rotate(90deg); }
  details.card > summary h2 { margin: 0; }
  details.card > summary:hover h2 { color: var(--ui-accent); }
  .muted { color: var(--ui-mute); }
  .small { font-size: 0.85rem; }
  .error { background: var(--ui-bad-soft); border: 1px solid var(--ui-bad); color: var(--ui-bad);
    padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
  .notice { background: var(--ui-warn-soft); border: 1px solid var(--ui-warn); color: var(--ui-ink);
    padding: 0.75rem 1rem; border-radius: 10px; margin: 1rem 0; }
  .notice.ok { background: var(--ui-good-soft); border-color: var(--ui-good); }
  .info-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1rem 0; }
  .info-grid dt { color: var(--ui-mute); }
  .info-grid dd { margin: 0; }

  /* ---- Forms ---- */
  label { display: block; margin: 0.9rem 0 0.4rem; font-weight: 500; }
  input[type=email], input[type=password], input[type=text], input[type=number], input[type=search], input[type=url], select, textarea {
    width: 100%; min-height: 2.5rem; box-sizing: border-box; padding: 0.5rem 0.8rem; background: var(--ui-surface);
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); color: var(--ui-ink); font: inherit; }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--ui-accent); outline-offset: -1px; border-color: var(--ui-accent); }
  body[data-surface="admin"] input, body[data-surface="admin"] select, body[data-surface="admin"] textarea { width: auto; }
  body[data-surface="admin"] textarea { width: 100%; }
  button { padding: 0.6rem 1.1rem; background: var(--ui-line-2); color: var(--ui-ink);
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); cursor: pointer; font: inherit; font-weight: 500; }
  /* The portal's forms were laid out around this margin; admin's were not.
     .btn buttons and the ones inside composite widgets set their own. */
  body[data-surface="portal"] button { margin-top: 1rem; }
  body[data-surface="portal"] button.btn, body[data-surface="portal"] .split-btn-menu button,
  body[data-surface="portal"] .mcp-url button { margin-top: 0; }
  button.primary { background: var(--ui-cta); border-color: var(--ui-cta); color: var(--ui-cta-ink); font-weight: 600; }
  button:hover { background: var(--ui-line); border-color: var(--ui-mute-2); filter: none; }
  button.primary:hover { background: var(--ui-cta); border-color: var(--ui-cta); filter: brightness(0.92); }
  button:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
  button:disabled:hover, .btn:disabled:hover { filter: none; }
  .danger { background: var(--ui-bad); border-color: var(--ui-bad); color: #fff; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 1.1rem;
    border: 1px solid var(--ui-line); background: var(--ui-line-2); color: var(--ui-ink); border-radius: var(--ui-radius-sm);
    cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; margin: 0;
    white-space: nowrap; min-height: 2.5rem; box-sizing: border-box; }
  .btn:hover { background: var(--ui-line); border-color: var(--ui-mute-2); color: var(--ui-ink); text-decoration: none; filter: none; }
  /* Primary: the accent, one shade darker on hover (the old near-black read
     as too heavy against white cards, Matt 2026-09-25). */
  .btn-primary, .btn-cta { background: var(--ui-cta); border-color: var(--ui-cta); color: var(--ui-cta-ink); }
  .btn-primary:hover, .btn-cta:hover { background: var(--ui-cta); border-color: var(--ui-cta); color: var(--ui-cta-ink); filter: brightness(0.92); }
  /* Secondary: a tinted button, so it is visibly a button at rest. */
  .btn-secondary { background: var(--ui-accent-soft); border-color: var(--ui-accent-soft); color: var(--ui-accent); }
  .btn-secondary:hover { background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-surface)); border-color: var(--ui-accent); color: var(--ui-accent); filter: none; }
  /* Ghost: outline only, for the third action in a row. */
  .btn-ghost { background: transparent; border-color: var(--ui-line); color: var(--ui-ink-2); }
  .btn-ghost:hover { background: var(--ui-line-2); border-color: var(--ui-mute-2); color: var(--ui-ink); }
  .btn-sm { min-height: 2rem; padding: 0 0.8rem; font-size: 13px; }
  .btn-group { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
  .btn-group form { margin: 0; }
  .linklike { background: none; border: none; padding: 0; margin: 0; font: inherit;
    color: var(--ui-mute); text-decoration: underline; cursor: pointer; }
  .linklike:hover { color: var(--ui-bad); filter: none; }
  .link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--ui-accent); cursor: pointer; text-decoration: none; }
  .link-btn:hover { text-decoration: underline; filter: none; }
  .toolbar { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }
  .toolbar form { display: flex; gap: 0.5rem; align-items: center; }
  .toolbar input[type=text] { width: 320px; }
  .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .actions form { display: inline; }
  .actions button { margin-top: 0; }
  .action-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--ui-line-2); }
  .action-row:last-child { border-bottom: none; }
  .action-row-label { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
  @media (max-width: 720px) { .action-row { grid-template-columns: 1fr; } }

  /* Split button: primary click navigates; arrow reveals a dropdown. */
  .split-btn { display: inline-flex; align-items: stretch; position: relative; }
  .split-btn > .btn { margin: 0; min-height: 2.5rem; }
  .split-btn > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; padding-right: 1rem; }
  .split-btn > .split-btn-toggle { padding: 0 0.7rem; min-width: 2.25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 0.85rem; }
  .split-btn > .split-btn-toggle::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 1px; background: currentColor; opacity: 0.3; }
  .split-btn-menu[hidden] { display: none; }
  .split-btn-menu { position: absolute; top: calc(100% + 0.25rem); right: 0; z-index: 10; background: var(--ui-surface);
    border: 1px solid var(--ui-line); border-radius: 10px; min-width: 240px; padding: 0.25rem; box-shadow: var(--ui-shadow-lift); }
  .split-btn-menu form { margin: 0; }
  .split-btn-menu button { display: block; width: 100%; text-align: left; margin: 0; padding: 0.6rem 0.8rem;
    background: transparent; border: none; border-radius: 6px; color: var(--ui-ink); cursor: pointer; font: inherit; }
  .split-btn-menu button:hover { background: var(--ui-line-2); filter: none; }
  .split-btn-menu .menu-price { color: var(--ui-mute); margin-left: 0.5rem; font-size: 0.9em; }

  /* ---- Pills and KPIs ---- */
  .pill { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 7px; font-size: 0.8rem; font-weight: 600;
    background: var(--ui-line-2); color: var(--ui-ink-2); border: 1px solid transparent; white-space: nowrap; }
  .pill.good { background: var(--ui-good-soft); color: var(--ui-good); }
  .pill.warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
  .pill.bad { background: var(--ui-bad-soft); color: var(--ui-bad); }
  .pill.partial { background: var(--ui-line-2); color: var(--ui-ink); border-color: var(--ui-line); }
  .pill.popular { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }
  .pill.corner { position: absolute; top: -0.6rem; right: 0.75rem; }
  /* Collapsed detail on a page that is otherwise "you are done" (Vehicle and access). */
  .disclosure { border: 1px solid var(--ui-line); border-radius: 12px; padding: 0 16px; margin-top: 1rem; background: var(--ui-surface-2); }
  .disclosure > summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 8px; }
  .disclosure > summary::-webkit-details-marker { display: none; }
  .disclosure > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ui-mute); border-bottom: 1.5px solid var(--ui-mute); transform: rotate(-45deg); transition: transform 0.15s; }
  .disclosure[open] > summary::before { transform: rotate(45deg); }
  .disclosure[open] > summary { border-bottom: 1px solid var(--ui-line); margin-bottom: 8px; }
  .disclosure > :last-child { margin-bottom: 14px; }
  /* Plan and pack cards sit inside a white card, so they get a tint and the
     featured one an accent ring; otherwise they read as one flat sheet. */
  .card .kpi { background: var(--ui-surface-2); position: relative; }
  .card .kpi.featured { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; margin: 1.25rem 0; }
  .kpi { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 1rem 1.1rem;
    display: flex; flex-direction: column; }
  .kpi form { margin-top: auto; }
  .kpi .label { font-size: 0.75rem; color: var(--ui-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
  .kpi .value { font-size: 1.7rem; font-weight: 600; margin-top: 0.3rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .kpi .delta { font-size: 0.85rem; color: var(--ui-mute); margin-top: 0.3rem; }

  /* ---- Tables ---- */
  table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
  th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--ui-line-2); vertical-align: top; }
  th { color: var(--ui-mute); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
  tr:last-child td { border-bottom: 0; }
  .chart-scroll { overflow-x: auto; }

  /* ---- Credit progress rows ---- */
  .credit-row { display: grid; grid-template-columns: minmax(170px, 1fr) 2.5fr minmax(110px, auto); gap: 1rem; align-items: center; margin: 1.1rem 0; }
  @media (max-width: 640px) { .credit-row { grid-template-columns: 1fr; gap: 0.5rem; } .credit-row .credit-counter { text-align: left; } }
  .credit-row .credit-meta .credit-name { font-weight: 600; }
  .credit-row .credit-meta .credit-sub { color: var(--ui-mute); font-size: 0.85rem; margin-top: 0.15rem; }
  .credit-bar { height: 10px; background: var(--ui-line-2); border-radius: 999px; overflow: hidden; }
  .credit-bar-fill { height: 100%; background: var(--ui-accent); transition: width 0.3s ease; min-width: 6px; border-radius: 999px; }
  .credit-bar-fill.warn { background: var(--ui-warn); }
  .credit-bar-fill.bad { background: var(--ui-bad); }
  .credit-row .credit-counter { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
  .credit-row .credit-counter .credit-counter-sub { display: block; font-weight: normal; color: var(--ui-mute); font-size: 0.85rem; margin-top: 0.15rem; }
  .credit-cta-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding-top: 0.75rem; border-top: 1px solid var(--ui-line-2); color: var(--ui-mute); font-size: 0.85rem; }

  /* ---- Option cards (Tesla access level) ---- */
  .opt { display: block; border: 1px solid var(--ui-line); border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0.5rem 0;
    cursor: pointer; transition: background 0.12s, border-color 0.12s; background: var(--ui-surface); }
  .opt:hover { border-color: var(--ui-mute-2); background: var(--ui-surface-2); }
  .opt .opt-body { margin-left: 1.75rem; }
  .opt .opt-mark { display: inline-block; width: 1.25rem; }
  .opt-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .opt-title { display: inline-flex; align-items: center; min-width: 0; }
  .access-level { font-weight: 600; }
  .access-good { color: var(--ui-good); }
  .access-warn { color: var(--ui-warn); }
  .access-limited { color: var(--ui-accent); }
  @supports selector(:has(*)) {
    .opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
    .opt .opt-mark::before { content: "\25CB"; color: var(--ui-mute); font-size: 1.05rem; }
    .opt:has(input:checked) { border-color: var(--ui-good); background: var(--ui-good-tint); }
    .opt:has(input:checked) .opt-mark::before { content: "\2713"; color: var(--ui-good); font-weight: 700; }
    .opt:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
  }
  .opt-unavailable { cursor: default; opacity: 0.45; }
  .opt-unavailable:hover { border-color: var(--ui-line); background: var(--ui-surface); }
  .opt-current { cursor: pointer; }

  /* ---- Currency input ---- */
  .currency-input { display: inline-flex; align-items: stretch; background: var(--ui-surface); border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm); overflow: hidden; vertical-align: middle; }
  .currency-input:focus-within { outline: 2px solid var(--ui-accent); outline-offset: -1px; }
  .currency-input .currency-prefix { display: flex; align-items: center; padding: 0 0.7rem; color: var(--ui-mute);
    background: var(--ui-surface-2); border-right: 1px solid var(--ui-line); font-variant-numeric: tabular-nums; }
  .currency-input input[type=number] { width: 7rem; padding: 0.55rem 0.7rem; background: transparent; border: none; border-radius: 0;
    color: var(--ui-ink); font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
  .currency-input input[type=number]:focus { outline: none; }
  .currency-input input[type=number]::-webkit-inner-spin-button, .currency-input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .currency-input input[type=number] { -moz-appearance: textfield; }

  /* ---- Misc widgets ---- */
  .btn-loading { opacity: 0.7; pointer-events: none; }
  .btn-loading::after { content: " ..."; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--ui-line); border-top-color: var(--ui-accent);
    border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-left: 0.5rem; }
  .mcp-url { display: flex; gap: 0.5rem; align-items: stretch; max-width: 100%; }
  .mcp-url input { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0 0.8rem; font-family: var(--mt-mono); font-size: 0.92rem;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-ink); border-radius: var(--ui-radius-sm); }
  .mcp-url button { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; min-height: 2.5rem; padding: 0 0.85rem; margin: 0; }
  /* Activity's custom date range, styled as one chip-height row. */
  .chip-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
  .chip-form input[type=date] { width: auto; min-height: 34px; padding: 0 8px; font-size: 13px; border-radius: 10px; }
  .chip-form .btn { min-height: 34px; border-radius: 10px; }
  .t-icon-swap { position: relative; display: inline-grid; }
  .t-icon-swap > .t-icon { grid-area: 1 / 1; transition: opacity 250ms ease-in-out, filter 250ms ease-in-out, transform 250ms ease-in-out; }
  .t-icon-swap[data-state="a"] > [data-icon="a"], .t-icon-swap[data-state="b"] > [data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
  .t-icon-swap[data-state="a"] > [data-icon="b"], .t-icon-swap[data-state="b"] > [data-icon="a"] { opacity: 0; filter: blur(2px); transform: scale(0.25); }
  .t-label-swap > .t-icon { justify-self: start; }
  .t-label-swap[data-state="a"] > [data-icon="b"], .t-label-swap[data-state="b"] > [data-icon="a"] { transform: scale(0.85); }
  .copy-swap svg[data-icon="b"] { color: var(--ui-good); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .desktop-only { display: none; }
  @media (hover: hover) and (pointer: fine) { .desktop-only { display: block; } }

  /* ---- Setup step bar ---- */
  .stepbar { display: flex; align-items: flex-start; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }
  .stepbar li { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; gap: 0.5rem; }
  .stepbar li:not(:last-child)::after { content: ""; position: absolute; top: 1rem; left: 50%; right: -50%; height: 2px; background: var(--ui-line); z-index: 0; }
  .stepbar li.done:not(:last-child)::after { background: var(--ui-good); }
  .stepbar .dot { position: relative; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 0.9rem; background: var(--ui-surface); border: 2px solid var(--ui-line); color: var(--ui-mute); }
  .stepbar li.current .dot { border-color: var(--ui-accent); color: var(--ui-accent); }
  .stepbar li.done .dot { background: var(--ui-good); border-color: var(--ui-good); color: #fff; }
  .stepbar .label { font-size: 0.85rem; color: var(--ui-mute); text-align: center; line-height: 1.2; }
  .stepbar li.current .label { color: var(--ui-ink); font-weight: 600; }
  .stepbar li.done .label { color: var(--ui-good); }

  /* ---- Toast and number pop-in ---- */
  .t-toast-wrap { position: fixed; left: 0; right: 0; bottom: 1.5rem; display: flex; justify-content: center; pointer-events: none; z-index: 50; padding: 0 1rem; }
  .t-toast { pointer-events: auto; max-width: 28rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink);
    border: 1px solid var(--ui-good); box-shadow: var(--ui-shadow-lift); opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(2px);
    transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1), filter 250ms cubic-bezier(0.22, 1, 0.36, 1); }
  .t-toast.is-open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
    transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1), transform 350ms cubic-bezier(0.22, 1, 0.36, 1), filter 350ms cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes t-digit-pop-in { 0% { transform: translateY(8px); opacity: 0; filter: blur(2px); } 100% { transform: translateY(0); opacity: 1; filter: blur(0); } }
  .t-digit-group { display: inline-flex; align-items: baseline; }
  .t-digit { display: inline-block; }
  .t-digit-group.is-animating .t-digit { animation: t-digit-pop-in 500ms cubic-bezier(0.34, 1.45, 0.64, 1) both; }
  @media (prefers-reduced-motion: reduce) {
    .t-icon-swap > .t-icon { transition: none !important; }
    .t-toast { transition: none !important; }
    .t-digit-group .t-digit { animation: none !important; }
  }

  /* ---- Status page ---- */
  .overall { font-size: 1.35rem; font-weight: 600; }
  .overall.good { color: var(--ui-good); }
  .overall.warn { color: var(--ui-warn); }
  .overall.bad { color: var(--ui-bad); }
  .component { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--ui-line-2); }
  .component:last-child { border-bottom: none; }
  .component-name { font-weight: 600; }
  .component-detail { font-size: 0.85rem; color: var(--ui-mute); }
  .spark { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin: 1rem 0; }
  .bar { flex: 1; background: var(--ui-good); border-radius: 3px; min-height: 2px; }
  .bar.warn { background: var(--ui-warn); }
  .bar.bad { background: var(--ui-bad); }
  .bar-label { font-size: 0.7rem; color: var(--ui-mute); text-align: center; }

  /* ---- Admin dialogs ---- */
  .caps-dialog { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 1.5rem;
    max-width: 720px; width: calc(100% - 2rem); color: var(--ui-ink); }
  .caps-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
  .caps-dialog table { margin: 0; }

  /* ---- Outcome card (sessionless success) ---- */
  .outcome { max-width: 30rem; margin: 2rem auto; border: 1px solid var(--ui-good); border-radius: 14px; padding: 1.6rem 1.75rem;
    background: var(--ui-good-tint); }
  .outcome .mark { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
  .outcome .tick { color: var(--ui-good); font-size: 1.5rem; font-weight: 700; line-height: 1; }
  .outcome h1 { font-size: 1.25rem; margin: 0; color: var(--ui-good); }
  .outcome .quiet { color: var(--ui-mute); font-size: 0.9rem; margin-top: 1.1rem; }
  .outcome .next { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--ui-line); }
  .outcome .note { color: var(--ui-ink-2); font-size: 0.95rem; margin: 0 0 0.8rem; }

  /* ---- New dashboard vocabulary (phase 2 pages) ---- */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; margin: 0;
    background: var(--ui-surface); border: 1px solid var(--ui-line); font-size: 13.5px; font-weight: 500; color: var(--ui-ink-2); }
  .chip:hover { border-color: var(--ui-mute-2); text-decoration: none; filter: none; }
  .chip.active { background: var(--ui-line-2); color: var(--ui-ink); font-weight: 600; }
  .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  .hero-card { display: flex; flex-direction: column; padding: 0; margin: 0; }
  .hero-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ui-line-2); font-weight: 600; font-size: 15.5px; }
  .icon-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; }
  .icon-tile.blue { background: var(--ui-accent-soft); color: var(--ui-accent); }
  .icon-tile.orange { background: var(--ui-warn-soft); color: var(--ui-warn); }
  .icon-tile.green { background: var(--ui-good-soft); color: var(--ui-good); }
  .icon-tile.red { background: var(--ui-bad-soft); color: var(--ui-bad); }
  .icon-tile.grey { background: var(--ui-line-2); color: var(--ui-mute); }
  .hero-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 18px 18px; }
  .hero-body > div { flex: 1 1 220px; min-width: 0; }
  .hero-body form { margin: 0; }
  .big { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .big small { font-size: 14px; font-weight: 500; color: var(--ui-mute); letter-spacing: 0; margin-left: 6px; }
  .sub { margin-top: 10px; font-size: 13px; color: var(--ui-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .sub svg.i { width: 14px; height: 14px; }
  .section-title { margin: 26px 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .kpi-card { display: flex; flex-direction: column; padding: 0; margin: 0; }
  .kpi-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line-2); font-weight: 600; font-size: 15px; }
  .kpi-body { padding: 16px 18px 18px; }
  .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ui-mute); }
  .delta-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .delta-tag.up { color: var(--ui-good); } .delta-tag.down { color: var(--ui-bad); } .delta-tag.flat { color: var(--ui-mute); }
  .delta-tag .dsym { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; }
  .delta-tag.up .dsym { background: var(--ui-good-soft); } .delta-tag.down .dsym { background: var(--ui-bad-soft); }
  .delta-tag .dsym svg.i { width: 10px; height: 10px; stroke-width: 2.5; }
  .panel { padding: 18px 20px 16px; margin: 0; }
  .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .panel-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
  .panel-head a { font-size: 13.5px; color: var(--ui-mute); display: inline-flex; gap: 6px; align-items: center; }
  .panel-head a:hover { color: var(--ui-ink); text-decoration: none; }
  .panel .big { margin-top: 6px; font-size: 30px; }
  .legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
  .legend li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ui-line-2); font-size: 14px; }
  .legend .sw { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .legend .pct { font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--ui-line-2); color: var(--ui-mute); font-weight: 500; }
  .legend .val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
  .chart { display: block; width: 100%; height: auto; margin-top: 12px; }
  .chart text { fill: var(--ui-mute); font-family: var(--mt-sans); font-size: 12px; }
  .tbl-card { padding: 0; margin: 0; overflow-x: auto; }
  .tbl-card table { margin: 0; }
  .tbl-card th { padding: 12px 18px; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
  .tbl-card td { padding: 14px 18px; vertical-align: middle; }
  .row-title { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; }
  .row-title .icon-tile { width: 40px; height: 40px; border-radius: 11px; font-size: 14px; }
  .row-sub { font-size: 12.5px; color: var(--ui-mute); font-weight: 400; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
  .row-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-mute-2); }
  .row-sub .dot.bad { background: var(--ui-bad); } .row-sub .dot.warn { background: var(--ui-warn); } .row-sub .dot.good { background: var(--ui-good); }
  .num { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .cell-sub { font-size: 12.5px; color: var(--ui-mute); margin-top: 2px; }
  .mono { font-family: var(--mt-mono); font-size: 12.5px; }
  .empty { padding: 28px 18px; text-align: center; color: var(--ui-mute); }
  .cell-right { text-align: right; }