/* Styles for the gateway's OWN pages (hub, profile, admin).
   style.css is the mother panel's sheet, copied verbatim and never edited, so
   the handful of classes only these pages use live here instead. Loaded after
   it, so the colour tokens are already defined. */

/* ---------- cards ---------- */
.panel-card {
  background: linear-gradient(180deg, rgba(25, 31, 48, .92), rgba(17, 21, 34, .94));
  border: 1px solid var(--border-soft, rgba(120, 140, 190, .16));
  border-radius: var(--radius-lg, 16px);
  padding: 22px 24px;
  box-shadow: var(--shadow-card, 0 10px 40px rgba(0, 0, 0, .35));
  backdrop-filter: blur(8px);
}
.muted-card { color: var(--text-faint, #6f7d99); }
.sub-head { font-size: 14px; font-weight: 700; margin: 24px 0 13px; }

/* ---------- key/value grid ---------- */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 15px; }
.kv-grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv-grid span { font-size: 11.5px; color: var(--text-faint, #6f7d99); }
.kv-grid b { font-size: 13.5px; font-weight: 700; word-break: break-word; }
.txt-good { color: var(--green, #22c55e); }
.txt-bad  { color: var(--red, #ef4444); }
.stat-quota { font-size: 13px; font-weight: 600; color: var(--text-faint, #6f7d99); }

/* ---------- tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th {
  text-align: right; font-weight: 700; color: var(--text-faint, #6f7d99);
  padding: 10px 11px; white-space: nowrap;
  border-bottom: 1px solid var(--border-soft, rgba(120, 140, 190, .16));
}
.data-table td {
  padding: 11px; vertical-align: middle;
  border-bottom: 1px solid rgba(120, 140, 190, .08);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: rgba(120, 140, 190, .05); }
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }

.pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.good { background: rgba(34, 197, 94, .15);  color: var(--green, #22c55e); }
.pill.bad  { background: rgba(239, 68, 68, .15);  color: var(--red, #ef4444); }

/* ---------- notices ---------- */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius, 11px);
  margin-bottom: 20px; font-size: 13px; line-height: 1.75;
  background: rgba(110, 168, 254, .09);
  border: 1px solid rgba(110, 168, 254, .28);
  /* Tokens, not literals: the pale-on-dark text these used to hardcode is
     unreadable on a white page. */
  color: var(--accent-1);
}
.notice.warn   { background: var(--amber-bg); border-color: rgba(245, 158, 11, .32); color: var(--amber); }
.notice.danger { background: var(--red-bg); border-color: rgba(239, 68, 68, .34); color: var(--red); }
.notice svg { flex-shrink: 0; margin-top: 3px; }

/* ---------- credentials block ---------- */
/* A generated password exists in plaintext exactly once, in the response that
   created it. So this is deliberately loud, easy to copy, and never auto
   dismissed. */
.cred-box {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--radius, 11px);
  background: rgba(34, 197, 94, .07);
  border: 1px solid rgba(34, 197, 94, .30);
}
.cred-box h4 { margin: 0 0 13px; font-size: 13.5px; color: var(--green, #22c55e); }
.cred-sub { margin: 18px 0 9px; font-size: 12px; font-weight: 700; color: var(--text-dim, #a9b4cc); }
.cred-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; }
.cred-fields > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cred-fields span { font-size: 11px; color: var(--text-faint, #6f7d99); }
.cred-fields b {
  font-size: 13.5px; font-weight: 700; user-select: all; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cred-box pre {
  margin: 0; padding: 13px 15px; border-radius: var(--radius, 11px);
  direction: rtl; text-align: right; font-size: 12.5px; line-height: 1.95;
  white-space: pre-wrap; word-break: break-word; user-select: all;
  color: var(--text, #e7ecf6);
  background: var(--inset-bg);
  border: 1px solid var(--border-soft, rgba(120, 140, 190, .16));
  font-family: inherit;
}
.cred-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.cred-warn { margin: 13px 0 0; font-size: 11.5px; color: var(--amber, #f59e0b); line-height: 1.7; }

/* ---------- forms ---------- */
/* The mother sheet styles .fs-form-row, but its inputs assume the engine
   pages' markup; these keep the gateway's forms consistent with it. */
.panel-card input,
.panel-card select,
.panel-card textarea {
  font-family: inherit; font-size: 13px; color: var(--text, #e7ecf6);
  background: var(--inset-bg);
  border: 1px solid var(--border-soft, rgba(120, 140, 190, .16));
  border-radius: var(--radius, 11px);
  padding: 10px 12px; outline: none; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.panel-card input:focus,
.panel-card select:focus,
.panel-card textarea:focus {
  border-color: var(--accent-1, #6ea8fe);
  box-shadow: 0 0 0 3px rgba(110, 168, 254, .13);
}

/* ---------- toasts ---------- */
.toast-stack {
  position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px; max-width: min(92vw, 460px);
}
.toast {
  padding: 12px 17px; border-radius: var(--radius, 11px);
  font-size: 13px; font-weight: 600; line-height: 1.7;
  background: linear-gradient(180deg, rgba(28, 34, 52, .97), rgba(18, 22, 36, .97));
  border: 1px solid var(--border-soft, rgba(120, 140, 190, .16));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
  animation: gwToastIn .22s cubic-bezier(.22, .61, .36, 1);
}
.toast.success { border-color: rgba(34, 197, 94, .45); color: #86efac; }
.toast.error   { border-color: rgba(239, 68, 68, .45); color: #fecaca; }
.toast.warn    { border-color: rgba(245, 158, 11, .45); color: #fde68a; }
@keyframes gwToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- small screens ---------- */
@media (max-width: 780px) {
  .panel-card { padding: 17px 16px; }
  .kv-grid, .cred-fields { grid-template-columns: 1fr 1fr; }

  /* ---- the customer table becomes one card per customer ----
     It has nine columns and five action buttons per row. The rule that used
     to be here scoped a horizontal scroller to `.panel-card > .data-table`
     and there is no .panel-card anywhere in the app, so it matched nothing
     and the table simply forced the whole page sideways. Scrolling would not
     have been much better: reading a customer means panning across nine
     columns. Stacked, each row is a readable card and the buttons are
     thumb-sized. `data-label` on each cell supplies the heading the hidden
     thead used to. */
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table thead { display: none; }
  .data-table tr {
    padding: 14px 16px; margin-bottom: 10px;
    border-radius: var(--radius-md, 13px);
    background: var(--surface-2); border: 1px solid var(--border-soft);
  }
  .data-table tbody tr:hover { background: var(--surface-2); }
  .data-table td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 5px 0; border-bottom: 0; text-align: start;
  }
  .data-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px; font-weight: 600; color: var(--text-faint);
  }
  /* The name is the card's title, not another key/value line. */
  .data-table td.cell-name {
    display: block; margin-bottom: 8px;
    font-size: 15px; font-weight: 700;
  }
  .data-table td.cell-name::before { display: none; }
  .data-table td.row-actions {
    justify-content: flex-start; flex-wrap: wrap; gap: 7px;
    margin-top: 10px; padding-top: 12px;
    border-top: 1px solid var(--border-soft);
  }
  .data-table td.row-actions::before { display: none; }
  /* .mini is an inline-flex with a left-aligned label; stretched to fill the
     row it has to centre itself or the words sit off to one side. */
  .data-table td.row-actions .mini {
    flex: 1 1 auto; justify-content: center; min-height: 34px;
  }
}
@media (max-width: 460px) {
  /* Two short columns beat eight stacked rows: the account card has eight
     fields and in one column it became a screen and a half of scrolling for
     a few words each. Only a genuinely narrow phone gets a single column. */
  .kv-grid { gap: 12px 10px; }
  .cred-fields { grid-template-columns: 1fr; }
  .toast-stack { inset-inline: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 380px) {
  .kv-grid { grid-template-columns: 1fr; }
}

/* ---------- pricing editor (admin) ---------- */
.plan-row {
  display: grid;
  grid-template-columns: 1.3fr .7fr 1.2fr 1.6fr 1fr auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.plan-row:last-of-type { border-bottom: 0; }
.plan-row label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.plan-row input[type="text"], .plan-row input[type="number"] {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.plan-row input:focus { border-color: var(--accent-1); }
.plan-row .plan-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 10px; white-space: nowrap; }
.plan-row .plan-check input { accent-color: var(--accent-1); }
.plan-row .mini { align-self: end; margin-bottom: 2px; }

@media (max-width: 900px) {
  /* Seven columns on a phone gives each field about forty pixels; stack the
     row into a card instead. */
  .plan-row { grid-template-columns: 1fr 1fr; padding: 14px 0; }
  .plan-row .mini { grid-column: span 2; }
}

/* ---------- operator dashboard ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kpi {
  position: relative; overflow: hidden;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  border: 1px solid var(--border-soft);
}
.kpi::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
  opacity: .45;
}
.kpi b {
  display: block; font-size: 25px; font-weight: 800; letter-spacing: -.5px;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.kpi span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-faint); }
.kpi.warn b { color: var(--amber); }
.kpi.bad b { color: var(--red); }
.kpi.money b { font-size: 21px; color: var(--green); }
.kpi.warn::after { background: linear-gradient(90deg, transparent, var(--amber), transparent); }
.kpi.bad::after { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.kpi.money::after { background: linear-gradient(90deg, transparent, var(--green), transparent); }

.pay-list { margin-top: 14px; }
.pay-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.8px;
}
.pay-row:last-child { border-bottom: 0; }
.pay-row b { font-weight: 700; min-width: 110px; }
.pay-row .dim { color: var(--text-faint); font-size: 11.5px; }
.pay-row .mini { margin-inline-start: auto; }

.soft-hr { border: 0; border-top: 1px solid var(--border-soft); margin: 20px 0; }
.chk { flex-direction: row !important; align-items: center; gap: 7px !important; white-space: nowrap; }
.chk input { accent-color: var(--accent-1); }
.inline-select {
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 12.5px; outline: none;
}

/* ---------- audit log ---------- */
.audit-box { max-height: 460px; overflow: auto; }
.audit-row {
  display: grid;
  grid-template-columns: 120px 110px 1fr 1.4fr 110px;
  gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.3px;
}
.audit-row:last-child { border-bottom: 0; }
.audit-when, .audit-ip { color: var(--text-faint); font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; }
.audit-act { font-weight: 700; color: var(--accent-1); }
.audit-who { color: var(--text); }
.audit-detail { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  /* Five columns on a phone gives each about sixty pixels. Stack into a card
     and drop the IP, which is the least useful field on a small screen. */
  .audit-row { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .audit-ip { display: none; }
  .audit-detail { white-space: normal; grid-column: span 2; }
}

/* ---------- referral ---------- */
.ref-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.ref-num {
  flex: 0 0 auto; min-width: 96px; padding: 14px 18px; text-align: center;
  border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.ref-num b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ref-num span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint); }
.ref-num.ok b { color: var(--green); }
.ref-num.ok { border-color: rgba(52,211,153,.3); background: var(--green-bg); }
.ref-explain { flex: 1; min-width: 240px; margin: 0; font-size: 13.4px; line-height: 2; color: var(--text-dim); }
.ref-explain b { color: var(--text); }
.ref-explain small { color: var(--text-faint); font-size: 11.8px; }
.ref-chip {
  display: inline-block; padding: 1px 9px; margin: 0 2px;
  border-radius: 999px; font-weight: 700; font-size: 12.5px;
  color: var(--accent-1); background: rgba(110,168,254,.12);
  border: 1px solid rgba(110,168,254,.28);
}
/* A full URL will not fit the value column on a phone. */
.ref-link { word-break: break-all; font-size: 12px !important; }

/* ---------- panel installer (x-ui / marzban) ---------- */
.xui-type-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.xui-type-tab {
  padding: 8px 18px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border-soft); cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.xui-type-tab:hover { color: var(--text); }
.xui-type-tab.active {
  color: var(--ink); background: var(--accent-grad); border-color: transparent;
  font-weight: 700;
}
/* Badge on each installed-panel card, distinguishing which software it is -
   the field rows below it (url/username/password) look identical for both,
   so this is the only visual cue once more than one type is in the list. */
.xui-type-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}

.xui-log {
  margin: 12px 0 0; padding: 14px;
  max-height: 300px; overflow: auto;
  border-radius: var(--radius-md);
  background: var(--code-bg); color: var(--code-fg);
  border: 1px solid var(--code-border);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
  text-align: left;
}
.xui-card {
  padding: 16px 18px; margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.xui-card:last-child { margin-bottom: 0; }
.xui-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.xui-card-head b { font-size: 14px; font-weight: 700; }
.xui-ver { font-size: 11px; color: var(--text-faint); font-family: ui-monospace, monospace; }
.xui-card-head .mini { margin-inline-start: auto; }
.xui-card .cred-fields a { color: var(--accent-1); text-decoration: none; word-break: break-all; }
.xui-card .cred-fields a:hover { text-decoration: underline; }
.xui-copy { margin-top: 12px; }

/* ---------- x-ui: installed panel cards ----------
   One row per field rather than a wrapping grid: credentials get read off
   the screen and typed by hand, so the eye should run down one column. */
.xui-card {
  padding: 0; margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.xui-card:last-child { margin-bottom: 0; }
.xui-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--hover-tint);
  border-bottom: 1px solid var(--border-soft);
}
.xui-card-head b { font-size: 14.5px; font-weight: 700; font-family: ui-monospace, "SF Mono", monospace; }
.xui-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.xui-dot.ok { background: var(--green); }
.xui-dot.bad { background: var(--red); }
.xui-ver {
  font-size: 11px; color: var(--text-faint);
  font-family: ui-monospace, monospace;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft);
}
.xui-card-head .pill { margin-inline-start: auto; }

.xui-rows { padding: 4px 16px; }
.xui-row {
  display: grid;
  grid-template-columns: 92px 1fr 34px;
  gap: 12px; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
}
.xui-row:last-child { border-bottom: 0; }
.xui-row > span { font-size: 12px; color: var(--text-faint); }
.xui-row > b {
  min-width: 0; font-size: 13.5px; font-weight: 700;
  word-break: break-all; text-align: left;
}
.xui-row > b.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.xui-row > b.dim { color: var(--text-faint); font-weight: 400; }
.xui-row a { color: var(--accent-1); text-decoration: none; }
.xui-row a:hover { text-decoration: underline; }
.xui-row > i { display: flex; justify-content: flex-end; }

.xui-mini {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: all .16s var(--ease);
}
.xui-mini.wide { width: auto; padding: 0 11px; font-family: var(--font); font-size: 11.5px; font-weight: 600; }
.xui-mini:hover { color: var(--accent-1); border-color: var(--accent-1); }

.xui-warn {
  margin: 0 16px 12px; padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 12.3px; line-height: 1.9;
  color: var(--amber); background: var(--amber-bg);
  border: 1px solid rgba(251, 191, 36, .3);
}
.xui-card-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
}
.xui-card-foot .mini { margin-inline-start: auto; }

/* ---------- firewall help modal ---------- */
.xui-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 9, 16, .66);
  backdrop-filter: blur(6px);
  animation: xuiFade .2s var(--ease);
}
@keyframes xuiFade { from { opacity: 0; } }
.xui-modal-card {
  width: 100%; max-width: 620px; max-height: 88vh; overflow: auto;
  padding: 22px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-modal);
}
.xui-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.xui-modal-head b { font-size: 17px; font-weight: 800; }
.xui-x {
  width: 30px; height: 30px; border-radius: 9px;
  font-size: 20px; line-height: 1;
  color: var(--text-dim); background: transparent;
  border: 1px solid var(--border); cursor: pointer;
}
.xui-x:hover { color: var(--text); border-color: var(--accent-1); }
.xui-modal-lead { margin: 0 0 16px; font-size: 13.3px; line-height: 2; color: var(--text-dim); }
.xui-modal-lead b { color: var(--text); }
.xui-modal-foot { margin: 14px 0 0; font-size: 12px; line-height: 1.9; color: var(--text-faint); }

.xui-block { margin-bottom: 12px; }
.xui-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.xui-block-head span { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.xui-block pre {
  margin: 0; padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--code-bg); color: var(--code-fg);
  border: 1px solid var(--code-border);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word; text-align: left;
}
/* The "turn the firewall off" block is genuinely risky on a box you reach
   over SSH, so it does not look like the other two. */
.xui-block.danger pre { border-color: rgba(248, 113, 113, .35); }
.xui-block.danger .xui-block-head span { color: var(--red); }

@media (max-width: 620px) {
  .xui-row { grid-template-columns: 78px 1fr 32px; gap: 8px; }
  .xui-row > b { font-size: 12.5px; }
}

/* ---------- collapsible admin groups ----------
   Native <details>, so it works with no JS and the keyboard gets open/close
   for free. */
.adm-group {
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.adm-group summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s var(--ease);
}
.adm-group summary::-webkit-details-marker { display: none; }
.adm-group summary:hover { background: var(--hover-tint); }
.adm-group summary:focus-visible { outline: 2px solid var(--accent-1); outline-offset: -2px; }
.adm-ic {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 10px;
  color: var(--accent-1);
  background: rgba(110, 168, 254, .10);
  border: 1px solid rgba(110, 168, 254, .22);
}
.adm-title { font-size: 15px; font-weight: 700; }
.adm-sub { font-size: 11.5px; color: var(--text-faint); }
.adm-count {
  margin-inline-start: auto;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
/* Something is waiting. Loud on purpose: a folded group hiding four pending
   orders is worse than no folding at all. */
.adm-count.alert {
  color: var(--ink); background: var(--amber);
  border-color: transparent;
  animation: admPulse 2.4s ease-in-out infinite;
}
@keyframes admPulse { 50% { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .5); } }
.adm-count:not(.alert) + .adm-chev, .adm-count.alert + .adm-chev { margin-inline-start: 0; }
.adm-chev {
  width: 9px; height: 9px; flex: 0 0 auto;
  margin-inline-start: 4px;
  border-inline-end: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform .22s var(--ease);
}
/* No count present: the chevron takes the free space instead. */
.adm-title + .adm-sub + .adm-chev { margin-inline-start: auto; }
.adm-group[open] > summary .adm-chev { transform: rotate(-135deg); }
.adm-group[open] > summary { border-bottom: 1px solid var(--border-soft); }

.adm-body { padding: 4px 20px 18px; }
/* Sections inside a group lose their own outer spacing - the group already
   provides it, and doubled padding is what makes a page feel loose. */
.adm-body .fs-section { margin: 18px 0 0; }
.adm-body .fs-section:first-child { margin-top: 14px; }
.adm-body .fs-section h2 { font-size: 15.5px; }

@media (max-width: 620px) {
  .adm-sub { display: none; }
  .adm-body { padding: 4px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-count.alert { animation: none; }
  .adm-chev { transition: none; }
}