/* TokenFusion Direct — the portal's stylesheet, on the owner's design system.

   The design tokens live in tokens.css (loaded first) and NOWHERE ELSE: this
   file speaks them. The short legacy names below (--ink, --line, --gold…) are
   ALIASES of those tokens, kept because some two hundred call sites across the
   templates and chat.css already say them; renaming every one to say the same
   thing would be churn, not clarity. New work uses the --tf-* names.

   --gold-* are the accent (the owner's primary blue), whatever the name says. */

:root{
  --ink:var(--tf-text-heading); --ink-body:var(--tf-text-body);
  --ink-soft:var(--tf-text-muted); --ink-faint:var(--tf-text-muted);
  --navy:var(--tf-text-heading); --navy-2:#1E293B; --navy-3:#334155;
  --gold:var(--tf-primary); --gold-lt:var(--tf-primary-hover); --gold-wash:var(--tf-primary-subtle);
  --paper:var(--tf-canvas); --card:var(--tf-panel); --line:var(--tf-divider);
  --line-soft:var(--tf-divider-soft);
  --rail-bg:var(--tf-panel); --rail-ink:var(--tf-text-body); --rail-on:var(--tf-primary-subtle);
  --rail-on-ink:var(--tf-primary-ink);
  --green:var(--tf-success-text); --green-wash:var(--tf-success-pill);
  --red:var(--tf-danger); --red-wash:var(--tf-danger-pill);
  --sans:var(--tf-font-body); --head:var(--tf-font-head); --mono:var(--tf-font-mono);
  --radius:var(--tf-radius-xl); --shadow:var(--tf-shadow-card);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:var(--tf-fs-body)/var(--tf-lh-body) var(--tf-font-body);color:var(--tf-text-body);
  background:var(--tf-canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--tf-font-head);color:var(--tf-text-heading);letter-spacing:-.01em}
h1{font-size:var(--tf-fs-h1);line-height:var(--tf-lh-h1);font-weight:var(--tf-fw-h1)}
h2{font-size:var(--tf-fs-h2);line-height:var(--tf-lh-h2);font-weight:var(--tf-fw-h2)}
h3{font-size:var(--tf-fs-h3);line-height:var(--tf-lh-h3);font-weight:var(--tf-fw-h3)}
b,strong{font-weight:700}
.mono{font-family:var(--tf-font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--tf-text-muted)}
.small{font-size:13px;line-height:18px}
.tiny{font-size:var(--tf-fs-small);line-height:var(--tf-lh-small)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* One visible focus ring for everything a keyboard can reach. */
:focus-visible{outline:2px solid var(--tf-primary);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--tf-text-heading);color:#fff;
  padding:8px 14px;border-radius:var(--tf-radius-lg);font-weight:500;text-decoration:none}
.skip:focus{top:12px}

/* ============================================================== the shell
   A 240px sidebar (logo, balance or team card, grouped nav, the user) that
   collapses to a 72px icon rail — remembered per browser by shell.js — and a
   drawer at phone width. Below 860px the page gets a slim top bar with the
   menu button. */
.shell{display:grid;grid-template-columns:var(--tf-sidebar) minmax(0,1fr);min-height:100vh;
  transition:grid-template-columns .18s ease}
.side{background:var(--tf-panel);border-right:1px solid var(--tf-divider);display:flex;
  flex-direction:column;position:sticky;top:0;height:100vh;min-width:0;z-index:40}
.side__top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:64px;padding:0 12px 0 20px;border-bottom:1px solid var(--tf-divider);flex:none}
.side__brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brandword,.side__brand b{font:600 19px/1 var(--tf-font-brand);color:var(--tf-text-heading);
  letter-spacing:-.03em;text-transform:lowercase;white-space:nowrap}
.auth__art .brandword{color:#fff}
.mark{width:30px;height:30px;flex:0 0 30px;color:var(--tf-text-heading);
  --brand-blue:var(--tf-primary);--brand-keyline:#FFFFFF}
.auth__art .mark{color:#fff;--brand-blue:#4D86FF;--brand-keyline:#0B1530}
.side__scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding:16px 16px 12px}

/* The balance card (a Team Member sees the team card instead: no money). */
.rail__wallet{padding:14px 16px 16px;border-radius:var(--tf-radius-xl);
  background:var(--tf-card-highlight);border:1px solid #DCE4FF;margin-bottom:18px}
.rail__wallet__h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rail__wallet span,.rail__team span{display:block;font:var(--tf-fw-overline) var(--tf-fs-overline)/16px var(--tf-font-head);
  letter-spacing:var(--tf-ls-overline);text-transform:uppercase;color:var(--tf-primary-ink)}
.rail__wallet b{display:block;margin-top:8px;font:700 26px/32px var(--tf-font-body);
  color:var(--tf-text-heading);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rail__wallet b{display:inline-block}
.rail__wallet .rail__cur{font:500 12px var(--tf-font-body);color:var(--tf-text-muted);margin-left:5px}
.rail__wallet em{display:block;margin-top:4px;font-style:normal;font-size:12px;line-height:16px;
  color:var(--tf-text-muted)}
.rail__wallet .btn{width:100%;margin-top:14px}
.rail__team b{display:block;margin-top:6px;font:600 16px/22px var(--tf-font-head);
  color:var(--tf-text-heading);overflow-wrap:anywhere}
.rail__team em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--tf-text-muted)}

.nav{display:flex;flex-direction:column}
.nav__h{font:var(--tf-fw-overline) var(--tf-fs-overline)/16px var(--tf-font-head);
  letter-spacing:var(--tf-ls-overline);text-transform:uppercase;color:var(--tf-text-muted);
  padding:0 12px;margin:14px 0 8px}
.nav__h:first-child{margin-top:0}
.nav a{position:relative;display:flex;align-items:center;gap:12px;padding:var(--tf-nav-pad);
  border-radius:var(--tf-radius-lg);border:1px solid transparent;margin-bottom:2px;
  color:var(--tf-text-body);text-decoration:none;
  font:var(--tf-fw-nav) var(--tf-fs-nav)/var(--tf-lh-nav) var(--tf-font-head)}
.nav a:hover{background:var(--tf-canvas);color:var(--tf-text-heading)}
.nav a.on{background:var(--tf-primary-subtle);border-color:#DCE6FF;color:var(--tf-primary-ink);font-weight:600}
.nav a.on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--tf-primary);
  margin-left:auto;flex:none}
.nav svg{width:18px;height:18px;flex:0 0 18px;color:var(--tf-text-muted)}
.nav a.on svg{color:var(--tf-primary-ink)}
.nav__l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__badge{margin-left:auto;min-width:26px;height:22px;padding:0 7px;border-radius:var(--tf-radius-full);
  background:var(--tf-divider-soft);color:var(--tf-text-body);display:inline-grid;place-items:center;
  font:500 12px/1 var(--tf-font-body);font-variant-numeric:tabular-nums}
.nav a.on .nav__badge{background:#fff}
.nav a.on:has(.nav__badge)::after{display:none}

.side__user{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;
  border-top:1px solid var(--tf-divider);background:#FBFBFE;flex:none;min-width:0}
.avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--tf-text-heading);
  color:#fff;display:grid;place-items:center;font:600 13px/1 var(--tf-font-head);letter-spacing:.02em}
.side__who{min-width:0;flex:1}
.side__who b{display:block;font:600 14px/20px var(--tf-font-head);color:var(--tf-text-heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__who em{display:block;font-style:normal;font-size:12px;line-height:16px;color:var(--tf-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__who a{color:var(--tf-primary-ink)}

/* ---- the 72px rail (frames 03/05) ---- */
/* Desktop only: at phone width the sidebar is a drawer, whatever was saved. */
@media(min-width:861px){
.shell--rail{grid-template-columns:var(--tf-rail) minmax(0,1fr)}
.shell--rail .side__top{flex-direction:column;height:auto;padding:14px 0 12px;gap:12px;justify-content:flex-start}
.shell--rail .side__brand b,.shell--rail .nav__h,.shell--rail .side__who,
.shell--rail .side__user .iconbtn,.shell--rail .rail__wallet{display:none}
/* In the rail the label is visually hidden, NOT removed: it stays the link's
   accessible name (the icon is aria-hidden). */
.shell--rail .nav__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;margin:-1px}
.shell--rail .side__scroll{padding:14px 12px}
.shell--rail .nav__h{display:block;height:1px;margin:10px 8px 12px;padding:0;background:var(--tf-divider);
  font-size:0;color:transparent}
.shell--rail .nav__h:first-child{display:none}
.shell--rail .nav a{justify-content:center;padding:10px 0;width:48px;margin:0 auto 4px}
.shell--rail .nav a.on::after{position:absolute;top:7px;right:7px;margin:0}
.shell--rail .nav__badge{position:absolute;top:2px;right:0;min-width:18px;height:16px;padding:0 4px;
  font-size:10px;margin:0}
.shell--rail .side__user{justify-content:center;padding:14px 0}
.shell--rail .rail__chip{display:grid}
.rail__chip{display:none;place-items:center;gap:2px;width:48px;margin:0 auto 14px;padding:8px 0 6px;
  border-radius:var(--tf-radius-xl);background:var(--tf-card-highlight);border:1px solid #DCE4FF;
  text-decoration:none;color:var(--tf-text-heading);font:700 11px/14px var(--tf-font-body)}
.rail__chip svg{width:18px;height:18px;color:var(--tf-primary-ink)}
.rail__chip--team{font:600 10px/12px var(--tf-font-head);text-align:center;padding:8px 3px 6px}
.rail__chip span{display:block;max-width:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Tooltips on the rail's icons: the label, shown on hover AND keyboard focus
   (the accessible name is the link's own text, visually hidden in the rail). */
.shell--rail [data-tip]:hover::before,.shell--rail [data-tip]:focus-visible::before{
  content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--tf-text-heading);color:#fff;font:500 12px/16px var(--tf-font-body);
  padding:6px 9px;border-radius:var(--tf-radius-md);white-space:nowrap;pointer-events:none;z-index:60;
  box-shadow:var(--tf-shadow-pop)}
.shell--rail .side,.shell--rail .side__scroll{overflow:visible}
.shell--rail .side__scroll{overflow-y:visible}
.shell--rail .nav svg{width:20px;height:20px}
}

/* ---- the page ---- */
.main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.wrap{max-width:1560px;width:100%;padding:24px var(--tf-gutter) 48px}
.topbar{display:none}
.scrim{display:none}

/* The page header (frames 01/08): breadcrumb overline, title, subtitle and
   the page's own actions on a white band; a page's filters sit in it, under
   a hairline. `page_header` in base.html draws it. */
.phead{background:var(--tf-panel);border-bottom:1px solid var(--tf-divider);
  padding:26px var(--tf-gutter) 24px}
.phead__row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.phead__txt{min-width:0}
.crumbs{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0;list-style:none;
  font:var(--tf-fw-overline) var(--tf-fs-overline)/16px var(--tf-font-head);
  letter-spacing:var(--tf-ls-overline);text-transform:uppercase;color:var(--tf-text-muted)}
.crumbs li:first-child{color:var(--tf-primary-ink)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--tf-text-disabled);font-weight:400}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.phead h1,.display{font:600 var(--tf-fs-title)/var(--tf-lh-title) var(--tf-font-head);
  color:var(--tf-text-heading);letter-spacing:-.015em;margin:0}
.phead--greeting h1{font-size:var(--tf-fs-title-greeting);line-height:var(--tf-lh-title-greeting)}
.phead--hero h1{font-size:var(--tf-fs-title-hero);line-height:var(--tf-lh-title-hero);letter-spacing:-.02em}
.phead__sub,.lede{color:var(--tf-text-muted);margin:4px 0 0;max-width:80ch;font-size:15px;line-height:22px}
.phead__acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phead__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--tf-divider-soft)}
.phead__bar--end{justify-content:flex-end}
.phead__bar .muted{font-size:13px}

/* The pages not yet on page_header keep their .pagehead: same type, and the
   white band when it opens the page. */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:22px}
.wrap>.pagehead:first-child{background:var(--tf-panel);border-bottom:1px solid var(--tf-divider);
  margin:-24px calc(-1 * var(--tf-gutter)) 24px;padding:26px var(--tf-gutter) 24px}
.overline{font:var(--tf-fw-overline) var(--tf-fs-overline)/16px var(--tf-font-head);
  letter-spacing:var(--tf-ls-overline);text-transform:uppercase;color:var(--tf-primary-ink);margin-bottom:8px}
.display--sm{font-size:26px;line-height:32px}
.display--xl{font-size:56px;line-height:1.05}

/* ============================================================ components */

/* ---- buttons: primary, secondary, dark, ghost, icon ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--tf-btn-pad);
  border-radius:var(--tf-radius-lg);border:1px solid transparent;background:var(--tf-text-heading);
  color:#fff;font:500 14px/16px var(--tf-font-head);cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:background .14s,border-color .14s,color .14s}
.btn:hover{background:#1E293B}
.btn svg{width:16px;height:16px;flex:none}
.btn--gold,.btn--primary{background:var(--tf-primary);color:#fff;box-shadow:0 1px 2px rgba(47,107,255,.25)}
.btn--gold:hover,.btn--primary:hover{background:var(--tf-primary-hover)}
.btn--ghost,.btn--secondary{background:var(--tf-panel);border-color:var(--tf-divider);color:var(--tf-text-heading)}
.btn--ghost:hover,.btn--secondary:hover{border-color:#CBD5E1;background:var(--tf-canvas)}
.btn--dark{background:var(--tf-text-heading);color:#fff}
.btn--sm{padding:7px 12px;font-size:13px;border-radius:var(--tf-radius-lg)}
.btn[disabled],.btn.is-off{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:none;box-shadow:var(--tf-focus)}
.iconbtn{width:var(--tf-icon-btn);height:var(--tf-icon-btn);flex:0 0 var(--tf-icon-btn);display:inline-grid;
  place-items:center;border-radius:var(--tf-radius-lg);border:1px solid var(--tf-divider);
  background:var(--tf-panel);color:var(--tf-text-muted);cursor:pointer;padding:0;text-decoration:none}
.iconbtn:hover{color:var(--tf-text-heading);border-color:#CBD5E1}
.iconbtn svg{width:18px;height:18px}
.iconbtn--bare{border-color:transparent;background:transparent}
.linkbtn{background:none;border:0;padding:0;color:var(--tf-primary);font:500 13px/18px var(--tf-font-head);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.linkbtn:hover{color:var(--tf-primary-hover);text-decoration:underline}

/* ---- pills and badges ---- */
.tag,.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--tf-radius-full);
  font:500 11.5px/18px var(--tf-font-body);background:var(--tf-divider-soft);color:var(--tf-text-body);
  white-space:nowrap}
.tag--live,.pill--ok{background:var(--tf-success-pill);color:var(--tf-success-text)}
.tag--off,.pill--bad{background:var(--tf-danger-pill);color:var(--tf-danger-text)}
.tag--prov,.pill--accent{background:var(--tf-primary-subtle);color:var(--tf-primary-ink)}
.pill--mono{font-family:var(--tf-font-mono);font-size:11.5px}
.pill--sq{border-radius:var(--tf-radius-md);border:1px solid var(--tf-divider);background:var(--tf-canvas)}
.pill--up{background:var(--tf-success-pill);color:var(--tf-success-text);border:1px solid #BBF0D9;
  border-radius:var(--tf-radius-md)}
.pill--down{background:var(--tf-primary-subtle);color:var(--tf-primary-ink);border:1px solid #DCE6FF;
  border-radius:var(--tf-radius-md)}
.dotst{width:8px;height:8px;border-radius:50%;background:var(--tf-success);display:inline-block;flex:none}
.dotst--bad{background:var(--tf-danger)}

/* ---- cards ---- */
.card{background:var(--tf-panel);border:1px solid var(--tf-divider);border-radius:var(--tf-radius-xl);
  box-shadow:var(--tf-shadow-card);min-width:0}
.card__pad{padding:20px 24px}
.card__head{padding:18px 24px;border-bottom:1px solid var(--tf-divider-soft);display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card__head b{font:600 16px/24px var(--tf-font-head);color:var(--tf-text-heading)}
.card__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.card__title h2{font-size:var(--tf-fs-h2);line-height:var(--tf-lh-h2)}
.card__sub{margin:2px 0 0;color:var(--tf-text-muted);font-size:13px;line-height:18px}
.card__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 24px;border-top:1px solid var(--tf-divider-soft);background:#FBFCFE;
  border-radius:0 0 var(--tf-radius-xl) var(--tf-radius-xl);color:var(--tf-text-muted);font-size:13px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ---- the KPI card ---- */
.kpis{display:grid;gap:16px;margin-bottom:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpis--5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi,.stat{background:var(--tf-panel);border:1px solid var(--tf-divider);border-radius:var(--tf-radius-xl);
  padding:20px;box-shadow:var(--tf-shadow-card);display:flex;flex-direction:column;min-width:0}
.kpi>span,.stat>span,.kpi__h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:var(--tf-fw-overline) 12px/16px var(--tf-font-head);letter-spacing:var(--tf-ls-overline);
  text-transform:uppercase;color:#475569;margin-bottom:12px}
.kpi__h span{margin:0;display:inline}
.kpi__h small{font:inherit;color:var(--tf-text-muted);letter-spacing:var(--tf-ls-overline)}
.kpi__h svg{width:18px;height:18px;color:var(--tf-primary);flex:none}
.kpi b,.stat b{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:var(--tf-fw-metric) var(--tf-fs-metric)/var(--tf-lh-metric) var(--tf-font-body);
  letter-spacing:-.02em;color:var(--tf-text-heading);font-variant-numeric:tabular-nums}
.kpi b .pill{letter-spacing:0}
.kpi em,.stat em{display:block;font-style:normal;font-size:13px;line-height:19px;color:var(--tf-text-muted);margin-top:6px}
.kpi em a{color:var(--tf-primary-ink)}
.kpi--gold b,.stat--gold b{color:var(--tf-text-heading)}
.kpi--accent b{color:var(--tf-primary)}
.kpi__foot{margin-top:auto;padding-top:14px}
.kpi__foot>div{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--tf-divider-soft);padding-top:12px;margin-top:12px;font-size:12.5px;
  line-height:16px;color:var(--tf-text-muted)}
.kpi__foot .mono{font-size:12px}
.kpi__foot a{color:var(--tf-primary);text-decoration:none;font-weight:500}
.kpi__foot a:hover{text-decoration:underline}
.kpis--compact .kpi{padding:16px 16px 14px}
.kpis--compact .kpi b{font-size:26px;line-height:32px}
.kpis--compact .kpi__h{margin-bottom:6px}
.kpis--compact .kpi em{font-family:var(--tf-font-mono);font-size:12.5px;margin-top:6px}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font:600 11px/16px var(--tf-font-head);letter-spacing:var(--tf-ls-overline);
  text-transform:uppercase;color:var(--tf-text-muted);padding:10px 12px;border-bottom:1px solid var(--tf-divider)}
td{padding:10px 12px;border-bottom:1px solid var(--tf-divider-soft);font-size:13.5px;line-height:19px;
  vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.dtable th{background:#F8FAFC;padding:14px 24px;border-bottom:1px solid var(--tf-divider)}
.dtable td{padding:16px 24px;color:var(--tf-text-heading)}
.dtable tbody tr:hover td{background:#FBFCFE}
.cell2 b{display:block;font-weight:500;font-size:13.5px;line-height:18px;color:var(--tf-text-heading)}
.cell2 small{display:block;font:400 11.5px/16px var(--tf-font-mono);color:var(--tf-text-muted);margin-top:2px}
.mdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;margin-right:8px;vertical-align:1px}
.mname{display:inline-flex;align-items:center;gap:0;font-weight:500;color:var(--tf-text-heading)}
.pmark{width:28px;height:28px;flex:0 0 28px;border-radius:var(--tf-radius-md);display:inline-grid;
  place-items:center;background:var(--tf-primary-subtle);color:var(--tf-primary-ink);
  font:600 11px/1 var(--tf-font-mono)}

/* ---- inputs ---- */
label,.label{display:block;font:500 13px/18px var(--tf-font-body);margin-bottom:6px;color:var(--tf-text-heading)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=date],input[type=tel],input[type=url],select,textarea{width:100%;padding:9px 12px;border:1px solid var(--tf-divider);
  border-radius:var(--tf-radius-lg);font:14px/20px var(--tf-font-body);color:var(--tf-text-heading);
  background:var(--tf-panel);outline:none}
input::placeholder,textarea::placeholder{color:var(--tf-text-muted);opacity:.85}
input:focus,select:focus,textarea:focus{border-color:var(--tf-primary);box-shadow:var(--tf-focus)}
.field{margin-bottom:14px}
.hint{font-size:12px;line-height:16px;color:var(--tf-text-muted);margin-top:5px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 160px}
.searchbox{position:relative;display:inline-flex;align-items:center;min-width:0}
.searchbox svg{position:absolute;left:11px;width:16px;height:16px;color:var(--tf-text-muted);pointer-events:none}
.searchbox input{padding:8px 12px 8px 34px;font-size:13.5px;border-radius:var(--tf-radius-lg);
  background:#FBFCFE;width:100%}
.datebox{position:relative;display:inline-flex;align-items:center;margin:0}
.datebox svg{position:absolute;left:11px;width:15px;height:15px;color:var(--tf-text-muted);pointer-events:none;z-index:1}
.datebox input[type=date]{width:150px;padding:7px 10px 7px 32px;font-size:13.5px;position:relative}
.datebox input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;
  opacity:0;cursor:pointer}

/* ---- the segmented range control ---- */
.seg{display:inline-flex;align-items:center;background:#F1F5F9;border:1px solid var(--tf-divider);
  border-radius:10px;padding:3px;gap:2px}
.seg__b{border:0;background:transparent;padding:6px 14px;border-radius:7px;cursor:pointer;
  font:500 13.5px/18px var(--tf-font-body);color:var(--tf-text-body);text-decoration:none;white-space:nowrap}
.seg__b:hover{color:var(--tf-text-heading)}
.seg__b.on,.seg__b[aria-pressed="true"],.seg__b[aria-current="true"]{background:var(--tf-panel);
  color:var(--tf-primary-ink);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.rangebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rangebar__sep{width:1px;height:22px;background:var(--tf-divider)}
.rangebar__dash{color:var(--tf-text-disabled)}
.rangebar form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}

/* ---- the empty state ---- */
.empty{text-align:center;padding:40px 20px}
.empty__icon{width:44px;height:44px;margin:0 auto 14px;border-radius:12px;display:grid;place-items:center;
  background:var(--tf-primary-subtle);border:1px solid #DCE6FF;color:var(--tf-primary)}
.empty__icon svg{width:20px;height:20px}
.empty b{display:block;font:600 16px/24px var(--tf-font-head);color:var(--tf-text-heading);margin-bottom:4px}
.empty p{max-width:52ch;margin:0 auto;color:var(--tf-text-muted)}
.empty p a{color:var(--tf-primary)}
.term{max-width:560px;margin:20px auto 0;text-align:left;background:var(--tf-code-bg);border-radius:var(--tf-radius-xl);
  overflow:hidden;border:1px solid #1E293B}
.term__h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);font:400 12px var(--tf-font-mono);color:#94A3B8}
.term__h button{background:none;border:0;color:#93B4FF;font:500 12px var(--tf-font-mono);cursor:pointer;padding:2px 4px}
.term__h button:hover{color:#fff}
.term pre{margin:0;padding:14px;overflow-x:auto;font:12.5px/20px var(--tf-font-mono);color:#E2E8F0}

/* ---- the insight row under a chart ---- */
.insight{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;
  border-radius:10px;background:var(--tf-card-highlight);border:1px solid #DCE4FF;font-size:13.5px;
  color:var(--tf-text-body)}
.insight svg{width:17px;height:17px;color:var(--tf-primary-ink);flex:none}
.insight span{flex:1 1 260px}
.insight b{font-weight:500;color:var(--tf-text-heading)}

/* ---- pager ---- */
.pgr{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pgr a,.pgr span{min-width:34px;height:32px;padding:0 10px;display:inline-grid;place-items:center;
  border-radius:var(--tf-radius-lg);font:500 13.5px/1 var(--tf-font-body);color:var(--tf-text-body);
  text-decoration:none}
.pgr a:hover{background:var(--tf-canvas)}
.pgr .pgr__edge{background:var(--tf-primary-subtle);color:var(--tf-primary-ink)}
.pgr [aria-current="page"]{background:var(--tf-primary);color:#fff}
.pgr .is-off{opacity:.45;pointer-events:none}

.flash{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash.ok{background:var(--tf-success-pill);border-color:#BBF0D9;color:var(--tf-success-text)}
.flash.error{background:var(--tf-danger-pill);border-color:#F0C8C5;color:var(--tf-danger-text)}

/* A warning must not wear the accent: blue means "interactive"; amber means
   "read this before you click something". */
.notice{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border-radius:10px;
  background:var(--tf-warning-pill);border:1px solid var(--tf-warning-line);color:var(--tf-warning-text);
  font-size:13px;margin-bottom:14px}
.notice b{color:#5C4208}

/* ---- phones and small tablets: the sidebar becomes a drawer ---- */
@media(max-width:860px){
  .shell,.shell--rail{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(280px,86vw);transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:none}
  .shell--drawer .side{transform:none;box-shadow:var(--tf-shadow-pop)}
  .side__toggle{display:none}
  .shell--drawer .scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:30}
  .topbar{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:var(--tf-panel);
    border-bottom:1px solid var(--tf-divider);position:sticky;top:0;z-index:20}
  .topbar .brandword{font-size:18px}
  .wrap{padding:18px 16px 40px}
  .phead{padding:18px 16px}
  .wrap>.pagehead:first-child{margin:-18px -16px 18px;padding:18px 16px}
  :root{--tf-gutter:16px}
  .phead h1,.display,.phead--hero h1{font-size:26px;line-height:32px}
  .phead--greeting h1{font-size:24px;line-height:30px}
  .dtable th,.dtable td{padding-left:14px;padding-right:14px}
  .card__head{padding:14px 16px}
  .card__pad{padding:16px}
  .card__foot{padding:12px 16px}
}
@media print{.side,.topbar,.phead__acts,.pagehead__actions,.noprint{display:none!important}
  .shell{grid-template-columns:1fr}.wrap{padding:0}.doc{border:0;box-shadow:none}}

/* ------------------------------------------------------------- auth pages */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth__art{background:var(--navy);color:#fff;padding:48px;display:flex;
  flex-direction:column;justify-content:center}
.auth__art h2{font: 700 34px/1.2 var(--sans);margin-bottom:14px}
.auth__art p{color:#B9C7CE;max-width:40ch;font-size:15.5px}
.auth__art ul{list-style:none;padding:0;margin:26px 0 0}
.auth__art li{padding:8px 0 8px 26px;position:relative;color:#D5DFE4;font-size:14.5px}
.auth__art li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:2px;
  background:var(--gold)}
.auth__form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth__form .inner{width:100%;max-width:380px}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth__art{display:none}}

/* --------------------------------------------------------------- landing */
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 34px;
  position:relative;z-index:2}
.lp-hero{background:var(--navy);color:#fff;padding:0 0 74px}
.lp-hero__in{max-width:1080px;margin:0 auto;padding:44px 34px 0}
.lp-hero h1{font: 700 52px/1.06 var(--sans);letter-spacing:-.03em;max-width:15ch}
.lp-hero p{color:#B9C7CE;font-size:18px;max-width:52ch;margin:20px 0 30px}
.lp-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;
  border:1px solid rgba(47,107,255,.4);color:var(--gold-lt);font-size:12.5px;font-weight:600;
  margin-bottom:22px}
.lp-strip{max-width:1080px;margin:-46px auto 0;padding:0 34px;position:relative;z-index:3}
.lp-sec{max-width:1080px;margin:0 auto;padding:58px 34px}
.lp-sec h2{font: 700 30px/1.2 var(--sans);margin-bottom:10px}
.step{display:flex;gap:14px;align-items:flex-start}
.step b{flex:0 0 30px;height:30px;border-radius:50%;background:var(--gold-wash);
  color:var(--tf-primary-ink);display:grid;place-items:center;font:700 14px var(--sans);
  border:1px solid #DCE6FF}
.lp-foot{background:var(--navy);color:#8FA0A8;padding:26px 34px;font-size:13px}

/* ----------------------------------------------------------- credit packs */
.pack{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative}
.pack--pop{border-color:var(--gold);box-shadow:0 0 0 3px rgba(47,107,255,.15),var(--shadow)}
.pack__tag{position:absolute;top:-10px;left:22px;background:var(--gold);color:#FFFFFF;
  font:700 10.5px var(--sans);letter-spacing:.1em;padding:3px 10px;border-radius:999px}
.pack h3{font-size:15px}
.pack .amt{font: 600 38px/1 var(--mono);letter-spacing:-.03em;margin:10px 0 2px}
.pack .bonus{color:var(--green);font-size:13px;font-weight:700}
.pack p{color:var(--ink-soft);font-size:13.5px;margin:9px 0 18px;flex:1}

/* -------------------------------------------------------------- console */
.cons{display:grid;grid-template-columns:1fr 296px;gap:16px;align-items:start}
@media(max-width:1000px){.cons{grid-template-columns:1fr}}
.thread{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:440px}
.thread__body{padding:18px;flex:1;overflow-y:auto;max-height:56vh}
.msg{margin-bottom:16px;display:flex;gap:11px}
.msg__who{flex:0 0 30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font:700 11px var(--sans);background:var(--tf-divider-soft);color:var(--ink-soft)}
.msg--u .msg__who{background:var(--navy);color:#fff}
.msg--a .msg__who{background:var(--gold-wash);color:var(--tf-primary-ink);border:1px solid #DCE6FF}
.msg__txt{white-space:pre-wrap;word-break:break-word;font-size:14.5px;padding-top:4px}
.msg__meta{font-size:11.5px;color:var(--ink-faint);margin-top:6px;font-family:var(--mono)}
.thread__ctl{border-top:1px solid var(--line-soft);padding:13px 15px}
.thread__ctl textarea{resize:vertical;min-height:64px}
.cbar{display:flex;gap:10px;align-items:center;margin-top:10px}
.cbar .spacer{flex:1}
.meter{background:var(--navy);color:#fff;border-radius:var(--radius);padding:16px 18px}
.meter .now{font: 600 30px/1 var(--mono);color:var(--gold-lt);letter-spacing:-.02em}
.meter .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8FA0A8;
  margin-bottom:6px}
.meter dl{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin:14px 0 0;
  font-size:12.5px}
.meter dt{color:#8FA0A8}
.meter dd{margin:0;font-family:var(--mono);color:#E9EFF2}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--gold)}
.blink{animation:bl 1.1s ease-in-out infinite}
@keyframes bl{0%,100%{opacity:.35}50%{opacity:1}}

/* --------------------------------------------------------------- receipt */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px;box-shadow:var(--shadow);max-width:760px;margin:0 auto}
.doc__top{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:22px;border-bottom:2px solid var(--navy);margin-bottom:26px}
.doc__title{font: 700 26px var(--sans);letter-spacing:.02em}
.doc__parties{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:26px}
.doc__parties h4{font:700 10px var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 6px}
.doc__tot{margin-left:auto;width:min(320px,100%);margin-top:18px}
.doc__tot div{display:flex;justify-content:space-between;padding:7px 0;font-size:14px}
.doc__tot .grand{border-top:2px solid var(--navy);margin-top:6px;padding-top:11px;
  font-weight:700;font-size:17px}
.stamp{display:inline-block;border:2px solid var(--green);color:var(--green);
  padding:5px 14px;border-radius:7px;font:700 12px var(--sans);letter-spacing:.14em;
  transform:rotate(-3deg)}

.bars{display:flex;align-items:flex-end;gap:3px;height:54px}
.bars i{flex:1;background:var(--gold);border-radius:2px 2px 0 0;min-height:2px;
  display:block;opacity:.85}
.bars i:hover{opacity:1}
.keybox{font-family:var(--mono);font-size:13px;background:var(--navy);color:var(--gold-lt);
  padding:12px 14px;border-radius:9px;word-break:break-all;user-select:all}

/* ------------------------------------------------------- the rate-card grid
   Same shape as the reference catalogue: a fixed-height card whose price block
   leads and whose pills pin to the bottom, so every card in a row lines up no
   matter how long the description runs. Colour is TokenFusion's own — gold for
   money, navy for structure — rather than the blue of the app it borrows its
   layout from. */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.fpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  background: var(--tf-divider-soft); color: var(--ink-soft); font: 600 12.5px var(--sans);
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.fpill:hover { background: var(--tf-divider); color: var(--ink); }
.fpill--all { background: var(--tf-divider); color: var(--ink); font-weight:700; }
.fpill--mod { background: var(--gold-wash); color: var(--tf-primary-ink); }
.fpill--reg { background: var(--card); border-color: var(--line); color: var(--ink-soft); }
.fpill.on {
  background: var(--card); border-color: var(--gold); color: var(--tf-primary-ink);
  font-weight:700; box-shadow: 0 0 0 3px rgba(47,107,255,.18);
}
.fpill--all.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }
.filterbar__sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

.gridbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.gridbar input[type="search"] {
  flex: 1 1 260px; min-width: 200px; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font: 13px var(--sans); background: var(--card); outline: none;
}
.gridbar input[type="search"]:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
.gridbar__grp { display: inline-flex; align-items: center; gap: 9px; }

.mgroup { margin: 0 0 16px; }
.mgroup__h { display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px; }
.mgroup__h b { font: 700 15px var(--sans); letter-spacing: -.015em; }
.mgroup__h span { font-size: 12px; color: var(--ink-faint); }
.mgroup__h::after {
  content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 4px;
}

.modelgrid {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
}
.mcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mcard:hover { box-shadow: var(--shadow); border-color: #CBD5E1; }
.mcard__summary {
  padding: 15px 17px 13px; display: flex; flex-direction: column;
}
.mcard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.mcard__name {
  font: 700 16px var(--sans); letter-spacing: -.015em; margin: 0; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctxbadge {
  margin-left: auto; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: var(--gold-wash); color: var(--tf-primary-ink); font: 700 11px var(--sans); white-space: nowrap;
}
.mcard__slug { font-size: 11.5px; color: var(--ink-faint); margin: 2px 0 8px; }
.mcard__blurb {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 37px;
}
.pricerows { display: grid; gap: 5px; margin-bottom: 12px; }
.pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pricerow span { font-size: 13px; color: var(--ink-soft); }
.pricerow b {
  font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
  white-space: nowrap;
}
/* the worked example is the number people actually reason with */
.pricerow--ex { padding-top: 7px; margin-top: 4px; border-top: 1px dashed var(--line); }
.pricerow--ex b { color: var(--tf-primary-ink); font-size: 13.5px; }

.caps {
  display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start;
  margin-top: auto; padding-top: 4px;
}
.cap { padding: 3px 9px; border-radius: 6px; font: 600 11px var(--sans); white-space: nowrap;
       background: var(--tf-divider-soft); color: var(--ink-soft); }
.cap--fam  { background: #e8eef2; color: #33505F; }
.cap--mod  { background: #E7F1EC; color: var(--green); }
.cap--prov { background: var(--gold-wash); color: var(--tf-primary-ink); }

/* ------------------------------------------------------------ chat client
   A three-part frame inside the app shell: thread list, transcript, composer.
   The transcript scrolls; the composer is pinned. Heights are viewport-based
   so the page itself never scrolls — the conversation does. */
.chat {
  display: grid; grid-template-columns: 232px 1fr; gap: 16px;
  height: calc(100vh - 52px); align-items: stretch;
}
@media (max-width: 900px) { .chat { grid-template-columns: 1fr; height: auto; }
  .chat__list { display: none; } }

.chat__list { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat__threads { overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  padding-right: 2px; }
.thr {
  display: block; padding: 9px 11px; border-radius: 9px; text-decoration: none;
  color: var(--ink); border: 1px solid transparent;
}
.thr:hover { background: var(--tf-divider-soft); }
.thr.on { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.thr b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.thr__m { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

.chat__main {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
}
.chat__bar {
  display: flex; align-items: center; gap: 9px; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.chat__title { font-size: 15px; font-weight:700; outline: none; border-radius: 6px;
  padding: 2px 5px; max-width: 42ch; overflow: hidden; white-space: nowrap; }
.chat__title:focus { background: var(--gold-wash); }
.chat__spacer { flex: 1; }
.chat__model { width: auto; min-width: 168px; padding: 6px 10px; font-size: 13px; }

.chat__body { flex: 1; overflow-y: auto; padding: 20px 22px; min-height: 0; }
.turn { display: flex; gap: 12px; margin-bottom: 22px; }
.turn__who {
  flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font: 700 10.5px var(--sans); background: var(--tf-divider-soft); color: var(--ink-soft);
}
.turn--user .turn__who { background: var(--navy); color: #fff; }
.turn--assistant .turn__who { background: var(--gold-wash); color: var(--tf-primary-ink);
  border: 1px solid #DCE6FF; }
.turn__col { min-width: 0; flex: 1; }
.turn__body { font-size: 14.5px; line-height: 1.62; }
.turn__body .md > p { margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }
.turn__body .md > ul, .turn__body .md > ol { margin: 0 0 10px; padding-left: 22px; }
.turn__body .md li { margin-bottom: 4px; }
.turn__body .md h3, .turn__body .md h4, .turn__body .md h5 {
  font-size: 15px; margin: 14px 0 6px; font-weight:700; }
.turn__body .md > *:last-child { margin-bottom: 0; }
.turn__meta { font-size: 11.5px; color: var(--ink-faint); margin-top: 7px; }
.turn__dl { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.turn__dl > span { font-size: 11.5px; color: var(--ink-faint); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; }
.turn__dl a {
  border: 1px solid var(--line); background: var(--card); border-radius: 7px;
  padding: 4px 11px; font: 600 12px var(--sans); color: var(--ink-soft);
  text-decoration: none;
}
.turn__dl a:hover { border-color: var(--gold); color: var(--tf-primary-ink); background: var(--gold-wash); }
.turn__files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.codeblock {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 0 0 12px; background: #0F1B24;
}
.codeblock__h {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: #16262F; border-bottom: 1px solid rgba(255,255,255,.07);
}
.codeblock__h span { font: 600 11px var(--mono); color: #9DB0B8; letter-spacing: .06em;
  text-transform: uppercase; margin-right: auto; }
.codeblock__b {
  border: 1px solid rgba(255,255,255,.16); background: transparent; color: #C7D3D9;
  border-radius: 6px; padding: 3px 9px; font: 600 11.5px var(--sans); cursor: pointer;
}
.codeblock__b:hover { border-color: var(--gold); color: var(--gold-lt); }
.codeblock pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.codeblock code { font: 12.5px/1.6 var(--mono); color: #E9EFF2; white-space: pre; }

.chat__ctl { border-top: 1px solid var(--line-soft); padding: 12px 16px 14px; }
.chat__box { display: flex; align-items: flex-end; gap: 9px; }
.chat__box textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 220px; padding: 11px 13px;
  border-radius: 11px; font: 14.5px var(--sans); line-height: 1.5;
}
.clip {
  flex: 0 0 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; display: grid; place-items: center;
  color: var(--ink-soft);
}
.clip:hover { border-color: var(--gold); color: var(--tf-primary-ink); }
.clip svg { width: 17px; height: 17px; }
.clip[disabled] { opacity: .45; cursor: not-allowed; }
.chat__foot { display: flex; align-items: center; margin-top: 8px; }
.chat__files { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border-radius: 999px; background: var(--tf-divider-soft); font-size: 12.5px; color: var(--ink);
  max-width: 100%;
}
.fchip i { width: 7px; height: 7px; border-radius: 2px; background: var(--gold); flex: 0 0 7px; }
.fchip em { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.fchip button {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-faint);
  font-size: 15px; line-height: 1; padding: 0 0 0 2px;
}
.fchip button:hover { color: var(--red); }

.chat__note {
  border: 1px dashed var(--line); border-radius: 9px; padding: 9px 12px;
  font-size: 12.5px; color: var(--ink-soft); background: var(--tf-canvas); margin-bottom: 18px;
}
.chat__zero { text-align: center; padding: 42px 20px; max-width: 46ch; margin: 0 auto; }
.chat__zero-mark { display: grid; place-items: center; margin-bottom: 14px; }
.chat__zero b { display: block; font: 700 22px var(--sans); margin-bottom: 6px; }
.chat__zero p { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 7px 14px; font: 600 13px var(--sans); color: var(--ink-soft); cursor: pointer;
}
.chip:hover { border-color: var(--gold); color: var(--tf-primary-ink); }

.cap--live { background: var(--green-wash); color: var(--green); }
.cap--off  { background: var(--red-wash); color: var(--red); }
.fpill--live { background: var(--green-wash); color: var(--green); }
.chat__model optgroup { font-style: normal; font-weight:700; color: var(--ink-faint); }
.chat__model option:disabled { color: var(--ink-faint); }

/* admin catalogue cards: same frame as the rate card, with an edit panel */
.mcard--admin .mcard__summary { min-height: 0; }
.mcard--admin .mcard__head .swatch { margin-right: 2px; }
.mcard--admin .ctxbadge { background: var(--gold-wash); color: var(--tf-primary-ink); }
.mcard__edit { margin-top: 10px; align-self: flex-start; }
.mcard__form { border-top: 1px solid var(--line-soft); padding: 16px 18px; background: var(--tf-canvas); }
.mcard--open { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.cap--on { background: var(--green-wash); color: var(--green); }
.was { color: var(--ink-faint); font-weight: 500; margin-right: 4px; }
.cap--your { background: var(--gold-wash); color: var(--tf-primary-ink); }

/* ------------------------------------------------------------ voucher cards */
.vgrid { display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px 14px; display: flex; flex-direction: column;
}
.vcard--off { opacity: .72; }
.vcard--open { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.vcard__top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.vcard__top b { font-size: 14.5px; letter-spacing: .02em; margin-right: auto; }
.vcard__amt { font: 600 26px/1.1 var(--mono); letter-spacing: -.02em; color: var(--tf-primary-ink);
  margin-bottom: 12px; }
.vcard__amt span { display: block; font: 500 11px var(--sans); color: var(--ink-faint);
  letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.vcard__who { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }
.vcard__who .tag { font-size: 10.5px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; }
.vcard__note { margin-top: 9px; }
.vcard__edit { margin-top: 12px; align-self: flex-start; }
.vcard__form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.vform .row { gap: 10px; }

/* ------------------------------------------------------------ account picker */
.picker { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--card); margin-bottom: 14px; }
.picker__bar { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft); background: var(--tf-canvas); }
.picker__q { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px;
  font: 13px var(--sans); background: var(--card); }
.picker__q:focus { border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 3px rgba(47,107,255,.14); }
.picker__n { font: 600 11.5px var(--sans); color: var(--ink-faint); white-space: nowrap; }
.picker__n.on { color: var(--tf-primary-ink); }
.picker__list { max-height: 208px; overflow-y: auto; }
.picker__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; margin: 0; font-weight: 400; border-bottom: 1px solid var(--line-soft); }
.picker__row:last-child { border-bottom: 0; }
.picker__row:hover { background: var(--tf-canvas); }
.picker__row--on { background: var(--gold-wash); }
.picker__row input { width: auto; flex: 0 0 auto; }
.picker__who { min-width: 0; }
.picker__who b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.picker__who em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker__empty { padding: 18px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* the small maker mark the reference leads each card with */
.mmark {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; display: grid;
  place-items: center; background: var(--tf-divider-soft); border: 1px solid var(--line);
  font: 700 11px var(--sans); font-style: normal; color: var(--ink-soft);
}
/* the context chip sits right, exactly as the reference does it */
.mcard__head .ctxbadge { margin-left: auto; }

/* the maker mark carries the family, so its tooltip must say which */
.mmark[title] { cursor: default; }


/* ── Catalogue register ────────────────────────────────────────────────────
   Their catalogue draws a card as a hairline box on white with no lift, and
   spends colour only on the status pills. Ours now does the same: the shadow
   goes, the border carries the edge, and the pastel pills do the talking. */
.mcard, .vcard { box-shadow:none }
.mcard { border-color:var(--line) }
.mcard:hover { border-color:#DCE6FF; box-shadow:0 1px 3px rgba(47,107,255,.10) }

/* the "All" filter reads as the selected state, exactly as theirs does */
.fpill--all{background:var(--ink);color:#fff;font-weight:600}
.fpill--all.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fpill--mod{background:var(--tf-primary-subtle);color:var(--tf-primary-ink)}
.fpill--reg{background:#fff;border-color:var(--line);color:var(--ink-soft)}
.fpill--live{background:var(--tf-success-pill);color:var(--green)}
.fpill.on{background:#fff;border-color:var(--gold);color:var(--rail-on-ink);
  box-shadow:0 0 0 3px rgba(47,107,255,.14)}

/* pastel capability pills, in the reference's register */
.cap--live{background:var(--tf-success-pill);color:var(--tf-success-text)}
.cap--off {background:#FDECEA;color:#C0392B}
.cap--mod {background:var(--tf-primary-subtle);color:var(--tf-primary-ink)}
.cap--prov{background:#FFF3DC;color:#8A5A00}
.cap--fam {background:var(--tf-primary-subtle);color:var(--tf-primary-ink)}
.cap--on  {background:var(--tf-success-pill);color:var(--tf-success-text)}
.ctxbadge {background:var(--gold-wash);color:var(--rail-on-ink)}

/* the price figures are the content; colour is spent on state, not on them */
.pricerow--ex b{color:var(--ink)}

/* Three across at a laptop width, as the reference sits. 370px is the width at
   which a 1228px canvas still fits three, and a wider one does not jump to four
   and shrink them again. */

/* A warning must not wear the accent. Violet now means "interactive"; an amber
   notice means "read this before you click something". Semantic colour is a
   separate system from the brand hue and never borrows it. */

/* ------------------------------------------------- signup steps + docs */
.steps{display:flex;align-items:center;gap:8px;margin:0 0 22px}
.steps__dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:600 12.5px var(--mono);color:var(--ink-faint);border:1.5px solid var(--line);
  background:var(--card)}
.steps__dot.on{background:var(--gold);border-color:var(--gold);color:#fff}
.steps i{flex:1;height:2px;background:var(--line);border-radius:1px}
.steps i.on{background:var(--gold)}
.checkline{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:14px;
  line-height:1.5;cursor:pointer}
.checkline input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:0 0 16px}
.doc-page{min-height:100vh;background:var(--paper);padding:48px 20px}
.doc-page__inner{max-width:720px;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:44px 48px;box-shadow:var(--shadow)}
.doc-page h3{font-size:16px;margin:22px 0 6px}
.doc-page p{margin:0 0 10px;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
/* the re-accept page (/eula/accept): what changed, the terms in a scroll box */
.eula-changes{margin:0 0 6px;padding-left:20px;color:var(--ink-soft);font-size:14.5px;
  line-height:1.65}
.eula-changes li{margin:0 0 9px}
.eula-changes b{color:var(--ink)}
.eula-terms{max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
  padding:4px 18px 10px;background:var(--paper)}
.eula-terms h3{font-size:14.5px}
.eula-terms p{font-size:13.5px}
.eula-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.eula-keys{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--line);border-radius:10px}
.eula-keys li{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 14px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.eula-keys li:first-child{border-top:0}
.eula-keys form{margin:0}

/* ------------------------------------------------------ first-run tour */
.tour-veil{position:fixed;inset:0;z-index:200;background:rgba(17,19,24,.45)}
.tour-card{position:fixed;z-index:201;width:320px;background:var(--card);border-radius:14px;
  box-shadow:0 18px 50px rgba(17,19,24,.35);padding:20px 22px;border:1px solid var(--line)}
.tour-card b{display:block;font-size:15.5px;margin-bottom:5px}
.tour-card p{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.tour-card__row{display:flex;align-items:center;justify-content:space-between}
.tour-card__n{font:600 11.5px var(--mono);color:var(--ink-faint)}
.tour-spot{position:relative;z-index:201!important;border-radius:12px;
  box-shadow:0 0 0 4px var(--gold),0 0 0 9999px rgba(17,19,24,.45)!important}

/* API keys: the once-only secret and the term that governs it. */
.keyrow{display:flex;gap:10px;align-items:stretch}
.keyrow .keybox{flex:1;margin:0}
.keyrow .btn{white-space:nowrap}
tr.is-expired td{opacity:.55}
tr.is-expired td:first-child b{text-decoration:line-through}

/* ------------------------------------------------- API keys: "Using it"
   The panel shows the code for ONE key. The table is the control: a row that
   can drive it says so on hover, and the one being shown carries a violet edge
   — the same signal the rail uses for the page you are on, so "selected" means
   one thing in this portal. aria-current is the selector rather than a class,
   because what the screen reader is told and what you can see must be the one
   fact, not two that can disagree. */
tr.is-pick{cursor:pointer}
tr.is-pick:hover td{background:var(--paper)}
tr.is-pick[aria-current="true"] td{background:var(--gold-wash)}
tr.is-pick[aria-current="true"] td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
/* Two actions per row, STACKED. Side by side they took a third of the table's
   width and shredded the names into four-line stacks; a column costs one row
   of height and gives it all back. */
.keyacts{white-space:nowrap}
.keyacts__in{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.keyacts .btn{justify-content:center;width:100%}
.tbl-wrap td:first-child{min-width:12ch}

.usepanel__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.usefor{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:12.5px}
.usefor b,.usefor span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usefor b{max-width:19ch}
.usefor__sep{color:var(--ink-faint)}

/* The language tabs and Copy share one bar. Copy used to sit ON the sample,
   where it covered the first line — which is the line that says what to save
   the file as. Beside the tabs it costs no height and hides nothing. */
.snipbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 9px;min-width:0}
.snipseg{min-width:0;overflow-x:auto}
.snipseg .seg__b{white-space:nowrap}
.snipseg .seg__b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* margin-left:auto keeps it right — and right on its OWN line, should the tabs
   ever fill the row (a fifth language, a longer name). */
.snipcopy{flex:none;margin-left:auto}

.snipcode{margin:0;font-size:12px;line-height:1.55;max-height:min(58vh,470px);overflow:auto;
  user-select:text}

.usestate__n{margin:10px 0 0;color:var(--ink-soft)}
.usestate__n--warn{color:#8A5A00}
@media(max-width:560px){
  .snipcode{font-size:11.5px;max-height:46vh}
  /* Four language names and a Copy button do not fit a phone at the desktop
     rhythm — "Java" was landing half off the end. Tighter, not fewer. */
  .snipbar{gap:7px}
  .snipseg .seg__b{padding:5px 8px;font-size:12px}
}
/* Narrow enough that the keys table scrolls sideways inside .tbl-wrap: that
   put "Show code" — the panel's own control — off the end of a screen nobody
   thinks to scroll. The actions ride the right edge instead, so the way to use
   a key is always in view. */
@media(max-width:860px){
  /* A sticky cell is ignored while the table's borders are COLLAPSED — the
     cell reports position:sticky and scrolls away anyway. Separate borders
     with no spacing look identical here (only bottom borders are drawn) and
     make it work. */
  .keytbl{border-collapse:separate;border-spacing:0}
  .keytbl .keyacts, .keytbl thead th:last-child{position:sticky;right:0;z-index:1}
  .keytbl .keyacts{box-shadow:-10px 0 10px -10px rgba(16,24,32,.32)}
  .keytbl thead th:last-child{background:var(--card)}
  /* Opaque, or the columns sliding underneath show through. The row's own
     state (hover, selected) is more specific, so it still wins. */
  .keytbl tbody td.keyacts{background:var(--card)}
  .keytbl tr.is-pick[aria-current="true"] td.keyacts{background:var(--gold-wash)}
}
@media print{.snipcopy,.snipseg{display:none!important}}

/* Where a model is served from, as a chip on the card. Data residency is a
   buying decision, so it sits with the capabilities, not buried in the prices. */
.cap--reg{background:var(--gold-wash);color:var(--ink);border-color:var(--line)}

/* ---------------------------------------------------------------- docs, FAQ
   and the information button. */
.docnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.docnav a{font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.docnav a:hover{border-color:var(--gold);color:var(--ink)}

.steps-list{margin:0 0 14px;padding-left:20px;font-size:14px;color:var(--ink-soft)}
.steps-list li{margin-bottom:5px}

.tickList{margin:0;padding-left:18px;font-size:14px;color:var(--ink-soft);line-height:1.7}

.faq{border-bottom:1px solid var(--line-soft);padding:2px 0}
.faq:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:11px 0;font-weight:600;font-size:14.5px;
  list-style:none;display:flex;align-items:center;gap:9px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";width:17px;height:17px;flex:none;border-radius:5px;
  border:1px solid var(--line);display:grid;place-items:center;font-weight:700;
  font-size:12px;color:var(--ink-faint)}
.faq[open] summary::before{content:"–";border-color:var(--gold);color:var(--gold)}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.faq p{margin:0 0 13px 26px;font-size:14px;color:var(--ink-soft);line-height:1.65;
  max-width:70ch}

/* The information button: same shape everywhere, keyboard-reachable, and its
   text is the accessible name rather than only a hover tooltip. */
.ibtn{width:16px;height:16px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-faint);font:700 10.5px/1 var(--sans);
  cursor:help;display:inline-grid;place-items:center;padding:0;margin-left:6px;
  vertical-align:middle}
.ibtn:hover{border-color:var(--gold);color:var(--gold)}
.ibtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* A multi-line sample keeps its line breaks. .keybox stays white-space:normal
   because it also holds a single long API key that must be free to wrap, so
   the multi-line case is a modifier — named --pre rather than .codeblock,
   which is already the chat transcript's own component and was silently
   restyling these boxes. */
.keybox--pre{white-space:pre;overflow-x:auto;word-break:normal;
  -webkit-overflow-scrolling:touch}

/* Chart labels are SVG <text>, which does not inherit the page font in every
   engine the way ordinary text does. dash.js sets a size on them but no
   family, so they were left to whatever the renderer defaulted to — stating
   it here keeps an axis label in the same face as the table beneath it. */
svg text{font-family:var(--mono);font-variant-numeric:tabular-nums}
.viztip,.legend{font-family:var(--sans)}

/* Per-customer supplier entitlement. A checkbox grid rather than a multi-select
   because an operator needs to see, at a glance, how many models each choice
   actually puts on the customer's rate card. */
.provgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.provpick{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;margin:0;
  border:1px solid var(--line);border-radius:9px;background:var(--card);cursor:pointer;
  font-weight:400}
.provpick:hover{border-color:var(--gold)}
.provpick input{margin-top:2px;flex:none}
.provpick b{display:block;font-size:13.5px;font-weight:600}
.provpick em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);
  margin-top:2px}
.provpick.is-off{opacity:.62}

/* One supplier's serving endpoint in the developer docs. */
.endp{margin-bottom:12px}
.endp > div:first-child{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.endp:last-of-type{margin-bottom:0}

/* ------------------------------------------------------------- teams (v22)
   RBAC_SPEC. Built from the portal's own pieces — cards, kpis, the provgrid
   checkbox tiles, tags — so a team page reads like every other page. */
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;
  font:600 10.5px var(--sans);letter-spacing:.02em;white-space:nowrap}
.badge--vision{background:#E7F1EC;color:var(--green)}
.badge--think{background:var(--gold-wash);color:var(--tf-primary-ink)}
.badge--image{background:#FDEFE3;color:#9A4A0B}
.badgerow{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.badgerow:empty{display:none}
.invite-banner{align-items:center;flex-wrap:wrap}
.invite-banner span{flex:1 1 260px}
.invite-banner .btn{flex:none}
.btnrow{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.btnrow form{margin:0}
.btn--danger{color:var(--red)}
.btn--danger:hover{border-color:var(--red);background:var(--red-wash)}
.factrow{display:grid;grid-template-columns:110px 1fr;gap:2px 12px;padding:6px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px}
.factrow span{color:var(--ink-faint);font-size:12px;font-weight:600;letter-spacing:.02em}
.factrow b{font-weight:600}
.factrow em{grid-column:2;font-style:normal;font-size:12px;color:var(--ink-soft)}
.modellist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.modellist li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--card)}
.modellist li b{font-size:13.5px;font-weight:600}
.stackcol{display:grid;gap:12px;align-content:start;min-width:0}
.provpick.is-on{border-color:#C9D6FF;background:#FAFBFF}
.provgrid--models{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.provpick em.mono{font-family:var(--mono);font-size:11px}
.capform{display:flex;gap:6px;align-items:center;margin:0}
.capform__in{position:relative;flex:0 1 112px;min-width:84px}
.capform__in i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;
  color:var(--ink-faint);font:500 13px var(--mono)}
.capform__in input{padding:6px 9px 6px 20px;font:500 13px var(--mono)}
.capbar{height:4px;border-radius:2px;background:var(--line-soft);margin-top:5px;min-width:60px;
  overflow:hidden}
.capbar i{display:block;height:100%;background:var(--gold);border-radius:2px}
.inlineform{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0}
.dangerzone{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.filterform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0}
.filterform>div{flex:1 1 170px}
.filterform>.filterform__go{flex:0 0 auto;display:flex;gap:8px}
tr.is-paused td{opacity:.55}
tr.is-paused td:last-child{opacity:1}
.role{white-space:nowrap}
.role--tf_admin{background:var(--navy);color:#fff}
.role--team_admin{background:var(--gold-wash);color:var(--tf-primary-ink)}
.role--team_member{background:var(--green-wash);color:var(--green)}
.rolegrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.roleteam{margin-top:8px;padding:6px 9px;font-size:13px}
.roleteams{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media(max-width:860px){
  .teamtbl th:nth-child(2),.teamtbl td:nth-child(2){display:none}
  .capform{flex-wrap:wrap}
}
/* Grid items default to min-width:auto, so a wide table would stretch its card
   past a phone's width; the table scrolls inside its .tbl-wrap instead. */
.stackcol>*,.dashgrid>*{min-width:0}
@media(max-width:860px){
  .capform__in{flex:1 1 84px}
  .filterform>div{flex:1 1 100%}
}

/* Review U8. A cap field with no cap reads "No cap" without a dangling "$". */
.capform__in:has(input:placeholder-shown) i{display:none}
.capform__in:has(input:placeholder-shown) input{padding-left:9px}
/* The Role control: a refused choice stays legible — muted, with the reason in
   the portal's error styling (as .flash.error), never low-contrast text in a
   faded card. */
.rolegrid .provpick.is-off{opacity:1;background:var(--paper);cursor:not-allowed}
.rolegrid .provpick.is-off b,.rolegrid .provpick.is-off em:not(.rolewhy){color:var(--ink-soft)}
.rolegrid .provpick em.rolewhy{display:block;margin-top:8px;padding:6px 9px;border-radius:8px;
  background:var(--red-wash);border:1px solid #F0C8C5;color:#8C1E18;font-size:12px}

/* ---------------------------------------------------------- team funds
   TEAM_FUNDS_SPEC: a team holds money of its own. The Funds card shows the
   two balances that matter side by side (what the team has, what is free to
   give it), the two moves under them, and the team's own ledger below. */
.fundsnow{display:grid;gap:10px;grid-template-columns:1fr 1fr;
  padding-bottom:13px;border-bottom:1px solid var(--line-soft)}
.fundsnow>div span{display:block;font:600 10.5px var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.fundsnow>div b{display:block;font:600 21px/1.05 var(--mono);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.fundsnow__bal b{color:var(--tf-primary-ink)}
.fundsnow__bal b.is-out,.kpi b.is-out{color:var(--red)}
.fundsnow>div em{display:block;font-style:normal;font-size:12px;color:var(--ink-soft);
  margin-top:5px}
/* What a legacy key holds out of the free figure, directly under it: money
   that is somewhere, not money that is gone, so it is inked like the figure
   rather than faded away (the notice below the card says what releases it). */
.fundsnow__held{color:var(--ink);margin-top:3px}
.fundsnow--one{grid-template-columns:1fr}
.fundsforms{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
/* The per-row control on the Teams list. The amount boxes SHRINK (review
   B10): at their fixed 112px the two forms pushed the table past its wrapper
   and clipped Manage off the end. One move per line, each laid out on the
   same grid, so the two boxes are the same width whatever their buttons are
   called and neither is narrow enough to clip its own placeholder. */
.fundsrow{display:grid;gap:6px;min-width:190px;max-width:290px}
.fundsrow .capform{display:grid;grid-template-columns:minmax(80px,1fr) auto;gap:6px}
.fundsrow .capform__in{flex:none;min-width:0}
.fundslow__lab{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.kpis--funds{margin-bottom:16px}
.pager{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:9px 16px 12px;border-top:1px solid var(--line-soft)}
.pager .btn.is-off{opacity:.4;pointer-events:none}
@media(max-width:700px){
  .fundsnow{grid-template-columns:1fr}
  .fundsforms>form,.fundsrow>form{flex:1 1 100%}
}
/* The teams list. The team's NAME is what the row is about, so it gets room
   first (review B10: at 1440px it was the narrowest column and a long name
   wrapped to four lines). The Allocate / Return control goes below the
   table's own breakpoint — it would crush every other column, and the team
   page keeps both moves. On a phone Members and this month's spend go too,
   leaving the team, its balance and Manage: the way to everything else, which
   was being clipped off the end of a scrolling table. */
.fundstbl td:first-child,.fundstbl th:first-child{min-width:170px}
@media(max-width:1040px){
  .fundstbl th:nth-last-child(2),.fundstbl td:nth-last-child(2){display:none}
}
@media(max-width:560px){
  .fundstbl th:nth-child(2),.fundstbl td:nth-child(2),
  .fundstbl th:nth-child(4),.fundstbl td:nth-child(4){display:none}
  .fundstbl td:first-child,.fundstbl th:first-child{min-width:0}
}
/* Admin -> Teams has eight columns; on a narrow screen Invited and Models
   give way so the BALANCE — what the page is now about — stays on screen. */
@media(max-width:860px){
  .adminteams th:nth-child(4),.adminteams td:nth-child(4),
  .adminteams th:nth-child(5),.adminteams td:nth-child(5){display:none}
}
/* A team's own ledger. The date never wraps to four lines; on a phone the
   When and Left columns give way to the movement and its amount, which are
   what is being read, and the date moves inline under the movement. */
.fundsled td.fundsled__when{white-space:nowrap}
.fundsled__inline{display:none}
@media(max-width:560px){
  .fundsled th:first-child,.fundsled td.fundsled__when,
  .fundsled th:last-child,.fundsled td:last-child{display:none}
  .fundsled__inline{display:block}
}

/* ============================================================== charts
   The dashboard, Usage & Metering and the operator overview. Every chart is
   inline SVG drawn from the server's own numbers (charts.js / dash.js), with
   its values also in text beside it — never colour alone. */
.dashgrid{display:grid;gap:24px;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:stretch;
  margin-bottom:24px}
.dashgrid>*{min-width:0}
@media(max-width:1100px){.dashgrid{grid-template-columns:minmax(0,1fr)}}
.chartcard{padding:22px 24px 24px}
.chartcard__h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--tf-divider-soft)}
.chartcard__h h2{font-size:var(--tf-fs-h2);line-height:var(--tf-lh-h2)}
.chartcard__h p{margin:2px 0 0;color:var(--tf-text-muted);font-size:13px;line-height:18px}
.chart{position:relative;margin-top:14px}
.chart svg{display:block;overflow:visible}
.chart__empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--tf-text-muted);font-size:13px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.legend__i{display:inline-flex;align-items:center;gap:7px;font-size:13px;line-height:18px;color:var(--tf-text-body)}
.legend__i i{width:10px;height:10px;border-radius:2px;flex:0 0 10px}
.legend--bar{margin-top:14px;padding:12px 16px;border-radius:10px;background:#F4F5F7;justify-content:space-between}
.legend--bar .legend{gap:6px 18px}
.legend--bar .mono{font-size:12px;color:var(--tf-text-body)}
.viztip{position:absolute;top:0;background:var(--tf-text-heading);color:#fff;border-radius:10px;
  padding:10px 12px;font:12px/16px var(--tf-font-body);pointer-events:none;z-index:4;min-width:170px;
  box-shadow:var(--tf-shadow-pop)}
.viztip b{display:block;font:600 12.5px/16px var(--tf-font-head);margin-bottom:6px;color:#fff}
.viztip span{display:flex;align-items:center;gap:7px;margin-top:4px}
.viztip i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.viztip em{font-style:normal;color:#CBD5E1;margin-right:auto;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:17ch}
.viztip s{text-decoration:none;font-family:var(--tf-font-mono);color:#fff}
svg text{font-family:var(--tf-font-body);font-variant-numeric:tabular-nums}
.stack{position:relative}
.stack svg{display:block;overflow:visible}

/* the share-of-spend donut */
.donutcard{display:flex;flex-direction:column;padding:22px 24px 24px}
.donut{display:grid;place-items:center;padding:28px 0 26px;flex:1}
.donut svg{width:156px;height:156px}
.donut__c b{font:700 17px/22px var(--tf-font-body);fill:var(--tf-text-heading)}
.shares{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--tf-divider-soft);display:grid;gap:12px}
.shares li{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:18px;color:var(--tf-text-body)}
.shares li i{width:10px;height:10px;border-radius:2px;flex:0 0 10px}
.shares li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shares li small{font-size:12px;color:var(--tf-text-muted);font-variant-numeric:tabular-nums}
.shares li b{font-weight:700;color:var(--tf-text-heading);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.donut__none{margin:0;padding:16px;border-radius:10px;background:var(--tf-canvas);border:1px solid var(--tf-divider);
  text-align:center;color:var(--tf-text-muted);font-size:13.5px}

/* the operator overview's one-bar share and its table */
.share{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--tf-divider-soft);
  margin-bottom:16px;gap:2px}
.share__seg{display:block;min-width:3px}
.mtable th{padding:8px 6px}
.mtable td{padding:7px 6px;font-size:13px}
.swatch{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:8px;vertical-align:middle}
.dashbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.dashbar input[type="date"]{width:auto;padding:7px 11px;font-size:13px}
.dashbar__sep{width:1px;height:20px;background:var(--tf-divider)}
.rangequick{display:flex;gap:6px;flex-wrap:wrap}
.rangequick a{font-size:13px;padding:5px 12px;border-radius:var(--tf-radius-full);background:var(--tf-divider-soft);
  color:var(--tf-text-body);text-decoration:none}
.rangequick a:hover{background:var(--tf-primary-subtle);color:var(--tf-primary-ink)}

/* a cost-share bar in a table cell */
.sharebar{display:flex;align-items:center;gap:10px;min-width:130px}
.sharebar i{flex:1;height:6px;border-radius:999px;background:var(--tf-primary-subtle);position:relative;overflow:hidden}
.sharebar i u{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--tf-primary)}
.sharebar small{font:500 12px var(--tf-font-mono);color:var(--tf-text-body);min-width:34px;text-align:right}

.dcard{margin-bottom:24px}
.dcard .card__head{padding:20px 24px}
.dcard__filter{width:220px}
.recent td.num{white-space:nowrap}
.recent .tok{color:var(--tf-text-body)}
.ledger td{vertical-align:top}
.ledger__prompt{display:block;color:var(--tf-text-muted);font-size:13px;line-height:18px;margin-top:3px;
  max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger__id{font:12px var(--tf-font-mono);color:var(--tf-text-heading)}
.ledger__when{font:12.5px/18px var(--tf-font-mono);color:var(--tf-text-heading);white-space:nowrap}
.ledger__route{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ledger__route small{font-size:12.5px;color:var(--tf-text-body)}
@media(max-width:860px){
  .dcard__filter{width:100%}
  .card__tools{width:100%}
  .card__tools .searchbox{flex:1}
  .hide-sm{display:none}
}
@media(max-width:560px){.hide-xs{display:none}}
.kpi{position:relative}
.kpi__dot{position:absolute;top:24px;right:20px}
.kpi b.kpi__name{font:600 20px/28px var(--tf-font-head);letter-spacing:-.01em}
.kpi em.is-bad{color:var(--tf-danger-text)}
.kpi b small.pill{font-size:12.5px;line-height:20px;padding:1px 8px;font-weight:500}
.mname{white-space:nowrap}
@media(max-width:860px){
  .rangebar__sep{display:none}
  .rangebar,.rangebar .seg{width:100%}
  .rangebar .seg{justify-content:space-between}
  .rangebar .seg__b{padding:6px 8px;flex:1;text-align:center}
  .rangebar form{width:100%}
  .rangebar .datebox{flex:1 1 130px}
  .rangebar .datebox input[type=date]{width:100%}
  .phead__bar--end{justify-content:flex-start}
  .kpis--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis--5 .kpi:first-child{grid-column:1/-1}
}
/* The console fills the viewport under the shell's padding (pass 2 redesigns it). */
.wrap:has(> .cc){padding-bottom:24px}
.insight a:not(.linkbtn){color:var(--tf-primary);text-decoration:none}
.insight a:not(.linkbtn):hover{text-decoration:underline}

.side__toggle,.rail__chip{position:relative}

/* ============================================================ Models (frame 06) */
.mstats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:20px}
.mstat{background:var(--tf-panel);border:1px solid var(--tf-divider);border-radius:var(--tf-radius-xl);padding:14px 16px}
.mstat span{display:block;font:var(--tf-fw-overline) 11px/16px var(--tf-font-head);letter-spacing:var(--tf-ls-overline);
  text-transform:uppercase;color:var(--tf-text-muted);margin-bottom:6px}
.mstat b{font:700 17px/24px var(--tf-font-body);color:var(--tf-text-heading)}
.mstat b.is-good{color:var(--tf-success-text)}
.mstat b small{font:400 12px var(--tf-font-body);color:var(--tf-text-muted)}
.mstat em{font-style:normal;font-size:12.5px;color:var(--tf-text-muted);margin-left:4px}
.gridbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.gridbar__q{flex:1 1 320px;max-width:560px}
.gridbar__q input{height:40px;background:var(--tf-panel)}
.gridbar__grp{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.fpill,.fpill--all,.fpill--mod,.fpill--reg,.fpill--live{border:1px solid var(--tf-divider);background:var(--tf-panel);
  color:var(--tf-text-body);font:500 13px/18px var(--tf-font-body);padding:6px 13px;border-radius:var(--tf-radius-full);
  box-shadow:none}
.fpill:hover{border-color:#CBD5E1;background:var(--tf-panel);color:var(--tf-text-heading)}
.fpill.on,.fpill--all.on{background:var(--tf-primary);border-color:var(--tf-primary);color:#fff;box-shadow:none}
.modelgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.mgroup{margin:0 0 24px}
.mgroup__h b{font:600 15px var(--tf-font-head)}
.mcard{position:relative;border-radius:var(--tf-radius-xl);overflow:visible;border:1px solid var(--tf-divider)}
.mcard:hover{border-color:#C9D6FF;box-shadow:0 2px 8px rgba(47,107,255,.08)}
.mcard__summary{padding:18px 18px 16px;height:100%}
.mcard__head{align-items:flex-start;gap:10px;margin-bottom:10px}
.mcard__id{min-width:0;flex:1}
.mcard__name{font:600 15px/20px var(--tf-font-head);color:var(--tf-text-heading)}
.mcard__slug{margin:2px 0 0;font:400 11.5px/16px var(--tf-font-body);color:var(--tf-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard__blurb{font-size:13px;line-height:19px;color:var(--tf-text-body);min-height:38px;margin:0 0 12px}
.mmark{width:30px;height:30px;flex:0 0 30px;border-radius:8px;border:1px solid transparent;font:600 13px var(--tf-font-head)}
.mmark--0{background:#ECFDF5;color:#047857}.mmark--1{background:#FFF1E6;color:#C2410C}
.mmark--2{background:#EEF4FF;color:#1D55E8}.mmark--3{background:#F3E8FF;color:#7E22CE}
.mmark--4{background:#FEF3C7;color:#92400E}.mmark--5{background:#FCE7F3;color:#BE185D}
.ctxbadge{margin-left:auto;background:var(--tf-primary-subtle);color:var(--tf-primary-ink);border:1px solid #DCE6FF;
  border-radius:var(--tf-radius-md);font:500 11px/16px var(--tf-font-body);padding:2px 8px}
.pricebox{background:#F8FAFC;border:1px solid var(--tf-divider-soft);border-radius:var(--tf-radius-lg);
  padding:10px 12px;display:grid;gap:6px;margin-bottom:12px}
.pricerow span{font-size:13px;color:var(--tf-text-body)}
.pricerow b{font:500 13.5px var(--tf-font-body);color:var(--tf-text-heading)}
.pricerow b small{font-size:11px;color:var(--tf-text-muted);margin-left:2px}
.pricerow--muted span,.pricerow--muted b{font-size:12px;color:var(--tf-text-muted);font-weight:400}
.pricerow--ex{border-top:1px solid var(--tf-divider-soft);padding-top:12px;margin:0 0 12px}
.pricerow--ex span{font-size:12.5px;color:var(--tf-text-muted)}
.pricerow--ex b{font:700 14px var(--tf-font-body);color:var(--tf-text-heading)}
.caps{gap:6px;padding-top:2px}
.cap{display:inline-flex;align-items:center;gap:5px;border-radius:var(--tf-radius-md);font:500 11.5px/16px var(--tf-font-body);
  padding:2px 8px;border:1px solid var(--tf-divider);background:var(--tf-panel);color:var(--tf-text-body)}
.cap .dotst{width:6px;height:6px}
.cap--live{background:var(--tf-success-pill);border-color:#BBF0D9;color:var(--tf-success-text)}
.cap--prov{background:#FFF7ED;border-color:#FED7AA;color:#9A3412}
.cap--off{background:var(--tf-danger-pill);border-color:#F0C8C5;color:var(--tf-danger-text)}
.cap--mod,.cap--reg{background:var(--tf-panel);color:var(--tf-text-body)}
.mcard--best{border:1.5px solid var(--tf-success)}
.mcard--best .pricebox b,.mcard--best .pricerow--ex b{color:var(--tf-success-text)}
.mcard__ribbon{position:absolute;top:-10px;right:16px;background:var(--tf-success-text);color:#fff;
  font:600 10.5px/16px var(--tf-font-head);letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;
  border-radius:var(--tf-radius-full)}
.mband{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px;margin-top:24px}
.mband__over{display:flex;align-items:center;gap:8px;font:600 11px var(--tf-font-head);letter-spacing:var(--tf-ls-overline);
  text-transform:uppercase;color:var(--tf-text-muted);margin-bottom:8px}
.mband h2{font-size:19px;line-height:28px;max-width:44ch}
.mband p{margin:6px 0 0;color:var(--tf-text-muted);max-width:70ch}
.mband__acts{display:flex;flex-direction:column;gap:10px;align-items:stretch}
@media(max-width:860px){.gridbar__grp{margin-left:0}.mband__acts{flex-direction:row}}
.gridbar .searchbox input[type=search]{padding:8px 12px 8px 36px;border-radius:var(--tf-radius-lg);font-size:13.5px}
.gridbar .searchbox svg{left:12px}

/* ============================================================ Top up (frame 07) */
.tstats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:18px}
.tstat{display:flex;gap:14px;align-items:center;background:var(--tf-panel);border:1px solid var(--tf-divider);
  border-radius:var(--tf-radius-xl);padding:16px 18px}
.tstat__i{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:#F1F5F9;display:grid;place-items:center;
  color:var(--tf-primary-ink)}
.tstat__i svg{width:20px;height:20px}
.tstat span:not(.tstat__i){display:block;font:600 11px/16px var(--tf-font-head);letter-spacing:var(--tf-ls-overline);
  text-transform:uppercase;color:var(--tf-text-muted)}
.tstat b{display:block;font:700 22px/30px var(--tf-font-body);color:var(--tf-text-heading)}
.tstat b small{font:500 12px var(--tf-font-body);color:var(--tf-text-muted)}
.tstat em{display:block;font-style:normal;font-size:12.5px;color:var(--tf-text-muted)}
.tstat em a{color:var(--tf-primary);text-decoration:none}
.democard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:24px;
  border:1px solid var(--tf-divider);border-radius:var(--tf-radius-xl);background:#F8FAFC;font-size:13px;color:var(--tf-text-body)}
.democard__i{width:36px;height:36px;border-radius:10px;background:var(--tf-primary-subtle);color:var(--tf-primary-ink);
  display:grid;place-items:center;flex:none}
.democard__i svg{width:18px;height:18px}
.democard b{font:600 14px var(--tf-font-head);color:var(--tf-text-heading)}
.democard > span:last-child{flex:1 1 320px}
.kcard{font:500 12.5px var(--tf-font-mono);color:var(--tf-primary-ink);background:var(--tf-panel);border:1px solid var(--tf-divider);
  border-radius:5px;padding:1px 6px;white-space:nowrap}
.tsec{margin-bottom:24px}
.tsec__h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.tsec__h h2{font-size:17px;line-height:24px}
.tsec__h p{margin:2px 0 0;font-size:13px;color:var(--tf-text-muted)}
.packs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pack{padding:20px;border-radius:var(--tf-radius-xl);border:1px solid var(--tf-divider)}
.pack--pop{border:2px solid var(--tf-primary);box-shadow:0 8px 24px rgba(47,107,255,.12)}
.pack__tag{top:-12px;left:50%;transform:translateX(-50%);background:var(--tf-primary);font:600 10.5px/16px var(--tf-font-head);
  letter-spacing:.06em;text-transform:uppercase;padding:3px 12px}
.pack__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pack h3{font:500 14px var(--tf-font-head);color:var(--tf-text-heading)}
.pack--pop h3{color:var(--tf-primary-ink)}
.pack .bonus{font:600 11px/16px var(--tf-font-head);letter-spacing:.03em;text-transform:uppercase;border-radius:5px}
.pack .bonus--none{color:var(--tf-text-muted);background:var(--tf-divider-soft)}
.pack .amt{font:700 34px/40px var(--tf-font-body);letter-spacing:-.02em;margin:14px 0 6px;color:var(--tf-text-heading)}
.pack .amt small{font:500 12px var(--tf-font-body);color:var(--tf-text-muted);letter-spacing:0}
.pack p{margin:0 0 14px;font-size:13px;line-height:19px;min-height:38px}
.pack__got{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:var(--tf-radius-lg);
  background:#F8FAFC;border:1px solid var(--tf-divider-soft);margin-bottom:14px;font-size:12.5px;color:var(--tf-text-body)}
.pack__got b{font:600 14px var(--tf-font-body);color:var(--tf-text-heading)}
.pack--pop .pack__got{background:var(--tf-primary-subtle);border-color:#DCE6FF}
.pack--pop .pack__got b{color:var(--tf-primary-ink)}
.pack .btn{width:100%}
.btn--soft{background:#EEF1FB;color:var(--tf-text-heading)}
.btn--soft:hover{background:#E2E8F8}
.tgrid{display:grid;gap:24px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;margin-bottom:24px}
@media(max-width:1100px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.bigamt{display:flex;align-items:center;gap:8px;background:#F8FAFC;border:1px solid var(--tf-divider);border-radius:10px;
  padding:6px 16px;font:600 22px var(--tf-font-body);color:var(--tf-text-heading)}
.bigamt:focus-within{border-color:var(--tf-primary);box-shadow:var(--tf-focus)}
.bigamt input[type=number]{border:0;background:transparent;box-shadow:none;font:700 24px var(--tf-font-body);padding:8px 0;flex:1;min-width:0}
.bigamt input:focus{box-shadow:none}
.bigamt em{font-style:normal;font:500 13px var(--tf-font-body);color:var(--tf-text-muted)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.quick__b{border:1px solid var(--tf-divider);background:var(--tf-panel);border-radius:6px;padding:4px 10px;cursor:pointer;
  font:500 12px var(--tf-font-mono);color:var(--tf-text-body)}
.quick__b:hover{border-color:var(--tf-primary);color:var(--tf-primary-ink)}
.qualify{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--tf-radius-lg);background:#F8FAFC;
  border:1px solid var(--tf-divider-soft);font-size:13px;color:var(--tf-text-body)}
.qualify svg{width:17px;height:17px;color:var(--tf-primary-ink);flex:none}
.tcustom .hint{margin:12px 0 0}
.tcustom__go{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--tf-divider-soft)}
.over{display:block;font:600 11px/16px var(--tf-font-head);letter-spacing:var(--tf-ls-overline);text-transform:uppercase;
  color:var(--tf-text-muted)}
.tcustom__go b{font:700 24px/30px var(--tf-font-body);color:var(--tf-text-heading)}
.vform2{display:flex;gap:10px}
.vform2 .searchbox{flex:1}
.vform2 input{height:44px}
.vlist{margin-top:14px;padding:12px 14px;border-radius:var(--tf-radius-lg);background:#F8FAFC;border:1px solid var(--tf-divider-soft)}
.vlist__r{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:13px}
.vlist__r b{color:var(--tf-success-text);font-weight:600}
.tiers{display:grid;gap:8px}
.tiers__r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--tf-radius-lg);
  background:#F8FAFC;font-size:13px}
.tiers__r b{color:var(--tf-success-text);font-weight:600}

/* ============================================================ sign-in, sign-up, EULA */
.auth{background:var(--tf-canvas)}
.auth__art{background:radial-gradient(900px 500px at 10% 0%,rgba(47,107,255,.35),transparent 60%),var(--tf-text-heading);
  padding:56px 64px}
.auth__art .brandword{font-size:22px}
.auth__art h2{font:600 34px/44px var(--tf-font-head);color:#fff;letter-spacing:-.02em;max-width:18ch}
.auth__art p{color:#CBD5E1;font-size:15px;line-height:24px}
.auth__art li{color:#E2E8F0;font-size:14.5px;padding-left:30px}
.auth__art li::before{content:"";left:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:rgba(47,107,255,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393B4FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
.auth__form{background:var(--tf-panel)}
.auth__form .inner{max-width:400px}
.auth__form h1.display{font:600 28px/36px var(--tf-font-head)}
.auth__form .btn{height:44px}
.steps__dot{font:600 12.5px var(--tf-font-body)}
.doc-page{background:var(--tf-canvas)}
.doc-page__inner{border-radius:var(--tf-radius-xl);border-color:var(--tf-divider);box-shadow:var(--tf-shadow-card)}
.doc-page h3{font:600 16px/24px var(--tf-font-head);color:var(--tf-text-heading)}
.doc-page p{color:var(--tf-text-body)}
.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px}
@media(max-width:560px){.mstats{grid-template-columns:1fr 1fr;gap:10px}.mstat b{font-size:15px}}

/* v28 — the owner's pricing model: model codes, categories, derived prices. */
.mcode{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--tf-font-mono,monospace);
  letter-spacing:.02em;color:var(--tf-primary-ink);background:var(--tf-primary-subtle);
  border:1px solid #C9D6FF;border-radius:7px;padding:3px 9px;white-space:nowrap}
.mcode--lg{font-size:15px;padding:7px 12px;border-radius:9px}
.mcode-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.catbadge{display:inline-flex;align-items:center;font:600 11px var(--tf-font-body,sans-serif);
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid}
.catbadge--premium{color:#7A4B00;background:#FFF4DB;border-color:#F2D48A}
.catbadge--optimized{color:#0B6B4F;background:#E3F7EE;border-color:#A6E3C8}
.pricerow--sell b{color:var(--tf-primary-ink)}
.derived{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
  margin:4px 0 14px;padding:12px;border:1px dashed var(--line,#D9DEE7);border-radius:10px;
  background:var(--tf-surface-subtle,#F8FAFC)}
.derived__col{display:grid;gap:3px}
.derived__h{font:600 11px var(--tf-font-body,sans-serif);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.derived__h em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;margin-left:4px}
.derived__col b{font:600 14px var(--tf-font-mono,monospace)}
.derived__col--sell b{color:var(--tf-primary-ink)}
.mcard__code{margin:6px 0 2px}
.mp__code{font:600 11.5px var(--tf-font-mono,monospace);color:var(--tf-primary-ink)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .catbadge--premium{color:#F6D58E;background:#3A2C0F;border-color:#6B5320}
  :root:not([data-theme="light"]) .catbadge--optimized{color:#8FE3C1;background:#0F2E24;border-color:#1F5C47}
}