:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --border: #2a2f3a;
  --text: #e6e9ef;
  --muted: #8b93a3;
  --accent: #d97747;
  --ok: #4caf7d;
  --warn: #d9a441;
  --err: #e05d5d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Tell the browser this is a dark UI: without it, native scrollbars, select
   popups and autofill render light against the dark page, and the canvas
   default is the light one. */
:root { color-scheme: dark; }

/* The background is set on BOTH html and body, and body is held to the full
   viewport, so a short page still paints edge to edge. A background on body
   alone only reaches the canvas via propagation, which leaves the area past
   the content — including macOS overscroll bounce — showing the browser's
   default instead. */
html {
  background: var(--bg);
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 24px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.muted { color: var(--muted); }
.error { color: var(--err); }
code { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; word-break: break-all; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 14px;
}
.login-card p { margin: 0 0 8px; }

/* ---- layout ---- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; color: var(--accent); }
/* min-width:0 + overflow on the NAV, not the page: five tabs plus the logout
   button do not fit a phone, and a topbar that widens the page drags every
   panel under it sideways too. */
.topbar nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
main { padding: 20px; max-width: 1100px; margin: 0 auto; }
/* The request log is a wide grid, not prose — give it the window. Prose-shaped
   tabs stay at 1100px, where a line length is still readable. */
main.wide { max-width: 1800px; }
.panel { animation: fade 0.15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- sidebar shell ----
   Three groups of tabs on the left, the panel on the right. The buttons keep
   their data-tab wiring; only where they sit changed. */
.topbar .spacer { flex: 1; }
.shell { display: flex; align-items: stretch; }
.sidenav {
  flex: 0 0 200px;
  padding: 14px 10px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  /* The topbar is already sticky at top:0, and its border box is 60px: a 39px
     logout button (21px line box + 8px padding + 1px border, top and bottom)
     inside 10px padding and a 1px bottom border. The sidenav parks directly
     under it, so the two stack instead of overlapping.
     align-self keeps the flex row from stretching it to full height — a
     stretched item fills its containing block and can never scroll off, so
     sticky would have nothing to do. */
  position: sticky;
  top: 60px;
  align-self: flex-start;
}
.navgroup + .navgroup { margin-top: 14px; }
.navgroup-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 10px 4px;
}
.sidenav .tab {
  display: block; width: 100%; text-align: left;
  border-radius: 6px; padding: 7px 10px; border-left: 2px solid transparent;
}
.sidenav .tab.active {
  background: var(--panel-2); color: var(--text);
  border-bottom: 0; border-left-color: var(--accent); border-radius: 6px;
}
main { flex: 1; min-width: 0; }
.card-value.small { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrow screens: the sidebar becomes the old scrolling tab row, groups inline. */
@media (max-width: 700px) {
  .shell { display: block; }
  .sidenav {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--border);
    /* Undo the desktop sticky: here it is a horizontal scrolling row, not a
       column. (top and align-self need no reset — top does nothing on a static
       box, and .shell is display:block at this width, so there is no flex row
       to align against.) */
    position: static;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .navgroup { display: flex; align-items: center; gap: 2px; }
  .navgroup + .navgroup { margin: 0 0 0 10px; padding-left: 10px; border-left: 1px solid var(--border); }
  .navgroup-title { margin: 0 6px 0 0; white-space: nowrap; }
  .sidenav .tab { width: auto; display: inline-block; }
}
/* The relay chip on a token tile: on = carrying relay traffic, off = switched off. */
.chip.chip-relay.off { --tone: var(--muted); }

/* ---- controls ---- */
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  padding: 8px 14px; cursor: pointer; font: inherit;
}
button:hover { filter: brightness(1.1); }
button.ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text);
}
button.small { padding: 3px 8px; font-size: 12px; }
button.tab { background: transparent; color: var(--muted); padding: 8px 10px; white-space: nowrap; }
button.tab.active { color: var(--text); border-bottom: 2px solid var(--accent); border-radius: 0; }
input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 8px 10px; font: inherit; width: 100%;
}
textarea { resize: vertical; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label input, label select, label textarea { color: var(--text); }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.card-label { color: var(--muted); font-size: 12px; }
.card-value { font-size: 24px; font-weight: 700; margin-top: 2px; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--muted); font-weight: 600; background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
td.ok { color: var(--ok); }
td.err { color: var(--err); }

/* ---- data table (request log) ----
   Row content must never wrap: a wrapped cell doubles the row height and makes
   the log unscannable. The table gets as wide as its content needs and the
   WRAPPER scrolls sideways, so the page itself never does. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
/* The wrapper already draws the frame — a second one from the table shows as a
   double line the moment the wrapper scrolls. */
.tablewrap > table { border: 0; border-radius: 0; }
/* min-width is only a floor; nowrap is what actually guarantees single-line
   rows at any window size — below the floor the wrapper scrolls instead. */
.datatable { border: 0; border-radius: 0; width: 100%; min-width: 1180px; }
.datatable th, .datatable td { white-space: nowrap; }
/* No sticky header: .tablewrap is a scroll container (overflow-x makes
   overflow-y compute to auto), so a sticky thead would anchor to a box that
   never scrolls vertically and silently do nothing. The page scrolls, and the
   page size keeps a page short enough to scan. */
.datatable td.num, .datatable th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable headers. The arrow is always present so the column width does not
   jump when the sort moves — inactive ones are just dimmed. */
.datatable th[data-sort] { cursor: pointer; user-select: none; }
.datatable th[data-sort]:hover { color: var(--text); }
.datatable th[data-sort]::after {
  content: "↕"; margin-left: 6px; opacity: 0.3; font-size: 11px;
}
.datatable th[data-sort].sorted-asc::after { content: "↑"; opacity: 1; color: var(--accent); }
.datatable th[data-sort].sorted-desc::after { content: "↓"; opacity: 1; color: var(--accent); }
.datatable th[data-sort].sorted-asc, .datatable th[data-sort].sorted-desc { color: var(--text); }

.datatable tfoot td {
  border-top: 1px solid var(--border); border-bottom: 0;
  background: var(--panel-2); font-weight: 700; color: var(--text);
}
.datatable tfoot .label { color: var(--muted); font-weight: 400; }
.datatable tbody tr:hover td { background: var(--panel-2); }
.datatable .sid { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.datatable .when { color: var(--muted); }
.datatable .when b { color: var(--text); font-weight: 600; }
/* The one column allowed to be long: clip it instead of wrapping the row. */
.datatable .status { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.tablebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.tablebar .spacer { flex: 1; }
.tablebar select { width: auto; min-width: 90px; }
.inline-label {
  flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap;
}

/* ---- misc ---- */
.log { list-style: none; padding: 0; margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; max-height: 320px; overflow-y: auto; }
.log li { padding: 5px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-family: ui-monospace, monospace; }
.log li:last-child { border-bottom: 0; }
.log .lt { color: var(--muted); margin-right: 8px; }
.log .ltype { display: inline-block; min-width: 74px; color: var(--accent); }
/* ---- subscription token pool ----
   Several tokens, one tile each. The tile has to answer three questions at a
   glance — is this one running, how full is its subscription, and when does it
   expire — so usage gets bars (a comparison across tiles) and the expiry stays
   a fact in the list (a single date nobody compares).
   --tone carries the urgency colour through the border, the chip and the bars. */
.pool {
  padding: 14px 16px 16px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pool-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pool-head .spacer { flex: 1; }
.pool-title { margin: 0; font-size: 15px; }
.pool-head select { width: auto; padding: 4px 8px; font-size: 12.5px; }
#pool-summary { flex-basis: 100%; order: 3; }
@media (min-width: 900px) { #pool-summary { flex-basis: auto; order: 0; } }

.credgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
}
.credtile {
  --tone: var(--ok);
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tone);
  border-radius: 10px;
  min-width: 0;
}
.credtile.warn { --tone: var(--warn); }
.credtile.bad { --tone: var(--err); }
/* Off duty for a reason the operator chose or a fault they must see — either
   way it is not carrying traffic, so it must not read as an equal peer. */
.credtile.idle { --tone: var(--muted); opacity: 0.72; }
.credtile.active { border-color: color-mix(in srgb, var(--tone) 55%, var(--border)); }

.credtile header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.credtile header .spacer { flex: 1; }
.credname {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The fingerprint is the one thing in the header with no word boundaries to
   wrap on: squeeze it and it becomes a column of single characters. It never
   shrinks and never wraps — the name beside it is what gives way. */
.credtile header code {
  font-size: 11.5px; color: var(--muted); background: var(--panel-2);
  flex: none; white-space: nowrap;
}
/* Chips get their own row. Identity and state on one line stopped fitting a
   310px tile the moment a second chip existed, and a third would land here too. */
.credchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  /* Inside a tile --tone is inherited and carries the tile's urgency. Outside
     one (table rows) there is nothing to inherit, so the fallback keeps the
     chip legible instead of leaving it an invalid colour. */
  color: var(--tone, var(--muted));
  border: 1px solid color-mix(in srgb, var(--tone, var(--muted)) 45%, transparent);
  background: color-mix(in srgb, var(--tone, var(--muted)) 12%, transparent);
}
/* Explicit tones, for chips standing on their own in a table cell. */
.chip.ok { --tone: var(--ok); }
.chip.warn { --tone: var(--warn); }
.chip.bad { --tone: var(--err); }
.chip.muted { --tone: var(--muted); }

/* Usage bars. The row is label / bar / number so the numbers line up down the
   column and the bars can be compared across tiles without reading them. */
.usage { display: grid; gap: 5px; }
/* 58px is what the longest label ("7n Sonnet") needs on one line; wrapping it
   makes that one row taller than its neighbours and the bars stop lining up. */
.bar-row { display: grid; grid-template-columns: 58px 1fr 42px; align-items: center; gap: 8px; }
.bar-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bar { height: 7px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--tone); transition: width 0.4s ease; }
.bar-val { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
/* An estimate must not look like a measurement. */
.bar.guess i { background: repeating-linear-gradient(
  45deg, var(--muted), var(--muted) 3px, transparent 3px, transparent 6px); }
.bar-val.guess { color: var(--muted); }
/* A provider error can be a JSON envelope with a request id in it — one
   unbreakable 200-character token. Without `anywhere` it runs straight out of
   the tile, and without the clamp it grows the card and knocks every other tile
   in the row out of alignment. The full text lives in the tooltip. */
.bar-note {
  margin: 1px 0 0; font-size: 11.5px; color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bar-note.alarm { color: var(--tone); font-weight: 600; }

.credfacts {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin: 0; font-size: 12px;
}
.credfacts dt { color: var(--muted); }
.credfacts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credfacts dd.alarm { color: var(--tone); font-weight: 600; }

.credform {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.credform-title { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.credform-wide { grid-column: 1 / -1; }
.credform-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.credform-actions .spacer { flex: 1; }
.credform-actions .hint.err { color: var(--err); }
.credform-actions .hint.ok { color: var(--ok); }
/* Destructive, and it lives one tab-stop from Mentés — it has to read as the
   odd one out without shouting on a form the operator opens to rename a token. */
button.ghost.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
button.ghost.danger:hover { background: color-mix(in srgb, var(--err) 14%, transparent); }

/* The token's operational switches. Every control that used to sit in a table
   row lives here now, so this block has to read as settings rather than as more
   of the identity form above it. */
.credform-ops {
  display: grid; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel-2);
}
.checkline { flex-direction: row; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.checkline input { width: auto; flex: none; margin: 0; }
.ceilfield { max-width: 320px; }
.ceilfield input { max-width: 120px; }
@media (max-width: 700px) {
  .credform { grid-template-columns: 1fr; }
  .credgrid { grid-template-columns: 1fr; }
}

.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.error-banner { background: rgba(224, 93, 93, 0.12); border: 1px solid var(--err); }
.ok-banner { background: rgba(76, 175, 125, 0.1); border: 1px solid var(--ok); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2 .wide { grid-column: 1 / -1; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.inline-form { display: flex; gap: 10px; margin-bottom: 14px; }
.inline-form input, .inline-form select { max-width: 320px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- one block per subscription in Beállítások ----
   Side by side, framed like the pools on Áttekintés, so the two providers read
   as two separate things with their own settings — never one mixed list. */
.provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.provider-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  min-width: 0;
}
.provider-block legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 900px) { .provider-grid { grid-template-columns: 1fr; } }

/* ---- guidance + editors ---- */
h3 { font-size: 14px; margin: 20px 0 6px; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 400; }
.hint.danger, .danger { color: var(--err); }
.linklike {
  background: none; border: 0; color: var(--accent); padding: 0; font: inherit;
  text-decoration: underline; cursor: pointer;
}
.explainer {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
}
.explainer summary { cursor: pointer; color: var(--accent); font-weight: 600; }
/* The state chip rides in the summary, so a pending step shows while the box is
   still closed. inline-flex keeps the marker triangle on the same line. */
.explainer summary .chip { margin-left: 8px; vertical-align: 1px; }
.explainer p { margin: 10px 0 0; color: var(--text); font-size: 13px; }

/* A numbered walkthrough inside an .explainer. Wider line height than the
   surrounding hints: these are instructions to follow, not prose to skim. */
.setup-steps { margin: 12px 0 0; padding-left: 22px; font-size: 13px; line-height: 1.65; }
.setup-steps > li { margin-bottom: 12px; }
.setup-steps > li:last-child { margin-bottom: 0; }
.setup-steps .codebox { margin: 8px 0; max-width: 560px; }
/* The jump links sit mid-sentence; the shared .linklike keeps a button's
   baseline, which lifts them out of the line. */
.setup-steps .linklike, .explainer p .linklike { vertical-align: baseline; }
.checkline span { color: var(--text); display: flex; align-items: center; gap: 8px; }
.checkline input[type="checkbox"] { width: auto; }
pre {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.5;
  font-family: ui-monospace, monospace; white-space: pre; margin: 0 0 6px;
}

/* ---- copyable code block ----
   A long block (the integration prompt is ~5000 chars) must not push the rest
   of the page out of reach, so the box scrolls internally and keeps its header
   — with the copy button — visible while you read. */
.codebox {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.codebox-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
.codebox-head .spacer { flex: 1; }
.codebox-head strong { color: var(--text); font-weight: 600; }
/* Fixed px, not vh: a viewport-relative cap collapses the box to nothing
   wherever the viewport reports zero height (embedded/headless panes). */
.codebox pre {
  border: 0; border-radius: 0; margin: 0;
  max-height: 460px; overflow: auto;
}
.codebox pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-status { display: block; padding: 0 12px 10px; }
.copy-status:empty { display: none; }
.endpoint-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; margin-bottom: 12px;
}
.endpoint-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.endpoint-head .spacer { flex: 1; }
.params { margin-top: 12px; }
.params-head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 12px; margin-bottom: 4px;
}
.param-table { background: var(--panel-2); }
.param-table th, .param-table td { padding: 4px 6px; }
.param-table input, .param-table select { padding: 4px 6px; font-size: 12.5px; }
#integration-panel { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 8px; }
.grid2 h3 { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.doc-table td { vertical-align: top; }
.doc-table td:first-child { white-space: nowrap; }
.selectable { user-select: all; cursor: text; }
.ok-banner .hint { flex-basis: 100%; }
/* A row inside a banner: the banner itself is a flex line, so a group that has
   to sit on its own line says so. */
.banner-row { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.keyfield {
  flex: 1 1 320px; min-width: 260px; font-family: ui-monospace, monospace;
  font-size: 12.5px; background: var(--bg); border-color: var(--ok);
}

/* ---- relay ---- */
.rov-table { min-width: 0; }
.detail-row td { white-space: normal; background: var(--panel-2); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-label { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.detail-row pre { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* Inline limit editors: the global `input` rule is 100% wide, which would blow
   the cell open. */
.limitinput { width: 64px; text-align: right; }
.modelinput { width: 220px; }
.rkeyactions, .rowactions { white-space: nowrap; }
.rkeyactions button + button, .rowactions button + button { margin-left: 4px; }

/* ---- per-key usage detail (migration 010) ----
   Thirty label/bar/number rows would be 400px of panel, so the daily series is
   a strip of vertical bars instead: the shape is the point, and each bar
   carries its own numbers in a tooltip. */
.daystrip { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin: 2px 0 6px; }
.daystrip i { flex: 1; min-width: 2px; min-height: 1px; border-radius: 2px 2px 0 0; background: var(--accent); }
.daystrip i.zero { background: var(--panel-2); }
.daystrip i.err { background: var(--err); }
.minitable { width: 100%; border-collapse: collapse; font-size: 12px; }
.minitable th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 6px 2px 0; }
.minitable td { padding: 2px 6px 2px 0; white-space: nowrap; }
.minitable td.num, .minitable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.statline { font-size: 12.5px; margin: 0 0 6px; font-variant-numeric: tabular-nums; }

/* ---- accounts table ---- */
#cred-table td { vertical-align: middle; }
/* Facts only, no controls — so the whole row is the control. */
.datatable.rowclick tbody tr { cursor: pointer; }
.datatable.rowclick tbody tr:hover { background: var(--panel-2); }
.datatable.rowclick tbody tr:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
/* Eight short columns need nothing like the 1180px the log grids do — and the
   ChatGPT pool's six need even less. Without its own value #gpt-table inherited
   the log grids' minimum and scrolled sideways inside a box it easily fits. */
#cred-table { min-width: 760px; }
#gpt-table { min-width: 560px; }
#gpt-table td { vertical-align: middle; }
/* The summary moved to its own id on Accountok; give it the wrap behaviour
   #pool-summary already has, or it crowds the strategy select on a narrow head. */
#pool-summary-accounts { flex-basis: 100%; order: 3; }
@media (min-width: 900px) { #pool-summary-accounts { flex-basis: auto; order: 0; } }

/* ---- weekly quota forecast + relay glance ---- */
/* Both blocks reuse .pool, so they inherit its frame; the tone classes let the
   forecast raise its own alarm without a second component. */
.pool.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.pool.bad { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }

.fc-headline { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
.pool.warn .fc-headline strong { color: var(--warn); }
.pool.bad .fc-headline strong { color: var(--err); }

/* Four figures that are read as a set — same shape as .cards, tighter, because
   they sit inside a panel rather than being one. */
.fc-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.fc-figures > div {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); min-width: 0;
}
.fc-label { font-size: 11.5px; color: var(--muted); }
.fc-figures strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.fc-figures small {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Seven and five short columns; the 1180px floor of a log grid would put a
   scrollbar under a table that fits. */
#fc-table, #rg-keys { min-width: 0; }
.datatable td.warn { color: var(--warn); }

/* A share-of-budget bar, inline in a cell: the number alone does not say how
   close to the wall a key is without doing the division in your head. */
.minibar {
  display: inline-block; vertical-align: middle; width: 90px; height: 6px;
  border-radius: 4px; background: var(--panel-2); overflow: hidden;
}
.minibar i { display: block; height: 100%; background: var(--ok); }
.minibar.warn i { background: var(--warn); }
.minibar.bad i { background: var(--err); }
.minibar-val { margin-left: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* API kulcsok: the row opens the profile editor (same convention as Tokenek). */
#keys-table tbody tr[data-key-edit] { cursor: pointer; }
#keys-table tbody tr[data-key-edit]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }