/* ============================================================================
   IGAPI — admin console
   Built on tokens.css. Classes below the "Generated markup" divider are the
   ones dashboard.js renders into the page, so their names are load-bearing.
   ========================================================================== */
@import url('/assets/tokens.css?v=4c7221db46');

/* 2.1 (SEO-21): the console uses the web fonts with font-display: swap — the same files as tokens.css, declared again
   (the later @font-face wins). The public pages use optional (no layout shift on a first visit); the console is an app
   whose tables and selects are sized for Inter, so it must not stay on the fallback for the page's lifetime. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2?v=4c7221db46') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2?v=4c7221db46') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2?v=4c7221db46') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2?v=4c7221db46') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --side-w: 252px; --top-h: 60px;
  /* aliases for names that dashboard.js writes into inline styles */
  --green: var(--ok); --red: var(--err); --orange: var(--warn); --purple: var(--info);
  --text-muted: var(--text-2); --text-dim: var(--text-3); --fg2: var(--text-2);
  --surface2: var(--surface-2); --border2: var(--border-2);
  --mono: var(--font-mono); --sans: var(--font-body);
}

body { min-height: 100vh; }
.ic { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 15px; height: 15px; }

/* ===========================================================================
   Shell
   ========================================================================= */
.top {
  position: sticky; top: 0; z-index: 60; height: var(--top-h);
  display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.top .brand { margin-inline-end: var(--s-2); }
.top-crumb { display: flex; align-items: center; gap: var(--s-2); color: var(--text-3); font-size: var(--t-sm); min-width: 0; }
.top-crumb b { color: var(--text); font-weight: 600; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  color: var(--text-2); border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-toggle { display: none; flex-shrink: 0; }   /* UI F6: never squeezed by the header pills */

.status-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding-inline: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--t-xs); color: var(--text-2); background: var(--surface);
}
/* which server: domain · version · commit; a non-production server is tagged LOCAL */
.srv-id { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding-inline: var(--s-3); min-width: 0; max-width: 340px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--t-xs); color: var(--text-2); background: var(--surface); }
.srv-id[hidden] { display: none; }
.srv-id .srv-host { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-id .srv-meta { font-family: var(--font-mono); color: var(--text-3); white-space: nowrap; }
.srv-id .srv-short { display: none; font-family: var(--font-mono); white-space: nowrap; }
.side-ident { padding: var(--s-2) var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; word-break: break-word; }
.side-ident[hidden] { display: none; }
.side-ident > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }   /* UI-9: each part wraps as one unit */
.side-ident > .si-line { display: block; }                 /* UI21-15: host / version · commit / machine / deployed */
.side-ident .si-line > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.side-ident > .si-sep { display: none; }
.srv-id.srv-local { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); }
.srv-id .srv-tag { color: var(--warn); font-weight: 700; letter-spacing: 0.04em; }
.status-pill .status-count { font-family: var(--font-mono); color: var(--text-3); padding-inline-start: var(--s-2); border-inline-start: 1px solid var(--border); }

.side {
  position: fixed; z-index: 50; top: var(--top-h); bottom: 0; inset-inline-start: 0;
  width: var(--side-w); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) var(--s-3);
  background: var(--surface); border-inline-end: 1px solid var(--border);
}
.nav-label { font-size: var(--t-xs); font-weight: 600; color: var(--text-3); padding: var(--s-4) var(--s-3) var(--s-2); }
.nav-label:first-child { padding-top: var(--s-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: start; flex-shrink: 0;
  height: 38px; padding-inline: var(--s-3); border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-sm); font-weight: 500; cursor: pointer; user-select: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nav-item.active .ic { color: var(--accent); }
.nav-item .ext { margin-inline-start: auto; width: 14px; height: 14px; color: var(--text-3); }
.nav-badge {
  margin-inline-start: auto; min-width: 20px; height: 20px; padding-inline: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  background: var(--warn-soft); color: var(--warn);
}
.side-foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s-1); }

.main { margin-inline-start: var(--side-w); padding: var(--s-8) var(--s-10) var(--s-16); min-width: 0; }
.main-inner { max-width: 1240px; margin-inline: auto; }
.panel { display: none; }
.panel.active { display: block; animation: panel-in 220ms var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.scrim { display: none; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.page-head h1 { font-size: var(--t-2xl); letter-spacing: -0.025em; }
.page-head p { color: var(--text-2); margin-top: var(--s-1); max-width: 64ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.foot { margin-top: var(--s-16); padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; color: var(--text-3); font-size: var(--t-xs); }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--accent); }

/* ===========================================================================
   Layout primitives
   ========================================================================= */
.stack-lg { display: grid; gap: var(--s-5); }
.grid-2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.span-all { grid-column: 1 / -1; }
.card-stack { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }   /* UI-7: short cards stacked in one grid cell */

/* ===========================================================================
   Cards
   ========================================================================= */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.card-t { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; }
.card-t .ic { color: var(--text-3); }
.card-sub { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; font-family: var(--font-body); font-weight: 400; }
.card-b { padding: var(--s-5); display: grid; gap: var(--s-4); }
.card-b.flush { padding: 0; gap: 0; }
/* UI21-9: a table that ends its card is clipped to the card's rounded bottom corners (its scroller has the inner radius), so
   the sticky first column's background no longer paints a square notch over the bottom-left corner */
.card > .card-b.flush:last-child > .st-tbl-wrap:last-child { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
.card-f { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, transparent); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card-f .card-footer-msg { margin-inline-end: auto; }
.note { font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; }

/* ===========================================================================
   Buttons  (legacy semantics: .btn = primary, .btn-sm = small neutral)
   ========================================================================= */
.btn, .btn-sm, .btn-copy, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; white-space: nowrap; user-select: none;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 80ms var(--ease);
}
.btn, .btn-sm { text-align: center; }
.btn { height: 38px; padding-inline: var(--s-4); font-size: var(--t-sm); background: var(--accent); color: var(--accent-contrast); }
.btn[style*="display: block"], .btn[style*="display:block"] { line-height: 36px; }
.btn:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--glow); }
.btn:active:not(:disabled), .btn-sm:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn-sm:disabled, .btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.btn .ic { width: 16px; height: 16px; }

.btn.btn-secondary, .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); box-shadow: none; }
.btn.btn-ghost, .btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.btn.btn-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); box-shadow: none; }
.btn-danger { height: 34px; padding-inline: var(--s-3); font-size: var(--t-xs); background: var(--err-soft); color: var(--err); }
.btn.btn-danger { height: 38px; font-size: var(--t-sm); }
.btn-danger:hover:not(:disabled), .btn.btn-danger:hover:not(:disabled) { background: var(--err); color: #fff; box-shadow: none; }
.btn.btn-ok { background: var(--ok); }
.btn.btn-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 85%, #000); box-shadow: none; }
.btn.block { width: 100%; }

.btn-sm { height: 32px; padding-inline: var(--s-3); font-size: var(--t-xs); background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-sm:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); }
.btn-sm .ic { width: 15px; height: 15px; }
.btn-sm.btn-sm-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn-sm.btn-sm-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-sm.btn-sm-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: transparent; }
.btn-sm.btn-sm-warn:hover:not(:disabled) { background: var(--warn-soft); border-color: var(--warn); }
.btn-sm.btn-sm-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: transparent; }
.btn-sm.btn-sm-danger:hover:not(:disabled) { background: var(--err-soft); border-color: var(--err); }
select.btn-sm { appearance: none; padding-inline-end: var(--s-3); cursor: pointer; font-family: var(--font-body); font-weight: 500; }

.btn-copy { height: 30px; padding-inline: var(--s-3); font-size: var(--t-xs); background: var(--surface); color: var(--text-2); border-color: var(--border-2); }
.btn-copy:hover { color: var(--accent); border-color: var(--accent-line); }
.btn-copy.copied { color: var(--ok); border-color: var(--ok); }

.link-btn { color: var(--text-2); font-size: var(--t-sm); font-weight: 500; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 0; }
.link-btn:hover { color: var(--accent); }
.link-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===========================================================================
   Forms  (new + legacy class names share one look)
   ========================================================================= */
.field, .field-group, .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row, .fields { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.label, .field-label, .form-label { font-size: var(--t-sm); font-weight: 500; color: var(--text); }
.label .opt, .field-label .opt, .form-label .opt { color: var(--text-3); font-weight: 400; }
.hint, .form-hint { font-size: var(--t-xs); color: var(--text-3); line-height: 1.55; }
.hint code, .form-hint code { font-family: var(--font-mono); color: var(--text-2); background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

.input, .field-input, .field-select, .form-input, .plan-select {
  width: 100%; height: 40px; padding-inline: var(--s-3);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
textarea.input, textarea.field-input, textarea.form-input { height: auto; min-height: 96px; padding: var(--s-3); line-height: 1.55; resize: vertical; }
.input::placeholder, .field-input::placeholder, .form-input::placeholder { color: var(--text-3); }
.input:focus, .field-input:focus, .field-select:focus, .form-input:focus, .plan-select:focus {
  outline: none; border-color: var(--accent); background-color: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .field-input:disabled { opacity: 0.6; cursor: not-allowed; }
select.input, .field-select, select.form-input, select.field-input, .plan-select {
  appearance: none; cursor: pointer; padding-inline-end: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23838c9c' d='M3 4.5 6 8l3-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-3) center;
}
.mono-input { font-family: var(--font-mono); font-size: var(--t-xs); }
.input-group { position: relative; }
.input-group .input, .input-group .field-input { padding-inline-end: 44px; }
.input-group .in-btn { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.input-group .in-btn:hover { color: var(--text); background: var(--surface-3); }
.check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Toggle switch (markup: label.toggle > input + span.toggle-track) */
.toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle::before { content: ""; position: absolute; inset: -10px -6px; }
.toggle-track { position: absolute; inset: 0; cursor: pointer; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--border-2); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur) var(--ease); }
.toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-track { box-shadow: var(--ring); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
.toggle-row:first-child { padding-top: 0; }
.toggle-row:last-of-type { border-bottom: 0; }
.toggle-label { font-size: var(--t-sm); font-weight: 500; color: var(--text); }
.toggle-desc { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; line-height: 1.5; }

.range-row { display: flex; align-items: center; gap: var(--s-3); }
.range-row input[type=range] { flex: 1; accent-color: var(--accent); }
.range-val { font-family: var(--font-mono); font-size: var(--t-sm); min-width: 44px; text-align: end; color: var(--accent); }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.seg button { height: 30px; padding-inline: var(--s-3); border-radius: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--text-2); }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.toolbar .search-box { flex: 1 1 240px; max-width: 360px; position: relative; }
.toolbar .search-box .ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.toolbar .search-box .input { padding-inline-start: 38px; }

/* ===========================================================================
   KPI tiles  (.kpi new · .mini-card generated)
   ========================================================================= */
.kpis, .stats-mini { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--s-5); }
.stats-mini:empty { display: none; }
.kpi, .mini-card {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1);
  padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.mini-val, .kpi-val { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.mini-lbl, .kpi-lbl { font-size: var(--t-xs); color: var(--text-2); font-weight: 500; }
.kpi { flex-direction: column; justify-content: flex-start; }
.kpi-foot { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s-1); }

/* ===========================================================================
   Overview
   ========================================================================= */
.pool {
  padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-lg);
  background:
    radial-gradient(80% 140% at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  margin-bottom: var(--s-5);
}
.pool-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.pool-num { font-family: var(--font-display); font-size: var(--t-4xl); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.pool-num small { font-size: var(--t-lg); color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-inline-start: var(--s-2); }
.pool-cap { color: var(--text-2); font-size: var(--t-sm); margin-top: var(--s-2); }
.pool-bar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); gap: 2px; }
.pool-bar span { display: block; height: 100%; transition: flex-grow 400ms var(--ease); }
.pool-bar .s-ok { background: var(--ok); }
.pool-bar .s-warn { background: var(--warn); }
.pool-bar .s-err { background: var(--err); }
.pool-legend { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-2); }
.pool-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.pool-legend b { color: var(--text); font-family: var(--font-mono); font-weight: 500; }
.sw { width: 10px; height: 10px; border-radius: 3px; }
.sw.ok { background: var(--ok); } .sw.warn { background: var(--warn); } .sw.err { background: var(--err); }

.list { display: grid; }
.list-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); min-width: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { min-width: 0; }
.list-row .t { font-weight: 600; font-size: var(--t-sm); }
.list-row .s { font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-empty { padding: var(--s-8) var(--s-5); text-align: center; color: var(--text-3); font-size: var(--t-sm); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.kv dt { color: var(--text-3); }
.kv dd { color: var(--text); font-family: var(--font-mono); font-size: var(--t-xs); align-self: center; word-break: break-word; }

.quick { display: grid; gap: var(--s-2); }
.quick button, .quick a {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: start;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: var(--t-sm); font-weight: 500;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quick button:hover, .quick a:hover { border-color: var(--accent-line); background: var(--surface-2); }
.quick .qi { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.quick .qi .ic { width: 17px; height: 17px; }
.quick small { display: block; color: var(--text-3); font-size: var(--t-xs); font-weight: 400; }
.quick .ic.arrow { margin-inline-start: auto; color: var(--text-3); width: 16px; height: 16px; }

/* ===========================================================================
   Account detail header
   ========================================================================= */
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.avatar-letter { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: #fff; background: linear-gradient(135deg, var(--accent), #b06cff 70%, #ff6ca8); }
.detail-id { min-width: 0; }
.detail-username { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; word-break: break-all; }
.detail-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ===========================================================================
   Sign-in gate  (#adminLoginModal)
   ========================================================================= */
.gate { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: var(--s-4); background: var(--bg); overflow-y: auto; }
.gate.open { display: grid; }
.gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 80%);
  opacity: 0.55;
}
.gate-card { position: relative; width: 100%; max-width: 400px; padding: var(--s-8); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); display: grid; gap: var(--s-5); }
.gate-card h1 { font-size: var(--t-xl); letter-spacing: -0.02em; }
.gate-card p { color: var(--text-2); font-size: var(--t-sm); margin-top: var(--s-1); }
.gate-links { display: flex; justify-content: center; gap: var(--s-5); font-size: var(--t-sm); }
.gate-links a { color: var(--text-2); }
.gate-links a:hover { color: var(--accent); }
.gate-cancel { display: none; }
body.is-authed .gate-cancel { display: inline-flex; }

/* ===========================================================================
   ─── Generated markup (dashboard.js renders these class names) ───
   ========================================================================= */

/* status dots */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.dot-green  { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-soft); }
.dot-red    { background: var(--err);  box-shadow: 0 0 0 3px var(--err-soft); }
.dot-orange { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot-connecting { background: var(--warn); animation: blink 1.2s var(--ease) infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding-inline: var(--s-2); border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; text-transform: capitalize; }
.chip-active { background: var(--ok-soft); color: var(--ok); }
.chip-challenged { background: var(--warn-soft); color: var(--warn); }
.chip-disabled { background: var(--err-soft); color: var(--err); }

/* empty / loading / error */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-12) var(--s-4); color: var(--text-2); font-size: var(--t-sm); }
.empty-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); font-family: var(--font-display); font-weight: 600; margin-bottom: var(--s-2); }
.empty-title { color: var(--text); font-weight: 600; }
.loading-wrap { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-10) var(--s-4); color: var(--text-2); font-size: var(--t-sm); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--accent); animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* PT-3: a warning the owner must act on (plan caps that do not bind) */
.warn-box { margin: var(--s-4) var(--s-5) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--text); font-size: var(--t-sm); line-height: 1.5; }
.warn-box[hidden] { display: none; }
.stats-off { margin-bottom: var(--s-5); font-weight: 500; }   /* SEC-A10 */
.stats-off[hidden] { display: none; }
.field .warn-box { margin: var(--s-2) 0 0; }
.plan-orphan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); }   /* fix round F2 */
.plan-orphan p { flex: 1 1 320px; margin: 0; }
.error-box { padding: var(--s-4); border-radius: var(--r-md); background: var(--err-soft); border: 1px solid color-mix(in srgb, var(--err) 35%, transparent); color: var(--err); font-size: var(--t-sm); }

/* account list */
/* minmax(0, 1fr): a grid track sized auto would grow to the cards' nowrap text and push them off a phone screen */
.acct-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.acct-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.acct-card:hover { border-color: var(--accent-line); background: var(--surface-2); }
.acct-card-left { display: flex; align-items: center; gap: var(--s-3); flex: 1; min-width: 0; }
.acct-card-left > div:last-child { min-width: 0; }
.session-dot-wrap { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; }
.acct-username { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-sub { font-size: var(--t-xs); color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-arrow { color: var(--text-3); font-size: 18px; line-height: 1; }

/* footer messages / results */
.card-footer-msg { font-size: var(--t-xs); color: var(--text-2); }
.card-footer-msg.ok { color: var(--ok); }
.card-footer-msg.err { color: var(--err); }
.test-result { font-size: var(--t-sm); border-radius: var(--r-sm); }
.test-result:not(:empty) { padding: var(--s-2) var(--s-3); background: var(--surface-2); }
.test-result.ok { background: var(--ok-soft); color: var(--ok); }
.test-result.err { background: var(--err-soft); color: var(--err); }
.settings-result { display: none; font-size: var(--t-sm); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.settings-result.ok { display: block; background: var(--ok-soft); color: var(--ok); }
.settings-result.err { display: block; background: var(--err-soft); color: var(--err); }
.login-result { display: none; margin-top: var(--s-4); font-size: var(--t-sm); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid transparent; }
.login-result.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.login-result.err { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.login-result.info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* activity log */
.filter-chip { height: 30px; padding-inline: var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-size: var(--t-xs); font-weight: 600; text-transform: capitalize; transition: all var(--dur) var(--ease); }
.filter-chip:hover { color: var(--text); border-color: var(--text-3); }
.filter-chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.log-list { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; max-height: 70vh; overflow-y: auto; }
.log-item { display: grid; grid-template-columns: 74px 96px 1fr; gap: var(--s-3); align-items: start; padding: 7px var(--s-4); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.6; }
.log-item:last-child { border-bottom: 0; }
.log-item:hover { background: var(--surface-2); }
.log-item.err { background: var(--err-soft); }
.log-time { color: var(--text-3); }
.log-type { font-weight: 600; color: var(--text-2); }
.log-type-REQ, .log-type-FEED, .log-type-MEDIA, .log-type-STORY, .log-type-HIGHLIGHT { color: var(--accent); }
.log-type-RES { color: var(--ok); }
.log-type-ERR { color: var(--err); }
.log-type-BROWSE, .log-type-LOGIN, .log-type-AUTH, .log-type-SESSION, .log-type-VALIDATE, .log-type-CHECK { color: var(--info); }
.log-type-POST-LOGIN, .log-type-ACTIVITY, .log-type-BACKGROUND, .log-type-PROFILE-PLUS { color: var(--warn); }
.log-type-INIT, .log-type-SETTINGS, .log-type-TELEGRAM, .log-type-LICENSE, .log-type-SHUTDOWN { color: var(--text-3); }
.log-msg { color: var(--text-2); word-break: break-word; }

/* 2FA / challenge steps */
.tfa-section, .challenge-section { display: none; }
.tfa-section.visible, .challenge-section.visible { display: grid; gap: var(--s-4); }
.step-head { display: flex; align-items: center; gap: var(--s-3); }
.step-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.step-icon.warn { background: var(--warn-soft); color: var(--warn); }
.step-icon .ic { width: 20px; height: 20px; }
.step-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); }
.step-sub { font-size: var(--t-xs); color: var(--text-2); margin-top: 2px; }
.tfa-methods { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tfa-method-card { padding: var(--s-4); border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.tfa-method-card:hover { border-color: var(--accent-line); }
.tfa-method-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.tfa-method-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--accent); margin-bottom: var(--s-2); }
.tfa-method-icon .ic { width: 17px; height: 17px; }
.tfa-method-label { font-weight: 600; font-size: var(--t-sm); }
.tfa-method-desc { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; line-height: 1.45; word-break: break-word; }
.step-links { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* bulk login table */
#bulkResult { margin-top: var(--s-4); }
.bulk-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.bulk-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.bulk-table tr:last-child td { border-bottom: 0; }
.bulk-table td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.bulk-st { font-weight: 600; white-space: nowrap; }
.bulk-st.ok { color: var(--ok); } .bulk-st.err { color: var(--err); }
.bulk-st.warn { color: var(--warn); } .bulk-st.run { color: var(--accent); }
.bulk-msg { color: var(--text-2); word-break: break-word; }
.bulk-msg .btn-sm { margin-inline-start: var(--s-2); height: 30px; }

/* API keys — one table (search, filters, sort, 50 per page) */
#keysList > .loading-wrap, #keysList > .empty, #keysList > .error-box { margin: var(--s-5); }
.key-toolbar { margin: 0; flex-wrap: wrap; }
.key-toolbar .field-select { width: auto; min-width: 150px; }
.key-tbl td { vertical-align: middle; }
.key-tbl .key-name { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.key-tbl .key-val { display: flex; align-items: center; gap: var(--s-2); margin-top: 2px; }
.key-tbl .key-val .mono { font-size: var(--t-xs); color: var(--text-2); }
.key-tbl .key-val .btn-copy { height: 26px; }
.key-tbl .key-plan { height: 32px; min-width: 0; width: 160px; font-size: var(--t-xs); padding-inline: 8px 26px; background-position: right 8px center; }   /* UI-3: "Business — unlimited" in full */
/* UI21-5: where the table has room the select grows with its longest plan name — up to 200 px above 1280 px, 280 px above
   1680 px — so "Growth — 100,000/month" is not cut mid-word; the full text is always its title (tooltip) */
@media (min-width: 1281px) { .key-tbl .key-plan { width: auto; min-width: 160px; max-width: 200px; } }
@media (min-width: 1681px) { .key-tbl .key-plan { max-width: 280px; } }
/* UI F5: Last used may wrap, so the table (and its Revoke / Re-activate button) fits the card down to 1024 px */
.key-tbl .key-used { white-space: normal; min-width: 72px; max-width: 96px; font-size: var(--t-xs); }
.key-tbl .muted { color: var(--text-3); }
/* UI21-6: counts, caps, the date and the time never break inside ("548 / 100,000" → "548" + "/ 100,000"; "2026-10-31" + "01:01 UTC") */
.key-tbl .u-n, .key-tbl td.num .muted, .key-tbl .ku-d, .key-tbl .ku-t { white-space: nowrap; }
.key-revoked td { opacity: 0.6; }
/* 2.1: a monthly cap ("12,056 / 100,000") made the table ~50 px wider than its card at 1024 — narrower cells there,
   the cap under the count */
@media (max-width: 1280px) {
  .key-tbl th, .key-tbl td { padding-inline: var(--s-3); }
  .key-tbl td.num .muted { display: block; }
  .key-tbl .ku-y, .key-tbl .ku-z { display: none; }   /* UI21-6: "10-31" over "01:01"; the header says (UTC) */
}
@media (min-width: 1281px) { .key-tbl .ku-hz { display: none; } }
.key-revoked td:last-child { opacity: 1; }
.key-pager:empty { display: none; }
/* a wide table scrolls inside its card, never the page: the grid track may shrink below the table width,
   and the visually-hidden header text is positioned inside the scroller */
#panel-apikeys .card-b.flush { grid-template-columns: minmax(0, 1fr); }
#panel-apikeys .st-tbl-wrap { position: relative; }
.key-pager { justify-content: flex-end; }
/* UI21-4: below 800 px each key is a card (like the Plans page): name, key + Copy; plan + status; the three counters;
   last used + Revoke / Re-activate — nothing scrolls sideways out of sight */
@media (max-width: 800px) {
  #keysList .key-tbl, #keysList .key-tbl tbody { display: block; }
  #keysList .key-tbl thead { display: none; }
  #keysList .key-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); }
  #keysList .key-tbl tr:last-child { border-bottom: 0; }
  #keysList .key-tbl td { display: block; position: static; max-width: none; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; white-space: normal; text-align: start; overflow: visible; }
  #keysList .key-tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-body); font-size: var(--t-xs); color: var(--text-3); }
  #keysList .key-tbl td.key-cell { grid-column: 1 / -1; }
  #keysList .key-tbl .key-name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  #keysList .key-tbl td.key-plan-cell { grid-column: span 2; }
  #keysList .key-tbl .key-plan { width: 100%; height: 40px; }
  #keysList .key-tbl td.key-status { align-self: end; justify-self: end; padding-bottom: 10px; }
  #keysList .key-tbl td.num .muted { display: inline; }
  #keysList .key-tbl td.key-used { grid-column: span 2; }
  #keysList .key-tbl .ku-y, #keysList .key-tbl .ku-z { display: inline; }   /* a card has room for the full date + UTC */
  #keysList .key-tbl td.key-act { align-self: end; }
  #keysList .key-tbl td.key-act .btn-sm { width: 100%; min-height: 40px; }
}
/* ── Plans page (2.1): a compact table in display order; below 900 px one card per plan ── */
#panel-plans .card-b.flush { grid-template-columns: minmax(0, 1fr); }
#panel-plans .st-tbl-wrap { position: relative; }
#plansList > .loading-wrap, #plansList > .error-box, #plansList > .list-empty { margin: var(--s-5); }
.plan-toolbar { margin: 0; }
.plan-toolbar .field-select { width: auto; min-width: 200px; }
.plan-tbl td { vertical-align: middle; }
.plan-tbl .plan-cell { white-space: normal; min-width: 220px; max-width: 360px; }
.plan-tbl .plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-tbl .plan-l { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.plan-tbl .plan-id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; }
.plan-tbl .plan-d { font-size: var(--t-xs); color: var(--text-2); margin-top: 2px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-tbl .plan-price { font-size: var(--t-xs); white-space: nowrap; }
.plan-tbl .muted { color: var(--text-3); }
.plan-tbl .plan-actions { white-space: nowrap; text-align: end; }
.plan-tbl .plan-actions .btn-sm + .btn-sm { margin-inline-start: 4px; }
.plan-tbl .plan-move { width: 32px; padding: 0; }
.plan-tbl .plan-move:disabled { opacity: 0.3; }
.plan-tbl .link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-mono); font-size: var(--t-xs); padding: 4px; min-height: 32px; min-width: 40px; justify-content: flex-end; }
.plan-tbl .plan-revoked { font-family: var(--font-mono); font-size: 11px; }
.plan-archived td { opacity: 0.6; }
.plan-archived td.plan-actions { opacity: 1; }
.chip.chip-accent { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 900px) {
  #plansList .plan-tbl, #plansList .plan-tbl tbody { display: block; }
  #plansList .plan-tbl thead { display: none; }
  #plansList .plan-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); }
  #plansList .plan-tbl tr:last-child { border-bottom: 0; }
  #plansList .plan-tbl td { display: block; position: static; max-width: none; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; white-space: normal; text-align: start; }
  #plansList .plan-tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-body); font-size: var(--t-xs); color: var(--text-3); }
  #plansList .plan-tbl td.plan-cell, #plansList .plan-tbl td.plan-actions { grid-column: 1 / -1; }
  #plansList .plan-tbl td.plan-price { grid-column: span 2; }
  #plansList .plan-tbl td.plan-actions { display: flex; gap: var(--s-2); }
  #plansList .plan-tbl .link-btn { justify-content: flex-start; min-height: 40px; padding-inline: 0; }
  #plansList .plan-tbl td.plan-actions .btn-sm { margin: 0; min-height: 40px; }
  #plansList .plan-tbl td.plan-actions .plan-move { width: 44px; }
  #plansList .plan-tbl td.plan-actions .btn-sm:last-child { flex: 1; }
}

/* ── plan editor: a side panel over the page (full width on phones) ── */
.modal-overlay.drawer-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
.drawer { width: min(540px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--border-2); box-shadow: var(--shadow-lg); animation: drawer-in 220ms var(--ease); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.drawer-foot { align-items: center; }
.drawer-foot .card-footer-msg { margin-inline-end: auto; }
.drawer-foot .card-footer-msg:not(.err):not(:empty) { color: var(--warn); }
body.drawer-open { overflow: hidden; }
.pe-form { display: grid; gap: var(--s-6); }
.pe-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
.pe-group legend { padding: 0; margin-bottom: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--text); }
.pe-group legend .opt { color: var(--text-3); font-weight: 400; font-family: var(--font-body); }
.pe-group[hidden] { display: none; }
.pe-3 { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-group .toggle-row:last-of-type { border-bottom: 1px solid var(--border); }
.field-err { font-size: var(--t-xs); color: var(--err); line-height: 1.45; }
.field-err:empty { display: none; }
.field-input[aria-invalid="true"], .field-input[aria-invalid="true"]:focus { border-color: var(--err); }
.field-input[readonly] { background: var(--surface-2); color: var(--text-2); cursor: default; }
textarea#peDesc { min-height: 64px; }
.pe-preview { font-size: var(--t-xs); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); line-height: 1.5; overflow-wrap: anywhere; }
.pe-danger { border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); border-radius: var(--r-md); padding: var(--s-4); }
.pe-danger legend { padding-inline: var(--s-1); }
.pe-danger-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pe-discard { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.pe-discard-actions { display: flex; gap: var(--s-2); }
@media (max-width: 640px) {
  .drawer { width: 100%; border-inline-start: 0; }
  .drawer-body { padding: var(--s-4); }
  .pe-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer-foot { padding: var(--s-3) var(--s-4); }
  .drawer-foot .btn { flex: 1 1 0; min-height: 44px; }
  .drawer-foot .card-footer-msg { flex-basis: 100%; }
  .pe-danger-actions .btn-sm, .pe-discard-actions .btn-sm { min-height: 40px; flex: 1 1 auto; }
  .plan-toolbar .field-select { width: 100%; }
  /* 2.1 part-2 UI-P7: the drawer's close button and switches are 44 px touch targets on phones (the switch keeps its look:
     the track sits in the middle of a 44 × 44 box) */
  .drawer .modal-close { width: 44px; height: 44px; }
  .drawer .toggle { width: 44px; height: 44px; }
  .drawer .toggle-track { inset: 11px 3px; }
  .drawer label.toggle-label { display: block; padding-block: 4px; cursor: pointer; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.new-key-reveal { display: grid; gap: var(--s-3); }
.new-key-warn { font-size: var(--t-sm); color: var(--warn); background: var(--warn-soft); padding: var(--s-3); border-radius: var(--r-sm); }
.new-key-text { font-family: var(--font-mono); font-size: var(--t-sm); word-break: break-all; padding: var(--s-3); background: var(--surface-2); border: 1px dashed var(--accent-line); border-radius: var(--r-sm); color: var(--text); user-select: all; }

/* proxy pool items */
.px-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-2); }
.px-item + .px-item { margin-top: var(--s-2); }
.px-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.px-name { font-weight: 600; font-size: var(--t-sm); }
.px-meta { font-size: var(--t-xs); color: var(--text-3); font-family: var(--font-mono); word-break: break-word; }
.px-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.px-accts { font-size: var(--t-xs); color: var(--text-2); word-break: break-word; }
.px-res { font-size: var(--t-xs); }
.bad { color: var(--err); }

/* telegram */
.tg-status { display: flex; align-items: center; gap: var(--s-3); }
.tg-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.tg-status-dot.connected { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.tg-status-dot.error { background: var(--err); box-shadow: 0 0 0 4px var(--err-soft); }
.tg-status-dot.disabled { background: var(--border-2); }
.tg-status-dot.connecting { background: var(--warn); animation: blink 1.2s var(--ease) infinite; }
.tg-status-label { font-weight: 600; font-size: var(--t-sm); }
.tg-status-sub { font-size: var(--t-xs); color: var(--text-3); font-family: var(--font-mono); }
.tg-alert-icon { color: var(--text-3); display: inline-flex; }
.tg-alert-item { display: grid; grid-template-columns: auto auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-2) 0; border-bottom: 1px solid var(--border); font-size: var(--t-xs); }
.tg-alert-item:last-child { border-bottom: 0; }
.tg-alert-time { color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; }
.tg-alert-msg { color: var(--text-2); line-height: 1.5; word-break: break-word; }

/* profile plus */
.badge-status { display: inline-flex; align-items: center; height: 24px; padding-inline: var(--s-3); border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--t-xs); font-weight: 600; font-family: var(--font-mono); text-transform: capitalize; }
.progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #b06cff); border-radius: var(--r-pill); transition: width 500ms var(--ease); }
.progress-text { font-size: var(--t-xs); color: var(--text-3); font-family: var(--font-mono); text-align: center; word-break: break-word; }
.pp-preview { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pp-preview:empty { display: none; }
.pp-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); }
.pp-thumb.is-profile { border-radius: 50%; border: 2px solid var(--accent); }
.pp-thumb.is-unused { opacity: 0.28; }
.pp-log { font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.7; max-height: 320px; overflow-y: auto; }
.pp-log-row { display: flex; gap: var(--s-3); padding: 1px 0; }
.pp-log-time { color: var(--text-3); flex-shrink: 0; }
.pp-log-msg { color: var(--text-2); word-break: break-word; }
.pp-log-row.error .pp-log-msg { color: var(--err); }
.pp-log-row.warn .pp-log-msg { color: var(--warn); }
.pp-log-empty { color: var(--text-3); }

/* toasts */
.toast-container { position: fixed; z-index: 400; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); max-width: min(380px, calc(100vw - 32px)); }
.toast { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border-2); border-inline-start: 3px solid var(--accent); box-shadow: var(--shadow-md); color: var(--text); font-size: var(--t-sm); line-height: 1.45; animation: toast-in 200ms var(--ease); word-break: break-word; }
.toast.ok { border-inline-start-color: var(--ok); }
.toast.err { border-inline-start-color: var(--err); }
.toast.warn { border-inline-start-color: var(--warn); }
.toast.info { border-inline-start-color: var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* modals */
.modal-overlay { position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; padding: var(--s-4); background: rgba(6, 8, 12, 0.6); backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: modal-in 200ms var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); }
.modal-close { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-3); }
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); }
.modal-target { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-2); background: var(--surface-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); word-break: break-all; }

/* ===========================================================================
   Statistics
   ========================================================================= */
.st-actions { align-items: center; }
.st-month { width: auto; min-width: 140px; }
.st-chart-card, .st-grid, .st-block { margin-bottom: var(--s-5); }
.st-ranges, .st-ev-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-ev-filters .field-select { width: auto; min-width: 150px; }
.st-chart { position: relative; min-height: 200px; }
.st-chart svg { display: block; width: 100%; height: 240px; touch-action: pan-y; overflow: visible; }
.st-grid-line { stroke: var(--border); stroke-width: 1; }
.st-axis-text { fill: var(--text-3); font-size: 11px; font-family: var(--font-mono); }
.st-area { fill: var(--accent-soft); }
.st-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-cross { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.st-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.st-tip {
  position: absolute; top: 0; pointer-events: none; z-index: 2; min-width: 140px;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-md); font-size: var(--t-xs); color: var(--text-2); line-height: 1.5;
}
.st-tip b { color: var(--text); font-family: var(--font-mono); font-weight: 500; }
.st-tip .st-tip-t { color: var(--text); font-weight: 600; margin-bottom: 2px; }
/* UI F1: a grid item keeps min-width:auto and grows to the table inside; 0 lets .st-tbl-wrap scroll instead */
.st-table-toggle { min-width: 0; }
.st-table-toggle summary { cursor: pointer; color: var(--text-2); font-size: var(--t-xs); padding-block: var(--s-1); }
.st-table-toggle[open] summary { margin-bottom: var(--s-2); }
.st-tbl-wrap { overflow-x: auto; max-width: 100%; }
/* UI-6: a table or code block that scrolls sideways shows a shadow on the edge with more to show (theme.js sets
   data-scroll-more until it is scrolled to the end) — phone scrollbars are overlay-only, so this is the cue */
.table-wrap[data-scroll-more="end"], .st-tbl-wrap[data-scroll-more="end"], pre.code[data-scroll-more="end"] {
  background-image: linear-gradient(to left, color-mix(in srgb, var(--text) 24%, transparent), transparent);
  background-size: 22px 100%; background-repeat: no-repeat; background-position: right center; background-attachment: scroll;
}
.table-wrap[data-scroll-more="end"]:dir(rtl), .st-tbl-wrap[data-scroll-more="end"]:dir(rtl), pre.code[data-scroll-more="end"]:dir(rtl) {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--text) 24%, transparent), transparent);
  background-position: left center;
}
.st-table-toggle .st-tbl-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.st-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.st-tbl th, .st-tbl td { padding: var(--s-2) var(--s-4); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
.st-tbl th { white-space: normal; vertical-align: bottom; color: var(--text-3); font-weight: 500; font-size: var(--t-xs); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.st-tbl tr:last-child td { border-bottom: 0; }
.st-tbl .num { text-align: end; font-family: var(--font-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
#panel-stats .muted { color: var(--text-3); }
.st-tbl .wrap { white-space: normal; min-width: 180px; word-break: break-word; }
#stAccounts .st-tbl .wrap { min-width: 160px; max-width: 220px; }   /* UI F4: the table fits 1100 px */
/* SEO-21: measured with the self-hosted Inter actually loaded (the Google Inter 500 face often was not when the console was
   measured) the table was 22 px wider than its card at 1440 — tighter cells; the plan select above needs 122 px of text room (160 px wide, padding 8 / 26 → 124) */
#stAccounts .st-tbl th, #stAccounts .st-tbl td { padding-inline: var(--s-3); }
.st-tbl .err-n { color: var(--err); }
/* UI F4: the first column (account / key / endpoint / time) stays in view while a wide table scrolls sideways */
.st-tbl-wrap .st-tbl th:first-child, .st-tbl-wrap .st-tbl td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
.st-tbl-wrap .st-tbl th:first-child { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.st-ev { grid-template-columns: 128px 104px 1fr; }
.st-ev .log-msg { display: grid; gap: 2px; min-width: 0; word-break: break-word; }
.st-ev-meta { color: var(--text-3); }
.log-type-challenge, .log-type-disabled, .log-type-proxy_error { color: var(--err); }
.log-type-reenabled, .log-type-login { color: var(--ok); }
.log-type-relogin, .log-type-logout { color: var(--warn); }
.st-more { display: flex; justify-content: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); }

/* misc legacy bits the JS still emits */
.verified { color: var(--info); }

/* ===========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .side { transform: translateX(-100%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s 220ms; z-index: 80; }
  body.nav-open .side { transform: none; visibility: visible; transition: transform 220ms var(--ease); box-shadow: var(--shadow-lg); }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; top: var(--top-h); z-index: 70; background: rgba(6, 8, 12, 0.5); }
  .main { margin-inline-start: 0; padding: var(--s-6) var(--s-6) var(--s-12); }
}
@media (max-width: 480px) {
  .top-crumb { display: none; }   /* UI F6: no room for the page title (the page heading says it) */
}
@media (max-width: 640px) {
  :root { --top-h: 56px; }
  /* UI21-8: phone tap targets of at least 40 px — the Sessions filter segment, "View all" and the other text buttons */
  .seg button { height: 40px; }
  .link-btn { min-height: 40px; }
  .top { padding-inline: var(--s-3); gap: var(--s-2); }
  .top .brand-type, .top-crumb .sep { display: none; }
  .status-pill .status-count { display: none; }
  .srv-id { max-width: 112px; padding-inline: var(--s-2); }
  .status-pill { white-space: nowrap; padding-inline: var(--s-2); }
  .srv-id .srv-meta, .srv-id .srv-host { display: none; }
  .srv-id .srv-short { display: inline; color: var(--text); font-weight: 600; }
  .top .brand, .theme-toggle { flex-shrink: 0; }
  .top .nav-toggle { width: 40px; height: 40px; }
  .main { padding: var(--s-5) var(--s-4) var(--s-10); }
  .page-head { margin-bottom: var(--s-5); }
  .page-head h1 { font-size: var(--t-xl); }
  .page-actions, .page-actions .btn { width: 100%; }
  .card-h, .card-b { padding: var(--s-4); }
  .card-f { padding: var(--s-3) var(--s-4); }
  .pool { padding: var(--s-5); }
  .pool-num { font-size: var(--t-3xl); }
  .kpis, .stats-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-val, .kpi-val { font-size: var(--t-xl); }
  .detail-actions { margin-inline-start: 0; width: 100%; }
  .log-item { grid-template-columns: 62px 1fr; }
  .log-item .log-msg { grid-column: 1 / -1; }
  .toolbar .search-box { max-width: none; }
  .gate-card { padding: var(--s-6); }
  .toast-container { inset-inline: var(--s-4); max-width: none; }
  .st-month, .st-ev-filters, .st-ev-filters .field-select { width: 100%; }
  .st-chart svg { height: 200px; }
  .st-tbl th, .st-tbl td { padding: var(--s-2) var(--s-3); }
  /* UI F4: a long account / key name is cut with … so the sticky column leaves room for the numbers */
  .st-tbl-wrap .st-tbl td:first-child { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .key-tbl .key-name { max-width: 40vw; }
  .key-tbl .key-val { flex-wrap: wrap; }
  /* UI F11: phone tap targets of at least 40 px (Copy, range chips, "Show as a table") */
  .key-tbl .key-val .btn-copy, .btn-copy { height: 40px; min-width: 56px; }
  .filter-chip { height: 40px; }
  .st-table-toggle summary { min-height: 40px; display: flex; align-items: center; }
  .key-toolbar .field-select { flex: 1 1 140px; min-width: 0; }
  .st-ev { grid-template-columns: 1fr auto; }
  .st-ev .log-msg { grid-column: 1 / -1; }
}

/* ===========================================================================
   Settings (2.1): one page with sub-pages; fields rendered from GET /api/admin/settings
   ========================================================================= */
.ss-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: calc(-1 * var(--s-2)) 0 var(--s-5); padding: var(--s-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.ss-tab { height: 34px; padding-inline: var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.ss-tab:hover { color: var(--text); background: var(--surface-2); }
.ss-tab[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ss-tab:focus-visible { box-shadow: var(--ring); outline: none; }
.ss-tabs-select { display: none; }
/* UI21-7: at 1024 the ten tabs needed slightly more than one row ("Maintenance" alone on row 2) — tighter tabs up to 1280 px */
@media (max-width: 1280px) { .ss-tabs { gap: 2px; } .ss-tab { padding-inline: 9px; } }
.ss-sec[hidden] { display: none; }
.ss-file-warn { margin-bottom: var(--s-5); }
.ss-file-warn[hidden] { display: none; }
.ss-fields { display: grid; gap: var(--s-4); }
.ss-field + .ss-field { padding-top: var(--s-4); border-top: 1px solid var(--border); }
.fields > .ss-field + .ss-field { padding-top: 0; border-top: 0; }   /* UI21-12: two fields side by side (Request limits per account) */
.ss-field-bool .toggle-row { padding-block: 0; border-bottom: 0; }
.ss-chip { height: 18px; font-size: 10.5px; padding-inline: 6px; text-transform: none; font-weight: 600; margin-inline-start: 4px; vertical-align: 1px; }
.ss-hint .ss-src { color: var(--text-3); white-space: normal; }
.ss-hint .ss-reset { font-size: var(--t-xs); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 0; margin-inline-start: 2px; display: inline-block; white-space: nowrap; }
.ss-field-bool .ss-hint { margin-top: 2px; }
/* UI211-7: Website tools caps while "Requests without an API key" is No key needed — still editable, visibly idle */
.ss-note { margin: var(--s-4) var(--s-5) 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm, 8px); background: var(--surface-2); color: var(--text-2); }
.ss-note[hidden] { display: none; }
.ss-field.ss-dim { opacity: .55; }
.ss-field.ss-dim:focus-within { opacity: 1; }
.ss-textarea { min-height: 64px !important; }
textarea.ss-textarea { height: auto; }
/* UI21-15: a multi-line text grows with its text (or the built-in text shown as placeholder) instead of cutting a line in
   half; at least its rows, at most 12 lines, then it scrolls. Browsers without field-sizing keep rows (3) and the resize grip. */
@supports (field-sizing: content) { textarea.ss-textarea { field-sizing: content; min-height: calc(3lh + 18px) !important; max-height: calc(12lh + 18px); } }
.ss-num { max-width: 220px; }
.ss-pending { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.card-footer-msg.warn { color: var(--warn); }
.ss-secrets { display: grid; gap: var(--s-4); }
.ss-secret { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.ss-secret .dot { margin-top: 6px; }
.ss-secret-name { font-size: var(--t-sm); font-weight: 500; color: var(--text); }
.ss-runtime { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--t-sm); }
.ss-runtime dt { color: var(--text-3); }
.ss-runtime dd { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text); overflow-wrap: anywhere; align-self: center; }
.ss-wide .card-b[data-ss-fields] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: var(--s-6); }
.ss-wide .ss-field + .ss-field { padding-top: 0; border-top: 0; }
.ss-load-err { color: var(--err); }
.inline-code { font-family: var(--font-mono); font-size: .9em; }
@media (max-width: 640px) {
  /* phones: the sub-page bar becomes one select (ten tabs wrapped over four rows took a whole screen) */
  .ss-tabs { display: none; }
  .ss-tabs-select { display: flex; margin-bottom: var(--s-5); }
  .ss-tabs-select .field-select { min-height: 44px; }
  .ss-num { max-width: none; }
  .ss-wide .card-b[data-ss-fields] { grid-template-columns: minmax(0, 1fr); }
  .ss-wide .ss-field + .ss-field { padding-top: var(--s-4); border-top: 1px solid var(--border); }
  .ss-hint .ss-reset { display: inline-flex; min-height: 32px; align-items: center; }
  .ss-runtime { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ss-runtime dd { margin-bottom: var(--s-2); }
}

/* ===========================================================================
   Console polish (2.1): spacing, wrapping, empty footers, Telegram columns
   ========================================================================= */
/* a card footer that holds nothing but an empty message line takes no room (shown again while it says something) */
.card-f:has(> .card-footer-msg:only-child:empty) { display: none; }
/* sidebar: a tighter rhythm so every item, Sign out included, fits a 900 px tall window */
.nav-label { padding: var(--s-3) var(--s-3) var(--s-1); }
.side-ident { line-height: 1.45; }
/* why an account is down is a sentence now: body font, up to two lines, never cut mid-word */
.acct-sub { font-family: var(--font-body); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
#ovAttention .list-row .s { white-space: normal; overflow-wrap: anywhere; }
.progress-text, .pp-log-empty { font-family: var(--font-body); }
/* Telegram: status bar across the page, then two column stacks (Bot + Alerts | Scheduled reports + Recent alerts) */
.tg-status-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.tg-empty { padding: var(--s-6) var(--s-2); }
/* empty states: text stays readable width */
.empty p, .list-empty { max-width: 56ch; margin-inline: auto; }
@media (max-width: 640px) {
  /* an odd last tile spans the row instead of leaving an empty half (Overview: License) */
  .kpis > :last-child:nth-child(odd), .stats-mini > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1280px) {
  /* 1024–1280 px: the statistics tables (Instagram accounts has nine columns) fit their card without scrolling */
  #panel-stats .st-tbl th, #panel-stats .st-tbl td { padding-inline: var(--s-3); }
}

/* UI21-14: "Skip to content" — the first focusable element; visible only while focused */
.skip-link { position: absolute; inset-inline-start: 8px; top: -200px; z-index: 10000; padding: 10px 16px; border-radius: 8px;
  background: var(--accent); color: var(--accent-contrast); font-weight: 600; font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 8px; outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
#main:focus { outline: none; }