/* ==========================================================================
   components.css — SMM Panel component layer
   Load AFTER /app-assets/ Bootstrap 4 + Vuexy stylesheets and after theme.css.
   Everything is scoped tightly enough to override the template without !important
   except where Vuexy uses over-specific selectors (marked inline).
   ========================================================================== */

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
body.vertical-layout {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
/* Reading measure applies to prose contexts only — never to <p>-based components. */
.smm-page-head > p:not([class]),
.smm-card__body > p:not([class]),
.smm-acc__panel p:not([class]),
.smm-modal__body > p:not([class]),
.smm-modal__state p:not([class]),
.smm-prose p:not([class]) { max-width: 68ch; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-3);
  color: var(--ink);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
small, .u-meta { font-size: var(--fs-sm); color: var(--ink-muted); }
strong, b { font-weight: var(--fw-bold); }
hr { border: 0; border-top: var(--border-w) solid var(--border); margin: var(--s-5) 0; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2.5px; }

.u-num, .u-money, td.u-num, th.u-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: var(--font-num);
  letter-spacing: -0.01em;
}
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- Icons (sprite) ----------------------------------------------------- */
/* Never the target of a click. Every one of these is written by smm_icon() with
   aria-hidden="true" — decoration inside a button or a link, never a control in
   its own right. Left interactive, an ICON-ONLY button hands every tap to the
   <svg>/<use> inside it instead of to the button, and any handler that asks the
   target for .closest() gets nothing back on the browsers where SVGElement does
   not carry it. The button then does nothing at all, and only on the controls
   that have no text label to catch the tap instead. */
.smm-i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.smm-i--sm { width: 18px; height: 18px; }
.smm-i--lg { width: 26px; height: 26px; }
.smm-i--xl { width: 36px; height: 36px; }
.smm-i--brand { width: 24px; height: 24px; color: var(--ink-muted); }

/* ---- Focus: one visible high-contrast ring everywhere ------------------- */
:focus { outline: none; }
:focus-visible,
.smm-focus {
  outline: var(--ring-w) solid var(--focus);
  outline-offset: var(--ring-offset);
  border-radius: var(--r-sm);
}
/* Vuexy zeroes outlines on .btn / .form-control */
.btn:focus-visible, .form-control:focus-visible,
a:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: var(--ring-w) solid var(--focus) !important;
  outline-offset: var(--ring-offset) !important;
  box-shadow: none !important;
}

/* ---- Scrollbars: refined, still easy to grab (10px) -------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border: 2px solid transparent;      /* inset the thumb … */
  background-clip: padding-box;       /* … without a painted track */
  border-radius: var(--r-pill);
  min-height: 44px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   Layout shell
   ========================================================================== */
.smm-shell { min-height: 100vh; display: flex; flex-direction: column; }
.smm-body { display: flex; flex: 1; min-height: 0; }

.smm-main {
  flex: 1; min-width: 0;
  padding: var(--s-5) var(--s-4) var(--s-9);
}
.smm-wrap { max-width: var(--content-max); margin: 0 auto; }

.smm-page-head { margin-bottom: var(--s-5); }
.smm-page-head h1 { margin-bottom: var(--s-2); }
.smm-page-head p { color: var(--ink-muted); margin: 0; }

@media (min-width: 992px) {
  .smm-main { padding: var(--s-6) var(--s-6) var(--s-10); }
}

/* ---- Top bar ------------------------------------------------------------ */
.smm-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--topbar-h);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--border);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}
.smm-topbar__right { flex-wrap: wrap; justify-content: flex-end; }
.smm-topbar__brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: var(--fw-bold); font-size: var(--fs-md);
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
}
.smm-topbar__brand:hover { color: var(--ink); text-decoration: none; }
.smm-topbar__mark {
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-weight: var(--fw-bold); font-size: 15px;
}
.smm-topbar__spacer { flex: 1; }
.smm-topbar__right { display: flex; align-items: center; gap: var(--s-3); }

.smm-balance {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: var(--border-w) solid var(--accent-border);
  color: var(--accent-text);
  white-space: nowrap;
}
.smm-balance__label { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.smm-balance__value { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; font-family: var(--font-num); }

.smm-user {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: none;
  border: var(--border-w) solid transparent; color: var(--ink);
  font: inherit; cursor: pointer;
}
.smm-user:hover { background: var(--surface-3); }
.smm-user__avatar {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface-3); border: var(--border-w) solid var(--border);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.smm-user__name { font-weight: var(--fw-med); }
@media (max-width: 700px) { .smm-user__name { display: none; } }

/* ---- Theme switcher (segmented) ---------------------------------------- */
.smm-themes {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-md);
}
.smm-themes__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; min-width: 44px; padding: 0 var(--s-3);
  border: var(--border-w) solid transparent; border-radius: var(--ctl-r);
  background: none; color: var(--ink-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-med);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.smm-themes__btn:hover { background: var(--surface-3); color: var(--ink); }
.smm-themes__btn[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-strong); box-shadow: var(--shadow-1);
}
.smm-themes__btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) { .smm-themes__btn span { display: none; } .smm-themes__btn { padding: 0 var(--s-2); } }

/* ---- Sidebar ----------------------------------------------------------- */
.smm-sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--surface);
  border-right: var(--border-w) solid var(--border);
  padding: var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.smm-sidebar__label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); padding: var(--s-3) var(--s-3) var(--s-1);
}
#main-menu-navigation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
#main-menu-navigation > li > a,
.smm-nav__link {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-base); font-weight: var(--fw-med);
  border: var(--border-w) solid transparent;
  transition: background var(--dur-fast) var(--ease);
}
#main-menu-navigation > li > a:hover, .smm-nav__link:hover {
  background: var(--surface-3); color: var(--ink); text-decoration: none;
}
#main-menu-navigation > li.active > a,
.smm-nav__link[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-text);
  border-color: var(--accent-border); font-weight: var(--fw-bold);
  box-shadow: none;
}
.smm-nav__link svg { width: 22px; height: 22px; flex: none; }
.smm-nav__badge {
  margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--prog-bg); color: var(--prog-ink);
  border: var(--border-w) solid var(--prog-bd);
  font-variant-numeric: tabular-nums;
}

/* Mobile: sidebar becomes an off-canvas sheet */
.smm-sidebar__toggle {
  display: none; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.smm-sidebar__scrim { display: none; }
@media (max-width: 991px) {
  .smm-sidebar__toggle { display: inline-flex; }
  .smm-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    z-index: 80; width: min(320px, 88vw);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-3);
  }
  .smm-shell[data-nav="open"] .smm-sidebar { transform: none; }
  .smm-shell[data-nav="open"] .smm-sidebar__scrim {
    display: block; position: fixed; inset: 0; z-index: 70; background: var(--scrim);
  }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.smm-card, .card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--s-5);
}
.smm-card__head, .card-header {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--border-w) solid var(--border);
  background: none;
}
.smm-card__head h2, .smm-card__head h3 { margin: 0; font-size: var(--fs-lg); }
.smm-card__sub { width: 100%; margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.smm-card__body, .card-body { padding: var(--s-5); }
.smm-card__foot {
  padding: var(--s-4) var(--s-5);
  border-top: var(--border-w) solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
}
.smm-card__foot > p { margin: 0 0 0 auto; max-width: 34ch; text-align: right; }
@media (max-width: 599px) {
  .smm-card__foot { flex-direction: column; align-items: stretch; }
  .smm-card__foot > .smm-btn { width: 100%; }
  .smm-card__foot > p { margin: 0; text-align: left; max-width: none; }
}
@media (max-width: 575px) {
  .smm-card__head, .card-header, .smm-card__body, .card-body, .smm-card__foot { padding: var(--s-4); }
}

.smm-stat {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-1);
}
.smm-stat__label { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-muted); margin: 0 0 var(--s-1); }
.smm-stat__value {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.1;
  font-variant-numeric: tabular-nums; font-family: var(--font-num); letter-spacing: -0.02em;
}
.smm-grid { display: grid; gap: var(--s-4); }
.smm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.smm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ==========================================================================
   Buttons — min 48px tall, 44px absolute floor
   ========================================================================== */
.smm-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap-min);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-md);
  border: var(--border-w) solid transparent;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-med);
  line-height: 1.25; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.smm-btn:disabled, .btn:disabled, .smm-btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none;
}
.smm-btn svg { width: 20px; height: 20px; flex: none; }

.smm-btn--primary, .btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: var(--fw-bold); box-shadow: var(--shadow-1);
}
.smm-btn--primary:hover, .btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink);
}
.smm-btn--primary:active, .btn-primary:active { background: var(--accent-active); }

.smm-btn--secondary, .btn-secondary, .btn-outline-primary {
  background: var(--surface); border-color: var(--border-strong); color: var(--ink);
}
.smm-btn--secondary:hover, .btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--surface-3); border-color: var(--ink-muted); color: var(--ink);
}

.smm-btn--ghost {
  background: none; border-color: transparent; color: var(--accent-text); text-decoration: none;
}
.smm-btn--ghost:hover { background: var(--accent-soft); color: var(--accent-text); }

.smm-btn--danger, .btn-danger {
  background: var(--canc-ink); border-color: var(--canc-ink); color: #FFFFFF; font-weight: var(--fw-bold);
}
.smm-btn--danger:hover, .btn-danger:hover { filter: brightness(0.9); color: #FFFFFF; }

.smm-btn--lg { min-height: 56px; font-size: var(--fs-md); padding: var(--s-3) var(--s-6); }
.smm-btn--sm { min-height: var(--tap-min); padding: 0 var(--s-4); font-size: var(--fs-sm); }
.smm-btn--block { width: 100%; }
.smm-btn--icon { padding: 0; width: var(--tap); flex: none; }
.smm-btn--sm.smm-btn--icon { width: var(--tap-min); }
/* Button rows: one flex row, gap-spaced, wrapping as a unit. */
.smm-btn-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.smm-btn-row--end { justify-content: flex-end; }
.smm-btn-row__note { margin: 0 0 0 auto; max-width: 34ch; text-align: right; }
@media (max-width: 599px) {
  .smm-btn-row { flex-direction: column; align-items: stretch; }
  .smm-btn-row > .smm-btn { width: 100%; }
  .smm-btn-row__note { margin: 0; text-align: left; max-width: none; }
}

/* ==========================================================================
   Forms — 17px labels, 16px+ inputs (no iOS zoom)
   ========================================================================== */
.smm-field { margin-bottom: var(--s-5); }
.smm-label, label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-base); font-weight: var(--fw-med); color: var(--ink);
}
.smm-hint {
  margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5;
}
.smm-required { color: var(--canc-ink); font-weight: var(--fw-bold); }

.smm-input, .smm-select, .smm-textarea,
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  display: block; width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px; /* ≥16px: iOS will not zoom */
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
textarea, .smm-textarea { min-height: 140px; resize: vertical; line-height: var(--lh-body); }
.smm-input::placeholder, .form-control::placeholder, textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.smm-input:hover, .form-control:hover { border-color: var(--ink-muted); }
.form-control:focus, .smm-input:focus, textarea:focus, select:focus {
  border-color: var(--accent); background: var(--surface);
}
.smm-input:disabled, .form-control:disabled { background: var(--surface-2); color: var(--ink-muted); cursor: not-allowed; }

.smm-input-affix { position: relative; display: flex; align-items: stretch; }
.smm-input-affix__prefix {
  display: grid; place-items: center; padding: 0 var(--s-4);
  background: var(--surface-2);
  border: var(--border-w) solid var(--border-strong); border-right: 0;
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-weight: var(--fw-bold); color: var(--ink-muted); font-size: var(--fs-md);
}
.smm-input-affix input.smm-input { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Error state: border + icon + text, never colour alone */
.smm-input[aria-invalid="true"], .form-control.is-invalid {
  border-color: var(--canc-ink); border-width: 2px; background: var(--canc-bg);
}
.smm-error {
  display: none; align-items: flex-start; gap: var(--s-2);
  margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3);
  background: var(--canc-bg); border: var(--border-w) solid var(--canc-bd);
  border-radius: var(--r-sm);
  color: var(--canc-ink); font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.smm-error.is-shown, .smm-error[data-shown="true"] { display: flex; }
.smm-error svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.smm-success {
  display: none; align-items: flex-start; gap: var(--s-2);
  margin: var(--s-2) 0 0; padding: var(--s-3);
  background: var(--done-bg); border: var(--border-w) solid var(--done-bd);
  border-radius: var(--r-sm); color: var(--done-ink); font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.smm-success.is-shown { display: flex; }

/* Checkbox / radio — 24px box, 48px row */
.smm-check { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; }
.smm-check input[type="checkbox"], .smm-check input[type="radio"] {
  width: 24px; height: 24px; min-height: 0; flex: none; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}
.smm-check span { font-size: var(--fs-base); }

/* Radio cards (crypto gateways) */
.smm-radio-cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.smm-radio-card {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  min-height: 72px; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.smm-radio-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.smm-radio-card input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--accent); }
.smm-radio-card__name { font-weight: var(--fw-med); }
.smm-radio-card__meta { display: block; font-size: var(--fs-sm); color: var(--ink-muted); }
.smm-radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.smm-radio-card:has(input:focus-visible) { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-offset); }

/* ==========================================================================
   Status pills — icon + label, never colour alone
   ========================================================================== */
.smm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s-3); border-radius: var(--r-pill);
  border: var(--border-w) solid;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.4;
  white-space: nowrap;
}
.smm-pill svg { width: 16px; height: 16px; flex: none; }
.smm-pill--pending  { background: var(--pend-bg); color: var(--pend-ink); border-color: var(--pend-bd); }
.smm-pill--progress { background: var(--prog-bg); color: var(--prog-ink); border-color: var(--prog-bd); }
.smm-pill--complete { background: var(--done-bg); color: var(--done-ink); border-color: var(--done-bd); }
.smm-pill--canceled { background: var(--canc-bg); color: var(--canc-ink); border-color: var(--canc-bd); }
.smm-pill--unknown  { background: var(--unk-bg);  color: var(--unk-ink);  border-color: var(--unk-bd); }

/* ==========================================================================
   Tables — comfortable rows, sticky head, card fallback on mobile
   ========================================================================== */
.smm-table-wrap {
  border: var(--border-w) solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: auto; max-height: 70vh;
}
.smm-table, table.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-base); color: var(--ink); margin: 0;
}
.smm-table thead th, table.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--ink);
  text-align: left; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.smm-table tbody td, table.table tbody td {
  padding: var(--s-4);
  border-bottom: var(--border-w) solid var(--border);
  vertical-align: middle;
  line-height: 1.45;
}
.smm-table tbody tr:last-child td { border-bottom: 0; }
.smm-table tbody tr:nth-child(even) { background: var(--surface-2); }
.smm-table tbody tr:hover { background: var(--surface-3); }
.smm-table__group td {
  background: var(--accent-soft) !important; /* beats the nth-child stripe */
  color: var(--accent-text); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase;
  position: sticky; top: 44px; z-index: 1;
}
/* jquery.tablesorter affordances */
.smm-table th.tablesorter-header { cursor: pointer; padding-right: var(--s-6); position: sticky; }
.smm-table th.tablesorter-header::after {
  content: "↕"; position: absolute; right: var(--s-3); opacity: 0.5; font-size: 14px;
}
.smm-table th.tablesorter-headerAsc::after { content: "↑"; opacity: 1; }
.smm-table th.tablesorter-headerDesc::after { content: "↓"; opacity: 1; }

@media (max-width: 767px) {
  .smm-table--stack thead { display: none; }
  .smm-table--stack tbody tr {
    display: grid; gap: var(--s-2);
    padding: var(--s-4);
    border-bottom: var(--border-w) solid var(--border);
  }
  .smm-table--stack tbody td {
    display: grid; grid-template-columns: minmax(96px, 38%) 1fr;
    gap: var(--s-3); align-items: baseline;
    padding: 0; border: 0;
  }
  .smm-table--stack tbody td::before {
    content: attr(data-label);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-muted);
  }
}

/* ==========================================================================
   Combobox — the service / category picker
   ========================================================================== */
.smm-combo { position: relative; }
.smm-combo__control {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 56px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--ink); font: inherit; font-size: 17px; text-align: left;
  cursor: pointer;
}
.smm-combo__control:hover { border-color: var(--ink-muted); }
.smm-combo__control[aria-expanded="true"] { border-color: var(--accent); border-width: 2px; }
.smm-combo__value { flex: 1; min-width: 0; }
.smm-combo__value-icon:empty { display: none; }
.smm-combo__value-icon { flex: none; display: grid; place-items: center; color: var(--ink-muted); }
.smm-combo__value strong { display: block; font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smm-combo__value small { display: block; color: var(--ink-muted); font-size: var(--fs-sm); }
.smm-combo__value--empty { color: var(--ink-subtle); }
.smm-combo__caret { width: 22px; height: 22px; flex: none; color: var(--ink-muted); transition: transform var(--dur-fast) var(--ease); }
.smm-combo__control[aria-expanded="true"] .smm-combo__caret { transform: rotate(180deg); }

.smm-combo__panel {
  position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column;
  max-height: min(60vh, 420px);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.smm-combo__panel[hidden] { display: none; }
.smm-combo--flip .smm-combo__panel { top: auto; bottom: calc(100% + 6px); }

.smm-combo__search { padding: var(--s-3); border-bottom: var(--border-w) solid var(--border); background: var(--surface-2); }
.smm-combo__search-inner { position: relative; display: flex; align-items: center; }
.smm-combo__search-inner svg {
  position: absolute; left: var(--s-3); width: 20px; height: 20px; color: var(--ink-muted); pointer-events: none;
}
input.smm-combo__input {
  width: 100%; min-height: var(--tap);
  padding: var(--s-2) var(--s-4) var(--s-2) 44px;
  font-size: 17px; font-family: inherit;
  background: var(--surface); color: var(--ink);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--r-md);
}
.smm-combo__count {
  padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); color: var(--ink-muted);
  border-bottom: var(--border-w) solid var(--border); font-variant-numeric: tabular-nums;
}
.smm-combo__list {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: var(--s-1) 0; list-style: none;
  overscroll-behavior: contain;
}
.smm-combo__group {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s-2) var(--s-4);
  background: var(--surface-2);
  border-top: var(--border-w) solid var(--border);
  border-bottom: var(--border-w) solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted);
}
.smm-combo__opt {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-3) var(--s-4);
  cursor: pointer; border-left: 4px solid transparent;
}
.smm-combo__opt-main { flex: 1; min-width: 0; }
.smm-combo__opt-name { display: block; line-height: 1.4; }
.smm-combo__opt-id {
  font-family: var(--font-num); font-size: var(--fs-sm); color: var(--ink-muted);
  font-variant-numeric: tabular-nums; margin-right: var(--s-2);
}
.smm-combo__opt-meta {
  display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.smm-combo__opt-rate {
  flex: none; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold); color: var(--ink); text-align: right;
}
.smm-combo__opt:hover { background: var(--surface-3); }
.smm-combo__opt[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.smm-combo__opt.is-active {
  background: var(--accent-soft); border-left-color: var(--accent);
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.smm-combo__empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--ink-muted); }
.smm-combo__foot {
  padding: var(--s-2) var(--s-4); border-top: var(--border-w) solid var(--border);
  background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-muted);
  display: flex; gap: var(--s-4); flex-wrap: wrap;
}
.smm-kbd {
  font-family: var(--font-num); font-size: 12px; padding: 1px 6px;
  border: var(--border-w) solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: var(--ink);
}
/* Mobile: full-width sheet from the bottom */
@media (max-width: 575px) {
  .smm-combo__panel {
    position: fixed; inset: auto 0 0 0; top: auto;
    max-height: 82vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-width: 2px 0 0 0;
  }
  .smm-combo--flip .smm-combo__panel { bottom: 0; }
  .smm-combo__list { max-height: none; }
}

/* ==========================================================================
   Modals
   ========================================================================== */
.smm-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s-4); }
.smm-modal[hidden] { display: none; }
.smm-modal__scrim { position: absolute; inset: 0; background: var(--scrim); }
.smm-modal__box {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - var(--s-8));
  display: flex; flex-direction: column;
  background: var(--surface); border: var(--border-w) solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden;
}
.smm-modal__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: var(--border-w) solid var(--border);
}
.smm-modal__head h2 { margin: 0; font-size: var(--fs-lg); flex: 1; }
.smm-modal__body { padding: var(--s-5); overflow-y: auto; }
.smm-modal__foot {
  padding: var(--s-4) var(--s-5); border-top: var(--border-w) solid var(--border);
  background: var(--surface-2); display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap;
}
.smm-modal__close {
  width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border: var(--border-w) solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.smm-modal__close:hover { background: var(--surface-3); }
.smm-modal__state { text-align: center; padding: var(--s-6) var(--s-4); }
.smm-modal__state h3 { font-size: var(--fs-xl); }
.smm-modal__icon {
  width: 72px; height: 72px; margin: 0 auto var(--s-4);
  border-radius: var(--r-pill); display: grid; place-items: center; border: 2px solid;
}
.smm-modal__icon svg { width: 36px; height: 36px; }
.smm-modal__icon--ok { background: var(--done-bg); color: var(--done-ink); border-color: var(--done-bd); }
.smm-modal__icon--bad { background: var(--canc-bg); color: var(--canc-ink); border-color: var(--canc-bd); }
.smm-modal__icon--wait { background: var(--prog-bg); color: var(--prog-ink); border-color: var(--prog-bd); }
@media (max-width: 575px) {
  .smm-modal { padding: 0; align-items: flex-end; }
  .smm-modal__box { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; }
  .smm-modal__foot { flex-direction: column-reverse; }
  .smm-modal__foot .smm-btn { width: 100%; }
}

/* ---- Spinner (reduced-motion aware) ------------------------------------ */
.smm-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--accent);
  animation: smm-spin 900ms linear infinite;
}
@keyframes smm-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.smm-acc { border: var(--border-w) solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.smm-acc__item + .smm-acc__item { border-top: var(--border-w) solid var(--border); }
.smm-acc__btn {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: 64px; padding: var(--s-4) var(--s-5);
  background: none; border: 0; color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-med); text-align: left; cursor: pointer;
}
.smm-acc__btn:hover { background: var(--surface-2); }
.smm-acc__btn svg { width: 22px; height: 22px; flex: none; margin-left: auto; color: var(--ink-muted); transition: transform var(--dur-fast) var(--ease); }
.smm-acc__btn[aria-expanded="true"] { color: var(--accent-text); font-weight: var(--fw-bold); }
.smm-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.smm-acc__panel { padding: 0 var(--s-5) var(--s-5); color: var(--ink-muted); }
.smm-acc__panel[hidden] { display: none; }
.smm-acc__panel p { margin-bottom: var(--s-3); }

/* ==========================================================================
   Cart / order list, copy field, tabs, notices
   ========================================================================== */
.smm-cart__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.smm-cart__item {
  display: grid; gap: var(--s-2) var(--s-4);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "meta meta" "actions actions";
  padding: var(--s-4);
  background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: var(--r-md);
}
.smm-cart__name { grid-area: name; font-weight: var(--fw-med); align-self: baseline; }
.smm-cart__meta { grid-area: meta; font-size: var(--fs-sm); color: var(--ink-muted); overflow-wrap: anywhere; }
.smm-cart__price {
  grid-area: price; align-self: baseline; text-align: right; white-space: nowrap;
  font-family: var(--font-num); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.smm-cart__actions {
  grid-area: actions; display: flex; gap: var(--s-2); justify-content: flex-end;
  align-items: center; margin-top: var(--s-1);
}
.smm-cart__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4); margin-top: var(--s-4);
  border-top: 2px solid var(--border-strong);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
}
.smm-cart__total .u-money { font-size: var(--fs-xl); }
.smm-empty {
  padding: var(--s-7) var(--s-4); text-align: center; color: var(--ink-muted);
  border: 2px dashed var(--border); border-radius: var(--r-lg);
}

.smm-copy { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.smm-copy .smm-input { flex: 1 1 240px; font-family: var(--font-num); font-size: 16px; }

.smm-notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md);
  border: var(--border-w) solid var(--prog-bd); background: var(--prog-bg); color: var(--prog-ink);
  font-size: var(--fs-sm); line-height: 1.55;
}
.smm-notice svg { width: 22px; height: 22px; flex: none; }
.smm-notice p { margin: 0; }

.smm-tabs {
  display: flex; gap: var(--s-1); border-bottom: 2px solid var(--border);
  margin-bottom: var(--s-5); overflow-x: auto;
}
.smm-tabs__btn {
  min-height: var(--tap); padding: var(--s-2) var(--s-4);
  background: none; border: 0; border-bottom: 3px solid transparent;
  /* Same radius token as every other control, but on the TOP corners only: the
     tab is marked by its 3px underline, and rounding the bottom would bend that
     line at both ends. The radius is only ever visible on the hover fill. */
  border-radius: var(--ctl-r) var(--ctl-r) 0 0;
  color: var(--ink-muted); font: inherit; font-weight: var(--fw-med); cursor: pointer; white-space: nowrap;
}
.smm-tabs__btn:hover { color: var(--ink); background: var(--surface-2); }
.smm-tabs__btn[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: var(--fw-bold); }

/* ---- New-order two-column layout ---------------------------------------- */
.smm-order-layout { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .smm-order-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
  .smm-order-layout > aside { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); }
}

/* ---- Price preview ----------------------------------------------------- */
.smm-price {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--accent-soft); border: var(--border-w) solid var(--accent-border);
  border-radius: var(--r-lg);
}
.smm-price__label { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--accent-text); margin: 0; }
.smm-price__value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.05;
  color: var(--ink); letter-spacing: -0.03em;
}
.smm-price__note { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; }

/* ==========================================================================
   Motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .smm-spinner { animation: none !important; border-top-color: var(--accent); }
}

/* ==========================================================================
   Narrow devices: small phones (≤400px) and folded foldables (≤340px).
   Nothing below these needs its own rule — the layout is single-column and
   fluid from here down, and inputs stay at 17px so iOS still never zooms.
   ========================================================================== */
@media (max-width: 480px) {
  :root { --topbar-h: 60px; }
  .smm-topbar { gap: var(--s-2); padding: var(--s-2); }
  .smm-topbar__brand span:last-child { font-size: var(--fs-base); }
  .smm-balance { padding: var(--s-2) var(--s-3); }
  .smm-balance__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .smm-main { padding: var(--s-4) var(--s-3) var(--s-8); }
  h1 { font-size: var(--fs-xl); }
  .smm-price { padding: var(--s-4); }
  .smm-price__value { font-size: var(--fs-2xl); }
  .smm-price > * { flex: 1 1 100%; }
  .smm-price__note { text-align: left; }
  .smm-stat__value { font-size: var(--fs-xl); }
  .smm-tabs__btn { padding: var(--s-2) var(--s-3); }
  .smm-radio-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .smm-topbar__brand span:last-child { display: none; }   /* mark only */
  .smm-card__head, .card-header, .smm-card__body, .card-body, .smm-card__foot { padding: var(--s-3); }
  .smm-cart__item { padding: var(--s-3); }
  .smm-cart__actions .smm-btn { flex: 1 1 auto; }
  .smm-combo__control { padding: var(--s-3); }
  .smm-combo__opt { padding: var(--s-3); }
  .smm-combo__foot { gap: var(--s-2); font-size: 12px; }
}
@media (max-width: 340px) {
  /* Galaxy Fold closed (280px) and similar */
  html { font-size: 15px; }
  .smm-topbar { padding: var(--s-1) var(--s-2); }
  .smm-user { padding: var(--s-1); }
  .smm-user__avatar { width: 32px; height: 32px; }
  .smm-themes { padding: 2px; }
  .smm-themes__btn { min-width: var(--tap-min); padding: 0 var(--s-1); }
  .smm-sidebar { width: 100vw; }
  .smm-cart__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "meta" "actions"; }
  .smm-cart__price { text-align: left; }
  .smm-combo__opt-rate { display: none; }  /* rate stays in the meta line */
  .smm-modal__box { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
/* Landscape phones: keep the dropdown usable when the viewport is short. */
@media (max-height: 480px) {
  .smm-combo__panel { max-height: 82vh; }
  .smm-sidebar { padding: var(--s-2); }
}
/* Pointer-coarse devices get the larger target everywhere. */
@media (pointer: coarse) {
  .smm-btn--sm, .smm-btn--sm.smm-btn--icon { min-height: var(--tap); }
  .smm-btn--sm.smm-btn--icon { width: var(--tap); }
  ::-webkit-scrollbar { width: 14px; height: 14px; }
}

/* Quantity suggestions read from the videos (automation wizard, php/stats.php) */
.smm-notice #stats_body { min-width: 0; }
.smm-notice #stats_body > * + * { margin-top: var(--s-2); }
.smm-stats { margin: 0; padding-left: 1.1em; }
.smm-stats li + li { margin-top: var(--s-1); }