:root {
    --bg: #080b11; --panel: #10151f; --panel-2: #141b28; --border: #212a3a;
    --text: #e7ebf3; --muted: #8b96ad; --muted-2: #5c6780;
    --accent: #34d1c4; --accent-2: #5b7bff; --accent-3: #b892ff;
    --danger: #ff5c72; --ok: #34d1c4; --warn: #ffb454;
    --accent-rgb: 52,209,196; --accent-2-rgb: 91,123,255; --danger-rgb: 255,92,114; --warn-rgb: 255,180,84;
    --input-bg: #0d1220; --btn-text: #04201d; --btn-danger-text: #2a0308; --selection-text: #fff;
    --accent-end: #22a99d; --danger-end: #e0435c; --surface-tint: rgba(255,255,255,.04); --surface-tint-2: rgba(255,255,255,.08);
    --radius: 12px;
    --glow-accent: 0 0 16px rgba(var(--accent-rgb),.35);
    --glow-accent-2: 0 0 16px rgba(var(--accent-2-rgb),.35);
  }
  /* Light theme (2026-09-06) — sea green accent. Toggled via a button in the sidebar; applied as
     data-theme="light" on <html>, persisted in localStorage. Dark theme above is untouched and
     stays the default (no attribute = dark). Chart.js canvases are NOT theme-aware (they bake
     colors at draw time, not via CSS) — left as their original dark-tuned colors on purpose, a
     deliberately small first pass rather than a full app-wide chart-recoloring effort. */
  :root[data-theme="light"] {
    --bg: #f3f6f5; --panel: #ffffff; --panel-2: #eef3f1; --border: #dbe4e0;
    --text: #142420; --muted: #55665f; --muted-2: #8a9a93;
    --accent: #2e8b57; --accent-2: #3f6fd1; --accent-3: #7c5cc7;
    --danger: #c23c4e; --ok: #2e8b57; --warn: #a5680a;
    --accent-rgb: 46,139,87; --accent-2-rgb: 63,111,209; --danger-rgb: 194,60,78; --warn-rgb: 165,104,10;
    --input-bg: #eef3f1; --btn-text: #ffffff; --btn-danger-text: #ffffff; --selection-text: #0c1a15;
    --accent-end: #247249; --danger-end: #a52f3f; --surface-tint: rgba(20,36,32,.04); --surface-tint-2: rgba(20,36,32,.07);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; font-family: "Segoe UI", -apple-system, Roboto, sans-serif;
    background:
      radial-gradient(circle at 12% -10%, rgba(var(--accent-2-rgb),.10), transparent 40%),
      radial-gradient(circle at 88% 0%, rgba(var(--accent-rgb),.08), transparent 38%),
      var(--bg);
    background-attachment: fixed;
    color: var(--text); font-size: 14px;
  }
  a { color: var(--accent-2); text-decoration: none; transition: color .15s; }
  a:hover { color: var(--accent); }
  code { background: var(--input-bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); }
  ::selection { background: rgba(var(--accent-rgb),.3); color: var(--selection-text); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

  input, select, textarea, button {
    background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
    padding: 9px 12px; border-radius: 8px; font-size: 13px; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
  }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14); }
  input, select { min-width: 140px; }
  button {
    cursor: pointer; font-weight: 600; border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-end)); color: var(--btn-text);
    box-shadow: 0 2px 10px rgba(var(--accent-rgb),.22);
    transition: transform .15s, box-shadow .15s, filter .15s;
  }
  button.secondary { background: var(--surface-tint); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
  button.ghost { background: transparent; color: var(--muted); border: 1px solid transparent; box-shadow: none; }
  button.danger { background: linear-gradient(135deg, var(--danger), var(--danger-end)); color: var(--btn-danger-text); box-shadow: 0 2px 10px rgba(var(--danger-rgb),.22); }
  button:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-rgb),.3); }
  button.secondary:hover:not(:disabled) { background: var(--surface-tint-2); box-shadow: 0 4px 14px rgba(0,0,0,.25); border-color: var(--muted-2); }
  button.danger:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(var(--danger-rgb),.32); }
  button:active:not(:disabled) { transform: translateY(0); }
  button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

  /* ---- Auth screen ---- */
  /* display:none by default — only JS reveals it, and only once the /auth/me session check
     actually fails. Otherwise every reload (incl. the theme toggle's) flashes the login form
     for the network round-trip even when the user is already signed in. */
  #authScreen {
    min-height: 100vh; display: none; align-items: center; justify-content: center;
    background:
      radial-gradient(circle at 25% 15%, rgba(var(--accent-2-rgb),.16) 0%, transparent 45%),
      radial-gradient(circle at 80% 85%, rgba(var(--accent-rgb),.12) 0%, transparent 45%),
      var(--bg);
  }
  .auth-card {
    width: 380px; background: linear-gradient(165deg, var(--panel), var(--panel-2) 160%);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px; box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.06);
  }
  .auth-card h1 {
    font-size: 21px; margin: 0 0 4px; letter-spacing: .3px;
    background: linear-gradient(90deg, var(--text), var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .auth-card .tag { color: var(--muted); font-size: 12px; margin-bottom: 24px; }
  .auth-card label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 6px; }
  .auth-card input { width: 100%; }
  .auth-card button { width: 100%; margin-top: 20px; padding: 11px; }
  .auth-msg { font-size: 12px; margin-top: 10px; min-height: 16px; }
  .auth-msg.error { color: var(--danger); }

  /* ---- App shell ---- */
  #app { display: none; min-height: 100vh; }
  #app.active { display: grid; grid-template-columns: 240px 1fr; }
  aside {
    background: linear-gradient(180deg, var(--panel), var(--input-bg) 130%);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh;
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
  .brand .dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 12px var(--accent); animation: brandPulse 2.6s ease-in-out infinite;
  }
  @keyframes brandPulse {
    0%, 100% { box-shadow: 0 0 8px var(--accent); }
    50% { box-shadow: 0 0 18px var(--accent), 0 0 4px #fff; }
  }
  .brand b { font-size: 14px; letter-spacing: .3px; }
  .brand span { display: block; font-size: 10px; color: var(--muted); }
  nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
  nav .item {
    padding: 10px 12px; border-radius: 8px; color: var(--muted); cursor: pointer;
    font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px;
    border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .15s;
  }
  nav .item span:first-child {
    width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 13px; transition: background .2s, filter .2s;
  }
  nav .item:hover { background: var(--panel-2); color: var(--text); transform: translateX(2px); }
  nav .item.active {
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.02));
    color: var(--accent); border-left-color: var(--accent);
  }
  nav .item.active span:first-child { background: rgba(var(--accent-rgb),.16); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.5)); }
  nav .section-label { font-size: 10px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; margin: 14px 12px 4px; }
  .user-box { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 10px; }
  .user-box .name { font-size: 13px; font-weight: 600; }
  .user-box .role { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
  .user-box button { width: 100%; margin-top: 10px; }
  main { padding: 28px 32px; overflow-y: auto; }
  .view { display: none; }
  .view.active { display: block; animation: viewFadeIn .28s ease; }
  @keyframes viewFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .view-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
  .view-header h2 {
    font-size: 20px; margin: 0; padding-left: 14px; position: relative;
  }
  .view-header h2::before {
    content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
  }
  .view-header .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

  .card {
    background: linear-gradient(165deg, var(--panel), var(--panel-2) 180%);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; margin-bottom: 18px; transition: border-color .2s, box-shadow .2s;
    /* Every table lives inside a .card. A wide table (many columns, e.g. Knowledge Base or
       Users) can exceed the card's width on any desktop viewport, not only <900px — without
       this, the overflow was simply cut off with no way to scroll to it, hiding whole columns
       (often the Action buttons on the far right). Scrolling the card, not the page body, keeps
       a wide table from forcing horizontal scroll on the whole page. */
    overflow-x: auto;
  }
  .card:hover { border-color: rgba(139,150,173,.35); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .card h3 { font-size: 13px; margin: 0 0 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; margin-bottom: 18px; }
  .chart-grid .card { margin-bottom: 0; }
  .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

  .stat-card {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--panel-2), var(--panel) 180%);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 14px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
  }
  .stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  .grid .stat-card:nth-of-type(4n+2)::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); }
  .grid .stat-card:nth-of-type(4n+3)::before { background: linear-gradient(90deg, var(--accent-3), var(--warn)); }
  .grid .stat-card:nth-of-type(4n+4)::before { background: linear-gradient(90deg, var(--warn), var(--accent)); }
  .stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.35); border-color: rgba(var(--accent-rgb),.3); }
  .stat-card.clickable { cursor: pointer; }
  .stat-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
  .stat-card .value { font-size: 25px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.3px; }
  .stat-card .hint { font-size: 11.5px; color: var(--muted-2); }
  .bar-track { height: 6px; background: var(--input-bg); border-radius: 4px; margin-top: 10px; overflow: hidden; }
  .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 8px rgba(var(--accent-rgb),.5); }

  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  /* Enterprise admin-console density pass (2026-09-07): compact rows, one visible primary action
     plus an overflow menu for everything else — replaces the old vertically-stacked full-width
     button-per-action layout (.tbl-actions), which made every row 150px+ tall. See
     renderActionButtons()/toggleActionMenu() below for the JS half of this. */
  .action-menu { display: inline-flex; align-items: center; gap: 6px; }
  .action-menu button { padding: 5px 12px; font-size: 12.5px; }
  .action-menu-trigger {
    padding: 5px 8px !important; min-width: 30px; font-size: 15px; line-height: 1;
    background: transparent; border-color: var(--border); color: var(--muted);
  }
  .action-menu-trigger:hover { color: var(--text); background: var(--panel-2); box-shadow: none; transform: none; }
  .action-menu-trigger[aria-expanded="true"] { background: rgba(var(--accent-rgb),.12); color: var(--accent); border-color: rgba(var(--accent-rgb),.3); }
  /* Rendered into #actionMenuPortal (body-level, see below) rather than inline in the table cell —
     .card has overflow-x:auto, which (per the CSS spec) forces overflow-y:auto too, so an
     absolutely-positioned dropdown nested inside it would get silently clipped for any row not
     near the very top. position:fixed + coordinates computed from the trigger's own
     getBoundingClientRect() at open-time sidesteps that entirely, regardless of scroll position. */
  #actionMenuPortal { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: none; }
  #actionMenuPortal.open { display: block; }
  .action-dropdown {
    position: fixed; min-width: 150px; padding: 6px; pointer-events: auto;
    background: linear-gradient(165deg, var(--panel), var(--panel-2) 180%);
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: toastIn .12s ease;
  }
  .action-dropdown-item {
    display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px;
    background: transparent; border: none; color: var(--text); border-radius: 6px;
    box-shadow: none; transform: none;
  }
  .action-dropdown-item:hover { background: var(--panel-2); box-shadow: none; transform: none; }
  /* Explicit background/box-shadow here (not just color) because this is a real <button
     class="... danger">, and the app's existing generic `button.danger` rule (solid gradient
     background, meant for real standalone danger buttons elsewhere) would otherwise win outright
     outside of :hover — .action-dropdown-item.danger has higher specificity (two classes vs one
     element+class) so it overrides cleanly, no !important needed. Red TEXT only, never a red fill —
     this is a menu row, not a button. */
  .action-dropdown-item.danger { background: transparent; color: var(--danger); box-shadow: none; }
  .action-dropdown-item.danger:hover { background: rgba(var(--danger-rgb),.12); box-shadow: none; }
  .action-dropdown-divider { border-top: 1px solid var(--border); margin: 6px 2px; }
  th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
  tbody tr { transition: background .12s, box-shadow .12s; }
  tbody tr:hover td { background: rgba(var(--accent-rgb),.045); }
  tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
  /* Persistent "this row's detail is open" state (Wallets redesign, 2026-09-06) — same visual
     language as the hover rule above, minus needing the pointer over it. */
  tbody tr.selected td { background: rgba(var(--accent-rgb),.08); }
  tbody tr.selected { box-shadow: inset 3px 0 0 var(--accent); }
  /* Playground conversation sidebar (2026-09-06) — same "persistently open" visual language,
     applied to plain rows instead of a table. */
  .chat-convo-row { display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
  .chat-convo-row:hover { background: rgba(var(--accent-rgb),.06); }
  .chat-convo-row.selected { background: rgba(var(--accent-rgb),.1); box-shadow: inset 2px 0 0 var(--accent); }
  .chat-convo-row .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .chat-convo-row .del { color: var(--muted); opacity: 0; flex-shrink: 0; }
  .chat-convo-row:hover .del { opacity: 1; }
  .chat-convo-row .del:hover { color: var(--danger); }
  .chat-convo-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin: 12px 0 4px; padding: 0 8px; }
  .chat-convo-group-label:first-child { margin-top: 0; }
  /* ---- Activity Log month/date group dividers ---- */
  tr.al-month td {
    background: linear-gradient(90deg, rgba(var(--accent-2-rgb),.12), transparent);
    color: var(--accent-2); font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: .7px; padding: 14px 12px 7px; border-bottom: 1px solid var(--border);
  }
  tr.al-date td {
    background: transparent; color: var(--muted); font-weight: 600; font-size: 11.5px;
    padding: 9px 12px 6px; border-bottom: 1px solid var(--border);
  }
  tr.al-month:first-child td { padding-top: 2px; }
  tr.al-month:hover td, tr.al-date:hover td { background: inherit; }
  tr.al-month:hover, tr.al-date:hover { box-shadow: none; }
  .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11px; background: var(--panel-2); color: var(--muted); }
  .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
  .pill.accent { background: rgba(var(--accent-rgb),.15); color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.18); }
  .pill.warn { background: rgba(var(--warn-rgb),.15); color: var(--warn); box-shadow: 0 0 10px rgba(var(--warn-rgb),.15); }
  .pill.danger { background: rgba(var(--danger-rgb),.15); color: var(--danger); box-shadow: 0 0 10px rgba(var(--danger-rgb),.15); }
  /* Users console redesign (2026-09-07): initials-only avatar, existing accent color at low
     opacity — no image/dependency, no new color, matches the same formula .pill.accent already
     uses (rgba(var(--accent-rgb), X)). */
  .avatar-initials {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
    background: rgba(var(--accent-rgb),.14); color: var(--accent); letter-spacing: -.2px;
  }
  .identity-cell { display: flex; align-items: center; gap: 10px; }
  /* Profile photos (2026-09-29): same box as the initials avatar, so rows don't shift. */
  .avatar-photo { object-fit: cover; padding: 0; background: var(--input-bg); }
  .avatar-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
  .identity-cell .name { font-weight: 600; line-height: 1.35; }
  .identity-cell .sub { color: var(--muted); font-size: 12px; line-height: 1.35; }
  .stacked-list { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
  .row-link { color: var(--text); cursor: pointer; font-weight: 500; }
  .row-link:hover { color: var(--accent); text-decoration: underline; }
  .muted { color: var(--muted); }
  .section-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: var(--muted-2); margin: 28px 0 12px; padding-top: 4px; border-top: 1px solid var(--border);
  }
  .section-label:first-child { margin-top: 0; border-top: none; padding-top: 0; }
  /* Project Members redesign (2026-09-08) — a compact member row: identity-cell (reused as-is)
     on the left, actions on the right, wrapping naturally on a narrow modal instead of a fixed
     breakpoint. Built entirely from existing tokens/components (avatar-initials, identity-cell,
     pill, muted, row/button/danger), no new colors. */
  .pmem-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border);
  }
  .pmem-row:last-child { border-bottom: none; padding-bottom: 4px; }
  .pmem-meta { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pmem-models { font-size: 11.5px; margin-top: 2px; }
  .pmem-actions { flex-shrink: 0; }
  .info-tip {
    display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
    border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 11px;
    font-style: normal; cursor: help; margin-left: 6px; vertical-align: middle;
  }
  .headline-cost { font-size: 34px; font-weight: 700; letter-spacing: -.5px; color: var(--accent); line-height: 1.1; }
  .headline-cost-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
  /* ---- In-page tabs (Project/Person detail redesign, 2026-09-08) — first use of a tabbed
     sub-navigation inside a single view; everything else reuses existing components. Built from
     existing tokens only. ---- */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
  .tab {
    background: transparent; box-shadow: none; color: var(--muted); font-weight: 600;
    border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0;
    padding: 9px 16px; margin-bottom: -1px;
  }
  .tab:hover:not(:disabled) { color: var(--text); background: var(--surface-tint); transform: none; box-shadow: none; }
  .tab.active { color: var(--accent); background: var(--panel); border-color: var(--border); }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }
  /* ---- Compact secondary metadata row under a page's headline number (Members · Requests ·
     Tokens · ... ) — plain inline text, deliberately not another row of stat-cards. ---- */
  .meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
  .meta-row b { color: var(--text); font-weight: 600; }
  /* ---- Simple Prev/1 2 3/Next pager (Members table, Activity log) — client- or server-paged,
     the markup is the same either way. ---- */
  .pager { display: flex; align-items: center; gap: 4px; }
  .pager button { padding: 6px 11px; font-size: 12.5px; }
  .pager .pager-current { background: var(--surface-tint); color: var(--accent); box-shadow: none; }
  /* ---- Aggregated activity rows (Week/Month view) are click-to-drill-down. ---- */
  .act-row:hover { background: var(--surface-tint); cursor: pointer; }
  .act-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .msg { font-size: 12.5px; }
  .msg.error { color: var(--danger); }
  .msg.ok { color: var(--ok); }
  hr.sep { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

  /* ---- Theme toggle (2026-09-08: icon-only, sidebar user-box, beside the username) — a fixed
     top-right corner placement was tried first but collided with every view-header's own
     right-aligned Refresh/date-range controls; this spot is always visible (the sidebar is
     persistent chrome) without competing for the same real estate as page content. Needs its own
     width/margin reset since `.user-box button` below forces every other button in this box to
     full width. ---- */
  #themeToggleBtn {
    width: 30px; height: 30px; margin-top: 0; flex-shrink: 0; padding: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    background: var(--surface-tint); color: var(--muted); border: 1px solid var(--border); box-shadow: none;
  }
  #themeToggleBtn:hover:not(:disabled) { background: var(--surface-tint-2); color: var(--text); box-shadow: none; transform: none; }

  /* ---- Global toast notifications (PRODUCTION_READINESS_ROADMAP.md Phase A) — supplements the
     existing per-modal .msg divs, doesn't replace them: a toast is visible regardless of what
     view/modal you're looking at when an action finishes, a .msg only if you're still looking at
     the exact spot that triggered it. See showToast() in the script below. ---- */
  #toastContainer { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, 90vw); }
  .toast {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius);
    background: linear-gradient(165deg, var(--panel), var(--panel-2) 180%);
    border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.35);
    font-size: 13px; color: var(--text); animation: toastIn .18s ease;
  }
  .toast.leaving { animation: toastOut .18s ease forwards; }
  .toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent-2); }
  .toast.ok::before { background: var(--ok); }
  .toast.error::before { background: var(--danger); }
  @keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(16px); } }

  /* ---- Button loading state (Phase A) — a small inline spinner + disabled state, so a slow
     action always gives a visual "this is working" signal and can't be double-submitted by a
     second click. See setButtonLoading() below. ---- */
  button.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
  button.btn-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
    margin: -7px 0 0 -7px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor;
    animation: btnSpin .6s linear infinite; color: var(--text);
  }
  @keyframes btnSpin { to { transform: rotate(360deg); } }

  /* ---- Chat ---- */
  #chatThread { height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--input-bg); margin-bottom: 12px; }
  .chatmsg { margin-bottom: 14px; font-size: 13.5px; line-height: 1.55; }
  .chatmsg .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 3px; }
  .chatmsg.user .role { color: var(--accent-2); }
  .chatmsg.assistant .role { color: var(--accent); }
  .chatmsg.error .role { color: var(--danger); }
  .chatmsg pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: inherit; }
  /* Rendered Markdown in assistant replies (playground.js renderMarkdown) */
  .chat-md { word-wrap: break-word; }
  .chat-md > :first-child { margin-top: 0; }
  .chat-md > :last-child { margin-bottom: 0; }
  .chat-md p { margin: 0 0 8px; }
  .chat-md ul, .chat-md ol { margin: 0 0 8px; padding-left: 22px; }
  .chat-md li { margin: 2px 0; }
  .chat-md h3, .chat-md h4, .chat-md h5, .chat-md h6 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
  .chat-md h3 { font-size: 15.5px; }
  .chat-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--border); padding: 1px 5px; border-radius: 4px; }
  .chat-md pre.chat-code { white-space: pre; overflow-x: auto; background: var(--border); padding: 10px 12px; border-radius: 6px; margin: 0 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
  .chat-md pre.chat-code code { background: none; padding: 0; }
  .chat-md blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border); color: var(--muted); }
  .chat-md a { color: var(--accent); text-decoration: underline; }
  .chat-md hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
  .chat-md .chat-table { overflow-x: auto; margin: 0 0 8px; }
  .chat-md table { border-collapse: collapse; font-size: 12.5px; }
  .chat-md th, .chat-md td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
  .chat-md th { font-weight: 600; }
  .chatmsg img.chat-image { display: block; max-width: min(100%, 420px); max-height: 420px; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 6px; }
  #chatAttachPreview { align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
  #chatAttachPreview img { height: 48px; border-radius: 6px; border: 1px solid var(--border); }
  /* Playground loading indicator — shown while awaiting a real /chat/completions reply. */
  .typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
  .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: typingPulse 1.1s infinite ease-in-out; }
  .typing-dots span:nth-child(2) { animation-delay: .15s; }
  .typing-dots span:nth-child(3) { animation-delay: .3s; }
  @keyframes typingPulse { 0%, 60%, 100% { opacity: .25; transform: scale(.85); } 30% { opacity: 1; transform: scale(1); } }
  #chatInput { flex: 1; }

  .modal-backdrop { position: fixed; inset: 0; background: rgba(5,7,12,.65); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 50; }
  .modal-backdrop.open { display: flex; animation: modalFadeIn .18s ease; }
  @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    position: relative;
    width: 560px; max-width: min(560px, 92vw); max-height: 90vh; overflow-y: auto;
    background: linear-gradient(165deg, var(--panel), var(--panel-2) 180%);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--accent-rgb),.05);
  }
  .modal h3 { margin-top: 0; padding-right: 26px; }
  .modal-close {
    position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; padding: 0;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    background: var(--surface-tint); color: var(--muted); border: 1px solid var(--border);
    border-radius: 8px; font-size: 18px; box-shadow: none;
  }
  .modal-close:hover { background: rgba(var(--danger-rgb),.15); color: var(--danger); border-color: rgba(var(--danger-rgb),.3); transform: none; box-shadow: none; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
  .field input, .field select { width: 100%; }
  .checkbox-row { display: flex; align-items: center; gap: 8px; }
  .checkbox-row input { width: auto; }

  /* ---- Item 6: responsive design — nav collapses to a drawer under ~900px, tables/modals/grids
     adapt instead of forcing horizontal page scroll. #navHamburger/#navScrim must both be
     display:none by default (not only inside the media query below) — #app.active is a CSS Grid
     with exactly 2 template columns, and any child that isn't display:none becomes a real grid
     item, which on desktop shoved aside/main into the wrong columns entirely. ---- */
  #navHamburger { display: none; }
  #navScrim { display: none; position: fixed; inset: 0; background: rgba(5,7,12,.6); z-index: 60; }
  @media (max-width: 900px) {
    #app.active { display: block; }
    aside {
      position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 70;
      transform: translateX(-100%); transition: transform .2s ease; height: 100vh;
    }
    aside.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
    #navHamburger {
      display: flex; align-items: center; justify-content: center; position: fixed; top: 14px; left: 14px;
      z-index: 71; width: 38px; height: 38px; border-radius: 10px; padding: 0;
    }
    #navScrim.open { display: block; }
    main { padding: 76px 16px 24px; }
    .view-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .grid { grid-template-columns: 1fr; }
    .row { width: 100%; }
    input, select { min-width: 0; }
    /* .card's overflow-x: auto (base rule) already handles the scrolling; this just gives a
       wide table a sane minimum width on a narrow phone screen instead of squashing columns
       unreadably thin. */
    table { min-width: 640px; }
  }

  /* ===== Usage Reports (2026-10-08 redesign) — everything scoped under .usage-reports =====
     Tokens map onto the dashboard's theme variables, so the existing light/dark toggle
     (data-theme on <html>) restyles this page with no separate media query. */
  .usage-reports {
    --ur-space-1: 4px; --ur-space-2: 8px; --ur-space-3: 12px; --ur-space-4: 16px; --ur-space-5: 20px; --ur-space-6: 24px;
    --ur-radius: 12px; --ur-radius-sm: 8px;
    --ur-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .12);
    --ur-fs-xs: 11px; --ur-fs-sm: 12.5px; --ur-fs-md: 14px; --ur-fs-lg: 20px; --ur-fs-xl: 30px;
    --ur-surface: var(--panel); --ur-surface-2: var(--panel-2); --ur-border: var(--border);
    --ur-text: var(--text); --ur-muted: var(--muted); --ur-grid: rgba(139, 150, 173, .14);
    --ur-tooltip-bg: var(--panel-2);
    --ur-accent: var(--accent); --ur-accent-fill: rgba(var(--accent-rgb), .14);
    --ur-success: var(--ok); --ur-danger: var(--danger); --ur-warning: var(--warn); --ur-neutral: var(--muted);
    /* One fixed categorical palette for every model/series color on the page. */
    --ur-cat-1: #34d1c4; --ur-cat-2: #6b8cff; --ur-cat-3: #f2b84b; --ur-cat-4: #e66b9d;
    --ur-cat-5: #9d7bff; --ur-cat-6: #4cc38a; --ur-cat-7: #f08a5d; --ur-cat-8: #8b96ad;
    font-variant-numeric: tabular-nums;
  }
  :root[data-theme="light"] .usage-reports {
    --ur-shadow: 0 1px 2px rgba(20, 36, 32, .06), 0 4px 14px rgba(20, 36, 32, .06);
    --ur-grid: rgba(85, 102, 95, .14);
    --ur-cat-1: #0f9c8f; --ur-cat-2: #3d5fe0; --ur-cat-3: #b7791f; --ur-cat-4: #c0457a;
    --ur-cat-5: #7454e0; --ur-cat-6: #23905c; --ur-cat-7: #c75a2a; --ur-cat-8: #6b7a90;
  }
  .usage-reports .ur-card { background: var(--ur-surface); border: 1px solid var(--ur-border); border-radius: var(--ur-radius); box-shadow: var(--ur-shadow); padding: var(--ur-space-5); margin-bottom: var(--ur-space-4); min-width: 0; }
  .usage-reports .ur-title { font-size: var(--ur-fs-xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ur-muted); }
  .usage-reports .ur-muted { color: var(--ur-muted); }
  .usage-reports :focus-visible { outline: 2px solid var(--ur-accent); outline-offset: 2px; }
  .usage-reports .ur-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; }

  /* header */
  .usage-reports .ur-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ur-space-4); flex-wrap: wrap; margin-bottom: var(--ur-space-4); }
  .usage-reports .ur-header h2 { margin: 0 0 var(--ur-space-1); }
  .usage-reports .ur-sub { color: var(--ur-muted); font-size: var(--ur-fs-sm); max-width: 640px; }
  .usage-reports .ur-updated { color: var(--ur-muted); font-size: var(--ur-fs-xs); margin-top: var(--ur-space-1); }
  .usage-reports .ur-header-actions { display: flex; gap: var(--ur-space-2); }

  /* sticky filter bar */
  .usage-reports .ur-filters { position: sticky; top: 0; z-index: 5; background: var(--ur-surface); border: 1px solid var(--ur-border); border-radius: var(--ur-radius); box-shadow: var(--ur-shadow); padding: var(--ur-space-4) var(--ur-space-5); margin-bottom: var(--ur-space-4); }
  .usage-reports .ur-filter-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ur-space-3); }
  .usage-reports .ur-field { display: flex; flex-direction: column; gap: var(--ur-space-1); min-width: 0; }
  .usage-reports .ur-field > span { font-size: var(--ur-fs-xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ur-muted); }
  .usage-reports .ur-field select, .usage-reports .ur-field input { width: 100%; min-width: 0; box-sizing: border-box; }
  .usage-reports .ur-chips { display: flex; flex-wrap: wrap; gap: var(--ur-space-2); align-items: center; margin-top: var(--ur-space-3); }
  .usage-reports .ur-chip { display: inline-flex; align-items: center; gap: var(--ur-space-1); font-size: var(--ur-fs-sm); padding: 2px var(--ur-space-2) 2px var(--ur-space-3); border-radius: 999px; background: var(--ur-surface-2); border: 1px solid var(--ur-border); color: var(--ur-text); }
  .usage-reports .ur-chip button { background: none; border: 0; padding: 0 var(--ur-space-1); color: var(--ur-muted); cursor: pointer; font-size: 14px; line-height: 1; box-shadow: none; }
  .usage-reports .ur-link { background: none; border: 0; padding: 0; color: var(--ur-accent); cursor: pointer; font-size: var(--ur-fs-sm); text-decoration: underline; box-shadow: none; }

  /* KPIs */
  .usage-reports .ur-hero { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: var(--ur-space-4); }
  .usage-reports .ur-kpi { display: flex; flex-direction: column; gap: var(--ur-space-2); margin-bottom: 0; }
  .usage-reports .ur-kpi-primary { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(180deg, rgba(var(--accent-rgb), .08), transparent 70%), var(--ur-surface); }
  .usage-reports .ur-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: var(--ur-space-2); }
  .usage-reports .ur-kpi-value { font-size: var(--ur-fs-xl); font-weight: 600; line-height: 1.1; color: var(--ur-text); }
  .usage-reports .ur-kpi-primary .ur-kpi-value { font-size: 32px; }
  .usage-reports .ur-kpi-foot { font-size: var(--ur-fs-xs); color: var(--ur-muted); }
  .usage-reports .ur-spark { width: 100%; height: 32px; display: block; }
  .usage-reports .ur-spark-line { fill: none; stroke: var(--ur-cat-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .usage-reports .ur-spark-area { fill: rgba(107, 140, 255, .12); stroke: none; }
  .usage-reports .ur-spark-primary .ur-spark-line { stroke: var(--ur-accent); }
  .usage-reports .ur-spark-primary .ur-spark-area { fill: var(--ur-accent-fill); }
  .usage-reports .ur-spark-base { stroke: var(--ur-border); stroke-width: 1; }
  .usage-reports .ur-delta { font-size: var(--ur-fs-xs); font-weight: 600; padding: 2px var(--ur-space-2); border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
  .usage-reports .ur-tone-success { color: var(--ur-success); background: rgba(52, 199, 120, .12); }
  .usage-reports .ur-tone-danger { color: var(--ur-danger); background: rgba(var(--danger-rgb), .12); }
  .usage-reports .ur-tone-warning { color: var(--ur-warning); background: rgba(var(--warn-rgb), .14); }
  .usage-reports .ur-tone-neutral { color: var(--ur-neutral); background: var(--ur-surface-2); border-color: var(--ur-border); }
  .usage-reports .ur-secondary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ur-space-4); margin: var(--ur-space-4) 0; }
  .usage-reports .ur-kpi-sm { padding: var(--ur-space-3) var(--ur-space-4); margin-bottom: 0; box-shadow: none; }
  .usage-reports .ur-kpi-sm-value { font-size: var(--ur-fs-lg); font-weight: 600; margin-top: var(--ur-space-1); color: var(--ur-text); }

  /* chart cards */
  .usage-reports .ur-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--ur-space-3); flex-wrap: wrap; margin-bottom: var(--ur-space-3); }
  .usage-reports .ur-card-total { font-size: var(--ur-fs-md); font-weight: 600; color: var(--ur-text); margin-top: var(--ur-space-1); }
  .usage-reports .ur-segmented { display: inline-flex; border: 1px solid var(--ur-border); border-radius: var(--ur-radius-sm); overflow: hidden; }
  .usage-reports .ur-segmented button { background: transparent; color: var(--ur-muted); border: 0; border-radius: 0; padding: 6px var(--ur-space-4); font-size: var(--ur-fs-sm); box-shadow: none; cursor: pointer; }
  .usage-reports .ur-segmented button + button { border-left: 1px solid var(--ur-border); }
  .usage-reports .ur-segmented button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .16); color: var(--ur-accent); font-weight: 600; }
  .usage-reports .ur-chart { position: relative; }
  .usage-reports .ur-chart-lg { height: 300px; }
  .usage-reports .ur-chart-md { height: 280px; }
  .usage-reports .ur-chart-donut { height: 200px; }
  .usage-reports .ur-chart.ur-is-empty canvas, .usage-reports .ur-chart.ur-is-loading canvas { visibility: hidden; }
  .usage-reports .ur-chart.ur-is-empty::after { content: attr(data-empty-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ur-muted); font-size: var(--ur-fs-md); border: 1px dashed var(--ur-border); border-radius: var(--ur-radius-sm); }
  .usage-reports .ur-chart.ur-is-loading::after { content: ""; position: absolute; inset: 0; border-radius: var(--ur-radius-sm); background: var(--ur-surface-2); animation: ur-pulse 1.2s ease-in-out infinite; }
  .usage-reports .ur-two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--ur-space-4); }
  .usage-reports .ur-legend { list-style: none; margin: var(--ur-space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ur-space-2); }
  .usage-reports .ur-legend li { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--ur-space-2); align-items: center; font-size: var(--ur-fs-sm); color: var(--ur-text); }
  .usage-reports .ur-legend-value { font-weight: 600; }
  .usage-reports .ur-legend-pct { color: var(--ur-muted); min-width: 48px; text-align: right; }
  .usage-reports .ur-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--ur-space-2); vertical-align: -1px; }

  /* breakdown tabs + table */
  .usage-reports .ur-tabs { display: flex; gap: var(--ur-space-1); border-bottom: 1px solid var(--ur-border); }
  .usage-reports .ur-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: var(--ur-space-2) var(--ur-space-3); color: var(--ur-muted); font-size: var(--ur-fs-md); cursor: pointer; box-shadow: none; margin-bottom: -1px; }
  .usage-reports .ur-tabs button[aria-selected="true"] { color: var(--ur-text); border-bottom-color: var(--ur-accent); font-weight: 600; }
  .usage-reports .ur-table-wrap { overflow-x: auto; }
  .usage-reports .ur-table { width: 100%; border-collapse: collapse; font-size: var(--ur-fs-sm); }
  .usage-reports .ur-table th { text-align: left; padding: var(--ur-space-2) var(--ur-space-3); border-bottom: 1px solid var(--ur-border); }
  .usage-reports .ur-table th button { background: none; border: 0; padding: 0; color: var(--ur-muted); font-size: var(--ur-fs-xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; box-shadow: none; }
  .usage-reports .ur-table td { padding: var(--ur-space-2) var(--ur-space-3); border-bottom: 1px solid var(--ur-border); color: var(--ur-text); white-space: nowrap; }
  .usage-reports .ur-num { text-align: right; }
  .usage-reports .ur-table th.ur-num button { width: 100%; text-align: right; }
  .usage-reports .ur-share-col { width: 220px; }
  .usage-reports .ur-share { display: flex; align-items: center; gap: var(--ur-space-2); }
  .usage-reports .ur-share-bar { flex: 1; height: 6px; background: var(--ur-surface-2); border-radius: 999px; overflow: hidden; min-width: 60px; }
  .usage-reports .ur-share-bar span { display: block; height: 100%; background: var(--ur-accent); border-radius: 999px; }
  .usage-reports .ur-share .ur-num { min-width: 48px; }
  .usage-reports .ur-empty-row { text-align: center; color: var(--ur-muted); padding: var(--ur-space-6); }

  /* loading / error */
  .usage-reports .ur-skel { background: var(--ur-surface-2); border-radius: 6px; animation: ur-pulse 1.2s ease-in-out infinite; }
  .usage-reports .ur-skel-sm { height: 12px; width: 40%; }
  .usage-reports .ur-skel-md { height: 22px; width: 60%; margin-top: var(--ur-space-2); }
  .usage-reports .ur-skel-lg { height: 32px; width: 70%; }
  .usage-reports .ur-skel-spark { height: 32px; width: 100%; }
  .usage-reports .ur-skel-row { height: 14px; width: 100%; }
  .usage-reports .ur-error[hidden] { display: none; }
  .usage-reports .ur-error { display: flex; justify-content: space-between; align-items: center; gap: var(--ur-space-3); border-color: rgba(var(--danger-rgb), .5); color: var(--ur-danger); }
  @keyframes ur-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .usage-reports .ur-skel, .usage-reports .ur-chart.ur-is-loading::after { animation: none; } }

  /* responsive: 1280 / 1024 / 640 */
  @media (max-width: 1280px) {
    .usage-reports .ur-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (max-width: 1024px) {
    .usage-reports .ur-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usage-reports .ur-hero, .usage-reports .ur-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usage-reports .ur-two-col { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .usage-reports .ur-filter-grid, .usage-reports .ur-hero, .usage-reports .ur-secondary { grid-template-columns: minmax(0, 1fr); }
    .usage-reports .ur-filters { position: static; }
    .usage-reports .ur-card { padding: var(--ur-space-4); }
    .usage-reports .ur-share-col { width: 140px; }
  }