@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-latin-wght.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-mono-latin-wght.woff2) format("woff2"); }

:root {
  --basalt-950: #0E1114; --basalt-900: #151A1F; --basalt-700: #2A333C; --basalt-500: #56616C; --basalt-300: #9AA4AD;
  --ember: #F2662B; --ember-hot: #FFB547; --ember-deep: #B8401A;

  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: var(--basalt-950);
  --panel: var(--basalt-900);
  --surface: #1A2128;
  --raised: var(--basalt-700);
  --line: #28313A;
  --line-soft: #222A32;
  --fg: #E9ECEE;
  --fg-2: var(--basalt-300);
  --fg-3: #77828C;
  --accent: #FF7A3D;
  --warn: #E9C341;
  --err: #D93A5B;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14px/1.5 var(--font-sans); }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }
td, th, .v, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u { color: var(--fg-3); font-weight: 400; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--raised); border: 2px solid var(--panel); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--raised) transparent; }

/* Top bar: brand, model, then state and address */
.bar { display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 28px; flex: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 30px; height: 30px; display: block; }
.wordmark { font: 700 24px/1 var(--font-sans); letter-spacing: -.035em; }
.model { font: 400 13px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grow { flex: 1; }
.crumb { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crumb-sep { color: var(--raised); font: 300 24px/1 var(--font-sans); flex: none; }
/* Model picker: an outlined button and a list in a popover */
.ms { position: relative; min-width: 0; }
.ms > button { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; font: 500 16px/1.2 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; }
.ms > button > span { overflow: hidden; text-overflow: ellipsis; }
.ms > button::after { content: ""; flex: none; width: 6px; height: 6px; border: solid var(--fg-3); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.ms > button:hover, .ms[data-open] > button { border-color: var(--raised); }
.ms > button:focus-visible { outline: none; border-color: var(--accent); }
.ms[data-open] > button::after { transform: translateY(1px) rotate(-135deg); }
.ms .pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; min-width: 300px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--raised); border-radius: 8px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.ms:not([data-open]) .pop { display: none; }
.ms .opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 10px; border-radius: 5px; font: 400 13px/1 var(--font-mono); color: var(--fg-2); text-align: left; }
.ms .opt > b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms .opt > span { flex: none; color: var(--fg-3); font-size: 12px; }
.ms .opt:hover:not(:disabled), .ms .opt:focus-visible { background: var(--raised); color: var(--fg); outline: none; }
.ms .opt[aria-checked="true"] > b { color: var(--accent); }
.ms .opt.go > span { color: var(--fg-2); }
.ms .opt.go:hover > span { color: var(--accent); }
.ms .opt:disabled { cursor: default; opacity: .5; }
.state { font: 500 13px/1 var(--font-mono); color: var(--fg-2); white-space: nowrap; }
.state[data-s="generating"], .state[data-s="reading"] { color: var(--accent); }
.state[data-s="offline"] { color: var(--err); }
.state[data-s="loading"] { color: var(--accent); }
/* State spot: fixed width; a load shows its label and percent over a bar */
.sp { flex: none; width: 96px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; }
.lab { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; width: 100%; }
.sp:has(.pbar:not([hidden])) .lab { justify-content: space-between; }
#pct { font-variant-numeric: tabular-nums; }
.pbar { width: 100%; height: 3px; border-radius: 2px; background: #333E48; overflow: hidden; }
.pbar > i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--accent); transition: width .8s linear; }
.where { font: 400 13px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; }

.auth { display: flex; align-items: center; gap: 12px; margin: 0 28px 16px; padding: 12px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; flex: none; }
.auth label { color: var(--fg-2); }
.auth input { flex: 1; max-width: 360px; background: var(--bg); border: 1px solid transparent; border-radius: 6px; padding: 9px 12px; color: var(--fg); font-family: var(--font-mono); }
.auth input:focus { border-color: var(--fg-3); outline: 0; }
.auth button { padding: 9px 16px; border-radius: 6px; background: var(--raised); }

/* Page: the hardware sidebar at full height, Speed across the top, the slots and the logs below */
.lay { display: grid; gap: 16px; padding: 0 28px 16px; grid-template-columns: 320px minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "side hero hero" "side main logs"; }
.a-side { grid-area: side; }
.a-hero { grid-area: hero; }
.a-main { grid-area: main; display: flex; flex-direction: column; }
.a-logs { grid-area: logs; display: flex; flex-direction: column; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-width: 0; min-height: 0; }
.hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px; font-size: 13px; color: var(--fg-3); border-bottom: 1px solid var(--line); flex: none; }
.hd b { color: var(--fg); font-weight: 600; font-size: 14px; }
.lh { height: 54px; align-items: center; padding: 0 20px; }
.lh span { font: 400 12.5px/1 var(--font-mono); }
.k { font: 13px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; }
.v { font-weight: 500; letter-spacing: -.02em; white-space: nowrap; line-height: 1; }
.v small { font-size: .38em; font-weight: 400; color: var(--fg-3); margin-left: 6px; letter-spacing: 0; }
.big { font-size: 64px; color: var(--accent); margin-top: 12px; }
.big.idle { color: var(--fg-2); }
.mid { font-size: 44px; margin-top: 12px; }

/* Sidebar: GPUs, System, Experts pinned to the bottom */
.sb { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.sb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 0; font: 600 14.5px/1 var(--font-sans); white-space: nowrap; }
.sb-h span { font: 400 12.5px/1 var(--font-mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-gpus { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sb-gpu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px; }
.sb-gpu + .sb-gpu { border-top: 1px solid var(--line-soft); }
.sb-gt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 14px/1 var(--font-sans); white-space: nowrap; }
.sb-gt > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-gt .num { font-size: 12.5px; color: var(--fg-3); }
.sb-gt .num b { color: var(--fg); font-weight: 500; font-size: 13.5px; margin-right: 4px; }
.sb-met { display: flex; flex-direction: column; gap: 8px; }
.sb-met.grow { flex: 1 1 0; min-height: 0; }
.sb-row { display: flex; align-items: baseline; gap: 12px; line-height: 1; white-space: nowrap; }
.sb-row .k { font: 400 13px/1 var(--font-sans); color: var(--fg-3); }
.sb-row .st { font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.sb-row .num { margin-left: auto; font-size: 14.5px; font-weight: 500; }
.sb-row .num .u { font-size: 12.5px; margin-left: 5px; }
.bar4 { height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.bar4 i { display: block; height: 100%; background: var(--fg-2); border-radius: 2px; }
.sb-ch { position: relative; flex: 1 1 0; min-height: 28px; }
.sb-ch svg, .spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-tbl { display: grid; grid-template-columns: 48px 76px 72px minmax(0, 1fr); column-gap: 10px; padding: 14px 20px 0; flex: none; }
.sb-tbl .h { font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); text-align: right; white-space: nowrap; padding-bottom: 10px; }
.sb-tbl .h.l { text-align: left; }
.sb-tbl .t { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font: 500 13.5px/1 var(--font-sans); white-space: nowrap; }
.sb-tbl .t > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-tbl .t .num { font-size: 11.5px; color: var(--fg-3); font-weight: 400; }
.sb-tbl .c { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 9px 0 12px; font: 500 13.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-tbl .c.l { align-items: flex-start; }
.sb-agg { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; margin: 0 20px; padding: 12px 0 16px; border-top: 1px solid var(--line-soft); }
.sb-agg .sb-gt { font-size: 13px; }
.sb-none { padding: 14px 20px; font-size: 13px; color: var(--fg-3); }
.sb-sys, .sb-exp { flex: none; border-top: 1px solid var(--line); }
.sb-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 16px; }
.sb-foot { font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.sb-exp .sb-body { display: block; padding: 14px 20px 18px; }
.sb-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--raised); }
.sb-stack i { display: block; height: 100%; }
.sb-leg { display: flex; justify-content: space-between; margin-top: 14px; }
.sb-leg > div { display: grid; grid-template-columns: 8px auto; column-gap: 7px; row-gap: 7px; align-items: center; white-space: nowrap; }
.sb-leg > div::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.sb-leg span { font-size: 12.5px; line-height: 1; color: var(--fg-3); }
.sb-leg b { grid-column: 2; font: 500 14.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
/* Experts on the SSD: the block turns amber, the legend becomes a 2x2 grid of one-line tiers, and a note gives the fix */
.sb-exp.spill { margin: 0 8px 8px; border: 1px solid rgba(233, 195, 65, .55); border-radius: 6px; background: rgba(233, 195, 65, .07); }
.sb-exp.spill .sb-h, .sb-exp.spill .sb-body { padding-left: 12px; padding-right: 12px; }
.sb-exp.spill .sb-h > span { color: var(--warn); }
.sb-leg.q { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 9px; margin-top: 12px; }
.sb-leg.q > div { grid-template-columns: 8px auto 1fr; row-gap: 0; }
.sb-leg.q b { grid-column: 3; justify-self: end; font-size: 13.5px; }
.sb-note { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.sb-note b { color: var(--warn); font-weight: 600; }
.sb-note > span { white-space: nowrap; }

/* Speed: decode on the wide left, prefill on the right, one footer bar under both */
.trio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.trio > div { padding: 20px; min-width: 0; display: flex; flex-direction: column; }
.trio > div + div { border-left: 1px solid var(--line); }
.ch { display: flex; justify-content: flex-end; margin-top: 12px; }
.cks { display: flex; flex-wrap: nowrap; gap: 3px; justify-content: flex-end; overflow: hidden; }
.ck { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--line); font: 11px/1 var(--font-mono); white-space: nowrap; }
.ck .bx { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 2px; position: relative; }
.ck[aria-pressed="true"] .bx { background: currentColor; }
.ck[aria-pressed="true"] .bx::after { content: ""; position: absolute; left: 1.5px; top: -1px; width: 2.5px; height: 5px; border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ck[aria-pressed="false"] { opacity: .45; }
.ck svg { width: 12px; height: 6px; }
.cw { position: relative; flex: 1 1 auto; min-height: 90px; margin-top: 14px; }
.pcw { position: relative; flex: 0 1 72px; min-height: 48px; margin-top: 22px; }
.cw svg, .pcw svg { position: absolute; left: 0; top: 0; width: calc(100% - 34px); height: 100%; overflow: visible; }
.tk, .cl { position: absolute; right: 0; transform: translateY(-50%); font: 10px/1 var(--font-mono); color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl { font-size: 11px; }
.pst { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.pst div { display: flex; justify-content: space-between; gap: 12px; font: 12.5px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; }
.pst b { color: var(--fg); font-weight: 500; }
.hfoot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); border-top: 1px solid var(--line); font: 13px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; }
.hfoot > div { padding: 12px 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hfoot > div + div { border-left: 1px solid var(--line); }
.hfoot b { color: var(--fg-2); font-weight: 500; }

/* Main card: tabs, then one pane */
.tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.tabs button { padding: 6px 14px; border-radius: 6px; color: var(--fg-3); font-weight: 500; line-height: 1.5; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); }
.pane { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.empty { padding: 14px 20px; color: var(--fg-3); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th { font-weight: 400; color: var(--fg-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
tr:last-child td { border-bottom: 0; }
th, td { padding: 5px 14px; font-size: 12.5px; line-height: 1.5; }
th { padding-top: 7px; padding-bottom: 7px; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
.r { text-align: right; }
.dim { color: var(--fg-3); }
td.warn { color: var(--warn); }
td.err { color: var(--err); }
tr.live td { color: var(--accent); }
.qsum { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); font: 12.5px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; flex: none; }
.qsum b { color: var(--fg); font-weight: 500; }

/* Slots: every row is the same grid; primary values share one baseline, secondary values a second */
.sl { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; --cols: 76px 52px minmax(0, 1fr) 90px 96px 64px; }
.sl.dense { --cols: 118px 40px minmax(0, 1fr) 90px 96px 44px; }
.rw { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: var(--cols); grid-template-rows: 1fr auto auto 1fr; column-gap: 14px; align-items: baseline; padding: 0 20px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.sl.dense .rw { grid-template-rows: 1fr auto 1fr; }
.rw:last-child { border-bottom: 0; }
.sl .rw.h { flex: none; height: 32px; grid-template-rows: 1fr; align-items: center; font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); }
.rw > * { min-width: 0; }
.rw .e { justify-self: end; text-align: right; }
.rw .p { grid-row: 2; position: relative; font: 500 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.rw .p .u { font-size: 12px; }
.rw .p.nm { font-family: var(--font-sans); }
.rw .p.nm .u { font: 400 12px/1 var(--font-mono); }
.rw .p.rate { color: var(--accent); }
.rw.idle .p { color: var(--fg-2); }
.rw.idle .p.rate, .rw.idle .p.nm { color: var(--fg-3); }
.rw .s { grid-row: 3; margin-top: 14px; font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); }
.rw .p .bar4 { position: absolute; left: 0; right: 0; top: calc(100% + 5px); height: 3px; }
.sl.dense .rw .p .bar4 { top: calc(100% + 4px); }
.spark { position: relative; min-height: 0; }
.rw .spark { grid-column: 3; grid-row: 1 / -1; align-self: stretch; margin: 12px 0; }
.sl.dense .rw .spark { margin: 7px 0; }

/* Logs: wrapped, continuation lines indented past the time */
.logs { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 20px; font: 12.5px/1.8 var(--font-mono); color: var(--fg-2); white-space: pre-wrap; overflow-x: hidden; }
.logs div { padding-left: 10ch; text-indent: -10ch; overflow-wrap: anywhere; }
.logs i { font-style: normal; color: var(--fg-3); }
.logs .warn { color: var(--warn); }
.logs .err { color: var(--err); }
.logs .empty { padding: 0; text-indent: 0; }

/* Context (one slot): what the window holds, and per recent request */
.cx1 { padding: 20px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cx-head .v { font-size: 44px; }
.cx-head .v small { font-size: .38em; }
.cx-bar { display: flex; gap: 2px; margin-top: 14px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--raised); }
.cx-bar i { display: block; height: 100%; background: var(--fg-2); }
.cx-scale { display: flex; justify-content: space-between; margin-top: 8px; font: 11.5px/1 var(--font-mono); color: var(--fg-3); }
.cx-hist { flex: 1 1 0; min-height: 110px; margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 16px; display: flex; flex-direction: column; }
.cx-hist .hh { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-3); }
.cx-hist .hh b { color: var(--fg); font-weight: 600; font-size: 14px; }
.cx-chart { position: relative; flex: 1; margin-top: 12px; margin-bottom: 18px; min-height: 70px; }
.cx-chart svg { position: absolute; left: 0; top: 0; width: calc(100% - 40px); height: 100%; overflow: visible; }
.cx-chart .xl { position: absolute; left: 0; bottom: -18px; width: calc(100% - 40px); display: flex; justify-content: space-between; font: 10px/1 var(--font-mono); color: var(--fg-3); }

/* Desktop: one screen, nothing scrolls but the panes */
@media (min-width: 901px) {
  html, body { height: 100%; overflow: hidden; }
  body { display: flex; flex-direction: column; }
  .lay { flex: 1; min-height: 0; }
  .big { font-size: clamp(44px, 6.5vh, 64px); }
}
/* Short windows: the GPU table tightens and the total-power chart gives way */
@media (min-width: 901px) and (max-height: 860px) {
  .sb-tbl .t { padding-top: 9px; }
  .sb-tbl .c { padding: 7px 0 9px; }
  .sb-agg .sb-met + .sb-met { display: none; }
}
/* Phone and narrow windows: one column (header, Speed, slots, logs, hardware) */
@media (max-width: 900px) {
  body { overflow-x: hidden; }
  .bar { padding: 0 16px; gap: 12px; flex-wrap: wrap; height: auto; min-height: 56px; }
  .where { display: none; }
  .auth { margin: 0 16px 16px; }
  .lay { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "hero" "main" "logs" "side"; padding: 0 16px 16px; }
  .trio, .hfoot { grid-template-columns: 1fr; }
  .trio > div + div, .hfoot > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .cw { min-height: 120px; }
  .big { font-size: 52px; }
  .mid { font-size: 38px; }
  .pane { max-height: 520px; }
  .rw { flex: none; min-height: 72px; }
  .sl.dense .rw { min-height: 42px; }
  .sl .rw.h { min-height: 0; }
  .logs { height: 280px; flex: none; }
  .sb-gpu, .sb-agg, .sb-met.grow { flex: none; }
  .sb-ch { flex: none; height: 56px; }
}
@media (max-width: 560px) {
  .ms > button { font-size: 13px; padding: 6px 8px; gap: 6px; }
  .crumb-sep { display: none; }
  .crumb { gap: 0; }
  .sp { width: 88px; }
  .lab .state { font-size: 12px; }
  .bar { position: relative; flex-wrap: nowrap; gap: 10px; }
  .ms { position: static; }
  .ms .pop { left: 16px; right: 16px; min-width: 0; max-width: none; }
  .sl, .sl.dense { --cols: 76px minmax(0, 1fr) 0 96px 0 56px; }
  .sl.dense .rw .p.nm .u { display: none; }
  .rw { column-gap: 10px; padding: 0 16px; }
  .rw .cx, .rw .spark, .rw .sk { display: none; }
}

/* a chip in the prefill footer, one muted line under the main card */
#foot-dec { display: flex; justify-content: space-between; gap: 12px; }
#foot-dec > span { flex: none; }
.cc { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg-3); cursor: default; }
.tot { flex: none; padding: 9px 20px; border-top: 1px solid var(--line); font: 400 11.5px/1 var(--font-mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
@media (max-width: 560px) { .tot { white-space: normal; line-height: 1.4; padding: 9px 16px; } }
@media (max-width: 560px) { #foot-dec { flex-wrap: wrap; row-gap: 10px; } }