/* Lotus dashboard UI kit (ui-kit.css)
 * ----------------------------------------------------------------------
 * Shared design system for the embedded /dashboard. Spec, rationale and
 * component APIs: doc/dashboard-ui-kit.md. JavaScript side: js/ui-kit.js
 * (window.UI). Served from /dashboard/assets/ui/ui-kit.css, embedded in the
 * binary at build time. No external asset: works offline.
 *
 * Sections
 *   1. Tokens (dark default, light opt-in)     5. Tables
 *   2. Base, layout grid, breakpoints, TV      6. Tags, stat tiles, amounts
 *   3. Top bar and priority+ navigation        7. Spinner, skeleton, states
 *   4. Controls (buttons, segmented, pager)    8. Charts
 *   9. Bridge: legacy dashboard.css selectors mapped onto the kit. Delete a
 *      rule here once every page that needed it uses the component.
 *
 * Breakpoints (min-width): sm 480 | md 768 | lg 1024 | xl 1366 | 2xl 1920
 *   | 3xl 2560 | tv 3200. CSS custom properties cannot be used inside
 *   @media, so the numbers are repeated; keep them in sync with UI.bp.
 */

/* 1. TOKENS ------------------------------------------------------------ */
:root{
  color-scheme:dark;
  /* Surfaces: a blue-violet night, not neutral black. */
  --ui-bg:#0d0f16;
  --ui-surface:#151822;
  --ui-surface-2:#1b1f2c;        /* hover, raised, table stripe */
  --ui-surface-3:#232838;        /* pressed, skeleton base */
  --ui-line:#252a3a;
  --ui-line-strong:#343a4f;
  /* Ink */
  --ui-ink:#e7e8ef;              /* 14.5:1 on surface */
  --ui-ink-2:#aab0c2;            /* 8.2:1 */
  --ui-ink-3:#8a90a6;            /* 5.6:1, muted labels, axis text */
  /* Brand: lotus petal pink. Spent in few places: active nav, primary
     button, focus ring, first chart series, the logo. */
  --ui-brand:#f06fad;
  --ui-brand-strong:#ff8cc3;
  --ui-brand-ink:#2a0a1a;        /* text on a brand fill, 6.5:1 */
  --ui-brand-soft:rgba(240,111,173,.14);
  --ui-link:#8ab4ff;             /* 8.5:1; links stay calm blue */
  /* Tones (tags, notices, status). Never used as chart series. */
  --ui-info:#8ab4ff;  --ui-info-soft:rgba(138,180,255,.13);
  --ui-good:#3ccf91;  --ui-good-soft:rgba(60,207,145,.13);
  --ui-warn:#f2b84b;  --ui-warn-soft:rgba(242,184,75,.14);
  --ui-bad:#f47b7b;   --ui-bad-soft:rgba(244,123,123,.14);
  --ui-neutral-soft:rgba(170,176,194,.10);
  /* Chart series: fixed order, validated (dataviz validate_palette.js,
     dark surface #151822): all 8 slots pass lightness band, chroma and
     3:1 contrast; adjacent CVD >= 8.4 for slots 1-7 (7-8 green/red 7.1,
     legal only with the legend + direct label already required); first 3
     slots pass all-pairs (scatter-type charts: max 3 series). */
  --ui-series-1:#d55181; --ui-series-2:#3987e5; --ui-series-3:#c98500;
  --ui-series-4:#199e70; --ui-series-5:#d95926; --ui-series-6:#9085e9;
  --ui-series-7:#0ca30c; --ui-series-8:#e66767;
  --ui-grid:#232838;             /* chart gridline hairline */
  --ui-axis:#343a4f;             /* chart baseline */
  /* Type: system faces only (offline, no font download). */
  --ui-font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,sans-serif;
  --ui-mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  /* Type scale in rem (1rem = the fluid root size set on html). Ratio
     ~1.125 (major second), so dense tables stay dense. */
  --ui-fs-xs:.75rem;   /* 10.5px at 14 */
  --ui-fs-sm:.857rem;  /* 12px */
  --ui-fs-md:1rem;     /* 14px: body, table cells */
  --ui-fs-lg:1.143rem; /* 16px: card titles */
  --ui-fs-xl:1.429rem; /* 20px: stat values, page titles */
  --ui-fs-2xl:2rem;    /* 28px: the one hero figure per view */
  --ui-lh:1.45;
  /* Space scale (4px grid at 14px root). */
  --ui-s1:.286rem; --ui-s2:.571rem; --ui-s3:.857rem; --ui-s4:1.143rem;
  --ui-s5:1.714rem; --ui-s6:2.286rem;
  /* Radii by hierarchy, not one radius everywhere. */
  --ui-r-xs:4px;   /* tags, skeleton bars */
  --ui-r-sm:6px;   /* buttons, inputs */
  --ui-r-md:10px;  /* cards */
  --ui-r-pill:999px;
  /* Shadows: only floating layers get one. */
  --ui-shadow-pop:0 10px 30px rgba(0,0,0,.45),0 0 0 1px var(--ui-line-strong);
  /* Sizes */
  --ui-row-h:2.571rem;           /* 36px table row */
  --ui-tag-h:1.429rem;           /* 20px tag */
  --ui-control-h:2.286rem;       /* 32px buttons on fine pointers */
  --ui-touch:44px;               /* coarse pointer minimum */
  --ui-topbar-h:3.714rem;        /* 52px */
  --ui-content-max:1240px;
  --ui-gutter:var(--ui-s4);
  --ui-focus:0 0 0 2px var(--ui-bg),0 0 0 4px var(--ui-brand);
  --ui-ease:cubic-bezier(.2,.7,.2,1);
}
/* Light theme: opt-in for now (data-theme="light"), or automatic with
   data-theme-auto on <html> once every page uses tokens only. */
:root[data-theme="light"]{
  color-scheme:light;
  --ui-bg:#f6f5f8; --ui-surface:#ffffff; --ui-surface-2:#f2f1f6; --ui-surface-3:#e8e6ee;
  --ui-line:#e4e2ea; --ui-line-strong:#d0cdd9;
  --ui-ink:#1a1b25; --ui-ink-2:#4a4d5e; --ui-ink-3:#6b6f80;
  --ui-brand:#c0267a; --ui-brand-strong:#a01e65; --ui-brand-ink:#ffffff;
  --ui-brand-soft:rgba(192,38,122,.10); --ui-link:#1f5fbf;
  --ui-info:#1f5fbf; --ui-info-soft:rgba(31,95,191,.09);
  --ui-good:#0b7d43; --ui-good-soft:rgba(11,125,67,.10);
  --ui-warn:#9a6200; --ui-warn-soft:rgba(201,133,0,.13);
  --ui-bad:#c2312f;  --ui-bad-soft:rgba(194,49,47,.10);
  --ui-neutral-soft:rgba(74,77,94,.08);
  --ui-series-1:#c93d82; --ui-series-2:#2a78d6; --ui-series-3:#c98500;
  --ui-series-4:#1baf7a; --ui-series-5:#eb6834; --ui-series-6:#6250d6;
  --ui-series-7:#008300; --ui-series-8:#e34948;
  --ui-grid:#ecebf0; --ui-axis:#d0cdd9;
  --ui-shadow-pop:0 10px 30px rgba(26,27,37,.14),0 0 0 1px var(--ui-line);
  --ui-scroll-shadow:rgba(26,27,37,.16);
}
@media (prefers-color-scheme:light){
  :root[data-theme-auto]:not([data-theme="dark"]){
    color-scheme:light;
    --ui-bg:#f6f5f8; --ui-surface:#ffffff; --ui-surface-2:#f2f1f6; --ui-surface-3:#e8e6ee;
    --ui-line:#e4e2ea; --ui-line-strong:#d0cdd9;
    --ui-ink:#1a1b25; --ui-ink-2:#4a4d5e; --ui-ink-3:#6b6f80;
    --ui-brand:#c0267a; --ui-brand-strong:#a01e65; --ui-brand-ink:#ffffff;
    --ui-brand-soft:rgba(192,38,122,.10); --ui-link:#1f5fbf;
    --ui-info:#1f5fbf; --ui-info-soft:rgba(31,95,191,.09);
    --ui-good:#0b7d43; --ui-good-soft:rgba(11,125,67,.10);
    --ui-warn:#9a6200; --ui-warn-soft:rgba(201,133,0,.13);
    --ui-bad:#c2312f;  --ui-bad-soft:rgba(194,49,47,.10);
    --ui-neutral-soft:rgba(74,77,94,.08);
    --ui-series-1:#c93d82; --ui-series-2:#2a78d6; --ui-series-3:#c98500;
    --ui-series-4:#1baf7a; --ui-series-5:#eb6834; --ui-series-6:#6250d6;
    --ui-series-7:#008300; --ui-series-8:#e34948;
    --ui-grid:#ecebf0; --ui-axis:#d0cdd9;
    --ui-shadow-pop:0 10px 30px rgba(26,27,37,.14),0 0 0 1px var(--ui-line);
  --ui-scroll-shadow:rgba(26,27,37,.16);
  }
}
@media (pointer:coarse){:root{--ui-row-h:2.857rem;--ui-control-h:var(--ui-touch)}}

/* 2. BASE, LAYOUT, BREAKPOINTS ----------------------------------------- */
/* Fluid root: 14px from phones to laptops, then grows with the screen so
   a 2560 monitor reads at ~16px. The TV step (>=3200) adds zoom so the
   legacy px-based rules scale with the rem-based kit. */
*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(14px,calc(10.4px + .26vw),17px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (min-width:3200px){html{zoom:1.5}}
body{background:var(--ui-bg);color:var(--ui-ink);font-family:var(--ui-font);font-size:var(--ui-fs-md);line-height:var(--ui-lh)}
:focus-visible{outline:none;box-shadow:var(--ui-focus);border-radius:var(--ui-r-xs)}
.ui-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ui-mono{font-family:var(--ui-mono);font-size:.93em}
.ui-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ui-nowrap{white-space:nowrap}
.ui-clip{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-muted{color:var(--ui-ink-3)}

/* Page container: fluid width with a reading cap that grows per step. */
.ui-container,.main{width:100%;max-width:var(--ui-content-max);margin-inline:auto;padding:var(--ui-s4) var(--ui-gutter)}
@media (max-width:479px){:root{--ui-gutter:var(--ui-s3)}}
@media (min-width:1366px){:root{--ui-content-max:1320px}}
@media (min-width:1920px){:root{--ui-content-max:1640px;--ui-gutter:var(--ui-s5)}}
@media (min-width:2560px){:root{--ui-content-max:1880px}}
@media (min-width:3200px){:root{--ui-content-max:2000px}}

/* Auto grid: as many columns of at least --min as fit. */
.ui-grid{display:grid;gap:var(--ui-s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,280px)),1fr))}
.ui-grid--stats{--min:150px;gap:var(--ui-s3)}
.ui-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
@media (min-width:1920px){.ui-grid--wide-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ui-card{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-md);padding:var(--ui-s4);min-width:0}
.ui-card-head{display:flex;align-items:center;gap:var(--ui-s2);flex-wrap:wrap;margin-bottom:var(--ui-s3)}
.ui-card-title{font-size:var(--ui-fs-lg);font-weight:650;letter-spacing:-.01em;margin:0}
.ui-card-head .ui-card-aside{margin-left:auto;color:var(--ui-ink-3);font-size:var(--ui-fs-sm);white-space:nowrap}

/* 3. TOP BAR AND PRIORITY+ NAVIGATION ---------------------------------- */
.ui-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:var(--ui-s3);
  height:var(--ui-topbar-h);padding:0 var(--ui-gutter);background:color-mix(in srgb,var(--ui-bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--ui-line);max-width:100vw}
.ui-brand{display:inline-flex;align-items:center;gap:.5em;flex:0 0 auto;color:var(--ui-ink);font-weight:700;font-size:var(--ui-fs-lg);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.ui-brand:hover{text-decoration:none}
.ui-brand svg{width:1.6em;height:1.6em;display:block}
.ui-brand .ui-brand-petal{fill:var(--ui-brand)}
.ui-brand .ui-brand-heart{fill:var(--ui-warn)}
.ui-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden;margin:0}
/* The nav never wraps and never scrolls: ui-kit.js moves the items that do
   not fit into the More menu (priority+). Without JS it scrolls. */
.ui-nav:not(.is-fitted){overflow-x:auto;scrollbar-width:none}
.ui-nav .nav-link,.ui-nav-item{position:relative;display:inline-flex;align-items:center;height:var(--ui-control-h);padding:0 .8em;border-radius:var(--ui-r-sm);
  color:var(--ui-ink-2);font-size:var(--ui-fs-md);font-weight:550;white-space:nowrap;text-decoration:none;flex:0 0 auto;cursor:pointer;background:none}
.ui-nav .nav-link:hover{color:var(--ui-ink);background:var(--ui-surface-2);text-decoration:none}
.ui-nav .nav-link.active,.ui-nav .nav-link[aria-current="page"]{color:var(--ui-ink);background:transparent;font-weight:650}
/* The active marker: a short petal-pink bar under the label. */
.ui-nav .nav-link.active::after{content:"";position:absolute;left:.8em;right:.8em;bottom:-.55rem;height:3px;border-radius:3px 3px 0 0;background:var(--ui-brand)}
.ui-nav-more{position:relative;flex:0 0 auto}
.ui-nav-more[hidden]{display:none}
.ui-nav-more-btn{display:inline-flex;align-items:center;gap:.45em;height:var(--ui-control-h);padding:0 .8em;border:1px solid var(--ui-line);border-radius:var(--ui-r-sm);
  background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-weight:550;cursor:pointer;white-space:nowrap}
.ui-nav-more-btn:hover{background:var(--ui-surface-2)}
.ui-nav-more-btn .ui-chev{width:.7em;height:.7em;transition:transform .15s var(--ui-ease)}
.ui-nav-more-btn[aria-expanded="true"] .ui-chev{transform:rotate(180deg)}
.ui-nav-more-btn.has-active{border-color:var(--ui-brand);box-shadow:inset 0 -3px 0 var(--ui-brand)}
.ui-nav-more-btn .ui-nav-current{color:var(--ui-ink-3);font-weight:500}
.ui-nav-menu{position:fixed;top:calc(var(--ui-topbar-h) - 4px);right:var(--ui-gutter);min-width:220px;max-width:calc(100vw - 2 * var(--ui-gutter));
  max-height:calc(100vh - var(--ui-topbar-h) - 16px);overflow:auto;padding:6px;background:var(--ui-surface);border-radius:var(--ui-r-md);box-shadow:var(--ui-shadow-pop);z-index:120;
  display:grid;gap:2px}
.ui-nav-menu[hidden]{display:none}
.ui-nav-menu .nav-link{display:flex;height:var(--ui-touch);padding:0 .9em;border-radius:var(--ui-r-sm);width:100%}
.ui-nav-menu .nav-link.active{background:var(--ui-brand-soft);color:var(--ui-ink)}
.ui-nav-menu .nav-link.active::after{left:0;right:auto;top:10px;bottom:10px;width:3px;height:auto;border-radius:0 3px 3px 0}
/* Phones: the menu becomes a full-width sheet with two columns. */
@media (max-width:599px){
  .ui-nav-menu{left:var(--ui-gutter);right:var(--ui-gutter);min-width:0;grid-template-columns:1fr 1fr}
}
.ui-status-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45em;height:1.7rem;padding:0 .7em;border-radius:var(--ui-r-pill);
  border:1px solid var(--ui-line);background:var(--ui-surface);font-size:var(--ui-fs-sm);color:var(--ui-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 4. CONTROLS ------------------------------------------------------------ */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:var(--ui-control-h);padding:0 1em;border-radius:var(--ui-r-sm);
  border:1px solid var(--ui-line-strong);background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-weight:550;cursor:pointer;white-space:nowrap;text-decoration:none}
.ui-btn:hover{background:var(--ui-surface-2);text-decoration:none}
.ui-btn--primary{background:var(--ui-brand);border-color:var(--ui-brand);color:var(--ui-brand-ink)}
.ui-btn--primary:hover{background:var(--ui-brand-strong)}
.ui-btn--ghost{border-color:transparent;background:transparent}
.ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* Segmented control (sub-tabs, chart periods): one row, scrolls when it
   cannot fit, never wraps. */
.ui-seg{display:flex;gap:2px;padding:3px;border-radius:calc(var(--ui-r-sm) + 3px);background:var(--ui-surface-2);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ui-seg>*{display:inline-flex;align-items:center;min-height:calc(var(--ui-control-h) - 6px);padding:0 .9em;border-radius:var(--ui-r-sm);border:0;background:transparent;
  color:var(--ui-ink-2);font:inherit;font-size:var(--ui-fs-sm);font-weight:550;white-space:nowrap;cursor:pointer}
.ui-seg>*:hover{color:var(--ui-ink)}
.ui-seg>.active,.ui-seg>[aria-selected="true"],.ui-seg>[aria-pressed="true"]{background:var(--ui-surface);color:var(--ui-ink);box-shadow:0 1px 0 var(--ui-line-strong),inset 0 -2px 0 var(--ui-brand)}
@media (pointer:coarse){.ui-seg>*{min-height:var(--ui-touch)}}
.ui-input,.ui-select{min-height:var(--ui-control-h);padding:0 .7em;border-radius:var(--ui-r-sm);border:1px solid var(--ui-line-strong);background:var(--ui-bg);color:var(--ui-ink);font:inherit;font-size:var(--ui-fs-sm)}
.ui-input:focus,.ui-select:focus{border-color:var(--ui-brand);outline:none;box-shadow:0 0 0 3px var(--ui-brand-soft)}
/* Pager: [prev] Page 3 of 2,025 [next] on one line at every width. */
.ui-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-s3);margin-top:var(--ui-s3);font-size:var(--ui-fs-sm);color:var(--ui-ink-3);white-space:nowrap;flex-wrap:nowrap;min-width:0}
.ui-pager-info{overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums}
.ui-pager-btns{display:flex;gap:4px;flex:0 0 auto}
.ui-pager .ui-btn{min-width:var(--ui-control-h);padding:0 .7em}
.ui-pager .ui-btn[aria-current="page"]{background:var(--ui-brand-soft);border-color:var(--ui-brand);color:var(--ui-ink)}
@media (max-width:599px){.ui-pager .ui-pager-num{display:none}}

/* 5. TABLES -------------------------------------------------------------- */
/* Scroll wrapper. Edge shadows appear only where more columns hide
   (background-attachment:local trick, no JS). */
.ui-table-wrap{position:relative;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%;
  background:
    linear-gradient(to right,var(--ui-surface) 30%,transparent) left/40px 100% no-repeat local,
    linear-gradient(to left,var(--ui-surface) 30%,transparent) right/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--ui-scroll-shadow,rgba(0,0,0,.45)),transparent) left/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--ui-scroll-shadow,rgba(0,0,0,.45)),transparent) right/12px 100% no-repeat scroll;
  scrollbar-width:thin;scrollbar-color:var(--ui-line-strong) transparent}
/* Long tables scroll inside a bounded box so the sticky header works. */
.ui-table-wrap.is-tall{max-height:min(72vh,calc(var(--ui-row-h) * 26));overflow-y:auto}
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ui-fs-md);font-variant-numeric:tabular-nums}
.ui-table caption{caption-side:bottom;text-align:left;padding-top:var(--ui-s2);font-size:var(--ui-fs-sm);color:var(--ui-ink-3)}
.ui-table th,.ui-table td{height:var(--ui-row-h);padding:0 var(--ui-s3);white-space:nowrap;vertical-align:middle;border-bottom:1px solid var(--ui-line);text-align:left}
.ui-table th:first-child,.ui-table td:first-child{padding-left:var(--ui-s2)}
.ui-table th:last-child,.ui-table td:last-child{padding-right:var(--ui-s2)}
.ui-table thead th{position:sticky;top:0;z-index:1;background:var(--ui-surface);color:var(--ui-ink-3);font-size:var(--ui-fs-sm);font-weight:600;
  letter-spacing:0;text-transform:none;border-bottom:1px solid var(--ui-line-strong);height:calc(var(--ui-row-h) - 4px)}
.ui-table tbody tr:hover>td{background:var(--ui-surface-2)}
.ui-table tbody tr:last-child>td{border-bottom:0}
.ui-table .is-num{text-align:right}
.ui-table .is-center{text-align:center}
.ui-table td.is-hash,.ui-table td .ui-hash{font-family:var(--ui-mono);font-size:.93em}
/* Truncating cell: width-capped, ellipsis, full value in title. */
.ui-table td.is-clip{max-width:var(--clip,16rem);overflow:hidden;text-overflow:ellipsis}
.ui-table td.is-wrap{white-space:normal;line-height:1.35;min-width:14rem}
.ui-table td a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ui-table--dense{--ui-row-h:2.143rem}
/* Sortable header: the whole header is a button. */
.ui-th-btn{display:inline-flex;align-items:center;gap:.35em;margin:0 -.35em;padding:.2em .35em;border:0;border-radius:var(--ui-r-xs);background:none;color:inherit;font:inherit;
  cursor:pointer;white-space:nowrap}
.is-num>.ui-th-btn{flex-direction:row-reverse}
.ui-th-btn:hover{color:var(--ui-ink)}
.ui-sort-ico{width:.75em;height:.75em;flex:0 0 auto;opacity:.35}
th[aria-sort="ascending"] .ui-sort-ico,th[aria-sort="descending"] .ui-sort-ico{opacity:1;color:var(--ui-brand)}
th[aria-sort="descending"] .ui-sort-ico{transform:scaleY(-1)}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:var(--ui-ink)}
/* Column priority: p2 hides below 768, p3 below 1024. */
@media (max-width:767px){.ui-table .ui-p2,.ui-table .ui-p3{display:none}}
@media (min-width:768px) and (max-width:1023px){.ui-table .ui-p3{display:none}}
/* Stacked rows on phones (opt-in: .ui-table--stack): each row becomes a
   two-column list, label from data-label. Rows keep equal height per
   field count. */
@media (max-width:599px){
  .ui-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ui-table--stack,.ui-table--stack tbody{display:block}
  .ui-table--stack tr{display:grid;grid-template-columns:minmax(6.5rem,38%) minmax(0,1fr);padding:var(--ui-s2) 0;border-bottom:1px solid var(--ui-line)}
  .ui-table--stack tbody tr:last-child{border-bottom:0}
  .ui-table--stack td{display:contents}
  .ui-table--stack td::before{content:attr(data-label);color:var(--ui-ink-3);font-size:var(--ui-fs-sm);padding:.3em 0;text-align:left}
  .ui-table--stack td>.ui-cell{display:block;padding:.3em 0;text-align:right;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .ui-table--stack td.ui-p2,.ui-table--stack td.ui-p3{display:contents}
}
.ui-cell{display:inline}

/* 6. TAGS, STAT TILES, AMOUNTS ------------------------------------------- */
/* One tag for every pill/badge: fixed height (rows stay one line),
   sentence or protocol case (no forced uppercase), tone variants. */
.ui-tag{display:inline-flex;align-items:center;gap:.3em;height:var(--ui-tag-h);padding:0 .55em;border-radius:var(--ui-r-xs);
  font-size:var(--ui-fs-xs);font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;letter-spacing:.01em;
  color:var(--ui-ink-2);background:var(--ui-neutral-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent)}
.ui-tag+.ui-tag{margin-left:4px}
.ui-tag--brand{color:var(--ui-brand);background:var(--ui-brand-soft)}
.ui-tag--info{color:var(--ui-info);background:var(--ui-info-soft)}
.ui-tag--good{color:var(--ui-good);background:var(--ui-good-soft)}
.ui-tag--warn{color:var(--ui-warn);background:var(--ui-warn-soft)}
.ui-tag--bad{color:var(--ui-bad);background:var(--ui-bad-soft)}
.ui-tag--mono{font-family:var(--ui-mono);font-weight:500}
.ui-tag .ui-dot{width:.5em;height:.5em;border-radius:50%;background:currentColor}
/* Stat tile: label, value, optional sub line. Left aligned. */
.ui-stat{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-md);padding:var(--ui-s3) var(--ui-s4);min-width:0}
.ui-stat-label{font-size:var(--ui-fs-sm);color:var(--ui-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-stat-value{margin-top:2px;font-size:var(--ui-fs-xl);font-weight:650;letter-spacing:-.01em;color:var(--ui-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.ui-stat-value .ui-unit{font-size:.6em;font-weight:550;color:var(--ui-ink-3);margin-left:.25em;letter-spacing:0}
.ui-stat-sub{margin-top:2px;font-size:var(--ui-fs-sm);color:var(--ui-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-stat--good .ui-stat-value{color:var(--ui-good)}
.ui-stat--warn .ui-stat-value{color:var(--ui-warn)}
.ui-stat--bad .ui-stat-value{color:var(--ui-bad)}
/* XPI and token amounts: integer part in ink, decimals quieter, unit
   muted. Columns align on the decimal point because every XPI amount has
   exactly 6 decimals and the cell is right aligned in tabular figures. */
.ui-amt{white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-amt .ui-amt-f{color:var(--ui-ink-3)}
.ui-amt .ui-unit{color:var(--ui-ink-3);font-size:.86em;margin-left:.3em}
.ui-amt--pos .ui-amt-i{color:var(--ui-good)}
.ui-amt--neg .ui-amt-i{color:var(--ui-bad)}
.ui-hash{font-family:var(--ui-mono);font-size:.93em;white-space:nowrap}

/* 7. SPINNER, SKELETON, STATES ------------------------------------------- */
.ui-spinner{display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--ui-ink-3) 35%,transparent);border-top-color:var(--ui-brand);animation:ui-spin .75s linear infinite}
.ui-spinner-label{margin-left:.5em}
.ui-spinner--sm{width:.9em;height:.9em;border-width:2px}
.ui-spinner--lg{width:2.2em;height:2.2em;border-width:3px}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-skel{display:block;height:.85em;border-radius:var(--ui-r-xs);background:var(--ui-surface-3);position:relative;overflow:hidden}
.ui-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ui-ink) 7%,transparent),transparent);animation:ui-shimmer 1.4s ease-in-out infinite}
@keyframes ui-shimmer{to{transform:translateX(100%)}}
.ui-skel-table td,.ui-skel-table th{border-bottom:1px solid var(--ui-line)}
.ui-skel-table .ui-skel{width:var(--w,70%)}
.ui-skel-table td.is-num .ui-skel{margin-left:auto}
.ui-skel-stat{display:grid;gap:.55em}
.ui-skel-stat .ui-skel:first-child{width:45%;height:.75em}
.ui-skel-stat .ui-skel:last-child{width:70%;height:1.3em}
.ui-skel-lines{display:grid;gap:.7em;padding:var(--ui-s2) 0}
.ui-skel-chart{height:var(--h,220px);border-radius:var(--ui-r-sm);background:
  repeating-linear-gradient(to bottom,transparent 0 calc(25% - 1px),var(--ui-grid) calc(25% - 1px) 25%)}
@media (prefers-reduced-motion:reduce){
  .ui-spinner{animation:ui-breathe 2s ease-in-out infinite;border-top-color:color-mix(in srgb,var(--ui-ink-3) 35%,transparent);background:radial-gradient(circle,var(--ui-brand) 30%,transparent 32%)}
  .ui-skel::after{animation:none;display:none}
  .ui-nav-more-btn .ui-chev{transition:none}
}
@keyframes ui-breathe{50%{opacity:.4}}
/* Loading, empty, error blocks. Same box so states swap without a jump. */
.ui-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-s2);min-height:var(--min-h,8rem);padding:var(--ui-s5) var(--ui-s4);text-align:center;color:var(--ui-ink-2)}
.ui-state-title{font-weight:600;color:var(--ui-ink);font-size:var(--ui-fs-md)}
.ui-state-hint{font-size:var(--ui-fs-sm);color:var(--ui-ink-3);max-width:46ch}
.ui-state-icon{width:2rem;height:2rem;color:var(--ui-ink-3)}
.ui-state--error .ui-state-icon{color:var(--ui-bad)}
.ui-state--inline{flex-direction:row;min-height:0;padding:var(--ui-s3);justify-content:flex-start;text-align:left}
/* Refetch keeps the frame: the old content stays, dimmed, with a spinner
   in the corner, no layout jump. */
[aria-busy="true"].ui-refreshing{position:relative}
[aria-busy="true"].ui-refreshing>*:not(.ui-busy-badge){opacity:.55;transition:opacity .2s}
.ui-busy-badge{position:absolute;top:var(--ui-s2);right:var(--ui-s2);z-index:2;display:inline-flex;align-items:center;gap:.4em;padding:.2em .6em;border-radius:var(--ui-r-pill);
  background:var(--ui-surface);box-shadow:var(--ui-shadow-pop);font-size:var(--ui-fs-xs);color:var(--ui-ink-2)}

/* 8. CHARTS ---------------------------------------------------------------- */
/* One chart approach for the whole dashboard: ui-kit.js renders SVG
   (UI.chart.line / columns / segbar). Color comes from the series class
   (--c), so a theme switch needs no re-render. */
.ui-chart{position:relative;width:100%;min-width:0;color:var(--ui-ink-3)}
.ui-chart svg{display:block;width:100%;overflow:visible;font-family:var(--ui-font);font-size:var(--ui-fs-sm)}
.ui-chart svg:focus-visible{box-shadow:var(--ui-focus)}
.ui-chart .ui-c-grid{stroke:var(--ui-grid);stroke-width:1;shape-rendering:crispEdges}
.ui-chart .ui-c-axis{stroke:var(--ui-axis);stroke-width:1;shape-rendering:crispEdges}
.ui-chart .ui-c-tick{fill:var(--ui-ink-3);font-variant-numeric:tabular-nums}
.ui-chart .ui-c-line{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ui-chart .ui-c-area{fill:var(--c);opacity:.1;stroke:none}
.ui-chart .ui-c-bar{fill:var(--c)}
.ui-chart .ui-c-bar.is-hot{filter:brightness(1.25)}
.ui-chart .ui-c-dot{fill:var(--c);stroke:var(--ui-surface);stroke-width:2}
.ui-chart .ui-c-cross{stroke:var(--ui-ink-3);stroke-width:1;shape-rendering:crispEdges}
.ui-chart .ui-c-hit{fill:transparent;cursor:crosshair}
.ui-chart .ui-c-seg{fill:var(--c)}
.ui-chart .ui-c-seg-label{font-size:var(--ui-fs-xs);font-weight:600;pointer-events:none}
.ui-s1{--c:var(--ui-series-1)} .ui-s2{--c:var(--ui-series-2)} .ui-s3{--c:var(--ui-series-3)} .ui-s4{--c:var(--ui-series-4)}
.ui-s5{--c:var(--ui-series-5)} .ui-s6{--c:var(--ui-series-6)} .ui-s7{--c:var(--ui-series-7)} .ui-s8{--c:var(--ui-series-8)}
.ui-s-other{--c:var(--ui-ink-3)}
.ui-chart-legend{display:flex;flex-wrap:wrap;gap:.3em 1.1em;margin:0 0 var(--ui-s2);padding:0;list-style:none;font-size:var(--ui-fs-sm);color:var(--ui-ink-2)}
.ui-chart-legend li{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.ui-chart-legend .ui-key{width:.9em;height:2px;border-radius:2px;background:var(--c)}
.ui-chart-legend .ui-key--box{height:.7em;width:.7em;border-radius:2px}
.ui-chart-legend .ui-legend-v{color:var(--ui-ink);font-variant-numeric:tabular-nums;margin-left:.2em}
.ui-chart-tip{position:absolute;z-index:5;pointer-events:none;min-width:8rem;padding:.5em .7em;border-radius:var(--ui-r-sm);background:var(--ui-surface);box-shadow:var(--ui-shadow-pop);
  font-size:var(--ui-fs-sm);color:var(--ui-ink-2);white-space:nowrap}
.ui-chart-tip[hidden]{display:none}
.ui-chart-tip .ui-tip-x{color:var(--ui-ink-3);margin-bottom:.25em}
.ui-chart-tip .ui-tip-row{display:flex;align-items:center;gap:.5em}
.ui-chart-tip .ui-tip-v{color:var(--ui-ink);font-weight:650;font-variant-numeric:tabular-nums}
.ui-chart-tip .ui-key{width:.9em;height:2px;border-radius:2px;background:var(--c)}
.ui-chart-data{margin-top:var(--ui-s2);font-size:var(--ui-fs-sm)}
.ui-chart-data>summary{cursor:pointer;color:var(--ui-ink-3);width:max-content}
.ui-chart-data .ui-table-wrap{max-height:16rem;overflow-y:auto;margin-top:var(--ui-s2)}
/* Chart height grows with the screen: 200px phone, 240 laptop, 300 2xl. */
.ui-chart{--h:200px}
@media (min-width:1024px){.ui-chart{--h:240px}}
@media (min-width:1920px){.ui-chart{--h:300px}}

/* 9. BRIDGE: legacy dashboard.css selectors ------------------------------ */
/* Legacy tokens now read the kit, so every var(--accent) etc. in
   dashboard.css, docs.css and inline styles follows the system. */
:root{--bg:var(--ui-bg);--card:var(--ui-surface);--border:var(--ui-line);--text:var(--ui-ink);--dim:var(--ui-ink-3);
  --accent:var(--ui-brand);--accent-light:var(--ui-brand-soft);--green:var(--ui-good);--orange:var(--ui-warn);--red:var(--ui-bad);
  --link:var(--ui-link);--font:var(--ui-font);--nav-bg:var(--ui-bg);--nav-border:var(--ui-line);--hover:var(--ui-surface-2);
  --table-stripe:transparent;--stat-bg:var(--ui-surface);--chart-border:var(--ui-line)}
body{font-size:var(--ui-fs-md)}
html,body{overflow-x:clip}
/* Top bar built from the legacy markup. */
.topnav.ui-topbar{height:var(--ui-topbar-h);padding:0 var(--ui-gutter);gap:var(--ui-s3);background:color-mix(in srgb,var(--ui-bg) 88%,transparent)}
.topnav .nav-links.ui-nav{margin-left:var(--ui-s2);flex-wrap:nowrap}
.topnav .nav-right{margin-left:auto;flex:0 0 auto}
@media (max-width:768px){.topnav.ui-topbar{overflow:visible}.ui-nav .nav-link{min-height:0;padding:0 .8em;font-size:var(--ui-fs-md)}}
@media (max-width:479px){.topnav .nav-right{font-size:var(--ui-fs-xs);padding:0 .55em}}
/* Search bar: one line, short placeholder, hint hidden on phones. */
.search-bar{background:transparent;border-bottom:0;padding:var(--ui-s3) var(--ui-gutter) 0}
.search-wrap{max-width:860px}
.search-wrap input{height:2.857rem;border-radius:var(--ui-r-md);background:var(--ui-surface);border-color:var(--ui-line-strong);text-overflow:ellipsis;padding-right:6.5rem}
.search-wrap input:focus{border-color:var(--ui-brand);box-shadow:0 0 0 3px var(--ui-brand-soft)}
.search-btn{height:calc(2.857rem - 10px);padding:0 1.1em;border-radius:var(--ui-r-sm);background:var(--ui-brand);color:var(--ui-brand-ink);font-weight:650;letter-spacing:.01em;text-transform:none}
.search-btn:hover{background:var(--ui-brand-strong);opacity:1}
.search-hint{max-width:860px;color:var(--ui-ink-3)}
@media (max-width:599px){.search-hint{display:none}}
/* Fluid page width (legacy .main was capped at 1200px). */
.main{max-width:var(--ui-content-max);padding:var(--ui-s4) var(--ui-gutter)}
/* Cards, headings and stat cards on the kit scale. */
.card{border-radius:var(--ui-r-md);border-color:var(--ui-line);padding:var(--ui-s4)}
.card h2{font-size:var(--ui-fs-lg);font-weight:650;letter-spacing:-.01em;border-bottom-color:var(--ui-line)}
.stat-card{text-align:left;border-radius:var(--ui-r-md);min-width:0}
.stat-card .sc-label{text-transform:none;letter-spacing:0;font-size:var(--ui-fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card .sc-value{font-size:var(--ui-fs-xl);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:normal}
thead th{text-transform:none;letter-spacing:0;font-size:var(--ui-fs-sm)}
/* Containers start as <div class="empty">Loading...</div> and keep the
   class after data replaces their content: undo the italic, dim,
   centred empty-message look as soon as they hold real content. */
.empty:has(> table,> div,> ul,> ol,> dl,> section,> svg,> canvas,> form,> nav,> details,> .ui-table-wrap){color:inherit;font-style:normal;text-align:left;padding:0}
.empty{font-style:normal}
/* Sub-tabs and chart period buttons as segmented controls. */
.sub-tabs{display:flex;gap:2px;padding:3px;border-radius:calc(var(--ui-r-sm) + 3px);background:var(--ui-surface-2);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.sub-tab{white-space:nowrap;border:0;border-radius:var(--ui-r-sm);padding:.4em .9em;color:var(--ui-ink-2)}
.sub-tab.active{background:var(--ui-surface);color:var(--ui-ink);border:0;box-shadow:0 1px 0 var(--ui-line-strong),inset 0 -2px 0 var(--ui-brand)}
.chart-period .cp-btn{white-space:nowrap}
@media (pointer:coarse){.sub-tab,.chart-period .cp-btn,.pager-btn,.back-btn{min-height:var(--ui-touch);display:inline-flex;align-items:center}}
/* Legacy pager stays on one line. */
.pager{flex-wrap:nowrap;gap:var(--ui-s3);white-space:nowrap;min-width:0}
.pager-info{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Legacy badges converge on the tag look (height, radius, case). */
.badge,.badge-empp,.badge-native,.plat-badge,.net-pill,.net-svc-tag{display:inline-flex;align-items:center;height:var(--ui-tag-h);padding:0 .55em;border-radius:var(--ui-r-xs);
  font-size:var(--ui-fs-xs);font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;text-transform:none;letter-spacing:.01em}
.badge-green{background:var(--ui-good-soft);color:var(--ui-good)}
.badge-red{background:var(--ui-bad-soft);color:var(--ui-bad)}
.badge-orphan{background:var(--ui-warn-soft);color:var(--ui-warn)}
.net-cell-svc{flex-wrap:nowrap;max-width:none}
/* Keyboard focus for the legacy click targets ui-kit.js makes focusable. */
.sub-tab:focus-visible,.pager-btn:focus-visible,.cp-btn:focus-visible,.back-btn:focus-visible,a:focus-visible,[data-ui-click]:focus-visible{box-shadow:var(--ui-focus);outline:none}
/* Legacy chart boxes grow on large screens. */
@media (min-width:1920px){.chart-wrap{height:300px}}
@media (max-width:479px){.chart-grid{grid-template-columns:1fr}}
.chart-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.richlist-layout{grid-template-columns:minmax(0,1fr) minmax(300px,420px)}
@media (max-width:1100px){.richlist-layout{grid-template-columns:minmax(0,1fr)}}
.sync-banner{margin:var(--ui-s3) var(--ui-gutter) 0;max-width:none}
/* Legacy tables: single-line cells and a uniform row height at every
   width (they scroll inside .card / .table-scroll instead of wrapping).
   Opt out per cell with class "wrap" or "is-wrap". */
.card tbody td:not(.wrap):not(.is-wrap),.card thead th{white-space:nowrap}
.card tbody td{height:var(--ui-row-h);padding-top:0;padding-bottom:0}
@media (max-width:768px){
  thead th,tbody td{padding:0 var(--ui-s2)}
  /* The row keeps its height; the link's tap area grows to almost the
     row (vertical padding, cancelled by the margin for layout). */
  tbody td a{display:inline;min-height:0;padding:.75em 0;margin:-.75em 0}
}
.pager-btns{min-width:0;overflow-x:auto;scrollbar-width:none}
.card thead th{height:calc(var(--ui-row-h) - 4px)}

/* 10. PAGE PIECES (shared by every page) --------------------------------- */
/* Label/value list (UI.kv): one row per pair, label column fixed. */
.ui-kv{display:grid;grid-template-columns:minmax(8rem,max-content) minmax(0,1fr);gap:0;margin:0}
.ui-kv-row{display:contents}
.ui-kv dt,.ui-kv dd{padding:var(--ui-s2) 0;border-bottom:1px solid var(--ui-line);min-width:0}
.ui-kv dt{color:var(--ui-ink-3);padding-right:var(--ui-s4);white-space:nowrap}
.ui-kv dd{margin:0;color:var(--ui-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ui-kv-row:last-child dt,.ui-kv-row:last-child dd{border-bottom:0}
@media (min-width:1366px){.ui-kv--cols{grid-template-columns:repeat(2,minmax(8rem,max-content) minmax(0,1fr));column-gap:var(--ui-s5)}}
.ui-pager-gap{align-self:center;color:var(--ui-ink-3);padding:0 2px}
.ui-pager-step{font-size:1.15em;line-height:1}
.ui-note{margin-top:var(--ui-s2);font-size:var(--ui-fs-sm);color:var(--ui-ink-3)}
.ui-skel-detail>*+*{margin-top:var(--ui-s4)}
/* Status pill tones (top bar: Live / Cached). */
.ui-status-pill.is-good{color:var(--ui-good)}
.ui-status-pill.is-warn{color:var(--ui-warn)}
.ui-status-pill.is-bad{color:var(--ui-bad)}
/* Detail pages: the info grid becomes stat tiles; values never wrap. */
.info-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:var(--ui-s3);background:none;border:0;border-radius:0;overflow:visible}
.info-cell{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-md);padding:var(--ui-s3) var(--ui-s4);min-width:0}
.info-cell .ic-label{text-transform:none;letter-spacing:0;font-size:var(--ui-fs-sm);color:var(--ui-ink-3);white-space:nowrap}
.info-cell .ic-value{font-size:var(--ui-fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-cell .ic-value .ui-amt{font-size:inherit}
.info-cell .ic-sub{font-size:var(--ui-fs-sm);font-weight:400;color:var(--ui-ink-3)}
.ic-value.is-good,.ic-value.is-good .ui-amt-i{color:var(--ui-good)}
.ic-value.is-warn{color:var(--ui-warn)}
.detail-header{border-color:var(--ui-line);border-radius:var(--ui-r-md)}
.detail-header .dh-value{font-family:var(--ui-mono);overflow-wrap:anywhere}
.detail-header .dh-title{display:flex;align-items:center;gap:var(--ui-s2);flex-wrap:wrap}
/* Transaction inputs/outputs. */
.io-row{align-items:center;min-height:var(--ui-row-h)}
.io-row .io-addr{font-family:var(--ui-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;min-width:0}
.io-row .io-amt{font-variant-numeric:tabular-nums}
.io-opret{color:var(--ui-ink-3);font-style:italic}
.io-burn{color:var(--ui-bad)}
/* Card header with an aside (filters, "View all"). */
.card h2 .ui-card-link,.card h2 .back-btn{float:none;margin:0 0 0 auto}
.card>h2{display:flex;align-items:center;gap:var(--ui-s2);flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.card>h2>.ui-muted{font-weight:400}
.ui-card-link{font-size:var(--ui-fs-sm);font-weight:500;color:var(--ui-link);white-space:nowrap;margin-left:auto}
/* Toolbars above tables: controls on one line, wrap only between groups. */
.ui-toolbar{display:flex;align-items:center;gap:var(--ui-s2) var(--ui-s3);flex-wrap:wrap;margin-bottom:var(--ui-s3)}
.ui-toolbar .ui-grow{flex:1 1 14rem;min-width:0;max-width:28rem}
.ui-toolbar label{display:inline-flex;align-items:center;gap:var(--ui-s2);color:var(--ui-ink-3);font-size:var(--ui-fs-sm);white-space:nowrap}
.ui-toolbar .ui-meta{margin-left:auto;font-size:var(--ui-fs-sm);color:var(--ui-ink-3);white-space:nowrap}
.ui-page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-s3);flex-wrap:wrap;margin-bottom:var(--ui-s3)}
.ui-page-head h2{border:0;padding:0;margin:0}
.ui-page-head p{margin:2px 0 0;font-size:var(--ui-fs-sm);color:var(--ui-ink-3)}
/* Two-up and hub layouts (RANK, module hubs). */
.ui-hub{display:grid;gap:var(--ui-s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));margin-top:var(--ui-s4)}
.ui-hub>.card{margin:0;min-width:0}
@media (min-width:2560px){.ui-hub--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ui-two{display:grid;gap:var(--ui-s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.ui-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ui-two>.card{margin:0;min-width:0}
/* Stat grid inside the legacy containers. */
.stat-cards.ui-grid{margin-bottom:var(--ui-s4)}
.stat-cards>.ui-stat{min-width:0}
.ui-stat-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Profile hero (RANK). */
.ui-hero{display:flex;align-items:center;gap:var(--ui-s4);min-width:0}
.ui-avatar{flex:0 0 auto;width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center;background:var(--ui-brand-soft);color:var(--ui-brand);font-size:1.6rem;font-weight:700}
.ui-hero-name{font-size:var(--ui-fs-xl);font-weight:700;color:var(--ui-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-hero-id{font-family:var(--ui-mono);font-size:var(--ui-fs-sm);color:var(--ui-ink-3);overflow-wrap:anywhere}
.ui-hero>div{min-width:0}
/* Sentiment and ratio (RANK). */
.ui-sent{white-space:nowrap;font-weight:600}
.ui-sent--pos{color:var(--ui-good)}
.ui-sent--neg{color:var(--ui-bad)}
.ui-ratio{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-ratio-bar{display:inline-block;width:3.5rem;height:6px;border-radius:3px;background:var(--ui-bad-soft);overflow:hidden;position:relative}
.ui-ratio-bar>i{position:absolute;inset:0 auto 0 0;background:var(--ui-good);border-radius:3px}
/* Profile link: platform tag + name, one line. */
.profile-link{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;vertical-align:middle}
.profile-link .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Segmented period control above charts. */
.ui-chart-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-s2);flex-wrap:wrap;margin-bottom:var(--ui-s2)}
.ui-chart-head h3{margin:0;font-size:var(--ui-fs-lg);font-weight:600;color:var(--ui-ink);white-space:nowrap}
/* Stats cards side by side share one header layout: title above the
   period buttons in a narrow card, on one line in a wide one (decided
   by the card's own width, so a grid row never mixes the two). */
.chart-box{container-type:inline-size}
.chart-box .ui-chart-head{flex-direction:column;align-items:flex-start}
@container (min-width:32rem){.chart-box .ui-chart-head{flex-direction:row;align-items:center}}
.ui-chart-sub{font-size:var(--ui-fs-sm);color:var(--ui-ink-3);margin:-4px 0 var(--ui-s2)}
.ui-prose{font-size:var(--ui-fs-md);color:var(--ui-ink-2);line-height:1.6;max-width:72ch;margin:0 0 var(--ui-s3)}
.ui-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.ui-tags .ui-tag+.ui-tag{margin:0}.is-bad{color:var(--ui-bad)}
@media (max-width:599px){.ui-table td.is-clip{max-width:min(var(--clip,16rem),42vw)}}
@media (max-width:599px){.sub-tabs{width:100%;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}}
.ui-two{margin-bottom:var(--ui-s4)}
.ui-kv dd .ui-hash{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}