/* Famestate — QuickPanel design system (roneybhai1).
   ===========================================================================
   ONE source of truth for every panel page. Tokens first, then components.

   Scope: everything is under `.fs-p`, which each page opts into on its
   wrapper. Nothing here can reach the admin panel or another theme.

   Token rules — do not hardcode past these:
     spacing   4 / 8 / 12 / 16 / 20 / 24 / 32 / 40   (--s1 … --s8)
     radius    6 / 9 / 12 / 999                      (--r1 … --r3, --rp)
     type      11 / 12 / 13 / 14 / 15 / 19 / 22      (--t1 … --t7)
     shadow    one raised value, one overlay value   (--sh1, --sh2)
   Colour comes from fs-ui.css (--fs-ink/-muted/-line/-soft/-brand); no new
   palette is introduced here.
   =========================================================================== */

.fs-p {
  /* spacing scale */

  /* radius scale */

  /* type scale */
  --t1: 11px;   --t2: 12px;   --t3: 13px;  --t4: 13.5px;
  --t5: 15px;   --t6: 19px;   --t7: 22px;

  /* elevation — deliberately shallow; depth comes from the 1px line */

  /* control geometry, so every input/button on every page matches */
  --ctl-h-sm: 32px;
}

/* Cards on these pages are the theme's .card, which ships a 20px radius and an
   opaque drop shadow. Both are overridden here so a panel reads as a surface
   with an edge, not a floating box — the single biggest reason the old pages
   looked like a 2015 Bootstrap template. */
.body .fs-p .card {
  padding: var(--fs-5);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-lg);
  background: #fff;
  box-shadow: var(--fs-e1);
}

/* ============================================================ LAYOUT */
.body .fs-p .row { align-content: flex-start; }
.body .fs-p .row > [class*="col-"] { align-self: flex-start; margin-bottom: var(--fs-5); }
.body .fs-p .row > [class*="col-"]:last-child { margin-bottom: 0; }

/* ============================================================ PAGE HEADER */
.fs-p-head { margin: var(--fs-1) 0 18px; }
/* Blue.css pins `.body h1{font-size:48px}` — a marketing-page size that made
   every panel heading shout. Matched here at the same weight so the token wins
   without !important. */
.body .fs-p .fs-p-head__title,
.fs-p-head__title {
  margin: 0;
  font-size: var(--fs-t-h1);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--fs-ink);
}
.fs-p-head__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-2) var(--fs-4);
  margin: var(--fs-2) 0 0;
  font-size: var(--fs-t-sm);
  line-height: 1.5;
  color: var(--fs-muted);
}
.fs-p-head__note {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-2);
  padding-left: var(--fs-4);
  border-left: 1px solid var(--fs-line);
  font-size: var(--fs-t-cap);
}
.fs-p-head__note i { flex: none; font-size: var(--fs-t-micro); color: var(--fs-brand); }

/* ============================================================ PANEL HEAD
   One heading pattern for every card on every page. */
.fs-p-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-3);
  margin: 0 0 var(--fs-4);
  padding-bottom: var(--fs-4);
  border-bottom: 1px solid var(--fs-line);
}
.fs-p-h__t {
  display: flex;
  align-items: center;
  gap: var(--fs-2);
  margin: 0;
  font-size: var(--fs-t-h3);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fs-ink);
}
.fs-p-h__t i { font-size: var(--fs-t-h3); color: var(--fs-brand); }
.fs-p-h__s {
  flex-basis: 100%;
  margin: -6px 0 0;
  font-size: var(--fs-t-cap);
  line-height: 1.5;
  color: var(--fs-muted);
}
.fs-p-count {
  margin-left: auto;
  padding: 3px var(--fs-3);
  border-radius: var(--fs-r-pill);
  background: var(--fs-soft);
  font-size: var(--fs-t-micro);
  font-weight: 700;
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}
/* a card whose body is a table wants no padding of its own */
.fs-p .fs-p-flush { padding: 0; overflow: hidden; }
.fs-p .fs-p-flush > .fs-p-h { margin: 0; padding: 18px var(--fs-5) 15px; }

/* ============================================================ FORM */
.body .fs-p .control-label,
.body .fs-p .fs-p-label {
  display: block;
  margin: var(--fs-4) 0 6px;
  font-size: var(--fs-t-cap);
  font-weight: 600;
  color: var(--fs-ink);
}
.body .fs-p .form-group:first-child .control-label,
.body .fs-p .fs-p-label:first-child { margin-top: 0; }

.body .fs-p .form-control,
.body .fs-p .fs-p-input {
  width: 100%;
  height: var(--fs-9);
  padding: 0 var(--fs-4);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-md);
  background: #fff;
  font-size: var(--fs-t-body);
  color: var(--fs-ink);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.fs-p .form-control::placeholder, .fs-p .fs-p-input::placeholder { color: #9db4c9; }
.fs-p .form-control:hover, .fs-p .fs-p-input:hover { border-color: #b6c7dd; }
.fs-p .form-control:focus, .fs-p .form-control:focus-visible,
.fs-p .fs-p-input:focus, .fs-p .fs-p-input:focus-visible {
  border-color: var(--fs-brand);
  outline: 0;
  box-shadow: 0 0 0 3px var(--fs-brand-soft);
}
.fs-p .form-control[readonly], .fs-p .form-control:disabled {
  border-style: dashed;
  background: var(--fs-soft);
  color: var(--fs-ink);
  cursor: not-allowed;
  opacity: 1;
}
.body .fs-p textarea.form-control { height: auto; min-height: 130px; padding: var(--fs-3) 14px; line-height: 1.6; }
.body .fs-p select.form-control {
  padding-right: 38px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fs-muted) 50%),
    linear-gradient(135deg, var(--fs-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.fs-p .help-block, .fs-p .fs-p-help {
  display: block;
  margin-top: var(--fs-2);
  font-size: var(--fs-t-cap);
  line-height: 1.5;
  color: var(--fs-muted);
}

/* search field with a leading icon */
.fs-p-search { position: relative; flex: 1; min-width: 0; }
.fs-p-search > i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  z-index: 1;
  font-size: var(--fs-t-body);
  color: var(--fs-muted);
  pointer-events: none;
}
.body .fs-p .fs-p-search .form-control,
.body .fs-p .fs-p-search .fs-p-input { padding-left: 42px; }
.fs-p-bar { display: flex; align-items: center; gap: var(--fs-3); margin-bottom: var(--fs-4); }

/* ============================================================ BUTTONS */
.body .fs-p .btn,
.body .fs-p button[type="submit"],
.body .fs-p .fs-p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-2);
  min-height: var(--fs-9);
  padding: 0 var(--fs-6);
  border: 0;
  border-radius: var(--fs-r-xs);
  background: var(--fs-brand);
  font-size: var(--fs-t-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.body .fs-p .btn:hover,
.body .fs-p button[type="submit"]:hover,
.body .fs-p .fs-p-btn:hover { background: #4038c9; color: #fff; text-decoration: none; }
.body .fs-p .btn:active,
.body .fs-p button[type="submit"]:active,
.body .fs-p .fs-p-btn:active { background: #372fb4; }
.body .fs-p .fs-p-btn--block, .body .fs-p button[type="submit"] { width: 100%; }
.body .fs-p .fs-p-btn--ghost {
  border: 1px solid var(--fs-line);
  background: #fff;
  color: var(--fs-ink);
}
.body .fs-p .fs-p-btn--ghost:hover { border-color: #b6c7dd; background: var(--fs-soft); color: var(--fs-ink); }
.body .fs-p .fs-p-btn--sm { min-height: var(--ctl-h-sm); padding: 0 var(--fs-3); font-size: var(--fs-t-cap); font-weight: 600; }
.body .fs-p .btn:disabled,
.body .fs-p button[type="submit"]:disabled,
.body .fs-p .fs-p-btn:disabled { opacity: .55; cursor: not-allowed; }
/* the theme animates a diagonal sheen across .btn-big-primary; it reads as a
   dated shine. The rule lives in header.twig's inline <style>, after this. */
.body .fs-p .btn-big-primary:before { content: none !important; animation: none !important; }

.fs-p a:focus-visible,
.fs-p button:focus-visible,
.fs-p summary:focus-visible,
.fs-p input:focus-visible,
.fs-p [tabindex]:focus-visible {
  outline: 2px solid var(--fs-brand);
  outline-offset: 2px;
}

/* ============================================================ TABLE */
.fs-p-wrap { overflow-x: auto; }
.body .fs-p .fs-p-table { width: 100%; margin: 0; border-collapse: collapse; }
.body .fs-p .fs-p-table th {
  padding: var(--fs-3) var(--fs-4);
  border: 0;
  border-top: 1px solid var(--fs-line);
  border-bottom: 1px solid var(--fs-line);
  background: var(--fs-soft);
  text-align: left;
  font-size: var(--fs-t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fs-muted);
  white-space: nowrap;
}
.body .fs-p .fs-p-table td {
  padding: var(--fs-3) var(--fs-4);
  border: 0;
  border-bottom: 1px solid var(--fs-line);
  font-size: var(--fs-t-sm);
  color: var(--fs-ink);
  vertical-align: middle;
  /* Blue.css pins `.body .table tbody tr td{height:40px}`; harmless as a table
     cell, but it becomes a hard height once cells go block on mobile */
  height: auto;
}
.body .fs-p .fs-p-table tbody tr:last-child td { border-bottom: 0; }
.body .fs-p .fs-p-table tbody tr { transition: background-color .13s; }
@media (hover: hover) {
  .body .fs-p .fs-p-table tbody tr:hover td { background: var(--fs-soft); }
}
.fs-p-num, .fs-p-end { text-align: right; }
.fs-p-id { font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-p-dim { color: var(--fs-muted); }
.fs-p-nowrap { white-space: nowrap; }
.fs-p-strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.body .fs-p .fs-p-link { color: var(--fs-brand); font-weight: 600; }
.body .fs-p .fs-p-link:hover { text-decoration: underline; }

/* ============================================================ BADGES */
.fs-p-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-1);
  padding: var(--fs-1) var(--fs-3);
  border-radius: var(--fs-r-pill);
  font-size: var(--fs-t-cap);
  font-weight: 700;
  white-space: nowrap;
}
.fs-p-badge i { font-size: 9px; }
.fs-p-badge.is-ok { background: #eaf6f0; color: #1d7a4c; }
.fs-p-badge.is-bad { background: #fdeceb; color: #b93a2e; }
.fs-p-badge.is-warn { background: #fdf3e8; color: #a35b1b; }
.fs-p-badge.is-idle { background: var(--fs-soft); color: var(--fs-muted); }
.fs-p-badge.is-live { background: var(--fs-brand-soft); color: var(--fs-brand); }

/* ============================================================ MESSAGES */
.fs-p .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-3);
  margin-top: var(--fs-4);
  padding: var(--fs-3) var(--fs-4);
  border: 1px solid;
  border-radius: var(--fs-r-md);
  font-size: var(--fs-t-sm);
  line-height: 1.55;
}
.fs-p .alert-success { border-color: #cfe9dc; background: #f3faf6; color: #1d7a4c; }
.fs-p .alert-danger, .fs-p .alert-error { border-color: #f2d3d0; background: #fdf5f4; color: #b93a2e; }
.fs-p .alert-warning { border-color: #f0dcb8; background: #fdf5f4; color: #a35b1b; }
.fs-p .alert-info { border-color: #cfdcf2; background: #f4f7fd; color: var(--fs-brand); }
.fs-p .alert .close {
  margin-left: auto;
  padding: 0 0 0 var(--fs-3);
  border: 0;
  background: none;
  font-size: var(--fs-t-h2);
  line-height: 1;
  color: inherit;
  opacity: .5;
  cursor: pointer;
}
.fs-p .alert .close:hover { opacity: 1; }

/* ============================================================ NOTE BLOCK */
.fs-p-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px var(--fs-4);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: var(--fs-soft);
}
.fs-p-note > i { flex: none; margin-top: 2px; font-size: var(--fs-t-sm); color: var(--fs-brand); }
.fs-p-note p { margin: 0; font-size: var(--fs-t-cap); line-height: 1.6; color: var(--fs-muted); }
.body .fs-p .fs-p-note a { font-weight: 600; color: var(--fs-brand); }

/* key/value rows */
.fs-p-rows { margin: 0; }
.fs-p-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-4);
  padding: 11px 0;
  border-top: 1px solid var(--fs-line);
}
.fs-p-row:first-child { border-top: 0; padding-top: 0; }
.fs-p-row dt, .fs-p-row .k { margin: 0; font-size: var(--fs-t-sm); font-weight: 400; color: var(--fs-muted); }
.fs-p-row dd, .fs-p-row .v {
  margin: 0;
  font-size: var(--fs-t-sm);
  font-weight: 700;
  color: var(--fs-ink);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ============================================================ EMPTY STATE */
.fs-p-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-1);
  padding: var(--fs-8) var(--fs-5);
  border: 1px dashed var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: var(--fs-soft);
  text-align: center;
}
.fs-p-flush .fs-p-blank { margin: var(--fs-5); }
.fs-p-blank__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--fs-2);
  border: 1px solid var(--fs-line);
  border-radius: 50%;
  background: #fff;
  font-size: var(--fs-t-h3);
  color: var(--fs-muted);
}
.fs-p-blank b { font-size: var(--fs-t-sm); font-weight: 700; color: var(--fs-ink); }
.fs-p-blank > span:not(.fs-p-blank__ic) {
  max-width: 46ch;
  font-size: var(--fs-t-cap);
  line-height: 1.55;
  color: var(--fs-muted);
}
.body .fs-p .fs-p-blank a { font-weight: 600; color: var(--fs-brand); }

/* ============================================================ PAGINATION */
.fs-p-pager { display: flex; flex-wrap: wrap; gap: var(--fs-2); margin-top: var(--fs-4); }
.body .fs-p .fs-p-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: var(--ctl-h-sm);
  padding: 0 var(--fs-3);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: #fff;
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
  transition: border-color .14s, background-color .14s, color .14s;
}
.body .fs-p .fs-p-page:hover { border-color: #b6c7dd; background: var(--fs-soft); color: var(--fs-ink); text-decoration: none; }
.body .fs-p .fs-p-page.is-current { border-color: transparent; background: var(--fs-brand); color: #fff; }

/* ============================================================ TABS */
.fs-p-tabs {
  display: flex;
  gap: var(--fs-2);
  margin-bottom: var(--fs-4);
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fs-p-tabs::-webkit-scrollbar { display: none; }
.body .fs-p .fs-p-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--ctl-h-sm);
  padding: 0 var(--fs-4);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-pill);
  background: #fff;
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--fs-muted);
  white-space: nowrap;
  transition: border-color .14s, background-color .14s, color .14s;
}
.body .fs-p .fs-p-tab:hover { border-color: #b6c7dd; background: var(--fs-soft); color: var(--fs-ink); text-decoration: none; }
.body .fs-p .fs-p-tab.is-active {
  border-color: transparent;
  background: var(--fs-brand);
  color: #fff;
}

/* screen-reader-only */
.fs-p-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .fs-p *, .fs-p *::before, .fs-p *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 991px) {
  /* every kit table becomes one card per record */
  .fs-p-wrap { overflow-x: visible; }
  .body .fs-p .fs-p-table,
  .body .fs-p .fs-p-table tbody,
  .body .fs-p .fs-p-table tr,
  .body .fs-p .fs-p-table td { display: block; width: 100%; }
  .body .fs-p .fs-p-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .body .fs-p .fs-p-table tbody tr {
    padding: 6px var(--fs-4) var(--fs-3);
    border-bottom: 1px solid var(--fs-line);
  }
  .body .fs-p .fs-p-table tbody tr:last-child { border-bottom: 0; }
  .body .fs-p .fs-p-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-4);
    padding: var(--fs-2) 0!important;
    border: 0;
    text-align: right;
  }
  .body .fs-p .fs-p-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-t-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fs-muted);
  }
  .body .fs-p .fs-p-table td[data-label=""]::before,
  .body .fs-p .fs-p-table td:not([data-label])::before { content: none; }
  .body .fs-p .fs-p-table tbody tr:hover td { background: transparent; }
}

@media (max-width: 575px) {
  .fs-p-head__title { font-size: var(--fs-t-h2); }
  .fs-p-head__note { padding-left: 0; border-left: 0; }
  .fs-p-bar { flex-wrap: wrap; }
  .fs-p-search { flex: 1 0 100%; }
  .body .fs-p .fs-p-bar .fs-p-btn { width: 100%; }
}

/* ---- tickets: the "new reply" flag rides next to the subject link -------- */
.fs-tk-new { margin-left: var(--fs-2); vertical-align: middle; }

/* a submit button sitting in a toolbar must not take the block width that a
   form's main submit button gets — it would squeeze the search field to zero */
.body .fs-p .fs-p-bar button[type="submit"],
.body .fs-p .fs-p-bar .fs-p-btn { flex: none; width: auto; }

/* ---- account: key field and its warning --------------------------------- */
.fs-acc-key { margin-bottom: var(--fs-4); }
.body .fs-p .fs-acc-key .form-control {
  flex: 1;
  min-width: 0;
  width: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}
.fs-acc-warn > i { color: #a35b1b; }

/* ---- api docs ------------------------------------------------------------
   Parameter tables and response samples. The samples keep their own surface so
   the eye can tell "this is what you send" from "this is what you get back". */
.fs-api-t .fs-api-k { width: 34%; white-space: nowrap; }
.fs-api-opt {
  margin-left: var(--fs-2);
  padding: 1px var(--fs-2);
  border-radius: var(--fs-r-xs);
  background: var(--fs-soft);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fs-muted);
}
.fs-api-code {
  padding: 2px var(--fs-2);
  border: 1px solid var(--fs-line);
  border-radius: 6px;
  background: var(--fs-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-t-cap);
  color: var(--fs-ink);
}
.fs-api-sample { padding: var(--fs-4) var(--fs-5) var(--fs-5); border-top: 1px solid var(--fs-line); }
.fs-api-sample__t {
  display: block;
  margin-bottom: var(--fs-2);
  font-size: var(--fs-t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fs-muted);
}
.fs-api-pre {
  margin: 0;
  padding: 14px var(--fs-4);
  overflow-x: auto;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: var(--fs-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-t-cap);
  line-height: 1.65;
  color: var(--fs-ink);
}
@media (max-width: 991px) {
  .fs-api-t .fs-api-k { width: auto; white-space: normal; }
  .fs-api-sample { padding: 14px var(--fs-4) var(--fs-4); }
}

/* ---- mass order --------------------------------------------------------- */
.body .fs-p .fs-mass-ta {
  min-height: 300px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-t-sm);
  line-height: 1.8;
}
.fs-mass-eg { margin-bottom: var(--fs-4); }
.fs-mass-eg p { line-height: 2; }
.fs-mass-eg b { display: block; margin-bottom: var(--fs-2); color: var(--fs-ink); }

/* collapsible FAQ, shared with any page that wants one */
.fs-p .fs-faq details { border-top: 1px solid var(--fs-line); }
.fs-p .fs-faq details:first-child { border-top: 0; }
.fs-p .fs-faq summary {
  display: flex;
  align-items: center;
  gap: var(--fs-3);
  padding: var(--fs-3) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-t-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fs-ink);
}
.fs-p .fs-faq summary::-webkit-details-marker { display: none; }
.fs-p .fs-faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fs-muted);
  border-bottom: 2px solid var(--fs-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease, border-color .18s ease;
}
.fs-p .fs-faq summary:hover,
.fs-p .fs-faq details[open] summary { color: var(--fs-brand); }
.fs-p .fs-faq details[open] summary::after {
  border-color: var(--fs-brand);
  transform: rotate(-135deg) translate(-3px, -3px);
}
.fs-p .fs-faq p {
  margin: 0 0 var(--fs-4);
  padding-right: var(--fs-6);
  font-size: var(--fs-t-sm);
  line-height: 1.65;
  color: var(--fs-muted);
}

/* ---- child panels ------------------------------------------------------- */
.fs-cp-ns { margin: 0 0 var(--fs-1); }
.fs-cp-ns b { display: block; margin-bottom: var(--fs-2); color: var(--fs-ink); }
.fs-cp-ns__row { display: flex; align-items: center; gap: var(--fs-2); margin-top: var(--fs-2); }
.fs-cp-copy {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: #fff;
  font-size: var(--fs-t-micro);
  color: var(--fs-muted);
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.fs-cp-copy:hover { border-color: var(--fs-brand); color: var(--fs-brand); }
.fs-cp-pwhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fs-3); }
.fs-cp-rand {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--fs-t-cap);
  font-weight: 600;
  color: var(--fs-brand);
  cursor: pointer;
}
.fs-cp-rand:hover { text-decoration: underline; }
.fs-cp-renew { display: inline; margin: 0; }
.body .fs-p .fs-cp-renew input[type="submit"] { width: auto; }
.fs-cp-receipt { flex-direction: row; }
.fs-cp-receipt b { display: block; margin-bottom: 3px; }
.fs-cp-receipt span { font-size: var(--fs-t-cap); opacity: .9; }

/* ---- refill ------------------------------------------------------------- */
.fs-rf-svc { display: block; font-size: var(--fs-t-sm); line-height: 1.45; }
.body .fs-p .fs-rf-link {
  display: block;
  max-width: 34ch;
  margin-top: 3px;
  font-size: var(--fs-t-cap);
  color: var(--fs-brand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body .fs-p .fs-rf-link:hover { text-decoration: underline; }
@media (max-width: 991px) {
  .body .fs-p .fs-rf-link { max-width: 100%; }
  .body .fs-p .fs-p-table td.fs-rf-cell { display: block; text-align: left; }
}

/* ---- affiliates --------------------------------------------------------- */
.fs-rf-link-card { margin-bottom: var(--fs-5); }
.fs-rf-linkrow {
  display: flex;
  align-items: center;
  gap: var(--fs-3);
  padding: var(--fs-3) var(--fs-4);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: var(--fs-soft);
}
.fs-rf-url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-t-cap);
  color: var(--fs-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body .fs-p .fs-rf-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-xs);
  background: #fff;
  font-size: var(--fs-t-cap);
  color: var(--fs-muted);
  transition: border-color .14s, color .14s;
}
.body .fs-p .fs-rf-copy:hover { border-color: var(--fs-brand); color: var(--fs-brand); text-decoration: none; }

.fs-rf-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--fs-3);
  margin-top: var(--fs-4);
}
.fs-rf-terms > div { display: flex; flex-direction: column; gap: 3px; }
.fs-rf-terms .k {
  font-size: var(--fs-t-micro);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fs-muted);
}
.fs-rf-terms .v {
  font-size: var(--fs-t-body);
  font-weight: 700;
  color: var(--fs-ink);
  overflow-wrap: anywhere;
}

.fs-rf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fs-4);
  margin-bottom: var(--fs-5);
}
.fs-rf-stat {
  display: flex;
  flex-direction: column;
  gap: var(--fs-2);
  padding: var(--fs-4) 18px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-md);
  background: #fff;
}
.fs-rf-stat__k {
  display: flex;
  align-items: center;
  gap: var(--fs-2);
  font-size: var(--fs-t-cap);
  font-weight: 600;
  color: var(--fs-muted);
}
.fs-rf-stat__k i { font-size: var(--fs-t-cap); color: var(--fs-brand); }
.fs-rf-stat__v {
  font-size: var(--fs-t-h1);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--fs-ink);
  font-variant-numeric: tabular-nums;
}
.fs-rf-stat__v--none { color: var(--fs-muted); }

.fs-rf-avail { border-top-width: 2px; }
.fs-rf-avail dt { font-weight: 600; color: var(--fs-ink); }
.fs-rf-avail dd { font-size: 17px; color: var(--fs-brand); }
.fs-rf-payout { margin-top: var(--fs-4); }

@media (max-width: 767px) {
  .fs-rf-stats { grid-template-columns: 1fr; gap: var(--fs-3); }
  .fs-rf-stat { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ── Pagination ───────────────────────────────────────────────────────────
   The markup (ul.pagination > li > a) was inheriting Bootstrap's defaults,
   which no longer match the panel. Styled here on the design tokens so it
   reads as part of the same system. Used by dripfeeds, earn, subscriptions,
   refill and transactions. */
.body .pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--fs-2); margin: var(--fs-6) 0 0; padding: 0; list-style: none;
}
.body .pagination > li { margin: 0; }
.body .pagination > li > a,
.body .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--fs-3);
  border: 1px solid var(--fs-line); border-radius: var(--fs-r-sm);
  background: #ffffff; color: var(--fs-ink);
  font-size: var(--fs-t-sm); font-weight: var(--fs-w-med); line-height: 1;
  text-decoration: none;
  transition: background var(--fs-t-fast) var(--fs-ease),
              border-color var(--fs-t-fast) var(--fs-ease),
              color var(--fs-t-fast) var(--fs-ease);
}
.body .pagination > li > a:hover {
  border-color: var(--fs-brand); color: var(--fs-brand);
  background: var(--fs-brand-soft);
}
.body .pagination > li > a:focus-visible {
  outline: 2px solid var(--fs-brand); outline-offset: 2px;
}
.body .pagination > li.active > a,
.body .pagination > li.active > span {
  border-color: transparent; background: var(--fs-brand); color: #ffffff;
}
.body .pagination > li.disabled > a,
.body .pagination > li.disabled > span {
  opacity: .45; pointer-events: none;
}
@media (max-width: 480px) {
  .body .pagination > li > a,
  .body .pagination > li > span { min-width: 36px; height: 36px; padding: 0 var(--fs-2); }
}


/* signup: marks a field the admin has set to Optional */
.sx-opt{ font-size:11px; font-weight:600; color:#94a3b8; text-transform:uppercase;
  letter-spacing:.04em; margin-left:5px; }