/* ============================================================
   The reseller dashboard: a sidebar and one content area, the same
   arrangement the owner is used to from the panel he resells on.

   Built for a phone first, because a reseller works from one. The
   sidebar slides over the page under 900px rather than squeezing the
   content into a column too narrow to read a table in.

   Order of this file, so a change lands in the right block:
   tokens, shell and sidebar menu, top bar, notice ticker, buttons,
   cards and fields, the dashboard view, tables and status pills, phone
   widths, then one block per view (funding, shop, developer and on).
   ============================================================ */
/* Every colour on this page comes from a token, so the dark theme below
   is one block of redefinitions rather than a second stylesheet. */
.rs-body {
  --rs-page: #f4f6fa;
  --rs-card: #ffffff;
  --rs-line: #e4e7ec;
  --rs-ink: #101828;
  --rs-soft: #667085;
  --rs-tint: #eef5ff;
  --rs-tint-line: #cfe1fb;
  --rs-hover: #f2f5f9;
  /* Brand blue as a fill and brand blue as text. On a dark card the fill
     blue is too dim to read as text, so dark lifts only the text one. */
  --rs-brand: #0164ce;
  --rs-brand-ink: #0059c4;
  --rs-ok: #1c7a43;
  --rs-ok-bg: #e7f4ec;
  --rs-warn: #9a5b00;
  --rs-warn-bg: #fff4e5;
  --rs-bad: #b42318;
  --rs-bad-bg: #fdeceb;
  --rs-field-off: #f2f4f7;
  /* Review stars: a filled one and an empty one. */
  --rs-star: #d99a00;
  --rs-star-off: #d0d5dd;
  margin: 0;
  background: var(--rs-page);
  color: var(--rs-ink);
}

[data-theme="dark"] .rs-body,
.rs-body[data-theme="dark"] {
  --rs-page: #0d1117;
  --rs-card: #161b22;
  --rs-line: #2a313c;
  --rs-ink: #e6edf3;
  --rs-soft: #8b949e;
  --rs-tint: #17263f;
  --rs-tint-line: #24395c;
  --rs-hover: #1c232d;
  --rs-brand-ink: #7db4f7;
  --rs-ok: #6fcf97;
  --rs-ok-bg: #0f2a1b;
  --rs-warn: #e0bb63;
  --rs-warn-bg: #2e2310;
  --rs-bad: #f38b82;
  --rs-bad-bg: #3a1714;
  --rs-field-off: #1c232d;
  --rs-star: #f0c36b;
  --rs-star-off: #3a4350;
  color-scheme: dark;
}
[hidden] { display: none !important; }

/* Drawn icons. A [data-icon] span is filled by paintIcons() in the script;
   each place that uses one sets its own size. */
.rs-ico { width: 18px; height: 18px; display: block; flex: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: none; }

.rs-shell { display: flex; min-height: 100vh; }
body.rs-drawer-open { overflow: hidden; }

/* ---- sidebar ---- */
.rs-side {
  width: 256px; flex: 0 0 256px; background: var(--rs-card);
  border-right: 1px solid var(--rs-line);
  display: flex; flex-direction: column; gap: 14px; padding: 16px 12px 22px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
}

.rs-brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px; text-decoration: none; color: var(--rs-ink); }
/* White in both themes: the mark is blue and disappears on a dark tile. */
.rs-brand__mark {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--rs-line);
}
.rs-brand__mark img { width: 22px; height: 22px; }
.rs-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* The homepage's own wordmark, asked for on every reseller screen: "let it
   be as the home page of my website to all". Blue on a light surface,
   white on a dark one or on the blue stage, and the word Reseller under it
   so the screen still says which side of the site this is. */
.rs-brand__wordmark { display: block; height: 34px; width: auto; }
.rs-brand__wordmark--dark { display: none; }
[data-theme="dark"] .rs-brand__wordmark--light { display: none; }
[data-theme="dark"] .rs-brand__wordmark--dark { display: block; }
.rs-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.rs-brand__line { font-size: 12px; color: var(--rs-soft); letter-spacing: .02em; }
.rs-auth__brand .rs-brand__wordmark, .rs-paused__brand .rs-brand__wordmark { height: 40px; }
.rs-auth__brand .rs-brand__line, .rs-paused__brand .rs-brand__line {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .32em; color: rgba(255, 255, 255, .7);
}
.rs-brand__text strong { font-size: 15px; font-weight: 700; color: var(--rs-ink); }
.rs-brand__text span { font-size: 12px; color: var(--rs-soft); }

/* The balance, up in the sidebar where they look first. */
.rs-sidebal {
  position: relative; overflow: hidden; isolation: isolate; flex: none;
  background: linear-gradient(135deg, #0059c4 0%, #0164ce 60%, #0375d7 100%);
  color: #fff; border-radius: 14px; padding: 14px 15px 15px;
}
.rs-sidebal::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 130px; height: 130px; right: -44px; top: -56px; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.rs-sidebal__label { display: block; font-size: 12px; color: rgba(255, 255, 255, .84); }
.rs-sidebal strong {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; margin: 2px 0 11px;
}
.rs-sidebal__fund {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 11px;
  border-radius: 999px; background: #fff; color: #0059c4;
}
.rs-sidebal__fund:hover { background: #eaf3ff; }
.rs-sidebal__fund .rs-ico { width: 15px; height: 15px; }

/* ---- the menu ---- */
.rs-nav { display: flex; flex-direction: column; gap: 2px; }
.rs-nav__group { margin: 14px 0 4px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--rs-soft); }
.rs-nav__group:first-child { margin-top: 2px; }
.rs-nav__item {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px;
  padding: 8px 12px; border-radius: 10px; text-align: left; text-decoration: none;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--rs-ink);
  transition: background-color .15s ease, color .15s ease;
}
.rs-nav__item:hover { background: var(--rs-hover); color: var(--rs-ink); }
.rs-nav__item:focus-visible { outline: 2px solid var(--rs-brand-ink); outline-offset: -2px; }
.rs-nav__item .rs-ico { width: 19px; height: 19px; color: var(--rs-soft); transition: color .15s ease, transform .2s ease; }
.rs-nav__label { flex: 1; min-width: 0; }
/* Where they are: tinted, brand text, and a bar down the left. */
.rs-nav__item.is-on { background: var(--rs-tint); color: var(--rs-brand-ink); font-weight: 600; }
.rs-nav__item.is-on .rs-ico { color: var(--rs-brand-ink); }
.rs-nav__item.is-on::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rs-brand-ink);
}
.rs-nav__item .rs-nav__ext { width: 14px; height: 14px; opacity: .75; }
.rs-nav__item--danger,
.rs-nav__item--danger .rs-ico { color: var(--rs-bad); }
.rs-nav__item--danger:hover { background: var(--rs-bad-bg); color: var(--rs-bad); }

/* Accordions. The parent of the open page reads in brand blue even when
   it is folded, so they can see which group they are in. */
.rs-nav__acc.has-on > .rs-nav__parent,
.rs-nav__acc.has-on > .rs-nav__parent .rs-ico { color: var(--rs-brand-ink); }
.rs-nav__item .rs-nav__chev { width: 16px; height: 16px; }
.rs-nav__acc.is-open > .rs-nav__parent .rs-nav__chev { transform: rotate(180deg); }
/* Rows going from 0fr to 1fr animate to the real height without measuring
   it. Visibility waits for the fold to finish, and keeps a folded group's
   links out of the tab order. */
.rs-nav__sub {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .22s ease, visibility 0s linear .22s;
}
.rs-nav__acc.is-open > .rs-nav__sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .22s ease; }
.rs-nav__subin {
  min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px;
  margin-left: 21px; padding-left: 8px; border-left: 1px solid var(--rs-line);
}
.rs-nav__sub .rs-nav__item { min-height: 36px; padding: 7px 10px; font-size: 14px; }
.rs-nav__sub .rs-nav__item .rs-ico { width: 16px; height: 16px; }

/* ---- top bar ---- */
.rs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs-top {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 10px 22px; background: var(--rs-card); border-bottom: 1px solid var(--rs-line);
  position: sticky; top: 0; z-index: 8;
}
.rs-top h1 { flex: 1; min-width: 0; margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-top__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.rs-burger { display: none; appearance: none; border: 0; background: none; cursor: pointer; padding: 4px; color: var(--rs-ink); flex: none; }
.rs-burger svg { width: 24px; height: 24px; display: block; }

.rs-iconbtn {
  appearance: none; cursor: pointer; padding: 0; flex: none;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 10px; color: var(--rs-soft);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rs-iconbtn:hover { background: var(--rs-hover); color: var(--rs-ink); }
.rs-iconbtn svg { width: 18px; height: 18px; }
.rs-iconbtn--out:hover { background: var(--rs-bad-bg); color: var(--rs-bad); border-color: transparent; }

.rs-user {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--rs-ink);
  display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 230px;
  padding: 3px 12px 3px 3px; border: 1px solid var(--rs-line); border-radius: 999px; background: var(--rs-card);
}
.rs-user:hover { background: var(--rs-hover); }
.rs-user__avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #0059c4, #0375d7); color: #fff; font-size: 12.5px; font-weight: 700;
}
.rs-user__name { font-size: 14px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-user__name:empty { display: none; }

/* ---- the owner's notice, one line moving right to left ---- */
.rs-ticker {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 22px 5px 16px;
  background: var(--rs-tint); color: var(--rs-brand-ink); border-bottom: 1px solid var(--rs-tint-line);
  font-size: 14px; font-weight: 500; overflow: hidden;
}
.rs-ticker--warning { background: var(--rs-warn-bg); color: var(--rs-warn); border-bottom-color: rgba(154, 91, 0, .2); }
.rs-ticker--alert { background: var(--rs-bad-bg); color: var(--rs-bad); border-bottom-color: rgba(180, 35, 24, .2); }
.rs-ticker__icon {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--rs-card); color: inherit;
}
.rs-ticker__icon .rs-ico { width: 16px; height: 16px; }
.rs-ticker__viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
/* Two identical copies side by side; sliding the track by half its width
   puts the second exactly where the first started, so the loop is seamless.
   --rs-ticker-min and --rs-ticker-dur are measured by sizeTicker(). */
.rs-ticker__track { display: flex; width: max-content; animation: rs-ticker var(--rs-ticker-dur, 30s) linear infinite; }
.rs-ticker:hover .rs-ticker__track { animation-play-state: paused; }
.rs-ticker__group {
  display: flex; align-items: center; flex: none; white-space: nowrap;
  min-width: var(--rs-ticker-min, 0px);
}
/* A dot after every message, the last included, so the join between one
   copy and the next looks the same as the join between two messages. */
.rs-ticker__msg { display: inline-flex; align-items: center; }
.rs-ticker__msg::after {
  content: ""; width: 5px; height: 5px; margin: 0 22px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: none;
}
@keyframes rs-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rs-content { padding: 22px 26px 60px; width: 100%; }
/* styles.css pushes every main#main-content down 62px to clear the fixed
   site header, and paints html brand blue behind it. This page has neither
   header, so that was a blank band above every view and a blue flash on an
   iPhone's overscroll. */
.rs-body main#main-content.rs-content { padding-top: 22px; }
html:has(> body.rs-body) { background-color: #f4f6fa; }
html[data-theme="dark"]:has(> body.rs-body) { background-color: #0d1117; }

/* ---- the balance on the wallet page ---- */
.rs-balance {
  background: linear-gradient(135deg, var(--blue-700, #0059c4), var(--blue-600, #0164ce));
  color: #fff; border-radius: 16px; padding: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.rs-balance__label { font-size: 12.5px; color: rgba(255,255,255,.82); display: block; }
.rs-balance strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-balance__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- buttons ---- */
.rs-btn {
  appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; background: var(--rs-brand); color: #fff; text-decoration: none;
}
.rs-btn .rs-ico { width: 17px; height: 17px; }
.rs-btn--light { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
/* On the blue balance cards: one solid white, the rest see-through. */
.rs-btn--white { background: #fff; color: #0059c4; }
.rs-btn--white:hover { background: #eaf3ff; }
.rs-btn--glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; }
.rs-btn--glass:hover { background: rgba(255, 255, 255, .22); }
.rs-btn--outline { background: transparent; color: var(--rs-brand-ink); border-color: var(--rs-brand-ink); }
.rs-btn--outline:hover { background: var(--rs-tint); }
.rs-btn--sm { padding: 6px 13px; font-size: 13.5px; border-radius: 9px; }
.rs-btn--go { width: 100%; padding: 14px; margin-top: 16px; font-size: 16px; }
.rs-btn:disabled { opacity: .55; cursor: default; }
.rs-link { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--rs-brand-ink); }

/* ---- cards, figures and fields ---- */
.rs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rs-stat { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 12px; padding: 15px; }
.rs-stat strong { display: block; font-size: 23px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-stat span { font-size: 12.5px; color: var(--rs-soft); }

.rs-card { background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 14px; padding: 18px; margin-bottom: 18px; }
.rs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rs-card__head--line { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--rs-line); }
.rs-card h2 { font-size: 15px; margin: 0 0 10px; }
.rs-card__head h2 { margin: 0; }
.rs-hint { font-size: 13.5px; color: var(--rs-soft); margin: 0 0 14px; }
.rs-hint code { background: var(--rs-hover); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

.rs-field { margin-bottom: 14px; }
.rs-field label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.rs-field input, .rs-field select, .rs-field textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px stops iPhone zooming on focus */
  padding: 11px 12px; border: 1px solid var(--rs-line); border-radius: 10px;
  background: var(--rs-card); color: var(--rs-ink);
}
.rs-field textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; }
.rs-field input[readonly] { background: var(--rs-field-off); color: var(--rs-soft); cursor: not-allowed; }
.rs-field__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--rs-soft); }
.rs-req { color: var(--rs-bad); font-weight: 600; }

.rs-total { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-err { font-size: 14px; color: var(--rs-bad); margin: 12px 0 0; }
.rs-result { margin-top: 16px; padding: 14px; border-radius: 11px; background: var(--rs-ok-bg); border: 1px solid #b7e2c4; font-size: 14px; }
.rs-result.is-bad { background: var(--rs-bad-bg); border-color: #f4c4c0; }
[data-theme="dark"] .rs-result { border-color: #1f4a31; }
[data-theme="dark"] .rs-result.is-bad { border-color: #5a2520; }
.rs-result dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 8px 0 0; }
.rs-result dt { color: var(--rs-soft); }
.rs-result dd { margin: 0; font-weight: 600; }

.rs-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.rs-tabs button {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rs-line);
  background: var(--rs-card); color: var(--rs-soft);
}
.rs-tabs button:hover { color: var(--rs-ink); }
.rs-tabs button .rs-ico { width: 16px; height: 16px; }
.rs-tabs button.is-on { background: var(--rs-brand); border-color: var(--rs-brand); color: #fff; }
/* Tabs sitting in their own card, as on My profile. */
.rs-tabcard { padding: 10px; }
.rs-tabcard .rs-tabs { margin-bottom: 0; }

.rs-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; font-size: 14px; }
.rs-dl dt { color: var(--rs-soft); }
.rs-dl dd { margin: 0; font-weight: 500; word-break: break-word; }

/* ---- dashboard: the welcome line ---- */
.rs-hello { margin: 0 0 18px; }
.rs-hello h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
.rs-hello p { margin: 0; font-size: 14px; color: var(--rs-soft); }
.rs-tier {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; padding: 4px 12px 4px 9px; border-radius: 999px;
  background: var(--rs-tint); color: var(--rs-brand-ink); border: 1px solid var(--rs-tint-line);
}
.rs-tier .rs-ico { width: 14px; height: 14px; }

/* ---- dashboard: the balance ---- */
.rs-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(135deg, #0059c4 0%, #0164ce 55%, #0375d7 100%);
  border-radius: 18px; padding: 22px 24px 24px; margin-bottom: 18px;
}
.rs-hero::before,
.rs-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.rs-hero::before { width: 240px; height: 240px; right: -70px; top: -110px; background: rgba(255, 255, 255, .11); }
.rs-hero::after { width: 170px; height: 170px; right: 110px; bottom: -120px; background: rgba(255, 255, 255, .07); }
.rs-hero__label { display: block; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .86); }
.rs-hero__amount {
  display: block; margin: 4px 0 18px; font-size: 34px; line-height: 1.1; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.rs-hero__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- dashboard: four figures ---- */
.rs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.rs-kpis--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-kpi { min-width: 0; padding: 15px 16px; border-radius: 14px; background: var(--rs-card); border: 1px solid var(--rs-line); }
.rs-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rs-kpi__label { font-size: 13px; font-weight: 500; color: var(--rs-soft); min-width: 0; }
.rs-kpi__icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--rs-tint); color: var(--rs-brand-ink);
}
.rs-kpi__icon .rs-ico { width: 18px; height: 18px; }
.rs-kpi__value {
  display: block; margin-top: 6px; font-size: 27px; line-height: 1.15; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rs-kpi--ok .rs-kpi__value { color: var(--rs-ok); }
.rs-kpi--ok .rs-kpi__icon { background: var(--rs-ok-bg); color: var(--rs-ok); }
.rs-kpi--bad .rs-kpi__value { color: var(--rs-bad); }
.rs-kpi--bad .rs-kpi__icon { background: var(--rs-bad-bg); color: var(--rs-bad); }
.rs-kpi__note { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--rs-warn); }
.rs-kpi__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---- dashboard: quick actions ---- */
.rs-section-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.rs-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.rs-quick__tile {
  appearance: none; cursor: pointer; font: inherit; color: var(--rs-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; min-height: 112px; padding: 14px 8px; border-radius: 14px;
  background: var(--rs-card); border: 1px solid var(--rs-line);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rs-quick__tile:hover { border-color: var(--rs-tint-line); box-shadow: 0 6px 18px rgba(16, 24, 40, .07); transform: translateY(-1px); }
[data-theme="dark"] .rs-quick__tile:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.rs-quick__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.rs-quick__icon .rs-ico { width: 23px; height: 23px; }
.rs-quick__label { font-size: 13.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.rs-quick__icon--blue { background: #e6f0fc; color: #0164ce; }
.rs-quick__icon--sky { background: #e2f4fb; color: #0678b0; }
.rs-quick__icon--green { background: #e5f5eb; color: #1c7a43; }
.rs-quick__icon--amber { background: #fff1d9; color: #a86400; }
[data-theme="dark"] .rs-quick__icon--blue { background: rgba(1, 100, 206, .24); color: #86bbf8; }
[data-theme="dark"] .rs-quick__icon--sky { background: rgba(56, 189, 248, .15); color: #7fd3f7; }
[data-theme="dark"] .rs-quick__icon--green { background: rgba(52, 199, 110, .15); color: #6fcf97; }
[data-theme="dark"] .rs-quick__icon--amber { background: rgba(245, 166, 35, .15); color: #f0c36b; }

/* ---- dashboard: the guide banner ----
   Graphite rather than another blue card, so it does not compete with the
   balance above it. */
.rs-guidecard {
  appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: #fff;
  width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px;
  border-radius: 16px; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #2a2f37 0%, #1d2127 100%);
}
.rs-guidecard::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 190px; height: 190px; right: -50px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(3, 117, 215, .38), rgba(3, 117, 215, 0) 70%);
}
[data-theme="dark"] .rs-guidecard { background: linear-gradient(135deg, #232a33 0%, #1b2129 100%); box-shadow: inset 0 0 0 1px var(--rs-line); }
.rs-guidecard__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #0164ce; color: #fff; }
.rs-guidecard__icon .rs-ico { width: 22px; height: 22px; }
.rs-guidecard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-guidecard__text strong { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.rs-guidecard__text span { font-size: 13.5px; line-height: 1.4; color: #b9c1cc; }
.rs-guidecard__go { color: #fff; transition: transform .2s ease; }
.rs-guidecard__go .rs-ico { width: 34px; height: 34px; stroke-width: 1.5; }
.rs-guidecard:hover .rs-guidecard__go { transform: translateX(3px); }

/* ---- tables, references and status pills ---- */
/* admin.css sets headers in capitals and paints light hovers and borders;
   here they follow the page's own tokens in both themes. */
.rs-body table.admin-table th { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--rs-soft); }
.rs-body table.admin-table th,
.rs-body table.admin-table td { border-bottom-color: var(--rs-line); }
.rs-body table.admin-table tr:hover td { background: var(--rs-hover); }
.rs-body .admin-empty { color: var(--rs-soft); }

.rs-ref {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600;
  color: var(--rs-brand-ink);
}
.rs-ref:hover { text-decoration: underline; }
/* The same reference where there is nothing to open, so it keeps the
   shape of a link without looking like one. */
.rs-refplain { font-size: 13px; font-weight: 600; color: var(--rs-ink); white-space: nowrap; }
.rs-tag {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--rs-tint); color: var(--rs-brand-ink); border: 1px solid var(--rs-tint-line);
}
.rs-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--rs-tint); color: var(--rs-brand-ink);
}
.rs-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rs-status--ok { background: var(--rs-ok-bg); color: var(--rs-ok); }
.rs-status--warn { background: var(--rs-warn-bg); color: var(--rs-warn); }
.rs-status--bad { background: var(--rs-bad-bg); color: var(--rs-bad); }

/* ---- transactions: in, out and how many, over the list ---- */
.rs-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.rs-figures .rs-stat strong { font-size: 20px; white-space: nowrap; }

/* ---- phone widths ---- */
.rs-scrim { display: none; }

@media (max-width: 900px) {
  .rs-burger { display: block; }
  /* Hidden as well as moved, so a closed drawer's links cannot be tabbed
     to off screen. Visibility flips after the slide, not before it. */
  .rs-side {
    position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(288px, 86vw); flex: none; height: 100%;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    box-shadow: 0 0 40px rgba(16,24,40,.18);
  }
  .rs-side.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  .rs-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(16,24,40,.45); }
  .rs-content { padding: 16px; }
  .rs-body main#main-content.rs-content { padding-top: 16px; }
  .rs-balance strong { font-size: 26px; }
  .rs-top { padding: 10px 16px; min-height: 58px; }
  .rs-ticker { padding: 5px 16px 5px 12px; }
  .rs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .rs-top { gap: 8px; }
  .rs-top h1 { font-size: 17px; }
  .rs-top__tools { gap: 6px; }
  .rs-iconbtn { width: 36px; height: 36px; }
  .rs-user { padding: 1px; border-color: transparent; }
  .rs-user__name { display: none; }
  .rs-hero { padding: 18px 18px 20px; border-radius: 16px; }
  .rs-hero__amount { font-size: 30px; margin-bottom: 16px; }
  .rs-hero__acts .rs-btn--white { flex: 1 1 100%; }
  .rs-hero__acts .rs-btn--glass { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .rs-kpis { gap: 10px; }
  .rs-kpi { padding: 13px; }
  .rs-kpi__icon { width: 30px; height: 30px; border-radius: 9px; }
  .rs-kpi__icon .rs-ico { width: 16px; height: 16px; }
  .rs-kpi__value { font-size: 24px; }
  .rs-quick { gap: 8px; }
  .rs-quick__tile { min-height: 0; aspect-ratio: 1 / 1; padding: 8px 4px; gap: 7px; border-radius: 12px; }
  .rs-quick__icon { width: 38px; height: 38px; border-radius: 11px; }
  .rs-quick__icon .rs-ico { width: 20px; height: 20px; }
  .rs-quick__label { font-size: 12.5px; }
  .rs-guidecard { padding: 14px; gap: 12px; }
  .rs-guidecard__icon { width: 40px; height: 40px; }
  .rs-guidecard__text strong { font-size: 15px; }
  .rs-guidecard__text span { font-size: 13px; }
  .rs-guidecard__go .rs-ico { width: 30px; height: 30px; }
  /* In and Out side by side, the count under them, so an amount never
     breaks across two lines. */
  .rs-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rs-figures .rs-stat { padding: 12px; min-width: 0; }
  .rs-figures .rs-stat:nth-child(3) { grid-column: 1 / -1; }
  .rs-figures .rs-stat strong { font-size: 17px; }
}

/* styles.css forces 16px on every button under 1024px. That guards fields
   against iPhone zoom; a button never zooms, and at 16px these compact
   controls wrap or overflow. */
@media (max-width: 1024px) {
  .rs-body .rs-nav__item { font-size: 15px !important; }
  .rs-body .rs-nav__sub .rs-nav__item { font-size: 14.5px !important; }
  .rs-body .rs-sidebal__fund,
  .rs-body .rs-btn--sm { font-size: 13.5px !important; }
  .rs-body .rs-hero__acts .rs-btn,
  .rs-body .rs-balance__acts .rs-btn,
  .rs-body .rs-tabs button { font-size: 14.5px !important; }
  .rs-body .rs-user { font-size: 14px !important; }
  .rs-body .rs-ref { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-side,
  .rs-nav__sub,
  .rs-nav__acc.is-open > .rs-nav__sub,
  .rs-nav__item,
  .rs-nav__item .rs-ico,
  .rs-quick__tile,
  .rs-guidecard__go { transition: none; }
  .rs-quick__tile:hover { transform: none; }
  /* The notice stands still and wraps instead, shown once. */
  .rs-ticker__track { animation: none; width: auto; display: block; }
  .rs-ticker__group { min-width: 0; padding: 4px 0; white-space: normal; flex-wrap: wrap; row-gap: 4px; }
  .rs-ticker__group[aria-hidden="true"] { display: none; }
  .rs-ticker__msg:last-child::after { display: none; }
  .rs-ticker__msg::after { margin: 0 12px; }
  .rs-ticker__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---- funding ---- */
.rs-paycode {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line); border-radius: 11px;
  padding: 13px 15px; margin-bottom: 14px;
}
.rs-paycode span { font-size: 12.5px; color: var(--rs-soft); }
.rs-paycode strong { font-size: 20px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.rs-payto { font-size: 14px; margin-bottom: 16px; }
.rs-payto div { padding: 9px 0; border-bottom: 1px solid var(--rs-line); }
.rs-payto div:last-child { border-bottom: 0; }
.rs-payto b { font-variant-numeric: tabular-nums; }
/* With more than one account the list becomes a choice: one card per
   account, the whole card the target, so a thumb cannot miss. The radio
   itself stays visible, which keeps the choice readable where :has() is
   not supported. */
.rs-acctpick { min-width: 0; margin: 0; padding: 0; border: 0; }
.rs-acctpick legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 500; color: var(--rs-ink); }
/* .rs-payto div draws the plain list's rows; the card grid is not one. */
.rs-payto .rs-acctpick__list { padding: 0; border-bottom: 0; }
.rs-acctpick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.rs-acct {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 44px;
  padding: 12px 14px; border: 1px solid var(--rs-line); border-radius: 11px;
  background: var(--rs-card); color: var(--rs-ink); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.rs-acct:hover { background: var(--rs-hover); }
.rs-acct input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rs-brand); cursor: pointer; }
.rs-acct:has(input:checked) { border-color: var(--rs-brand); box-shadow: inset 0 0 0 1px var(--rs-brand); background: var(--rs-tint); }
.rs-acct:has(input:focus-visible) { outline: 2px solid var(--rs-brand); outline-offset: 2px; }
.rs-acct__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-acct__kind { font-size: 12.5px; color: var(--rs-soft); }
.rs-acct__num { font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rs-acct__name { font-size: 13.5px; overflow-wrap: anywhere; }
[data-theme="dark"] .rs-acct:has(input:checked) { border-color: var(--rs-brand-ink); box-shadow: inset 0 0 0 1px var(--rs-brand-ink); }
@media (prefers-reduced-motion: reduce) { .rs-acct { transition: none; } }

/* ---- the shop, folded in from what used to be its own page ---- */
.rs-shoplink {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line); border-radius: 12px; padding: 15px 17px; margin-bottom: 18px;
}
.rs-shoplink code { font-size: 14px; font-weight: 600; word-break: break-all; }
.rs-btn--ghost { background: var(--rs-card); color: var(--rs-ink); border: 1px solid var(--rs-line); }
a.rs-btn { text-decoration: none; display: inline-flex; align-items: center; }
.rs-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.rs-savebar {
  position: sticky; bottom: 0; background: var(--rs-card); border-top: 1px solid var(--rs-line);
  padding: 14px 0 2px; margin-top: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}

.price-net { margin-bottom: 26px; }
.price-net h3 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.price-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) 120px 190px 80px; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--rs-line);
}
.price-row:last-child { border-bottom: 0; }
.price-row__name { font-size: 14px; font-weight: 600; }
.price-row__cost { font-size: 12.5px; color: var(--rs-soft); }
.price-row input[type="number"] {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 11px;
  border: 1px solid var(--rs-line); border-radius: 9px;
}
.price-row__margin { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.price-row__margin.is-bad { color: #b42318; }
.price-row__on { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }

/* ---- developer ---- */
.rs-events { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 0 0 16px; }
.rs-events label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.rs-apirow {
  display: grid; grid-template-columns: 62px minmax(180px, auto) 1fr; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rs-line); font-size: 13.5px;
}
.rs-apirow:last-child { border-bottom: 0; }
.rs-apirow code { font-weight: 600; }
.rs-apirow span:last-child { color: var(--rs-soft); }
.rs-verb { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-align: center; }
.rs-verb--get { background: #e7f4ec; color: #1c7a43; }
.rs-verb--post { background: var(--rs-tint); color: var(--rs-brand-ink); }
.rs-reveal {
  background: #fff8e6; border: 1px solid #f4dfa0; border-radius: 12px; padding: 16px; margin-bottom: 18px;
}
[data-theme="dark"] .rs-reveal { background: #2e2310; border-color: #4a3c1c; }
.rs-reveal code {
  display: block; background: #11172a; color: #7cffb2; padding: 11px 13px;
  border-radius: 7px; font-size: 13px; margin: 9px 0; word-break: break-all;
}

@media (max-width: 760px) {
  .price-row { grid-template-columns: 1fr 108px; }
  .price-row__margin, .price-row__on { grid-column: span 2; }
  .rs-apirow { grid-template-columns: 56px 1fr; }
  .rs-apirow span:last-child { grid-column: span 2; }
  .rs-content { padding: 16px 16px 50px; }
}

/* ---- picking a network ---- */
.rs-nets { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-net {
  appearance: none; cursor: pointer; font: inherit; background: var(--rs-card);
  border: 2px solid var(--rs-line); border-radius: 13px;
  padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  /* Fixed, or the 1600px logo inside sizes the tile and MTN stretches
     across the whole row with its middle cropped out. */
  flex: 0 0 118px; width: 118px; color: inherit;
  transition: border-color .14s ease, transform .14s ease;
}
.rs-net:hover { border-color: #b9cbe6; }
.rs-net.is-on { border-color: var(--blue-600, #0164ce); }
.rs-net:active { transform: scale(.985); }
.rs-net__mark {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 100px; border-radius: 9px; overflow: hidden; flex: none;
}
.rs-net__mark { overflow: hidden; }
/* Same reason as the storefront: these are whole branded tiles, not marks. */
.rs-net__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-net__mark span { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .03em; }
.rs-net__name { font-size: 12.5px; font-weight: 500; }

/* ---- reports ---- */
.rs-report { padding: 15px 0; border-bottom: 1px solid var(--rs-line); }
.rs-report:last-child { border-bottom: 0; }
.rs-report__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 5px; }
.rs-report__head strong { font-size: 15px; }
.rs-report__meta { font-size: 13px; color: var(--rs-soft); }
.rs-report__body, .rs-report__reply { font-size: 14px; margin-top: 10px; padding: 12px 13px; border-radius: 10px; }
.rs-report__body { background: var(--rs-page); }
.rs-report__reply { background: var(--rs-tint); }
.rs-report__body span, .rs-report__reply span {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--rs-soft); margin-bottom: 4px;
}
.rs-chip { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
.rs-chip--open { background: #fff4e5; color: #8a5300; }
.rs-chip--in_progress { background: var(--rs-tint); color: #0059c4; }
.rs-chip--resolved { background: #e7f4ec; color: #1c7a43; }

/* ---- the guide ---- */
.rs-guide { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
.rs-guide li { margin-bottom: 7px; }

/* ---- filtering a list ---- */
.rs-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-filters input, .rs-filters select {
  font: inherit; font-size: 16px; padding: 9px 12px; /* 16px, or an iPhone zooms in on focus */
  border: 1px solid var(--rs-line); border-radius: 10px; background: var(--rs-card); color: var(--rs-ink); min-width: 150px;
}
.rs-filters input { flex: 1 1 220px; }

/* ---- what happened to an order ---- */
.rs-steps { list-style: none; margin: 0; padding: 0 0 0 6px; }
.rs-steps li { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.rs-steps li:last-child { padding-bottom: 0; }
/* The line joining the dots, drawn behind them and stopped at the last. */
.rs-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px;
  background: var(--rs-line);
}
.rs-step__dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 4px;
  background: var(--blue-600, #0164ce); position: relative; z-index: 1;
}
.rs-steps li:last-child .rs-step__dot { background: #1c7a43; }

/* ---- seven days of spending ---- */
.rs-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.rs-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.rs-bar__fill {
  width: 100%; max-width: 46px; min-height: 3px; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--blue-600, #0164ce), #4b96e0);
}
.rs-bar__day { font-size: 12px; color: var(--rs-soft); margin-top: 8px; }
.rs-stat__hint { display: block; font-size: 11.5px; color: var(--rs-soft); font-style: normal; margin-top: 2px; }

.rs-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---- checking a number: the plain answer and the registration requests ---- */
.rs-answer {
  margin-top: 16px; padding: 14px 15px; border: 1px solid var(--rs-line); border-radius: 12px;
  background: var(--rs-page); overflow-wrap: anywhere;
}
.rs-answer__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-answer__head strong { font-size: 15px; font-family: ui-monospace, Menlo, monospace; }
.rs-answer__words { font-size: 14px; margin: 9px 0 0; }
.rs-answer__state { font-size: 13px; color: var(--rs-soft); margin: 9px 0 0; }
.rs-answer .rs-btn { margin-top: 12px; min-height: 44px; font-size: 16px; }
.rs-reqs { margin-top: 4px; }
.rs-req { padding: 13px 0; border-bottom: 1px solid var(--rs-line); }
.rs-req:last-child { border-bottom: 0; }
.rs-req__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-req__num { font-size: 15px; font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.rs-req__words { font-size: 14px; margin: 7px 0 0; overflow-wrap: anywhere; }
.rs-req__meta { font-size: 12.5px; color: var(--rs-soft); margin: 5px 0 0; }
.rs-check-ask { min-height: 44px; font-size: 16px; }
@media (max-width: 460px) {
  .rs-answer { padding: 13px 12px; }
}
[data-theme="dark"] .rs-answer { background: transparent; }

/* ---- reviews ---- */
.rs-review { padding: 14px 0; border-bottom: 1px solid var(--rs-line); }
.rs-review:last-child { border-bottom: 0; }
.rs-review.is-hidden { opacity: .5; }
.rs-review__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rs-review__body { font-size: 14px; margin-top: 7px; }
.rs-stars { color: #d9a300; letter-spacing: 2px; font-size: 15px; }

/* ---- payments we have not answered yet ---- */
.rs-waiting { border-color: #f2e0b5; background: #fffaf0; }
[data-theme="dark"] .rs-waiting { border-color: #4a3c1c; background: #221c0d; }
.rs-waiting h2 { color: #7a5200; }
[data-theme="dark"] .rs-waiting h2 { color: #e0bb63; }
.rs-waitrow {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--rs-line);
}
.rs-waitrow:last-child { border-bottom: 0; }
.rs-waitrow strong { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---- referrals: how far someone is towards the reward ---- */
.rs-meter {
  width: 100%; max-width: 180px; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line); margin-bottom: 5px;
}
.rs-meter span { display: block; height: 100%; background: var(--blue-600, #0164ce); border-radius: 999px; }
[data-theme="dark"] .rs-chip--open { background: #2e2310; color: #e0bb63; }
[data-theme="dark"] .rs-chip--resolved { background: #0f2a1b; color: #6fcf97; }
[data-theme="dark"] .rs-chip--in_progress { background: #17263f; color: #8ab8f5; }

/* The table scroll hint paints white covers over its shadows, which is
   invisible on a white card and a pair of white bands over the first and
   last columns on a dark one. Same hint, in the card's own colour. */
[data-theme="dark"] .admin-table-wrap {
  background-image:
    linear-gradient(to right, var(--rs-card) 40%, rgba(22, 27, 34, 0)),
    linear-gradient(to left, var(--rs-card) 40%, rgba(22, 27, 34, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

/* ---- a page's own title row: heading and one line on the left, the page's
   main action on the right. On a phone the button drops under the words. ---- */
.rs-pagehead {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 16px; margin: 0 0 16px;
}
.rs-pagehead__text { flex: 1 1 260px; min-width: 0; }
.rs-pagehead h2 { font-size: 20px; margin: 0 0 3px; letter-spacing: -.01em; }
.rs-pagehead p { margin: 0; font-size: 14px; color: var(--rs-soft); }
.rs-pagehead .rs-btn { flex: none; }

/* References, numbers and card numbers line up and read one character at a
   time. .rs-field input sets font: inherit, so fields need the longer rule. */
.rs-mono,
.rs-field input.rs-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
td.rs-mono { font-size: 13.5px; }
.rs-mono--ref { font-size: 13px; font-weight: 600; color: var(--rs-brand-ink); }
.rs-field input[aria-invalid="true"] { border-color: var(--rs-bad); }
.rs-field__hint.is-bad { color: var(--rs-bad); }
.rs-hint--flat { margin: 0; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ---- AFA: the fee, what it leaves, and a short wallet ---- */
.rs-fee {
  flex: none; white-space: nowrap; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 11px; border-radius: 999px;
  color: var(--rs-brand-ink); background: var(--rs-tint); border: 1px solid var(--rs-tint-line);
}
.rs-sumbox { margin: 6px 0 0; padding: 2px 14px; border-radius: 12px; background: var(--rs-page); border: 1px solid var(--rs-line); }
.rs-sumbox > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--rs-line); font-size: 14px;
}
.rs-sumbox > div:last-child { border-bottom: 0; }
.rs-sumbox dt { color: var(--rs-soft); min-width: 0; }
.rs-sumbox dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-sumbox__after dt { color: var(--rs-ink); font-weight: 600; }
.rs-sumbox__after dd { font-size: 16px; font-weight: 700; }
.rs-sumbox dd.is-neg { color: var(--rs-bad); }

.rs-short {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px;
  border-radius: 11px; font-size: 14px; font-weight: 600;
  background: var(--rs-warn-bg); color: var(--rs-warn); border: 1px solid rgba(154, 91, 0, .22);
}
[data-theme="dark"] .rs-short { border-color: rgba(224, 187, 99, .28); }
.rs-short__icon .rs-ico { width: 18px; height: 18px; }
.rs-short__text { flex: 1; min-width: 0; }
.rs-short__link {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 4px 2px; flex: none;
  font: inherit; font-size: 14px; font-weight: 700; color: inherit; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}

.rs-about__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rs-about__head h2 { margin: 0; }
.rs-about__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--rs-tint); color: var(--rs-brand-ink); }
.rs-about__icon .rs-ico { width: 18px; height: 18px; }
.rs-about__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--rs-soft); }
.rs-about__list li { position: relative; padding-left: 18px; }
.rs-about__list li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--rs-brand-ink); opacity: .7;
}

/* ---- bulk AFA: each checked row and what became of it ---- */
.rs-afatable td { vertical-align: top; }
.rs-afatable td.wrap { min-width: 220px; }
/* A row with problems is marked down its left edge, which stays readable
   on hover in both themes where a tinted row would not. */
.rs-afatable__row.is-bad td:first-child { box-shadow: inset 3px 0 0 var(--rs-bad); color: var(--rs-bad); font-weight: 600; }
.rs-rowerr { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--rs-bad); white-space: normal; }
.rs-rowerr li + li { margin-top: 3px; }
.rs-rownote { display: block; margin-top: 4px; font-size: 12.5px; color: var(--rs-soft); white-space: normal; }
.rs-rownote.rs-mono { color: var(--rs-brand-ink); font-weight: 600; }
/* The picture of the transfer, on a reseller's own payout row. */
.rs-rownote.rs-proof { color: var(--rs-brand-ink); font-weight: 600; text-decoration: underline; }

/* ---- history: filters ---- */
.rs-filtercard { display: grid; gap: 14px; }
.rs-search { display: flex; gap: 8px; margin: 0; }
.rs-search__box { position: relative; flex: 1; min-width: 0; }
.rs-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rs-soft); pointer-events: none; }
.rs-search__icon .rs-ico { width: 18px; height: 18px; }
.rs-search input {
  width: 100%; min-width: 0; font: inherit; font-size: 16px; /* 16px, or an iPhone zooms in on focus */
  padding: 10px 12px 10px 40px; border: 1px solid var(--rs-line); border-radius: 10px;
  background: var(--rs-card); color: var(--rs-ink);
}
.rs-search .rs-btn { flex: none; }

.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-chips button {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--rs-line); background: var(--rs-card); color: var(--rs-ink);
}
.rs-chips button:hover { background: var(--rs-hover); }
.rs-chips button.is-on { background: var(--rs-tint); border-color: var(--rs-brand-ink); color: var(--rs-brand-ink); font-weight: 600; }
.rs-chips .rs-ico { width: 15px; height: 15px; }

.rs-daterange { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 460px; }
.rs-daterange .rs-field { margin: 0; min-width: 0; }
.rs-daterange input { min-width: 0; max-width: 100%; min-height: 46px; }

.rs-filterrow { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-filterrow select {
  flex: 1 1 160px; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--rs-line); border-radius: 10px; background: var(--rs-card); color: var(--rs-ink);
}
.rs-filterrow .rs-btn { flex: none; }

/* ---- history: the four counts ---- */
.rs-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; overflow: hidden;
  background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 14px;
}
.rs-strip__cell { min-width: 0; padding: 14px 16px; border-left: 1px solid var(--rs-line); }
.rs-strip__cell:first-child { border-left: 0; }
.rs-strip__cell span { display: block; font-size: 12.5px; font-weight: 500; color: var(--rs-soft); }
.rs-strip__cell strong { display: block; margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-strip__cell--ok strong { color: var(--rs-ok); }
.rs-strip__cell--warn strong { color: var(--rs-warn); }
.rs-strip__cell--bad strong { color: var(--rs-bad); }

/* ---- history: the table and its pages ---- */
.rs-card--table { padding: 4px 0 0; overflow: hidden; }
.rs-card--table .admin-table th:first-child,
.rs-card--table .admin-table td:first-child { padding-left: 18px; }
.rs-card--table .admin-table th:last-child,
.rs-card--table .admin-table td:last-child { padding-right: 18px; }
.rs-card--table .admin-table tbody tr:last-child td { border-bottom: 0; }
.rs-card__foot { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--rs-line); }
.rs-card--table[aria-busy="true"] tbody { opacity: .55; transition: opacity .15s ease; }

.rs-rowlink { cursor: pointer; }
.rs-refcell { display: inline-flex; align-items: center; white-space: nowrap; }
.rs-price strong { display: block; font-variant-numeric: tabular-nums; }
.rs-sold { display: block; margin-top: 2px; font-size: 12px; color: var(--rs-soft); font-variant-numeric: tabular-nums; }

.rs-pagerbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 12px 18px 14px; border-top: 1px solid var(--rs-line);
}
.rs-pagerbar__info { margin: 0; font-size: 13px; color: var(--rs-soft); font-variant-numeric: tabular-nums; }
.rs-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rs-pager:empty { display: none; }
.rs-pager__btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rs-line); background: var(--rs-card); color: var(--rs-ink);
}
.rs-pager__btn:hover:not(:disabled):not(.is-on) { background: var(--rs-hover); }
.rs-pager__btn.is-on { background: var(--rs-brand); border-color: var(--rs-brand); color: #fff; cursor: default; }
.rs-pager__btn:disabled { opacity: .45; cursor: default; }
.rs-pager__btn .rs-ico { width: 16px; height: 16px; }
.rs-pager__gap { min-width: 20px; text-align: center; color: var(--rs-soft); }

@media (max-width: 560px) {
  .rs-pagehead h2 { font-size: 18px; }
  .rs-strip__cell { padding: 11px 10px; }
  .rs-strip__cell span { font-size: 12px; }
  .rs-strip__cell strong { font-size: 19px; }
  .rs-card--table .admin-table th:first-child,
  .rs-card--table .admin-table td:first-child { padding-left: 14px; }
  .rs-card--table .admin-table th:last-child,
  .rs-card--table .admin-table td:last-child { padding-right: 14px; }
  .rs-pagerbar { justify-content: center; padding: 12px 12px 14px; }
  .rs-pagerbar__info { width: 100%; text-align: center; }
  .rs-pager { justify-content: center; gap: 3px; }
  .rs-pager__btn { min-width: 32px; height: 32px; padding: 0 6px; }
  /* Page 1 is always one of the numbers, so the jump to it is the one
     button a phone row can spare. */
  .rs-pager__btn--step:first-child { display: none; }
}

/* Four counts side by side stop fitting on the narrowest phones. */
@media (max-width: 360px) {
  .rs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-strip__cell:nth-child(3) { border-left: 0; }
  .rs-strip__cell:nth-child(n+3) { border-top: 1px solid var(--rs-line); }
}

/* Same reason as the block further up: styles.css sets every button to
   16px under 1024px, and these compact controls would wrap at that size. */
@media (max-width: 1024px) {
  .rs-body .rs-chips button,
  .rs-body .rs-pager__btn,
  .rs-body .rs-short__link { font-size: 14px !important; }
  .rs-body .rs-filtercard .rs-btn,
  .rs-body .rs-actions .rs-btn { font-size: 14.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-card--table[aria-busy="true"] tbody { transition: none; }
}

/* A card scrolled to by the script clears the sticky top bar. */
.rs-content .rs-card { scroll-margin-top: 80px; }

/* ============================================================
   My shop: the header, its six tabs, and what is in each.
   ============================================================ */

/* A grey pill for anything switched off, such as a closed shop. */
.rs-status--off { background: var(--rs-hover); color: var(--rs-soft); box-shadow: inset 0 0 0 1px var(--rs-line); }

/* ---- the header: logo, name, open or closed, the link, two buttons ---- */
.rs-shophead { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; margin: 0 0 16px; }
.rs-shophead__text { flex: 1 1 220px; min-width: 0; }
.rs-shophead h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: anywhere; }
.rs-shophead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.rs-shophead__url {
  min-width: 0; max-width: 100%; font-size: 14px; font-weight: 500; color: var(--rs-brand-ink);
  text-decoration: none; overflow-wrap: anywhere;
}
.rs-shophead__url:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-shophead__acts { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }

/* A logo in a circle. The script sets the shop's colour and the ink that
   reads on it; a picture covers both. */
.rs-logo {
  flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: var(--rs-logo-bg, #0164ce); color: var(--rs-logo-ink, #fff);
  font-weight: 700; line-height: 1; letter-spacing: .01em;
  box-shadow: 0 0 0 3px var(--rs-card), 0 0 0 4px var(--rs-line);
}
.rs-logo.has-img { background: var(--rs-card); }
.rs-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-logo--head { width: 56px; height: 56px; font-size: 19px; }
.rs-logo--pick { width: 88px; height: 88px; font-size: 28px; }

/* ---- the six tabs ---- */
.rs-tabs--shop button { white-space: nowrap; }

/* ---- overview ---- */
.rs-kpi--warn .rs-kpi__icon { background: var(--rs-warn-bg); color: var(--rs-warn); }
.rs-kpi--money .rs-kpi__value { font-size: 22px; overflow-wrap: anywhere; }
.rs-kpi__sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--rs-soft); }
.rs-card__head--pad { padding: 14px 18px 10px; margin: 0; }

/* ---- a strip of figures with a line under each ---- */
.rs-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-strip__cell strong { overflow-wrap: anywhere; }
.rs-strip__cell em {
  display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.35;
  color: var(--rs-soft); overflow-wrap: anywhere;
}
.rs-strip__cell--money strong { font-size: 20px; }

/* ---- pricing: one card per network ---- */
.rs-pnet { padding: 0; overflow: hidden; }
.rs-pnet__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--rs-line);
}
.rs-pnet__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.rs-pnet__title h3 { margin: 0; font-size: 16px; font-weight: 700; }
.rs-pnet__count { font-size: 12.5px; color: var(--rs-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-pnet__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-btn--xs { padding: 5px 11px; font-size: 13px; font-weight: 600; border-radius: 8px; }

/* One bundle. Name, price with its nudges, what it earns, on or off; on a
   phone the switch moves up beside the name. */
.rs-prow {
  display: grid; align-items: center; gap: 10px 16px;
  grid-template-columns: minmax(0, 1fr) auto minmax(138px, auto) auto;
  grid-template-areas: "name price margin switch";
  padding: 11px 18px; border-top: 1px solid var(--rs-line);
}
.rs-pnet__head + .rs-prow { border-top: 0; }
.rs-prow--sub { grid-template-columns: minmax(0, 1fr) auto minmax(138px, auto); grid-template-areas: "name price margin"; }
.rs-prow__name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-prow__name strong { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.rs-prow__name span { font-size: 12.5px; color: var(--rs-soft); font-variant-numeric: tabular-nums; }
.rs-prow__name .rs-prow__below { color: var(--rs-warn); font-weight: 600; }
.rs-prow__price { grid-area: price; display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.rs-prow__switch { grid-area: switch; justify-self: end; }
.rs-prow.is-off .rs-prow__name,
.rs-prow.is-off .rs-prow__price { opacity: .6; }
/* Refused by the server on the last save. */
.rs-prow.is-refused { background: var(--rs-bad-bg); box-shadow: inset 3px 0 0 var(--rs-bad); }
.rs-prow.is-refused .rs-margin--bad { background: var(--rs-card); box-shadow: inset 0 0 0 1px var(--rs-bad); }

/* GHS in a box in front of an amount. */
.rs-money {
  display: inline-flex; align-items: stretch; width: 138px; min-width: 0; overflow: hidden;
  border: 1px solid var(--rs-line); border-radius: 10px; background: var(--rs-card);
}
.rs-money:focus-within { border-color: var(--rs-brand-ink); box-shadow: 0 0 0 3px var(--rs-tint-line); }
.rs-money:has(input[aria-invalid="true"]) { border-color: var(--rs-bad); }
.rs-money__cur {
  flex: none; display: grid; place-items: center; min-width: 36px; padding: 0 7px;
  background: var(--rs-page); border-right: 1px solid var(--rs-line);
  color: var(--rs-soft); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.rs-money input,
.rs-field .rs-money input {
  flex: 1; width: 100%; min-width: 0; margin: 0; padding: 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--rs-ink); box-shadow: none; outline: none;
  font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.rs-field .rs-money { width: 100%; }
.rs-field .rs-money input { padding: 11px 12px; }
.rs-money input::-webkit-outer-spin-button,
.rs-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* +0.50 over -0.50, the height of the price box between them. */
.rs-nudge { display: flex; flex-direction: column; gap: 3px; flex: none; }
.rs-nudge button {
  appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; flex: 1; min-height: 0; padding: 0 9px; border-radius: 7px;
  border: 1px solid var(--rs-line); background: var(--rs-card); color: var(--rs-ink);
}
.rs-nudge button:hover { background: var(--rs-tint); border-color: var(--rs-tint-line); color: var(--rs-brand-ink); }
.rs-nudge button:focus-visible { outline: 2px solid var(--rs-brand-ink); outline-offset: 1px; }

/* What a bundle earns at the price typed. */
.rs-margin {
  grid-area: margin; justify-self: start; display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--rs-hover); color: var(--rs-soft);
}
.rs-margin--ok { background: var(--rs-ok-bg); color: var(--rs-ok); }
.rs-margin--bad { background: var(--rs-bad-bg); color: var(--rs-bad); }

/* An on/off switch over a real checkbox, so it is still a checkbox to a
   screen reader and to the keyboard. */
.rs-switch { position: relative; display: inline-flex; flex: none; width: 46px; height: 26px; cursor: pointer; }
.rs-switch input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.rs-switch__track {
  position: relative; width: 100%; height: 100%; border-radius: 999px;
  background: var(--rs-line); transition: background-color .18s ease;
}
.rs-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform .18s ease;
}
.rs-switch input:checked + .rs-switch__track { background: var(--rs-brand); }
.rs-switch input:checked + .rs-switch__track::after { transform: translateX(20px); }
.rs-switch input:focus-visible + .rs-switch__track { outline: 2px solid var(--rs-brand-ink); outline-offset: 2px; }
[data-theme="dark"] .rs-switch__track { background: #3a4350; }
[data-theme="dark"] .rs-switch input:checked + .rs-switch__track { background: #0375d7; }

/* The save bar stays in reach at the foot of the screen while the list is
   long, and settles under the last card at the end of it. */
.rs-savebar--float {
  z-index: 5; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--rs-line); border-radius: 14px;
  box-shadow: 0 -6px 18px rgba(16, 24, 40, .06);
}
[data-theme="dark"] .rs-savebar--float { box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
.rs-savebar__note { font-size: 13.5px; color: var(--rs-soft); min-width: 0; }

/* ---- settings ---- */
.rs-field__label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 8px; }
.rs-field__top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.rs-field__top label { margin: 0; }
.rs-field--narrow { max-width: 320px; }
/* Text people write, not code or card numbers, so not the monospace the
   other textareas on this page use. */
.rs-field textarea.rs-textarea { font-family: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }

.rs-logopick { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rs-logopick__body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rs-logopick__body .rs-field__hint { margin: 0; }
.rs-logopick__chosen { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--rs-ink); overflow-wrap: anywhere; }
/* The file input stays in the page and in the tab order, just unseen; its
   label is the button, and shows the focus ring for it. */
/* .rs-field input would otherwise stretch it to the full width, off the
   side of a phone. */
.rs-field input.rs-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
/* .rs-field label would make it a block with a gap under it. */
.rs-field label.rs-filebtn { display: inline-flex; margin: 0; cursor: pointer; font-weight: 600; }
.rs-file:focus-visible + .rs-filebtn { outline: 2px solid var(--rs-brand-ink); outline-offset: 2px; }

.rs-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; cursor: pointer; }
/* .rs-field label outranks the rule above and would make it a block, with
   the field label's weight and gap under it. */
.rs-field label.rs-check { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; font-weight: 400; font-size: 14px; }
.rs-field .rs-check input { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--rs-brand); }

.rs-colour { display: flex; align-items: center; gap: 12px; }
.rs-field .rs-colour input[type="color"] {
  width: 56px; height: 46px; flex: none; padding: 4px; cursor: pointer;
  border: 1px solid var(--rs-line); border-radius: 10px; background: var(--rs-card);
}
.rs-colour__hex { font-size: 14px; font-weight: 600; color: var(--rs-soft); }

.rs-switchrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--rs-page); border: 1px solid var(--rs-line);
}
.rs-switchrow__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-switchrow__text strong { font-size: 14.5px; }
.rs-switchrow__text span { font-size: 13px; color: var(--rs-soft); }
.rs-err--flat { margin: 0; }

/* Texts to the shop's customers: what goes out, one sample, and the last
   few sent. The recent list is rows rather than a table so it fits a phone
   without scrolling sideways. */
.rs-sx__block { margin-top: 18px; }
.rs-sx__h { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--rs-ink); }
.rs-sx__events { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rs-sx__events li {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 11px;
  border: 1px solid var(--rs-line); border-radius: 999px; background: var(--rs-card); font-size: 13px;
}
.rs-sx__events .rs-ico { width: 15px; height: 15px; color: var(--rs-brand-ink); }
.rs-sx__preview {
  margin: 0; max-width: 440px; padding: 12px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line); color: var(--rs-ink);
  font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.rs-sx__recent { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rs-line); border-radius: 12px; }
.rs-sx__recent li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 14px; border-top: 1px solid var(--rs-line);
}
.rs-sx__recent li:first-child { border-top: 0; }
.rs-sx__what { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-sx__what strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.rs-sx__what span { font-size: 12.5px; color: var(--rs-soft); font-variant-numeric: tabular-nums; }
.rs-sx__recent .rs-status { flex: none; }

/* ---- reviews ---- */
.rs-revsum { display: flex; align-items: center; gap: 16px; }
.rs-revsum__avg { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-revsum__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.rs-stars { display: inline-flex; align-items: center; gap: 1px; letter-spacing: 0; font-size: inherit; color: inherit; }
.rs-star { width: 16px; height: 16px; display: block; flex: none; fill: none; stroke: var(--rs-star-off); }
.rs-star.is-on { fill: var(--rs-star); stroke: var(--rs-star); }
.rs-revsum .rs-star { width: 20px; height: 20px; }

.rs-review { display: flex; gap: 12px; padding: 14px 0; border-bottom: 0; }
.rs-review + .rs-review { border-top: 1px solid var(--rs-line); }
.rs-review.is-hidden { opacity: 1; }
.rs-review.is-hidden .rs-review__main > :not(.rs-review__head) { opacity: .6; }
.rs-review__avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--rs-tint); color: var(--rs-brand-ink); font-size: 13px; font-weight: 700;
}
.rs-review__avatar .rs-ico { width: 18px; height: 18px; }
.rs-review__main { flex: 1; min-width: 0; }
.rs-review__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.rs-review__head strong { font-size: 14.5px; }
.rs-review__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: 12.5px; color: var(--rs-soft); }
.rs-review__meta .rs-ref { font-size: 12.5px; }
.rs-review__body { margin: 8px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }

/* ---- earnings: two ways to take it, as one segmented control ---- */
.rs-tabs--seg {
  display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; margin-bottom: 16px; max-width: 100%;
  background: var(--rs-page); border: 1px solid var(--rs-line); border-radius: 999px;
}
.rs-tabs--seg button { border-color: transparent; background: transparent; padding: 7px 14px; }
.rs-tabs--seg button.is-on { background: var(--rs-brand); border-color: var(--rs-brand); color: #fff; }

/* ---- sub-agents ---- */
.rs-cellsub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--rs-soft); overflow-wrap: anywhere; }
a.rs-cellsub { color: var(--rs-brand-ink); text-decoration: none; }
a.rs-cellsub:hover { text-decoration: underline; }
.rs-subnet { margin: 0 0 16px; border: 1px solid var(--rs-line); border-radius: 12px; overflow: hidden; }
.rs-subnet h3 { margin: 0; padding: 11px 16px; font-size: 15px; background: var(--rs-page); border-bottom: 1px solid var(--rs-line); }
.rs-subnet .rs-prow { padding-left: 16px; padding-right: 16px; }
.rs-subnet h3 + .rs-prow { border-top: 0; }

/* ---- the shop on narrower screens ---- */
@media (max-width: 760px) {
  /* Name and switch on top, price and what it earns under them. */
  .rs-prow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name switch" "price margin";
    gap: 8px 12px; padding: 12px 14px;
  }
  .rs-prow--sub { grid-template-areas: "name name" "price margin"; }
  .rs-prow__price { min-width: 0; }
  /* The same width on every row, giving way only when the pill needs it. */
  .rs-prow .rs-money { width: auto; flex: 0 1 132px; }
  .rs-margin { justify-self: end; }
  .rs-pnet__head { padding: 12px 14px; }
}

@media (max-width: 640px) {
  /* Six tabs as two rows of three, each the same width. */
  .rs-tabs--shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rs-tabs--shop button { justify-content: center; min-width: 0; padding: 8px 6px; gap: 5px; }
}

@media (max-width: 560px) {
  .rs-shophead { gap: 12px; }
  .rs-shophead h2 { font-size: 20px; margin-bottom: 4px; }
  .rs-logo--head { width: 48px; height: 48px; font-size: 16px; }
  .rs-shophead__acts { flex: 1 1 100%; }
  .rs-shophead__acts .rs-btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .rs-kpi--money .rs-kpi__value { font-size: 19px; }
  .rs-strip--3 strong,
  .rs-strip__cell--money strong { font-size: 16px; }
  .rs-strip__cell em { font-size: 11.5px; }
  .rs-savebar--float { padding: 10px 12px; gap: 8px 12px; }
  .rs-savebar--float .rs-btn { flex: 1 1 100%; }
  .rs-revsum__avg { font-size: 34px; }
  .rs-logo--pick { width: 76px; height: 76px; font-size: 24px; }
  .rs-tabs--seg { display: flex; }
  .rs-tabs--seg button { flex: 1 1 0; justify-content: center; min-width: 0; padding: 7px 8px; }
  .rs-switchrow { padding: 12px 14px; }
}

@media (max-width: 380px) {
  /* Too narrow for an icon beside every label, so it goes above. */
  .rs-tabs--shop button { flex-direction: column; gap: 3px; padding: 7px 4px; border-radius: 12px; }
  .rs-prow { padding: 11px 12px; }
  .rs-margin { padding: 4px 8px; }
  .rs-nudge button { padding: 0 7px; }
}

@media (max-width: 360px) {
  .rs-strip--3 .rs-strip__cell:nth-child(3) { grid-column: 1 / -1; }
}

/* Four figures with money among them do not fit four across on a phone. */
@media (max-width: 560px) {
  .rs-strip--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-strip--wrap .rs-strip__cell:nth-child(3) { border-left: 0; }
  .rs-strip--wrap .rs-strip__cell:nth-child(n+3) { border-top: 1px solid var(--rs-line); }
}

/* Same reason as the blocks above: styles.css sets every button to 16px
   under 1024px, and these compact controls would wrap or overflow at it. */
@media (max-width: 1024px) {
  .rs-body .rs-nudge button { font-size: 12px !important; }
  .rs-body .rs-btn--xs { font-size: 13px !important; }
  .rs-body .rs-tabs--seg button,
  .rs-body .rs-shophead__acts .rs-btn,
  .rs-body .rs-savebar .rs-btn { font-size: 14.5px !important; }
  .rs-body .rs-field__top .rs-link,
  .rs-body .rs-logopick .rs-link { font-size: 13px !important; }
  .rs-body .rs-review__meta .rs-ref { font-size: 12.5px !important; }
}
@media (max-width: 640px) {
  .rs-body .rs-tabs--shop button { font-size: 13.5px !important; }
}
@media (max-width: 380px) {
  .rs-body .rs-tabs--shop button { font-size: 12.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-switch__track,
  .rs-switch__track::after { transition: none; }
}

/* ---- what the owner has switched off ----
   A control whose feature is off is taken out with a class, not the hidden
   attribute, so the control's own show and hide rules are left alone. The
   note that stands in its place uses the page tint and the info mark, the
   same quiet weight as a hint, because nothing here is the reseller's
   fault. */
.rs-body .is-switched-off { display: none !important; }
.rs-offnote {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 13px 15px;
  border-radius: 14px; background: var(--rs-tint); border: 1px solid var(--rs-tint-line);
  color: var(--rs-ink); font-size: 14px; line-height: 1.5;
}
.rs-offnote__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--rs-card); color: var(--rs-brand-ink); }
.rs-offnote__icon .rs-ico { width: 17px; height: 17px; }
.rs-offnote p { margin: 0; align-self: center; min-width: 0; }
/* Inside a card, under its hint line. */
.rs-offnote--flat { margin: 0 0 4px; }
/* The sidebar balance without its Fund wallet button: the gap left for the
   button closes, so the card does not look as if something failed to load. */
.rs-sidebal:has(> .rs-sidebal__fund.is-switched-off) strong { margin-bottom: 0; }

/* ---- paused: the whole programme switched off ----
   Nothing but the brand, what has happened and a way to sign out. The blue
   band behind the card is the sidebar balance's gradient, so it reads as
   the same dashboard at rest rather than an error page. */
.rs-paused {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.rs-paused::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 44%;
  background: linear-gradient(135deg, #0059c4 0%, #0164ce 60%, #0375d7 100%);
}
.rs-paused__card {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 18px;
  padding: 26px 22px 24px; box-shadow: 0 24px 48px -24px rgba(16, 24, 40, .35);
}
[data-theme="dark"] .rs-paused__card { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); }
.rs-paused__brand { display: inline-flex; padding: 0; margin: 0 0 22px; text-align: left; }
.rs-paused__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--rs-tint); color: var(--rs-brand-ink); }
.rs-paused__icon .rs-ico { width: 28px; height: 28px; }
.rs-paused h1 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; color: var(--rs-ink); }
.rs-paused h1:focus { outline: none; }
.rs-paused p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--rs-soft); }
.rs-paused .rs-btn { width: 100%; padding: 13px 18px; font-size: 15px; }
@media (max-width: 400px) {
  .rs-paused__card { padding: 22px 16px 20px; }
  .rs-paused h1 { font-size: 19px; }
}

/* ============================================================
   Free codes: the codes the owner gave this shop, what can be sent on,
   and which ones customers have used.
   ============================================================ */

/* A tag standing where a price would be, with nothing before it to space
   it from. */
.rs-tag--flat { margin-left: 0; }

/* The dashboard's figures with free codes counted: all five in one row
   where they fit, otherwise the fifth takes a row of its own. */
@media (min-width: 1180px) {
  .rs-kpis--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1179px) {
  .rs-kpis--five > .rs-kpi:last-child { grid-column: 1 / -1; }
}

.rs-fc-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 18px; text-align: center; }
.rs-fc-empty__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--rs-tint); color: var(--rs-brand-ink);
}
.rs-fc-empty__icon .rs-ico { width: 26px; height: 26px; }
.rs-fc-empty p { margin: 0; max-width: 40ch; font-size: 14.5px; line-height: 1.5; color: var(--rs-soft); }

/* One code per row: the code and its bundle, where it stands, then the
   ways to send it on. Rows rather than a table, so the buttons never sit
   off the side of a phone screen. */
.rs-codelist { list-style: none; margin: 0; padding: 0; }
.rs-codelist > li + li { border-top: 1px solid var(--rs-line); }
.rs-codelist__note { padding: 22px 18px; text-align: center; font-size: 14px; color: var(--rs-soft); }
/* Fades while a new filter is fetched, like the tables do. */
.rs-card--table[aria-busy="true"] .rs-codelist { opacity: .55; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .rs-card--table[aria-busy="true"] .rs-codelist { transition: none; }
}
.rs-coderow {
  display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.25fr) auto;
  grid-template-areas: "main meta acts"; align-items: center; gap: 10px 18px; padding: 13px 18px;
}
.rs-coderow__main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-coderow__code { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--rs-ink); overflow-wrap: anywhere; }
.rs-coderow__sub { font-size: 13px; color: var(--rs-soft); overflow-wrap: anywhere; }
.rs-coderow__meta {
  grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0;
  font-size: 13px; color: var(--rs-soft); font-variant-numeric: tabular-nums;
}
.rs-coderow__acts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rs-coderow__acts .rs-btn { white-space: nowrap; }
.rs-coderow__acts .rs-ico { width: 15px; height: 15px; }

/* Too narrow for three columns beside the menu: the buttons go under. */
@media (max-width: 1279px) {
  .rs-coderow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "main meta" "acts acts"; }
  .rs-coderow__acts { justify-content: flex-start; }
}

/* A phone: one column, and buttons big enough for a thumb, WhatsApp first
   and across the width because that is how most codes get sent. */
@media (max-width: 640px) {
  .rs-coderow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "meta" "acts"; gap: 8px; padding: 13px 14px; }
  .rs-coderow__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rs-coderow__acts .rs-btn { min-height: 44px; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .rs-coderow__acts a.rs-btn { order: -1; grid-column: 1 / -1; justify-content: center; }
  .rs-coderow__acts > :only-child { grid-column: 1 / -1; }
  .rs-codelist__note { padding: 20px 14px; }
}

@media (max-width: 560px) {
  .rs-pagehead #fc_download { flex: 1 1 100%; }
}

/* ============================================================
   Checker cards: buying them from the wallet, the codes they give, and
   the orders under My vouchers.
   ============================================================ */

/* Six figures with checker cards and free codes both counted: three across
   where there is room, two on a phone. */
@media (min-width: 901px) {
  .rs-kpis--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* One tile per card. The band is drawn in the brand blues from the exam's
   name, never a picture, since the cards' pictures carry the site's name. */
.rs-vload { margin-bottom: 12px; }
.rs-vtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.rs-vtile {
  --rs-vt-from: #0059c4; --rs-vt-to: #0375d7;
  appearance: none; cursor: pointer; font: inherit; color: var(--rs-ink); text-align: left;
  display: flex; flex-direction: column; min-width: 0; min-height: 44px; padding: 0; overflow: hidden;
  background: var(--rs-card); border: 2px solid var(--rs-line); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rs-vtile--bece { --rs-vt-from: #0375d7; --rs-vt-to: #3ea0ee; }
.rs-vtile--other { --rs-vt-from: #475467; --rs-vt-to: #667085; }
.rs-vtile:hover:not(:disabled) { border-color: var(--rs-tint-line); }
.rs-vtile.is-on { border-color: var(--rs-brand); box-shadow: 0 0 0 3px var(--rs-tint-line); }
[data-theme="dark"] .rs-vtile.is-on { border-color: var(--rs-brand-ink); }
.rs-vtile:focus-visible { outline: 2px solid var(--rs-brand-ink); outline-offset: 2px; }
.rs-vtile:disabled { cursor: default; }
.rs-vtile:disabled .rs-vtile__band { filter: grayscale(1); opacity: .55; }
.rs-vtile:disabled .rs-vtile__price { color: var(--rs-soft); }
.rs-vtile__band {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  min-height: 86px; padding: 12px 14px; color: #fff;
  background: linear-gradient(135deg, var(--rs-vt-from) 0%, var(--rs-vt-to) 100%);
}
.rs-vtile__band::before,
.rs-vtile__band::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.rs-vtile__band::before { width: 120px; height: 120px; right: -34px; top: -56px; background: rgba(255, 255, 255, .13); }
.rs-vtile__band::after { width: 70px; height: 70px; right: 48px; bottom: -44px; background: rgba(255, 255, 255, .09); }
.rs-vtile__exam { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
.rs-vtile__kind { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.rs-vtile__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.rs-vtile__name { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.rs-vtile__price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-vtile.is-on .rs-vtile__price { color: var(--rs-brand-ink); }

.rs-vform { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rs-line); }

/* How many: minus, the number, plus. Every part a thumb's width. */
.rs-qty {
  display: inline-flex; align-items: stretch; max-width: 100%; overflow: hidden;
  border: 1px solid var(--rs-line); border-radius: 10px; background: var(--rs-card);
}
.rs-qty:focus-within { border-color: var(--rs-brand-ink); box-shadow: 0 0 0 3px var(--rs-tint-line); }
.rs-qty:has(input[aria-invalid="true"]) { border-color: var(--rs-bad); }
.rs-qty button {
  appearance: none; cursor: pointer; font: inherit; flex: none; width: 48px; min-height: 46px; padding: 0;
  display: grid; place-items: center; border: 0; background: var(--rs-page); color: var(--rs-ink);
}
.rs-qty button:hover { background: var(--rs-tint); color: var(--rs-brand-ink); }
.rs-qty button:focus-visible { outline: 2px solid var(--rs-brand-ink); outline-offset: -2px; }
.rs-qty button .rs-ico { width: 18px; height: 18px; }
.rs-field .rs-qty input {
  width: 88px; min-width: 0; margin: 0; padding: 10px 6px; border: 0; border-radius: 0;
  border-left: 1px solid var(--rs-line); border-right: 1px solid var(--rs-line);
  background: transparent; color: var(--rs-ink); text-align: center; box-shadow: none; outline: none;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.rs-qty input::-webkit-outer-spin-button,
.rs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Asked once before anything is charged, in the page, not a pop-up. */
.rs-vconfirm {
  margin-top: 16px; padding: 14px; border-radius: 12px;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line);
}
.rs-vconfirm p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--rs-ink); }
.rs-vconfirm__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-vconfirm__acts .rs-btn { flex: 1 1 160px; min-height: 46px; }

/* The codes after a purchase, and one order's codes once asked for. */
.rs-vdone__intro {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 11px; font-size: 14px; font-weight: 600;
  background: var(--rs-ok-bg); color: var(--rs-ok);
}
.rs-vdone h2:focus { outline: none; }
.rs-vdone__rows { margin-bottom: 4px; }
.rs-vacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.rs-vacts .rs-ico { width: 15px; height: 15px; }
.rs-vcodes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rs-line); border-radius: 12px; overflow: hidden; }
.rs-vcode {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center;
  gap: 8px 16px; min-height: 44px; padding: 11px 14px;
}
.rs-vcode + .rs-vcode { border-top: 1px solid var(--rs-line); }
.rs-vcode__part { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rs-vcode__label { font-size: 12px; color: var(--rs-soft); }
.rs-vcode__value { font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--rs-ink); overflow-wrap: anywhere; }
.rs-vcode__copy { white-space: nowrap; }
.rs-vcode__copy .rs-ico { width: 15px; height: 15px; }
.rs-vnote { margin: 10px 0 0; }

/* A phone: serial and PIN side by side, the copy button across under them. */
@media (max-width: 560px) {
  .rs-vtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rs-vtile__band { min-height: 72px; padding: 10px 12px; }
  .rs-vtile__exam { font-size: 19px; }
  .rs-vtile__body { padding: 10px 12px 12px; }
  .rs-vtile__price { font-size: 16px; }
  .rs-vcode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 11px 12px; }
  .rs-vcode__copy { grid-column: 1 / -1; min-height: 44px; }
  .rs-vacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-vacts .rs-btn { min-height: 44px; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .rs-vacts a.rs-btn { order: -1; grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 340px) {
  .rs-vtiles { grid-template-columns: minmax(0, 1fr); }
}

/* The pricing card's note for checker cards switched off in shops. */
.rs-pnet__note { margin: 12px 18px 4px; }

/* Same reason as the blocks above: styles.css sets every button to 16px
   under 1024px, and the tiles and these compact controls would grow. */
@media (max-width: 1024px) {
  .rs-body .rs-vtile { font-size: 14px !important; }
  .rs-body .rs-vconfirm__acts .rs-btn { font-size: 15px !important; }
  .rs-body .rs-vacts .rs-btn,
  .rs-body .rs-vcode__copy { font-size: 13.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-vtile { transition: none; }
}

/* ============================================================
   One link: the signed-out screen, waiting for approval, the setup
   card, and paying into the wallet online.
   ============================================================ */

/* ---- signed out ----
   The same card the paused screen uses, on the same blue band, because it
   is the same page at a different point rather than another site. Log in
   and Create account are tabs inside it. */
.rs-auth {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center;
  padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}
.rs-auth::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(135deg, #0059c4 0%, #0164ce 60%, #0375d7 100%);
}
.rs-auth__card {
  width: 100%; max-width: 460px;
  background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 18px;
  padding: 24px 22px 22px; box-shadow: 0 24px 48px -24px rgba(16, 24, 40, .35);
}
[data-theme="dark"] .rs-auth__card { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); }
.rs-auth__brand { display: inline-flex; padding: 0; margin: 0 0 18px; }
.rs-auth__tabs { margin-bottom: 18px; }
.rs-auth__tabs button { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 44px; }
.rs-auth__title { margin: 0 0 6px; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; color: var(--rs-ink); }
.rs-auth__title:focus { outline: none; }
.rs-auth__lede { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--rs-soft); }
.rs-auth .rs-btn--go { width: 100%; min-height: 48px; font-size: 15px; }
.rs-auth__foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rs-line);
}
.rs-auth__foot .rs-link { min-height: 44px; }
/* A sentence from the server worth reading: an account on hold, a password
   just changed, who invited them. The page tint, not a warning colour. */
.rs-note {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line);
  color: var(--rs-ink); font-size: 14px; line-height: 1.5;
}
/* Show and hide a password, inside the field's own box. */
.rs-pw { display: flex; align-items: center; gap: 0; border: 1px solid var(--rs-line); border-radius: 10px; background: var(--rs-card); }
.rs-pw input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 10px; background: transparent; }
.rs-pw input:focus { outline: none; }
.rs-pw__eye {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--rs-brand-ink); padding: 0 14px; min-height: 44px; flex: none;
}
/* The field no bot can see and nobody can fill by accident. */
.rs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- waiting for approval ----
   A control the server would only refuse is taken out of the page while the
   account waits, the same way a switched-off one is. */
.rs-body .is-pending-off { display: none !important; }
.rs-wait {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 4px; padding: 13px 16px;
  background: var(--rs-tint); border-bottom: 1px solid var(--rs-tint-line); color: var(--rs-ink);
}
.rs-wait__icon { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--rs-card); color: var(--rs-brand-ink); display: grid; place-items: center; }
.rs-wait__icon .rs-ico { width: 18px; height: 18px; }
.rs-wait__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-wait__text strong { font-size: 14.5px; }
.rs-wait__text span { font-size: 13.5px; color: var(--rs-soft); line-height: 1.5; }

/* ---- finishing the setup ---- */
.rs-setup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rs-setup__step {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--rs-line);
}
.rs-setup__step:first-child { border-top: 0; padding-top: 4px; }
.rs-setup__mark { width: 26px; height: 26px; flex: none; color: var(--rs-soft); display: grid; place-items: center; }
.rs-setup__step.is-done .rs-setup__mark { color: var(--rs-ok); }
.rs-setup__mark .rs-ico { width: 22px; height: 22px; }
.rs-setup__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rs-setup__body strong { font-size: 14.5px; }
.rs-setup__body span { font-size: 13px; color: var(--rs-soft); line-height: 1.45; }
.rs-setup__step.is-done .rs-setup__body strong { color: var(--rs-soft); }
.rs-setup__state { flex: none; font-size: 13px; font-weight: 600; color: var(--rs-ok); }
.rs-setup__step .rs-btn { flex: none; min-height: 44px; }
.rs-shoplink__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-shoplink__acts .rs-btn { min-height: 44px; }

/* ---- paying into the wallet online ---- */
.rs-paystage {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line); font-size: 14px; line-height: 1.5;
}
.rs-paystage p { margin: 6px 0 0; }
.rs-paystage .rs-field { margin-bottom: 10px; }
.rs-paystage .rs-btn { min-height: 44px; margin-top: 4px; }
.rs-paystage--wait { background: var(--rs-warn-bg); border-color: #f4dfa0; }
[data-theme="dark"] .rs-paystage--wait { border-color: #6b4c12; }
.rs-payback .rs-dl { margin-top: 10px; }
/* AFA has one price, not a list, so its row has no switch to line up with. */
.rs-prow--afa { border-top: 1px solid var(--rs-line); }

@media (max-width: 560px) {
  .rs-auth { place-items: start stretch; padding-left: 16px; padding-right: 16px; }
  .rs-auth__card { padding: 20px 16px 18px; }
  .rs-auth__title { font-size: 19px; }
  .rs-setup__step { flex-wrap: wrap; }
  .rs-setup__body { flex-basis: 100%; order: 2; }
  .rs-setup__step .rs-btn,
  .rs-setup__state { order: 3; margin-left: 38px; }
}
/* styles.css sets every button to 16px under 1024px; these compact ones
   would grow out of their rows. */
@media (max-width: 1024px) {
  .rs-body .rs-setup__step .rs-btn,
  .rs-body .rs-shoplink__acts .rs-btn { font-size: 14px !important; }
  .rs-body .rs-pw__eye { font-size: 14px !important; }
}

/* ---- support: the conversation in the panel ----
   The bubbles, the composer and the voice player come from css/styles.css,
   which this page already loads; these are the frame around them and the
   handful of colours that have to follow the dark theme. */
.rs-chat { padding: 0; overflow: hidden; }
.rs-chat__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rs-line); background: var(--rs-page);
}
.rs-chat__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.rs-chat__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--rs-soft); }
.rs-chat__dot.is-on { background: #1c9b52; box-shadow: 0 0 0 3px rgba(28, 155, 82, .18); }
.rs-chat__dot.is-away { background: var(--rs-warn); }
.rs-chat__state { font-size: 13.5px; color: var(--rs-soft); min-width: 0; }
.rs-chat__ask { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.rs-chat__threads {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 2px;
  border-bottom: 1px solid var(--rs-line); scrollbar-width: none;
}
.rs-chat__threads::-webkit-scrollbar { display: none; }
.rs-chat__scroll {
  min-height: 260px; max-height: min(58vh, 520px); overflow-y: auto;
  padding: 14px 16px 6px; background: var(--rs-card);
}
.rs-chat #chatComposer { padding: 8px 12px 12px; border-top: 1px solid var(--rs-line); }
.rs-chat #chatOrderCard { padding: 10px 16px 0; }
/* The bubbles are written for a white page, so the dark theme lifts the
   admin side and the empty note rather than leaving grey on grey. */
[data-theme="dark"] .rs-chat .chat-msg--admin { background: #1c232d; color: var(--rs-ink); border-color: var(--rs-line); }
[data-theme="dark"] .rs-chat .chat-msg__empty,
[data-theme="dark"] .rs-chat .chat-closed { color: var(--rs-soft); }
[data-theme="dark"] .rs-chat .chat-thread-pill { background: var(--rs-card); color: var(--rs-ink); border-color: var(--rs-line); }
[data-theme="dark"] .rs-chat .chat-compose { background: var(--rs-card); border-color: var(--rs-line); }
[data-theme="dark"] .rs-chat .chat-input { background: var(--rs-card); color: var(--rs-ink); }

/* The order a conversation is about. */
.rs-chatcard {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-page);
}
.rs-chatcard__pic {
  flex: none; width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--rs-tint); color: var(--rs-brand-ink);
}
.rs-chatcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-chatcard__pic .rs-ico { width: 22px; height: 22px; }
.rs-chatcard__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--rs-soft); }
.rs-chatcard__text strong { font-size: 13.5px; color: var(--rs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-chatcard__text em { font-style: normal; font-variant-numeric: tabular-nums; }
.rs-chatcard .rs-btn { flex: none; min-height: 40px; }

/* The count beside a menu item. */
.rs-nav__badge {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--rs-brand); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center;
}
.rs-nav__item.is-on .rs-nav__badge { background: #fff; color: var(--rs-brand-ink); }

/* ---- the API guide ---- */
.rs-doc__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-doc__head code { font-size: 14.5px; font-weight: 600; word-break: break-all; }
.rs-doc__switch { margin: 0 0 10px; font-size: 13px; color: var(--rs-soft); }
.rs-doc__h { margin: 14px 0 8px; font-size: 14.5px; }
.rs-verb--put { background: var(--rs-warn-bg); color: var(--rs-warn); }
.rs-verb--delete { background: var(--rs-bad-bg); color: var(--rs-bad); }
.rs-doccode { margin: 12px 0 0; border: 1px solid var(--rs-line); border-radius: 12px; overflow: hidden; }
.rs-doccode__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--rs-page); border-bottom: 1px solid var(--rs-line);
  font-size: 12.5px; color: var(--rs-soft);
}
.rs-doccode pre {
  margin: 0; padding: 12px; overflow-x: auto; background: var(--rs-card);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55;
}
.rs-doccode code { font: inherit; background: none; padding: 0; }
.rs-doctable td { vertical-align: top; }
.rs-doctable code { word-break: break-all; }
.rs-whtable code { word-break: break-all; }
.rs-actions--foot { margin-top: 12px; }

@media (max-width: 560px) {
  .rs-chat__scroll { max-height: 62vh; padding: 12px 12px 6px; }
  .rs-chat__head,
  .rs-chat__threads { padding-left: 12px; padding-right: 12px; }
  .rs-chat #chatOrderCard { padding-left: 12px; padding-right: 12px; }
  .rs-doccode pre { font-size: 12px; }
}
/* styles.css sets every button to 16px under 1024px; these sit in rows that
   would break apart at that size. */
@media (max-width: 1024px) {
  .rs-body .rs-chat__head .rs-btn,
  .rs-body .rs-chatcard .rs-btn { font-size: 14px !important; }
}

/* ============================================================
   Announcements

   Two different things share this block. Above the content sit the
   announcements the owner has aimed at resellers, under his moving ticker:
   the ticker is one line he keeps running, these are pieces of news with a
   title, a start and an end. In Shop settings sits the reseller's own list,
   which their shop's customers read on the storefront.

   Nothing is drawn at all when there is nothing to say, so the dashboard
   opens exactly where it opens today.
   ============================================================ */
.rs-ann { display: grid; gap: 10px; padding: 14px 26px 0; }
.rs-ann[hidden] { display: none; }
.rs-ann__card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--rs-card); border: 1px solid var(--rs-line); border-left: 3px solid var(--rs-soft);
  border-radius: 12px;
}
.rs-ann__card--care { border-left-color: var(--rs-warn); }
.rs-ann__card--important { border-left-color: var(--rs-brand); }
.rs-ann__icon { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--rs-hover); color: var(--rs-brand-ink); }
.rs-ann__icon .rs-ico { width: 16px; height: 16px; }
.rs-ann__card--care .rs-ann__icon { color: var(--rs-warn); }
.rs-ann__text { flex: 1 1 auto; min-width: 0; }
.rs-ann__flag { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--rs-warn); }
.rs-ann__card--important .rs-ann__flag { color: var(--rs-brand-ink); }
.rs-ann__title { display: block; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.rs-ann__body { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--rs-soft); white-space: pre-line; overflow-wrap: anywhere; }

/* The owner's popup, in front of the panel until it is read. */
.rs-annpop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(16, 24, 40, .5);
}
.rs-annpop[hidden] { display: none; }
.rs-annpop__box { width: 100%; max-width: 420px; padding: 20px; background: var(--rs-card); border-radius: 16px; border: 1px solid var(--rs-line); }
.rs-annpop__flag { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--rs-warn); }
.rs-annpop--important .rs-annpop__flag { color: var(--rs-brand-ink); }
.rs-annpop__title { margin: 0 0 6px; font-size: 17px; overflow-wrap: anywhere; }
.rs-annpop__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--rs-soft); white-space: pre-line; overflow-wrap: anywhere; }
.rs-annpop__foot { display: flex; justify-content: flex-end; margin-top: 16px; }

/* The reseller's own list, in Shop settings. */
.rs-annlist { display: grid; gap: 10px; margin: 0 0 14px; }
.rs-annrow {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-card);
}
.rs-annrow__text { flex: 1 1 auto; min-width: 0; }
.rs-annrow__title { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.rs-annrow__body { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--rs-soft); overflow-wrap: anywhere; }
.rs-annrow__meta { margin: 6px 0 0; font-size: 12.5px; color: var(--rs-soft); }
.rs-annrow__acts { flex: none; display: flex; gap: 6px; }
.rs-annrow__acts button {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--rs-line); border-radius: 9px;
  background: var(--rs-card); color: var(--rs-ink); font: inherit; font-size: 13px; cursor: pointer;
}
.rs-annrow__acts button:hover { background: var(--rs-hover); }
.rs-annrow__acts button.is-off { color: var(--rs-bad); }

@media (max-width: 900px) {
  .rs-ann { padding: 12px 16px 0; }
  .rs-annrow { flex-direction: column; }
  .rs-annrow__acts { width: 100%; }
  .rs-annrow__acts button { flex: 1; min-height: 44px; }
}

/* ---- Taking longer (WIP) on a data order ------------------------------
   The owner's question on the reseller's own order, their answer, and a
   shop sale's customer's answer read-only; the notice above the orders
   list and the tag on a marked row. --rs-* tokens, so the dark theme
   follows. 44px targets and 16px fields. */
.rs-wipnote[hidden], .rs-wip[hidden], .rs-wip__refund[hidden], .rs-wip .rs-actions[hidden] { display: none; }
.rs-wipnote { background: var(--rs-warn-bg); border-color: var(--rs-line); }
.rs-wipnote__head { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rs-ink); overflow-wrap: anywhere; }
.rs-wipnote .rs-actions { margin-top: 10px; }
.rs-wipnote .rs-btn, .rs-wip .rs-btn { min-height: 44px; }
.rs-tag--wip { background: var(--rs-warn-bg); color: var(--rs-warn); border-color: var(--rs-line); }
.rs-wip { overflow-wrap: anywhere; }
.rs-wip__q { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--rs-ink); }
.rs-wip__line { margin: 0 0 8px; font-size: 14px; color: var(--rs-ink); }
.rs-wip__said { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--rs-brand-ink); }
.rs-wip__note { margin: 0 0 10px; }
.rs-wip__refund { margin-top: 12px; }
.rs-wip__refund textarea { width: 100%; font-family: inherit; font-size: 16px; min-height: 44px; }
.rs-wip__sub { margin-top: 18px; }
@media (max-width: 480px) {
  .rs-wip .rs-actions .rs-btn { flex: 1 1 100%; }
}

/* ============================================================
   The five seconds before an order is sent.

   Nothing has been posted while this is on screen: the clock counts down,
   the facts are what is about to be bought, and Cancel order calls it off
   with nothing sent. Buttons stay 46px and the figures are tabular so the
   clock does not jump. Built by js/reseller.js next to the button that was
   pressed, one box per place that buys.
   ============================================================ */
.rs-hold {
  margin-top: 16px; padding: 14px; border-radius: 12px;
  background: var(--rs-tint); border: 1px solid var(--rs-tint-line);
}
.rs-hold__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs-hold__head strong { font-size: 15px; font-weight: 700; color: var(--rs-ink); }
.rs-hold__clock {
  min-width: 56px; min-height: 30px; padding: 3px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rs-card); border: 1px solid var(--rs-line);
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rs-ink);
}
.rs-hold__clock.is-urgent { color: var(--rs-warn); border-color: var(--rs-warn); }
.rs-hold.is-going .rs-hold__clock { color: var(--rs-soft); }
.rs-hold__lead { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--rs-soft); }
.rs-hold__facts { margin: 12px 0 0; display: grid; gap: 7px; }
.rs-hold__facts > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
}
.rs-hold__facts dt { font-size: 13.5px; color: var(--rs-soft); }
.rs-hold__facts dd {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--rs-ink);
  text-align: right; overflow-wrap: anywhere;
}
.rs-hold__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.rs-hold__acts .rs-btn { flex: 1 1 170px; min-height: 46px; font-size: 16px; }
.rs-hold__note { flex: 1 1 200px; font-size: 13.5px; line-height: 1.5; color: var(--rs-soft); }

/* ---- sharing the shop ----
   The link, a code a camera reads, and a line for each part of the shop so
   a seller can send a customer straight to it. One column on a phone; the
   code moves beside the link once there is width for it. */
.rs-share { margin-bottom: 22px; }
.rs-share__body { display: grid; gap: 18px; padding: 0 18px 4px; }
.rs-share__main { min-width: 0; }
.rs-share #sh_link {
  width: 100%; font-family: var(--rs-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 16px;
}
.rs-share__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rs-share__acts .rs-btn { flex: 1 1 auto; min-width: 140px; justify-content: center; }
.rs-share__qr {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 16px; border: 1px solid var(--rs-line, #e4e7eb); border-radius: 14px;
  background: #fff;
}
.rs-share__qr canvas { border-radius: 8px; display: block; }
.rs-share__qr .rs-field__hint { margin: 0; max-width: 28ch; }
.rs-share__parts { padding: 4px 18px 18px; }
.rs-share__h { margin: 14px 0 10px; font-size: 14px; font-weight: 700; }
.rs-share__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rs-share__row {
  display: grid; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--rs-line, #e4e7eb); border-radius: 12px; background: var(--rs-page, #f7f8fa);
}
.rs-share__name { font-size: 14.5px; font-weight: 700; }
.rs-share__url { font-size: 13px; overflow-wrap: anywhere; opacity: 0.85; }
.rs-share__rowacts { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-share__rowacts .rs-btn { flex: 1 1 96px; min-width: 96px; justify-content: center; }
@media (min-width: 720px) {
  .rs-share__body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px; }
  .rs-share__acts .rs-btn { flex: 0 0 auto; min-width: 0; }
  .rs-share__row { grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.6fr) auto; align-items: center; gap: 14px; }
  .rs-share__rowacts .rs-btn { flex: 0 0 auto; min-width: 0; }
}
.rs-share__qracts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---- shop chat ----
   Their own customers on the left, the conversation on the right. One
   column on a phone: the list, then the conversation under it. */
.rs-chatwrap { display: grid; gap: 16px; }
.rs-chatlist ul { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.rs-chatrow {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; text-align: left;
  width: 100%; display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--rs-line, #e4e7ec); background: var(--rs-card, #fff); color: inherit;
}
.rs-chatrow:hover { background: var(--rs-hover, #f2f5f9); }
.rs-chatrow.is-on { border-color: var(--rs-brand, #0164ce); background: var(--rs-tint, #eef5ff); }
.rs-chatrow__top { display: flex; align-items: center; gap: 8px; }
.rs-chatrow__top strong { font-size: 15px; }
.rs-chatrow__last { font-size: 13.5px; color: var(--rs-soft, #667085); overflow-wrap: anywhere; }
.rs-chatrow__when { font-size: 12px; color: var(--rs-soft, #667085); }
.rs-chatpane { display: flex; flex-direction: column; min-height: 420px; }
.rs-chatpane .rs-card__head--pad { display: flex; align-items: flex-start; gap: 12px; }
.rs-chatpane .rs-card__head--pad h3 { margin: 0; font-size: 16px; }
.rs-chatpane .rs-card__head--pad .rs-btn { margin-left: auto; }
.rs-chatmsgs {
  flex: 1 1 auto; min-height: 240px; max-height: 420px; overflow-y: auto;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--rs-page, #f4f6fa);
}
.rs-chatmsg { max-width: 78%; align-self: flex-start; }
.rs-chatmsg p {
  margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 15px;
  background: var(--rs-card, #fff); border: 1px solid var(--rs-line, #e4e7ec); overflow-wrap: anywhere;
}
.rs-chatmsg span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--rs-soft, #667085); }
.rs-chatmsg.is-mine { align-self: flex-end; }
.rs-chatmsg.is-mine p { background: var(--rs-brand, #0164ce); border-color: transparent; color: #fff; border-radius: 16px 16px 4px 16px; }
.rs-chatmsg.is-mine span { text-align: right; }
.rs-chatwrite { display: flex; align-items: flex-end; gap: 10px; padding: 12px 18px 18px; }
.rs-chatwrite textarea {
  flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 140px; resize: none; font: inherit; font-size: 16px;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--rs-line, #e4e7ec);
}
/* Send sits in a row, not at the end of a form. .rs-btn--go is width 100%
   with a 16px top margin, which is right under a sign-in form and wrong
   here: inside this flex row it took every pixel the textarea was not
   using, so the reply box was a stub and Send was the width of the panel.
   The owner circled it, 10 Oct 2026. */
.rs-chatwrite .rs-btn--go {
  width: auto; flex: 0 0 auto; margin-top: 0;
  min-height: 46px; padding: 0 24px; font-size: 15px;
}
/* On a phone the words matter less than the room: the row keeps the box
   wide and Send shrinks to what it needs. */
@media (max-width: 520px) {
  .rs-chatwrite { gap: 7px; padding: 10px 12px 14px; }
  .rs-chatwrite .rs-btn--go { padding: 0 16px; }
}
@media (min-width: 900px) {
  .rs-chatwrap { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
}
.rs-chatmsg.has-piece p { margin-top: 6px; }
.rs-chatmsg__sticker { display: block; width: 88px; height: 88px; color: var(--rs-brand, #0164ce); }
.rs-chatmsg.is-mine .rs-chatmsg__sticker { color: #fff; margin-left: auto; }
.rs-chatmsg__sticker svg { width: 100%; height: 100%; }
.rs-chatmsg__pic img { display: block; max-width: 220px; border-radius: 14px; }
.rs-chatmsg__audio { width: 220px; max-width: 100%; }
.rs-chatmsg__video { max-width: 220px; border-radius: 14px; display: block; }
.rs-chatmsg__file {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--rs-card, #fff); border: 1px solid var(--rs-line, #e4e7ec); text-decoration: none; color: inherit; font-size: 14.5px;
}
.rs-chatmsg__file small { margin-left: auto; color: var(--rs-brand, #0164ce); font-weight: 700; }
.rs-chatstaged { margin: 0; padding: 0 18px 8px; }
.rs-chatstickers {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px 18px;
  border-top: 1px solid var(--rs-line, #e4e7ec);
}
.rs-chatstickers button {
  appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: none;
  padding: 6px; border-radius: 10px; color: var(--rs-brand, #0164ce);
}
.rs-chatstickers button:hover { background: var(--rs-tint, #eef5ff); }
.rs-chatstickers svg { width: 100%; height: auto; display: block; }
.rs-chatwrite .rs-iconbtn.is-on { background: var(--rs-bad-bg, #fdeceb); color: var(--rs-bad, #b42318); }
@media (max-width: 480px) { .rs-chatstickers { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   Signed out, in the shape the owner sent.
   Neural Access Login (Shivendra Kumar, 21st.dev): a dark stage with a
   liquid of soft blobs drifting behind the form, underlined fields that
   step aside when they take focus, a heavy headline, one white pill of a
   button. The liquid is drawn by js/reseller-mercury.js.

   Carried over, not copied: the words stay this site's own and in sentence
   case, the fields keep their 16px so an iPhone does not zoom, and every id
   js/reseller.js reads is untouched, so signing in works exactly as before.
   The stage is this site's own sky blue, the same band the screen has
   always stood on, whichever theme the dashboard is in: it is one screen
   with its own weather, not the dashboard, and it wears the brand.
   ============================================================ */
/* html and body wear the blue whenever a signed-out screen is showing, so
   the colour reaches the top and bottom of a phone's screen under the
   browser's bars and past any bounce. Without this the page's own light
   background showed as a pale band below the form. */
html:has(.rs-auth:not([hidden])), body:has(.rs-auth:not([hidden])) { background: #0164ce; }
.rs-auth {
  background: linear-gradient(160deg, #0059c4 0%, #0164ce 55%, #0375d7 100%);
  color: #fff;
  place-items: center;
  padding: 32px 20px calc(40px + env(safe-area-inset-bottom, 0px));
}
.rs-auth::before { display: none; }

.rs-mercury {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  filter: url("#rsGooey");
  opacity: .6;
  pointer-events: none;
}
.rs-mercury__blob {
  position: absolute;
  border-radius: 50%;
  /* White liquid with a little of the lighter blue in it, so it sits in
     the brand rather than on top of it. */
  background: linear-gradient(135deg, #ffffff, #9ccaf7);
  filter: blur(20px);
  box-shadow: inset -10px -10px 20px rgba(0, 47, 110, .35), 10px 10px 30px rgba(255, 255, 255, .25);
  animation: rs-mercury-float 20s infinite alternate ease-in-out;
  transition: margin .1s ease-out;
}
@keyframes rs-mercury-float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10vw, 20vh) scale(1.2); }
  66% { transform: translate(-5vw, 10vh) scale(.8); }
  100% { transform: translate(5vw, -10vh) scale(1.1); }
}
.rs-mercury__filter { position: absolute; width: 0; height: 0; overflow: hidden; }

.rs-auth__card {
  position: relative; z-index: 2;
  max-width: 440px; padding: 40px 24px;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
[data-theme="dark"] .rs-auth__card { box-shadow: none; }

/* Brand line: the mark, then a quiet mono eyebrow the way the example
   sets its "system node" line, in this site's own words. */
.rs-auth__brand { margin: 0 0 34px; color: #fff; }
.rs-auth__brand .rs-brand__text strong { color: #fff; }
.rs-auth__brand .rs-brand__text span {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .32em; color: rgba(255, 255, 255, .7);
}

.rs-auth__tabs { margin-bottom: 28px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.rs-auth__tabs button { color: rgba(255, 255, 255, .8); }
.rs-auth__tabs button.is-on { background: #fff; border-color: #fff; color: #0059c4; }

.rs-auth__title {
  margin: 0 0 10px;
  font-family: var(--font-heading, "Space Grotesk", "Inter", sans-serif);
  font-size: 44px; font-weight: 800; line-height: .95; letter-spacing: -.03em;
  color: #fff;
}
.rs-auth__lede { margin: 0 0 36px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

/* The fields: a line under each, a label in mono above, and the whole
   field stepping aside when it takes focus. The glow along the line is
   the field's own ::after, so no extra markup was needed. */
.rs-auth .rs-field { position: relative; margin-bottom: 28px; transition: transform .4s cubic-bezier(.2, 1, .3, 1); }
.rs-auth .rs-field:focus-within { transform: translateX(10px); }
.rs-auth .rs-field label {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 400; letter-spacing: .12em; margin-bottom: 10px;
  color: rgba(255, 255, 255, .72);
}
.rs-auth .rs-field input, .rs-auth .rs-pw {
  background: transparent; color: #fff;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); border-radius: 0;
  padding: 12px 0; font-size: 18px;
  transition: border-color .4s;
}
.rs-auth .rs-pw { padding: 0; }
.rs-auth .rs-pw input { border: 0; padding: 12px 0; }
.rs-auth .rs-field input::placeholder { color: rgba(255, 255, 255, .45); }
.rs-auth .rs-field input:focus { outline: none; }
.rs-auth .rs-field::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, .9);
  transition: width .6s cubic-bezier(.2, 1, .3, 1);
}
.rs-auth .rs-field:focus-within::after { width: 100%; }
/* A field carrying a hint has the hint under the line: the glow stays on
   the line itself. */
.rs-auth .rs-field:has(.rs-field__hint)::after { bottom: auto; top: calc(100% - 1.7em - 8px); }
.rs-auth .rs-field__hint { color: rgba(255, 255, 255, .66); margin-top: 8px; }
.rs-auth .rs-field input[aria-invalid="true"] { border-bottom-color: #ffb4a8; }
.rs-auth .rs-pw__eye { color: rgba(255, 255, 255, .78); background: transparent; border: 0; }
.rs-auth .rs-pw__eye:hover { color: #fff; }

/* The button: white, heavy, spaced, and swelling a touch under the
   pointer, the way the example's mercury drop does. */
.rs-auth .rs-btn--go {
  position: relative; isolation: isolate;
  margin-top: 40px; min-height: 56px;
  background: transparent; color: #0059c4; border: 0;
  font-size: 14px; font-weight: 800; letter-spacing: .14em;
  transition: letter-spacing .3s;
}
.rs-auth .rs-btn--go::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50px;
  background: #fff;
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), filter .5s;
}
.rs-auth .rs-btn--go:hover { letter-spacing: .28em; }
.rs-auth .rs-btn--go:hover::before { transform: scale(1.04, 1.16); filter: brightness(1.1); }
.rs-auth .rs-btn--go:disabled { opacity: .6; }

.rs-auth__foot { margin-top: 36px; padding-top: 0; border-top: 0; }
.rs-auth__foot .rs-link {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .72);
  transition: color .3s;
}
.rs-auth__foot .rs-link:hover { color: #fff; }

/* Words from the server, on the dark stage. */
.rs-auth .rs-note { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.rs-auth .rs-err { color: #ffd1c9; }

@media (max-width: 560px) {
  .rs-auth { place-items: center stretch; padding: 28px 20px calc(36px + env(safe-area-inset-bottom, 0px)); }
  .rs-auth__card { padding: 24px 0 8px; }
  .rs-auth__title { font-size: 36px; }
  .rs-auth .rs-field:focus-within { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-mercury__blob { animation: none; transition: none; }
  .rs-auth .rs-field, .rs-auth .rs-btn--go, .rs-auth .rs-btn--go::before { transition: none; }
}

/* ---- Developer page: access hero, credential note, quick-start rows ----
   The hero mirrors the "API access approved" card resellers see on other
   panels: a mark, a title with a live status, and a shortcut to the docs. */
.rs-devhero {
  display: flex; align-items: flex-start; gap: 16px;
  border-top: 3px solid var(--rs-ok);
}
.rs-devhero__mark {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--rs-ok-bg); color: var(--rs-ok);
}
.rs-devhero__mark svg { width: 22px; height: 22px; }
.rs-devhero__body { flex: 1 1 auto; min-width: 0; }
.rs-devhero__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-devhero__title h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.rs-devhero__lede { margin: 6px 0 0; font-size: 14px; color: var(--rs-soft); }
.rs-devhero__lede code { font-weight: 600; color: var(--rs-ink); word-break: break-all; }
.rs-devhero__docs { flex: none; }

.rs-btn--danger { background: transparent; color: var(--rs-bad); border-color: var(--rs-bad); }
.rs-btn--danger:hover { background: var(--rs-bad-bg); }

/* Quick-start rows: a label, the value as code, a copy button. */
.rs-qs { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.rs-qs__row {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 13px; border-radius: 11px; background: var(--rs-tint); border: 1px solid var(--rs-tint-line);
}
.rs-qs__k { font-size: 12px; font-weight: 600; color: var(--rs-soft); text-transform: none; }
.rs-qs__v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  color: var(--rs-ink); word-break: break-all; min-width: 0;
}
@media (max-width: 620px) {
  .rs-devhero { flex-wrap: wrap; }
  .rs-devhero__docs { order: 3; }
  .rs-qs__row { grid-template-columns: 1fr auto; }
  .rs-qs__k { grid-column: 1 / -1; }
}

/* Shop-chat: edit / delete a message the owner sent. */
.rs-chatmsg { position: relative; }
.rs-chatmsg__tools { display: none; gap: 8px; margin-top: 4px; justify-content: flex-end; }
.rs-chatmsg.is-mine:hover .rs-chatmsg__tools,
.rs-chatmsg.is-mine:focus-within .rs-chatmsg__tools { display: flex; }
.rs-chatmsg__tool { border: 0; background: none; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--rs-soft, #667085); cursor: pointer; }
.rs-chatmsg__tool:hover { color: var(--rs-brand, #0164ce); text-decoration: underline; }
.rs-chatmsg.is-deleted p.rs-chatmsg__gone { background: transparent; border: 1px dashed var(--rs-line, #d7dbe3); color: var(--rs-soft, #667085); font-style: italic; }
.rs-chatmsg.is-mine.is-deleted p.rs-chatmsg__gone { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.5); }
.rs-chatedit { width: 100%; min-width: 220px; border: 1.5px solid var(--rs-brand, #0164ce); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; }
.rs-chatedit__acts { display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.rs-btn--small { padding: 5px 12px; font-size: 12.5px; }

/* On touch, where there is no hover, the tools always show under own bubbles. */
@media (hover: none) { .rs-chatmsg.is-mine .rs-chatmsg__tools { display: flex; } }

/* ===== Store notifications (bell) + chat button effect ===== */
.rs-bell-wrap { position: relative; }
.rs-bell { position: relative; }
.rs-bell__dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; border: 2px solid var(--rs-surface, #fff); }
.rs-bell.has-new svg { animation: rsBellSwing 1.6s ease-in-out infinite; transform-origin: 50% 12%; }
@keyframes rsBellSwing { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(12deg); } 80% { transform: rotate(-9deg); } 90% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .rs-bell.has-new svg { animation: none; } }

.rs-bell-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, 92vw); background: var(--rs-surface, #fff); border: 1px solid var(--rs-line, #e5eaf2); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(6,22,58,.5); z-index: 60; overflow: hidden; }
.rs-bell-panel[hidden] { display: none; }
.rs-bell-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--rs-line, #e5eaf2); }
.rs-bell-panel__head strong { font-size: 14.5px; }
.rs-bell-panel__head button { border: 0; background: none; color: var(--rs-brand, #0164ce); font-size: 12px; font-weight: 700; cursor: pointer; }
.rs-bell-list { max-height: 380px; overflow-y: auto; }
/* Every notification opens the list it belongs to now, so they all behave
   like the chat line always did: pointer, hover, and a press that gives. */
.rs-bell-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rs-line, #eef1f6); background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; transition: background 160ms cubic-bezier(.22,.61,.36,1), transform 160ms cubic-bezier(.22,.61,.36,1); }
.rs-bell-item:hover { background: color-mix(in srgb, var(--rs-brand, #0164ce) 8%, transparent); }
.rs-bell-item:active { transform: scale(.99); }
.rs-bell-item:focus-visible { outline: 2px solid var(--rs-brand, #0164ce); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .rs-bell-item { transition: none; } .rs-bell-item:active { transform: none; } }
.rs-bell-item__body { min-width: 0; }
.rs-bell-item__body strong { display: block; font-size: 13px; color: var(--rs-ink, #0b1220); }
.rs-bell-item__body span { display: block; font-size: 12px; color: var(--rs-soft, #667085); }
.rs-bell-item.is-chat .rs-bell-item__body strong { color: var(--rs-brand, #0164ce); }
.rs-bell-empty { padding: 26px 16px; text-align: center; color: var(--rs-soft, #667085); font-size: 13px; margin: 0; }

/* The Shop chat menu item rings while messages wait. */
.rs-nav__item.rs-chat-ring { position: relative; }
.rs-nav__item.rs-chat-ring::after { content: ""; position: absolute; inset: 2px; border-radius: 10px; box-shadow: 0 0 0 0 rgba(1,100,206,.5); animation: rsChatRing 1.8s ease-out infinite; pointer-events: none; }
@keyframes rsChatRing { 0% { box-shadow: 0 0 0 0 rgba(1,100,206,.45); } 70% { box-shadow: 0 0 0 8px rgba(1,100,206,0); } 100% { box-shadow: 0 0 0 0 rgba(1,100,206,0); } }
@media (prefers-reduced-motion: reduce) { .rs-nav__item.rs-chat-ring::after { animation: none; } }

/* ---- Developer screen: credentials and quick start sit side by side, the
   way a developer reads them — the key on the left, what to do with it on
   the right. One column again on a narrow screen. ---- */
.rs-devgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.rs-devgrid > .rs-card { margin: 0; }
@media (max-width: 900px) { .rs-devgrid { grid-template-columns: 1fr; } }

/* A secret shown masked until asked for, with its own copy button. */
.rs-secret { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rs-secret input {
  flex: 1 1 220px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
}
/* The webhook card's head carries its state and its test button, so the
   state of the integration reads at a glance. */
.rs-whhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-whhead h2 { margin: 0; }
.rs-whhead__tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* The event list is long and rarely changed, so it folds away. */
.rs-events-fold > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 0;
  list-style: none;
}
.rs-events-fold > summary::-webkit-details-marker { display: none; }
.rs-events-fold > summary::before { content: "▸ "; }
.rs-events-fold[open] > summary::before { content: "▾ "; }

/* ---- today's price list ----
   Added 4 Oct 2026. A data seller posts their prices every morning and used
   to type them out by hand. This is built from the prices already on their
   own shop, so it cannot drift from what the shop charges. The block is a
   <pre> on purpose: what they copy is exactly what they see, line breaks
   and all, which is what makes it paste cleanly into WhatsApp. */
.rs-pricekit__nets { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-pricekit__nets .rs-chip {
  appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit;
  border: 1px solid var(--rs-line, #e5eaf2); background: #fff; color: var(--rs-ink, #0b1220);
}
.rs-pricekit__nets .rs-chip.is-on {
  background: var(--rs-tint, #eaf3ff); border-color: #bcd8fb; color: #0059c4;
}
.rs-pricekit__text {
  margin: 12px 0 0; padding: 14px 15px;
  background: #f7f9fc; border: 1px solid var(--rs-line, #e5eaf2); border-radius: 12px;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--rs-ink, #0b1220);
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto;
}
.rs-pricekit__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---- the shop's header background: borrowing one of the owner's --------
   Added 8 Oct 2026. A reseller can take a background the owner has already
   put up instead of hunting for a link of their own. */
.shm-ours { display: grid; gap: 6px; margin-top: 10px; max-height: 240px; overflow: auto; }
.shm-ours__pick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; border: 1px solid var(--rs-line, rgba(15, 23, 42, .12));
  border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.shm-ours__pick:hover { border-color: var(--rs-brand, #0164ce); }
.shm-ours__pick em { font-style: normal; font-size: 12px; opacity: .65; }

/* ---- the sales board and the customer list ------------------------------
   Added 8 Oct 2026. Drawn with bars rather than a charting library: this
   panel is read on a phone on mobile data, and a chart library is 80KB to
   say what a div can. */
.sb-chart { display: flex; align-items: flex-end; gap: 4px; height: 128px; margin: 14px 0 6px; }
.sb-bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; height: 100%; }
.sb-bar i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--rs-brand, #0164ce); opacity: .85; }
.sb-bar em { font-style: normal; font-size: 10px; color: var(--rs-muted, #64748b); white-space: nowrap; }
.sb-two { display: grid; gap: 18px; margin-top: 16px; }
@media (min-width: 760px) { .sb-two { grid-template-columns: 1fr 1fr; } }
.sb-h { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; }
.sb-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.sb-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row__bar { height: 8px; border-radius: 999px; background: rgba(127, 127, 127, .16); overflow: hidden; }
.sb-row__bar i { display: block; height: 100%; border-radius: 999px; background: var(--rs-brand, #0164ce); }
.sb-row__val { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--rs-muted, #64748b); }

.bz-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rs-line, rgba(15, 23, 42, .1)); }
.bz-row:last-child { border-bottom: 0; }
.bz-who { display: grid; gap: 2px; min-width: 0; }
.bz-who strong { font-variant-numeric: tabular-nums; }
.bz-who span { font-size: 12px; color: var(--rs-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-tag { font-style: normal; font-size: 10.5px; font-weight: 700; color: #047857; }
.bz-figs { display: grid; gap: 2px; justify-items: end; font-size: 12px; color: var(--rs-muted, #64748b); }
.bz-figs strong { font-size: 13.5px; color: inherit; font-variant-numeric: tabular-nums; }
.bz-when { font-size: 11.5px; }
.rs-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; }
@media (max-width: 520px) {
  .bz-row { grid-template-columns: 1fr auto; }
  .bz-row .rs-btn { grid-column: 2; }
}

/* The page held still while something is open on top of it. overflow:
   hidden alone is ignored by iOS Safari, which is why the panel behind a
   drawer still scrolled under the thumb. See js/scroll-lock.js. */
body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body:not(.scroll-locked) { top: 0 !important; }

/* Pricing a whole network in one go. It fills the boxes; Save is still
   theirs to press. */
.rs-margin { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rs-line, rgba(15, 23, 42, .1)); font-size: 13px; }
.rs-margin label { color: var(--rs-muted, #64748b); }
.rs-margin__n { width: 86px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--rs-line, rgba(15, 23, 42, .12)); font: inherit; }
.rs-margin__how { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--rs-line, rgba(15, 23, 42, .12)); font: inherit; background: transparent; color: inherit; }
.rs-margin__note { font-size: 12px; color: var(--rs-muted, #64748b); flex: 1 1 100%; }
@media (max-width: 520px) { .rs-margin { gap: 6px; } .rs-margin__n { width: 72px; } }

/* ============================================================
   My customers, What I make, Alerts and Devices (9 Oct 2026).

   One row shape for all four, because they are all the same thing: a
   line that names something on the left, carries its figures in the
   middle, and whatever can be done to it on the right. It wraps into a
   stack on a phone rather than scrolling sideways.
   ============================================================ */
.rs-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--rs-line);
}
.rs-row:last-child { border-bottom: 0; }
.rs-row strong { display: block; font-size: 14.5px; }

.rs-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.rs-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.rs-toolbar select { flex: 0 0 auto; }

.bk-row__who { flex: 1 1 200px; min-width: 0; }
/* The number and the note are two facts, not one sentence: without this
   they ran together as "0551111111 Buys every Friday". */
.bk-row__who .rs-hint--flat { display: block; }
.bk-row__figures { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--rs-soft); }
.bk-row__figures strong { display: inline; color: var(--rs-ink, inherit); }
.bk-row__acts { display: flex; flex-wrap: wrap; gap: 8px; }

.mg-row__what { flex: 1 1 200px; min-width: 0; }
.mg-row__figures { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--rs-soft); font-variant-numeric: tabular-nums; }
.mg-row__figures strong { display: inline; }
.mg-good strong { color: #117f3a; }
.mg-bad strong { color: var(--rs-bad, #b42318); }

/* The month against their target. Drawn here rather than loaded: it is
   one bar, and this panel is read on a phone. */
.mg-bar { height: 10px; border-radius: 999px; background: var(--rs-line); overflow: hidden; }
.mg-bar i { display: block; height: 100%; border-radius: 999px; background: var(--rs-brand); }

.dv-row > div:first-child { flex: 1 1 200px; min-width: 0; }

@media (max-width: 560px) {
  .rs-row { align-items: flex-start; }
  .bk-row__acts, .dv-row > div:last-child { flex: 1 1 100%; }
  .bk-row__acts .rs-btn { flex: 1 1 auto; }
}

/* ---- Group chat, the reseller's side -----------------------------------
   One room at a time, inside the same card as the one to one support chat.

   Which half is on screen is decided HERE, by a class on the card, not by
   JavaScript walking the children and setting `hidden` on each. The first
   version did that and hid a container that does not exist, so the support
   chat stayed on screen underneath the room and a reseller could type into
   the wrong one. A rule either matches or it does not, and it is readable
   months later. */
.rs-chat.is-group > .rs-chat__head,
.rs-chat.is-group > #chatPick,
.rs-chat.is-group > #chatThreads,
.rs-chat.is-group > #chatOrderCard,
.rs-chat.is-group > #chatMessages,
.rs-chat.is-group > #chatComposer { display: none !important; }

/* The room's own head carries the room name, the chooser and the way back. */
#rgPanel > .rs-chat__head { gap: 10px; flex-wrap: wrap; }
#rgPanel #rgTitle { font-size: 15px; font-weight: 700; color: var(--rs-ink); flex: 1 1 auto; }
#rgPick {
  font: inherit; font-size: 14px; color: var(--rs-ink); background: var(--rs-page);
  border: 1px solid var(--rs-line); border-radius: 10px; padding: 7px 10px; max-width: 46%;
}
#rgNote { margin: 0; padding: 0 16px 10px; }
#rgComposer { padding: 8px 12px 12px; border-top: 1px solid var(--rs-line); }

/* Who said it. A one to one chat never needs a name on a bubble and a room
   always does, or a broadcast from the shop reads like a reseller talking. */
.rg-who {
  display: block; margin-bottom: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--rs-brand);
}
.chat-msg--customer .rg-who { color: inherit; opacity: .8; }

/* The unread count on the Group button, and the same ring the waiting one
   to one chat already puts on the menu, so a message is noticed from
   anywhere in the panel. */
#rgOpen .rs-chip { margin-left: 6px; }

@media (max-width: 720px) {
  #rgComposer { padding: 8px 12px 12px; }
  #rgPick { max-width: 100%; order: 3; flex: 1 1 100%; }
}

/* ---- the assistant ----
   Three jobs the owner can switch on per shop. The list says which are on
   BEFORE anything is typed, because every question is billed to him and a
   reseller who is refused after typing reads it as broken. */
.rs-ailist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rs-ailist li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; border-radius: 11px; background: var(--rs-tint); font-size: 14px;
}
.rs-ailist li span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; background: #e7f4ec; color: #1c7a43;
}
.rs-ailist li.is-off { opacity: .66; }
.rs-ailist li.is-off span { background: var(--rs-bad-bg); color: #8a2f27; }
.rs-ailist__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.rs-ask {
  appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; min-height: 36px;
  border: 1px solid var(--rs-line); background: var(--rs-card); color: inherit;
}
.rs-ask:hover { border-color: #0164ce; color: #0164ce; }
.rs-ai__draft { margin: 0 0 12px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; }
.rs-aithread {
  max-height: 340px; overflow-y: auto; display: grid; gap: 8px;
  margin: 0 0 14px; padding: 12px; border-radius: 12px; background: var(--rs-tint);
}
.rs-aimsg {
  max-width: 86%; padding: 10px 13px; border-radius: 13px;
  background: var(--rs-card); border: 1px solid var(--rs-line);
  font-size: 14.5px; line-height: 1.55; justify-self: start;
}
.rs-aimsg--mine { justify-self: end; background: #0164ce; border-color: transparent; color: #fff; }
.rs-aimsg--wait { opacity: .6; }
.rs-aimsg--wait::after { content: "."; animation: rs-aidots 1.1s steps(4, end) infinite; }
@keyframes rs-aidots { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .rs-aimsg--wait::after { animation: none; } }
.rs-aiactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The last cell of a row, where its one action sits. Right aligned so the
   buttons line up down the table instead of wandering with the text. */
.rs-rowend { text-align: right; white-space: nowrap; }