/* StoreNOC — clean day theme, mobile-first */
:root {
  --app-page: #f1f3f6;
  --app-surface: #ffffff;
  --app-elev: #f8f9fc;
  --app-text: #0f1419;
  --app-muted: #5c6b7a;
  --app-border: #e4e8ef;
  --app-border-strong: #cdd5e0;
  --app-primary: #0d9488;
  --app-primary-hover: #0c7f75;
  --app-primary-soft: rgba(13, 148, 136, 0.11);
  --app-link: #0a756c;
  --app-shadow: 0 1px 2px rgba(15, 20, 40, 0.045);
  --app-shadow-md: 0 4px 20px rgba(15, 20, 40, 0.055);
  --app-shadow-lg: 0 10px 36px rgba(15, 20, 40, 0.075);
  --app-radius: 10px;
  --app-radius-sm: 7px;
  --app-header-h: 64px;
  --app-nav-w: min(280px, 86vw);
  --app-tap: 44px;
  --ok: #059669;
  --warn: #d97706;
  --app-z-backdrop: 200;
  --app-z-nav: 210;
  --app-z-topbar: 100;
  /* Horizontal padding for list sheets, headers, search, tables (panel + fallback) */
  --app-panel-pad-x: clamp(14px, 2.2vw, 24px);
}

/* Margins that match .stores-page__head / table insets (use in PHP when a block isn’t a full-width row) */
.app-panel-mx {
  margin-left: var(--app-panel-pad-x);
  margin-right: var(--app-panel-pad-x);
}
.app-panel-mx-1 {
  margin-left: var(--app-panel-pad-x);
  margin-right: var(--app-panel-pad-x);
  margin-bottom: 1rem;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body.app.app--day,
body.app--day {
  margin: 0;
  min-height: 100dvh;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 0.9rem + 0.2vw, 16px);
  line-height: 1.58;
  color: var(--app-text);
  background: var(--app-page);
  text-rendering: optimizeLegibility;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

::selection {
  background: var(--app-primary-soft);
  color: var(--app-text);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--app-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--app-radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

a {
  color: var(--app-link);
  text-decoration: none;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(10, 117, 108, 0.45);
}
a:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.app-link {
  color: var(--app-muted);
  font-weight: 500;
  font-size: 0.9rem;
  min-height: var(--app-tap);
  display: inline-flex;
  align-items: center;
}
.app-link:hover {
  color: var(--app-link);
  text-decoration: none;
}

.app-shell,
.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px) clamp(24px, 5vw, 40px);
}

/* ——— Top bar ——— */
.app-topbar,
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--app-z-topbar);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: var(--app-header-h);
  margin: 0 calc(-1 * clamp(16px, 4vw, 24px)) 20px;
  padding: 10px clamp(16px, 4vw, 24px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 0 rgba(15, 20, 40, 0.04);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.app-topbar__start {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.app-topbar__brand,
.topbar > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.app-logo,
.logo {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-text);
  line-height: 1.2;
  word-break: break-word;
}
.app-logo--image {
  font-size: 0;
  line-height: 0;
  max-width: min(100%, 240px);
  margin: 0;
}
.app-logo--image .app-logo__img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.app-topbar--session .app-topbar__brand--centered .app-logo--image {
  margin: 0 auto;
  text-overflow: initial;
  white-space: normal;
  overflow: visible;
}
.app-topbar--session .app-topbar__brand--centered .app-logo--image .app-logo__img {
  margin-left: auto;
  margin-right: auto;
  object-position: center;
}
.admin-settings__form-desc--tight {
  margin-top: 0;
}
.admin-brand-preview {
  margin: 0 0 8px;
  min-height: 32px;
}
.admin-brand-preview img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background: #fff;
}
.admin-brand-preview--wide img {
  object-fit: contain;
}
.admin-brand-preview__empty {
  display: inline-block;
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  color: var(--app-muted);
  border: 1px dashed var(--app-border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
}

.app-tagline,
.muted {
  color: var(--app-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.app-topbar__actions,
.menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Mobile menu toggle (logged-in panel) */
.nav-menu-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--app-tap);
  min-width: var(--app-tap);
  height: var(--app-tap);
  padding: 0;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nav-menu-toggle:hover {
  background: var(--app-elev);
  border-color: var(--app-primary);
}
.nav-menu-toggle:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}
.nav-menu-toggle__bars,
.nav-menu-toggle__bars::before,
.nav-menu-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--app-text);
  border-radius: 1px;
  position: relative;
}
.nav-menu-toggle__bars::before,
.nav-menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-menu-toggle__bars::before {
  top: -6px;
}
.nav-menu-toggle__bars::after {
  top: 6px;
}
.app-nav-open .nav-menu-toggle {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
}

/* Backdrop */
.app-backdrop[hidden] {
  display: none !important;
}
.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--app-z-backdrop);
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-tap-highlight-color: transparent;
}

body.app-nav-open {
  touch-action: none;
}

/* Logged-in header: 3 columns — left menu, center brand, right sign out (desktop only) */
.app-topbar--session {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
  flex-wrap: nowrap;
  justify-content: initial;
}
.app-topbar--session .app-topbar__leading {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  grid-column: 1;
}
.app-topbar--session .app-topbar__center {
  grid-column: 2;
  min-width: 0;
  max-width: min(100%, 72vw);
  justify-self: center;
  text-align: center;
}
.app-topbar--session .app-topbar__brand--centered .app-logo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar--session .app-topbar__trailing {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
  min-height: 1px; /* allow empty column to take 1fr */
}
/* Sign out only in header on PC; full-width swipe menu on mobile (never in header) */
.app-topbar__signout--header-desktop {
  display: none;
  margin: 0;
}
@media (min-width: 1024px) {
  .app-topbar__signout--header-desktop {
    display: inline;
  }
}

/* Guest (signed out): same 3-col session topbar; spacer aligns with hamburger width when logged in */
.app-topbar--guest-public .app-topbar__leading--spacer {
  width: 44px;
  min-width: 44px;
  min-height: 1px;
  flex-shrink: 0;
}
.app-topbar__trailing--guest {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.app-topbar--guest-public .app-topbar__trailing--guest .btn {
  min-height: 36px;
  padding: 0 0.9rem;
}

/* Slide / sidebar: sign out on small viewports (hidden on desktop; header has Sign out) */
.app-sidebar__foot {
  display: none;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-border);
}
.app-sidebar__signout {
  display: block;
  margin: 0;
}
.app-sidebar__signout-btn {
  width: 100%;
  min-height: var(--app-tap);
  justify-content: center;
}
@media (max-width: 1023px) {
  .app-sidebar__foot {
    display: block;
    margin-top: 1.5rem;
  }
}

.inline-form {
  display: inline;
  margin: 0;
}

/* ——— Auth ——— */
.auth-wrap {
  max-width: 420px;
  margin: clamp(24px, 8vw, 56px) auto;
  padding: 0 4px;
}
.auth-wrap .card {
  padding: clamp(20px, 4vw, 32px) clamp(18px, 3vw, 28px) 24px;
}
.auth-wrap h3 {
  margin: 0 0 4px;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-text);
}
.auth-wrap .form {
  margin-top: 8px;
}

/* ——— Guest sign-in / register (match panel canvas + top bar) ——— */
body.app--auth.app--day {
  --app-page: #ebedf0;
  background: #ebedf0;
}
body.app--auth .app-shell,
body.app--auth .shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body.app--auth .app-topbar,
body.app--auth .topbar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  background: #fff;
  border-bottom: 1px solid #dde1e8;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.app--auth .app-flash-banner {
  flex: 0 0 auto;
}

.app-main--auth {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ebedf0;
  padding: 0;
  margin: 0;
  gap: 0;
}
.auth-page {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 24px) clamp(32px, 5vw, 48px);
  box-sizing: border-box;
}
.auth-page__card.card {
  background: #fff;
  border: 1px solid #dde1e8;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  padding: clamp(22px, 3.5vw, 30px) clamp(20px, 3.5vw, 28px) clamp(20px, 3vw, 24px);
}
.auth-page__head {
  margin: 0 0 18px;
}
.auth-page__title {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--app-text);
}
.auth-page__lede {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 42ch;
}
.auth-page__lede strong,
.auth-page__lede .auth-page__em {
  font-style: normal;
  font-weight: 600;
  color: var(--app-text);
}
.auth-page__form {
  margin-top: 0;
}
.auth-page__form.form {
  margin-top: 0;
}
.auth-page__actions {
  margin: 20px 0 0;
}
.auth-page__actions .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-weight: 600;
}
.auth-page__actions--row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 4px;
}
.auth-page__actions--row .btn {
  width: auto;
  flex: 1 1 auto;
  min-width: min(140px, 100%);
}
.auth-page__foot {
  margin: 18px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.auth-page__amount {
  margin: 0 0 16px;
  font-size: 1.05rem;
  color: var(--app-text);
}
.auth-page__amount-val {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--app-text);
}
.auth-page .notice {
  margin: 0 0 4px;
}

.auth-page__google-wrap {
  margin: 0 0 0;
}
.auth-page__btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1f1f1f;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.auth-page__btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c6c6;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
}
.auth-page__btn-google:focus {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}
.auth-page__btn-google__icon {
  display: flex;
  flex-shrink: 0;
}
.auth-page__or {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 18px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.auth-page__or::before,
.auth-page__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.auth-page__or span {
  white-space: nowrap;
}
.admin-settings__mono-box {
  margin: 0 0 14px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.4;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.card--admin-settings .admin-settings__mono-box {
  background: #fff;
}
.admin-settings__mono {
  user-select: all;
}

/* ——— Flash: inline alert bar below header (session messages; auto-dismiss in JS) ——— */
.app-flash-banner {
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(13, 148, 136, 0.28);
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  color: #0f172a;
  z-index: 40;
}
.app-flash-banner--warn {
  border-bottom-color: rgba(245, 158, 11, 0.42);
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  color: #78350f;
}
.app-flash-banner__inner {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0.65rem 0.5rem 0.65rem max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
  box-sizing: border-box;
}
.app-flash-banner__message {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 600;
  text-align: left;
}
.app-flash-banner--warn .app-flash-banner__message {
  color: #713f12;
}
.app-flash-banner__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: #475569;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 0;
}
.app-flash-banner__close-ico {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-flash-banner__close:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}
.app-flash-banner__close:focus-visible {
  outline: 2px solid var(--app-primary, #0d9488);
  outline-offset: 2px;
}
.app-flash-banner--warn .app-flash-banner__close {
  color: #92400e;
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(120, 53, 15, 0.22);
}
.app-flash-banner--warn .app-flash-banner__close:hover {
  background: #fff;
  color: #5c1e08;
}
.app-flash-banner[hidden] {
  display: none !important;
}
.notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--app-radius-sm);
  font-size: 0.9rem;
  border: 1px solid #c7e2f4;
  background: #f4f9fd;
  color: #0c4a6e;
  box-shadow: 0 1px 2px rgba(12, 74, 110, 0.05);
  max-width: 100%;
  line-height: 1.45;
}
#main-content:focus {
  outline: none;
}

/* ——— Main layout: sidebar + content ——— */
.split,
.app-panel {
  display: grid;
  grid-template-columns: min(252px, 100%) 1fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: start;
  position: relative;
}

.app-main,
.grid {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 24px);
  min-width: 0;
}

/* Side nav */
.app-sidebar,
.sidebar {
  position: sticky;
  top: calc(var(--app-header-h) + 8px);
  max-height: calc(100dvh - var(--app-header-h) - 24px);
  overflow-y: auto;
  padding: 16px 10px 16px 12px !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  -webkit-overflow-scrolling: touch;
}

.nav-label {
  margin: 0 0 8px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.app-sidebar a,
.sidebar a {
  display: block;
  margin: 2px 0;
  padding: 10px 12px;
  min-height: 42px;
  display: flex;
  align-items: center;
  border-radius: var(--app-radius-sm);
  border: 1px solid transparent;
  color: var(--app-text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* Wallet: same as other items when not .active; teal is reserved for the current page */
.app-sidebar a.app-sidebar__wallet:not(.active) {
  color: var(--app-text);
  font-weight: 500;
}
.app-sidebar a .tag--wallet-balance {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: auto;
  padding: 4px 9px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  box-shadow: 0 1px 0 rgba(16, 185, 129, 0.12);
  flex-shrink: 0;
}
.app-sidebar a:hover .tag--wallet-balance,
.app-sidebar a:focus-visible .tag--wallet-balance {
  border-color: #6ee7b7;
  color: #047857;
}
.app-sidebar a.active .tag--wallet-balance {
  color: #0d9488;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(13, 148, 136, 0.45);
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.1);
}
.app-sidebar a.app-sidebar__nav-tagged {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
}
.nav-pill {
  display: inline-flex;
  min-width: 1.1rem;
  min-height: 1.1rem;
  padding: 2px 5px;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #fff;
  background: #dc2626;
  border-radius: 999px;
  border: 1px solid #b91c1c;
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.25);
}
/* Admin: pending stores (amber; distinct from invoice unpaid red) */
.app-sidebar a .nav-pill--pending {
  background: #ea580c;
  border-color: #c2410c;
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.25);
  color: #fff;
}
.app-sidebar a.active .nav-pill--pending {
  background: #c2410c;
  border-color: #9a3412;
}
.app-sidebar a.active .nav-pill,
.app-sidebar a .nav-pill {
  color: #fff;
}
.app-sidebar a.active .nav-pill:not(.nav-pill--pending) {
  background: #991b1b;
  border-color: #7f1d1d;
}
.app-sidebar a:hover,
.sidebar a:hover {
  background: var(--app-elev);
  text-decoration: none;
  color: var(--app-primary);
  border-color: var(--app-border);
}
.app-sidebar a.active,
.sidebar a.active {
  background: var(--app-primary-soft);
  color: var(--app-primary);
  border-color: rgba(13, 148, 136, 0.2);
  font-weight: 600;
  border-left: 3px solid var(--app-primary);
  padding-left: 10px;
}

/* ——— Cards ——— */
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: clamp(18px, 2.4vw, 24px) clamp(16px, 2.1vw, 22px) clamp(18px, 2.1vw, 22px);
  box-shadow: var(--app-shadow);
  max-width: 100%;
}

.card-elevated {
  box-shadow: var(--app-shadow-md);
  border-color: #e0e4ec;
}

/* Logged-in area: flat “panel” sheets (inspired by simple control-panel UIs) */
.app-main--user .card--panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: none;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 22px);
}
.app-main--user .card--wallet.card--panel {
  padding: 0;
  overflow: hidden;
}
.app-main--user.grid {
  gap: clamp(14px, 2vw, 20px);
}

/* ——— Perfect Panel–style: full-width blocks, flat canvas, flush main ——— */
:root {
  --pp-canvas: #ebedf0;
  --pp-elev: #f4f5f7;
  --pp-edge: #dde1e8;
  --pp-sidebar-w: 256px;
}

body.app--panel {
  background: var(--pp-canvas);
  --app-page: var(--pp-canvas);
  --app-panel-pad-x: clamp(16px, 2.5vw, 28px);
}
body.app--panel .app-shell,
body.app--panel .shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body.app--panel .app-topbar,
body.app--panel .topbar {
  width: 100%;
  max-width: none;
  margin: 0 0 0 0;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: #fff;
  border-bottom: 1px solid var(--pp-edge);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex: 0 0 auto;
}
body.app--panel .app-flash-banner {
  flex: 0 0 auto;
}
body.app--panel .app-flash-banner--ok {
  border-bottom-color: rgba(20, 184, 166, 0.38);
}
body.app--panel .app-flash-banner--warn {
  border-bottom-color: rgba(245, 158, 11, 0.48);
}

body.app--panel .split,
body.app--panel .app-panel {
  display: grid;
  grid-template-columns: min(var(--pp-sidebar-w), 100%) 1fr;
  gap: 0;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  background: var(--pp-canvas);
}

/* Desktop: tall sidebar; mobile drawer keeps existing fixed overlay rules */
@media (min-width: 1024px) {
  body.app--panel .app-sidebar,
  body.app--panel .sidebar {
    position: sticky;
    top: var(--app-header-h);
    align-self: start;
    height: auto;
    min-height: calc(100dvh - var(--app-header-h));
    max-height: calc(100dvh - var(--app-header-h));
  }
}
body.app--panel .app-sidebar,
body.app--panel .sidebar {
  padding: 12px 0 20px 0 !important;
  background: #fff !important;
  border: none !important;
  border-right: 1px solid var(--pp-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.app--panel .app-sidebar a,
body.app--panel .sidebar a {
  border-radius: 0;
  margin: 0;
  border: none;
  border-left: 3px solid transparent;
  padding: 10px 18px 10px 15px;
  font-size: 0.9rem;
}
body.app--panel .app-sidebar a:hover,
body.app--panel .sidebar a:hover {
  background: var(--pp-elev);
  border-color: transparent;
  color: var(--app-text);
}
body.app--panel .app-sidebar a.active,
body.app--panel .sidebar a.active {
  background: #f0fdfa;
  color: var(--app-primary);
  font-weight: 600;
  border-color: #f0fdfa;
  border-left-color: var(--app-primary);
  padding-left: 12px;
}
body.app--panel .nav-label {
  padding: 0 0 0 20px;
  font-size: 0.7rem;
  color: #64748b;
  letter-spacing: 0.12em;
  margin: 0 0 6px 0;
}
body.app--panel .app-sidebar__foot {
  margin: 8px 12px 0 12px;
  padding: 12px 0 0 0;
  border-top: 1px solid var(--pp-edge);
  border-left: none;
}

/* Order page: space below header / flash so the sheet isn’t flush to the top edge */
body.app--panel .app-main--user.app-main--order {
  padding-top: clamp(16px, 2.8vw, 32px);
}

/* Main: edge-to-edge white / gray sections */
body.app--panel .app-main--user,
body.app--panel .app-main--admin {
  background: var(--pp-canvas);
  min-width: 0;
  padding: 0;
  gap: 0;
  flex: 1 1 auto;
}
/* Each screen block is a full-width sheet */
body.app--panel .app-main--user > .card--panel,
body.app--panel .app-main--admin > .card:not(article) {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--pp-edge);
  background: #fff;
  box-shadow: none;
  padding: 20px var(--app-panel-pad-x) 24px;
}
/* Stores, wallet & invoices list: internal padding handled by their sections */
body.app--panel .app-main--user .card--stores.card--panel,
body.app--panel .app-main--user .card--wallet.card--panel,
body.app--panel .app-main--user .card--invoices.card--panel {
  padding: 0;
}
/* Order flow: keep readable line length inside a full-width sheet */
body.app--panel .app-main--user .order-page-card {
  max-width: min(44rem, 100%);
  margin: 0 auto;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--pp-edge);
  padding: clamp(24px, 3vw, 40px) var(--app-panel-pad-x) clamp(22px, 2.6vw, 32px) !important;
}
/* Table + pager: blend with the sheet (stores / invoices) */
body.app--panel .app-main--user .table-pager--footer,
body.app--panel .app-main--user .table-pager {
  border-color: #eef0f3;
  background: #fafbfc;
}
/* Nested cards in admin (e.g. forms in settings) */
body.app--panel .app-main--admin .card .card,
body.app--panel .app-main--user .card .card {
  border-radius: 8px;
  border: 1px solid var(--pp-edge);
  background: var(--pp-elev);
}

/* Admin: data tables in full-width block */
body.app--panel .app-main--admin .table-wrap,
body.app--panel .app-main--user .card--invoices .table-wrap {
  border-radius: 0;
}
/* Admin: match user topbar + shared list rhythm */
.app-topbar__brand--centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 100%;
}
.app-topbar__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  line-height: 1;
  flex: 0 0 auto;
}
body.app--panel .app-main--admin .table-pager,
body.app--panel .app-main--admin .table-pager--footer,
body.app--panel .app-main--admin > nav.table-pager {
  border-color: #eef0f3;
  background: #fafbfc;
  margin: 0;
  max-width: none;
  border-radius: 0;
}
/* Dashboard */
body.app--panel .app-main--admin .card--admin-dashboard.card--panel {
  padding: 0;
  overflow: hidden;
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: var(--app-shadow);
}
.app-main--admin .admin-dashboard__body {
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 24px) clamp(18px, 2.2vw, 24px);
}
.app-main--admin .kpi--admin {
  margin-bottom: 0;
}
.app-main--admin .admin-dashboard__actions {
  margin: 1rem 0 0;
  padding: 0;
}

/* Admin overview (redesigned) */
.app-main--admin .admin-dash {
  max-width: 100%;
  padding: 0;
  border: none;
  background: #fff;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Match user /stores and other list pages: light header + border */
.app-main--admin .admin-dash__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0;
  padding: clamp(16px, 2.2vw, 24px) var(--app-panel-pad-x);
  background: #fff;
  color: var(--app-text);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #eef0f3;
  box-shadow: none;
}
.app-main--admin .admin-dash__title {
  margin: 0 0 4px;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}
.app-main--admin .admin-dash__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 40rem;
}
.app-main--admin .admin-dash__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.app-main--admin .admin-dash__run-billing {
  margin: 0;
}
/* Secondary action: use default .btn.btn-outline (same as user /stores) */
/* Primary: match .btn (teal) */
.app-main--admin .admin-dash__reports-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--app-tap, 44px);
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff !important;
  text-decoration: none !important;
  background: var(--app-primary);
  border: none;
  border-radius: var(--app-radius-sm);
  box-shadow: 0 1px 2px rgba(13, 100, 92, 0.2);
  transition: background 0.15s, box-shadow 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.app-main--admin .admin-dash__reports-cta:hover {
  background: var(--app-primary-hover);
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(13, 100, 92, 0.2);
}
.app-main--admin .admin-dash__reports-cta:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
  color: #fff !important;
  text-decoration: none;
}
.app-main--admin .admin-dash__reports-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
}
.app-main--admin .admin-dash__reports-cta__icon svg {
  display: block;
  margin: 0;
  vertical-align: middle;
}
.app-main--admin .admin-dash__reports-cta__label {
  white-space: nowrap;
}
.app-main--admin .admin-dash__reports-cta__arrow {
  margin-left: 2px;
  font-size: 1.05em;
  font-weight: 500;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.app-main--admin .admin-dash__reports-cta:hover .admin-dash__reports-cta__arrow {
  transform: translateX(2px);
  opacity: 1;
}
.app-main--admin .admin-dash__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 14px;
  list-style: none;
  margin: 0;
  padding: clamp(14px, 1.5vw, 20px) var(--app-panel-pad-x) clamp(4px, 0.5vw, 8px);
}
.app-main--admin .admin-metric {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.app-main--admin .admin-metric__label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.app-main--admin .admin-metric__value {
  margin: 0 0 4px;
  font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
}
.app-main--admin .admin-metric__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #94a3b8;
}
.app-main--admin .admin-metric__hint a {
  color: var(--app-link);
  text-decoration: none;
  font-weight: 500;
}
.app-main--admin .admin-metric__hint a:hover {
  text-decoration: underline;
}
.app-main--admin .admin-dash__grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 0 var(--app-panel-pad-x) clamp(8px, 1vw, 12px);
}
.app-main--admin .admin-dash__subcard.admin-dash__recent {
  margin: 0 var(--app-panel-pad-x) 0;
}
.app-main--admin .admin-dash__h2 {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}
.app-main--admin .admin-attn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-main--admin .admin-attn__row {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #0f172a;
}
.app-main--admin .admin-attn__num {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #0f172a;
}
.app-main--admin .admin-attn__num--warn {
  background: #fef3c7;
  color: #92400e;
}
.app-main--admin .admin-status-bars__track {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 9999px;
  overflow: hidden;
  background: #e2e8f0;
  margin-bottom: 10px;
}
.app-main--admin .admin-status-bars__seg {
  display: block;
  min-width: 0;
  height: 100%;
  transition: width 0.2s ease;
}
.app-main--admin .admin-status-bars__seg--active {
  background: linear-gradient(90deg, #0ea5e9, #06b6d4);
}
.app-main--admin .admin-status-bars__seg--pend {
  background: #f59e0b;
}
.app-main--admin .admin-status-bars__seg--froz {
  background: #6366f1;
}
.app-main--admin .admin-status-bars__seg--oth {
  background: #94a3b8;
}
.app-main--admin .admin-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.82rem;
  color: #334155;
}
.app-main--admin .admin-legend__sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.app-main--admin .admin-legend__sw--active {
  background: #06b6d4;
}
.app-main--admin .admin-legend__sw--pend {
  background: #f59e0b;
}
.app-main--admin .admin-legend__sw--froz {
  background: #6366f1;
}
.app-main--admin .admin-legend__sw--oth {
  background: #94a3b8;
}
.app-main--admin .admin-dash__recent-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

/* Admin profit reports: same “sheet + sections” as user /stores */
.app-main--admin .admin-reports {
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0 0;
  background: #fff;
  border-bottom: 1px solid var(--pp-edge);
}
.app-main--admin .admin-reports__layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
}
.app-main--admin .admin-reports__card,
.app-main--admin .admin-rep-invoices {
  padding: clamp(16px, 2.2vw, 22px) var(--app-panel-pad-x) !important;
  border: none !important;
  background: #fff;
  box-shadow: none;
  border-radius: 0 !important;
  border-bottom: 1px solid #eef0f3 !important;
}
.app-main--admin .admin-rep-filter {
  padding: clamp(16px, 2.2vw, 22px) var(--app-panel-pad-x) !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid #eef0f3 !important;
  border-bottom: 1px solid #eef0f3 !important;
  background: #fafbfc !important;
}
.app-main--admin .admin-reports__eyebrow {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.app-main--admin .admin-reports__h1,
.app-main--admin .admin-reports__h2 {
  color: #0f172a;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.app-main--admin .admin-reports__h1 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.2;
}
.app-main--admin .admin-reports__lede {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
  max-width: 44rem;
}
.app-main--admin .admin-rep-tabs-label {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.app-main--admin .admin-rep-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.app-main--admin .admin-rep-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.app-main--admin .admin-rep-pill:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.app-main--admin .admin-rep-pill.is-active {
  color: #fff;
  background: var(--app-primary);
  border-color: var(--app-primary);
  box-shadow: 0 1px 2px rgba(13, 100, 92, 0.2);
}
.app-main--admin .admin-rep-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.app-main--admin .admin-rep-dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
}
.app-main--admin .admin-rep-date {
  font: inherit;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
  min-width: 11.5rem;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.app-main--admin .admin-rep-summary {
  margin: 0;
  padding: 10px var(--app-panel-pad-x) 4px;
  border-bottom: 1px solid #f0f2f5;
}
.app-main--admin .admin-rep-period-label {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #0f172a;
  font-weight: 500;
}
.app-main--admin .admin-rep-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 0 var(--app-panel-pad-x) clamp(12px, 1.5vw, 18px);
  list-style: none;
  border-bottom: 1px solid #f0f2f5;
}
.app-main--admin .admin-rep-stat {
  margin: 0;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.app-main--admin .admin-rep-stat--net {
  border-color: rgba(13, 148, 136, 0.45);
  background: #f0fdfa;
  box-shadow: none;
}
.app-main--admin .admin-rep-stat__k {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.app-main--admin .admin-rep-stat__v {
  margin: 0;
  font-size: clamp(1.2rem, 0.9rem + 0.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
}
.app-main--admin .admin-rep-stat--net .admin-rep-stat__v {
  color: #0f766e;
}

/* Admin support: unread = needs staff reply */
.app-main--admin .admin-support-tickets-table tr.admin-support-row--unread {
  background: #fffbeb;
  box-shadow: inset 3px 0 0 0 #f59e0b;
}
.app-main--admin .admin-support-tickets-table tr.admin-support-row--unread td {
  background: transparent;
}
.app-main--admin .admin-support__id {
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.app-main--admin .admin-support__id:hover,
.app-main--admin .admin-support__id:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
/* Admin: /admin/usage-tiers — page shell, DnD (draggable = handle <td>, not <tr>) */
body.app--panel .app-main--admin > section.card--panel.card--stores.usage-tiers-page {
  /* Beats generic card--stores { padding:0 }; end spacing before Test metering */
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  padding-bottom: 0.65rem;
}
.app-main--admin .usage-tiers-page .usage-tiers__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  margin: 0.35rem var(--app-panel-pad-x) 0.4rem;
  max-width: 40rem;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border: 1px solid #e8edf2;
  border-left: 3px solid #14b8a6;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  box-sizing: border-box;
}
.app-main--admin .usage-tiers__punch {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1 1 12rem;
  color: #334155;
}
.app-main--admin .usage-tiers__status--on,
.app-main--admin .usage-tiers__status--off {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px 5px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.app-main--admin .usage-tiers__status--on {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.app-main--admin .usage-tiers__status--off {
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.app-main--admin .usage-tiers__sub {
  margin: 0.2rem var(--app-panel-pad-x) 0.85rem;
  font-size: 0.81rem;
  line-height: 1.5;
  max-width: 38rem;
  color: #64748b;
}
.app-main--admin .usage-tiers-page .stores-page__head + .app-list-search,
.app-main--admin .usage-tiers-page .usage-tiers__hero + .app-list-search,
.app-main--admin .usage-tiers-page .app-list-search {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.25rem;
}
.app-main--admin .usage-tiers__table-shell {
  margin: 0.2rem 0 0.35rem;
  margin-left: var(--app-panel-pad-x);
  margin-right: var(--app-panel-pad-x);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.app-main--admin .usage-tiers__table-shell .table-wrap,
.app-main--admin .usage-tiers__table-shell .panel-table-wrap {
  margin: 0;
  border: none;
  box-shadow: none;
}
.app-main--admin .usage-tiers__table-shell .data-table {
  background: #fff;
}
.app-main--admin .usage-tiers__table-shell tbody tr:hover {
  background: #f8fafc;
}
.app-main--admin .tag.tag--tier-yes {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 600;
}
.app-main--admin .tag.tag--tier-no {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
}
.usage-tiers-reorder-form {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
.app-main--admin .usage-tiers__grip-inline {
  color: #94a3b8;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.app-main--admin .usage-tiers-table--dnd .usage-tiers__handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  touch-action: none;
}
.app-main--admin .usage-tiers-table--dnd .usage-tiers__handle:active {
  cursor: grabbing;
}
.app-main--admin .usage-tiers__grip {
  display: inline-block;
  margin-right: 0.35rem;
  color: #94a3b8;
  font-size: 0.62rem;
  line-height: 1;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: -0.2em;
}
.app-main--admin .usage-tiers__grip--off {
  color: #e2e8f0;
  font-size: 0.4rem;
}
.app-main--admin .usage-tiers__sortnum {
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 600;
  min-width: 1.25ch;
  display: inline-block;
}
.app-main--admin tr.usage-tier-row--dragging {
  opacity: 0.65;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.app-main--admin .usage-tiers__col-order {
  width: 4.25rem;
  text-align: left;
}
/* Test metering: centered card (wins over admin > .card { padding: 20px 24px }) */
body.app--panel .app-main--admin > .usage-test-section,
body.app--panel .app-main--admin > section.usage-test-section.card--panel,
body.app--panel .app-main--admin .usage-test-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f0f4f8 0%, #e2e8f0 45%, #d8e0e8 100%);
  border-top: 1px solid #cbd5e1 !important;
  /* Force vertical rhythm (global card padding would otherwise compress this) */
  padding-top: clamp(4rem, 10vw, 5.5rem) !important;
  padding-bottom: clamp(4.5rem, 12vw, 6.5rem) !important;
  padding-left: var(--app-panel-pad-x) !important;
  padding-right: var(--app-panel-pad-x) !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.app-main--admin .usage-test-surface {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  /* Extra top/bottom padding inside the card (above “Development” and under the form) */
  padding: clamp(1.65rem, 2.6vw, 2rem) clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.5rem, 2.4vw, 1.9rem);
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px -12px rgba(15, 118, 110, 0.18);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.app-main--admin .usage-test-surface::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5eead4, #0d9488, #2dd4bf, #0d9488, #5eead4);
  background-size: 200% 100%;
}
.app-main--admin .usage-test-surface__eyebrow {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 3px 9px 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0d9488;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
}
.app-main--admin .usage-test-surface__head {
  margin: 0 0 0.1rem;
}
.app-main--admin .usage-test-surface__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 0.9rem + 0.4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.2;
}
.app-main--admin .usage-test-surface__lede {
  margin: 0 auto;
  max-width: 20rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: #64748b;
  text-align: center;
}
.app-main--admin .usage-test-form {
  margin: 1.2rem 0 0;
  text-align: left;
  max-width: 100%;
  padding: 0.9rem 0.85rem 0.65rem;
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff;
  box-sizing: border-box;
}
.app-main--admin .usage-test-form__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  max-width: 18rem;
  margin: 0 auto;
}
.app-main--admin .usage-test-form__field {
  display: block;
  flex: 1 1 5.5rem;
  min-width: 0;
  text-align: left;
}
.app-main--admin .usage-test-form__label {
  display: block;
  margin: 0 0 0.2rem 1px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.app-main--admin .usage-test-form__field input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.55rem;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 1px solid #d1d8e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  box-sizing: border-box;
}
.app-main--admin .usage-test-form__field input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
  outline: none;
}
.app-main--admin .usage-test-form__actions {
  margin: 0.9rem 0 0;
  padding-top: 0.6rem;
  text-align: center;
  border-top: 1px solid #e2e7ee;
}
.app-main--admin .usage-test-form__btn {
  min-width: 11rem;
  width: 100%;
  max-width: 16rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
}
@media (min-width: 400px) {
  .app-main--admin .usage-test-form__btn {
    width: auto;
  }
}
@media (min-width: 500px) {
  .app-main--admin .usage-test-form__field {
    flex: 0 1 7.25rem;
  }
  .app-main--admin .usage-test-form__field:first-of-type {
    flex: 0 1 8.5rem;
  }
}

.admin-support-unread-pill {
  display: inline-block;
  padding: 0 6px 0 8px;
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
  border-radius: 2px;
  font-size: 0.85em;
  font-weight: 600;
  color: #78350f;
}

/* Admin → Users: match .panel-table (user list) */
.app-main--admin .admin-users-data-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  vertical-align: bottom;
  white-space: nowrap;
}
.app-main--admin .admin-users-data-table tbody tr.admin-users__row {
  transition: background 0.12s ease;
}
.app-main--admin .admin-users-data-table tbody tr.admin-users__row:hover td {
  background: #f4fbf9;
}
.app-main--admin .admin-users__id {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  font-size: 0.9rem;
}
.app-main--admin .admin-users__name {
  display: block;
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 1px;
}
.app-main--admin a.admin-users__email {
  display: inline-block;
  max-width: 22rem;
  font-size: 0.8rem;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-all;
}
.app-main--admin a.admin-users__email:hover,
.app-main--admin a.admin-users__email:focus-visible {
  color: var(--app-primary, #0d9488);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.app-main--admin .admin-users__th-narrow {
  vertical-align: middle;
}
.app-main--admin .admin-users__num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.app-main--admin a.admin-users__num {
  font-weight: 700;
  text-decoration: none;
}
.app-main--admin .admin-users__num.muted {
  font-weight: 500;
  color: #94a3b8;
}
.app-main--admin .admin-users__intro a {
  font-weight: 600;
}
.app-main--admin .admin-users__intro {
  margin: 0 var(--app-panel-pad-x) 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 44rem;
}
/* Sub-panels on dashboard: match user “card in card” */
.app-main--admin .admin-dash__subcard {
  background: #fff;
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.app--panel .app-main--admin > section.admin-dash.card--panel {
  padding: 0;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--pp-edge);
  box-shadow: none;
}
/* Full-bleed list cards like user Stores / panel sheets */
body.app--panel .app-main--admin > .card--panel.card--stores,
body.app--panel .app-main--admin > .card--panel.table-toolbar-card {
  padding: 0;
  border-color: var(--pp-edge, #e5e7eb);
  background: #fff;
}
body.app--panel .app-main--admin .admin-payments-list-card__lede {
  margin: 0 var(--app-panel-pad-x) 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #64748b;
  padding: 0 2px;
}
/* Tighter secondary lines on data pages */
.app-main--admin p.admin-page-lede,
.app-main--admin p.stores-page__lede--admin.admin-page-lede {
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 44rem;
  color: #64748b;
  border-bottom: none;
  margin: 0 var(--app-panel-pad-x) 0.6rem;
  padding: 0 0 10px;
}
/* Admin: list search under page title (same rhythm as user panel) */
.app-main--admin .card--panel.card--stores .stores-page__head + .app-list-search,
.app-main--admin .admin-payments-list-card__head + .app-list-search {
  margin-top: 0;
}
.app-main--admin .admin-payments-list-card__head {
  border-bottom: 1px solid #eef0f3;
}
.app-main--admin .admin-payments-list-card {
  padding-top: clamp(12px, 1.5vw, 16px);
}
.app-main--admin .admin-users-data-table th.table-cell--numeric {
  text-align: right;
}
.app-main--admin .admin-users-data-table td.table-cell-actions {
  min-width: 0;
  text-align: right;
  vertical-align: middle;
}

/* Admin data pages: secondary lede (non-compact) */
.app-main--admin .card--stores .stores-page__lede--admin:not(.admin-page-lede) {
  margin: 0;
  padding: 0 var(--app-panel-pad-x) 1rem;
  max-width: 48rem;
  line-height: 1.55;
  font-size: 0.9rem;
  border-bottom: 1px solid #eef0f3;
}

/* Admin /admin/stores — cleaner shell */
.app-main--admin .admin-stores-card .stores-page__head--admin-stores {
  align-items: flex-start;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 52%);
  border-bottom: 1px solid #eef0f3;
  padding-top: clamp(14px, 2vw, 20px);
  padding-bottom: clamp(14px, 2vw, 18px);
}
.app-main--admin .admin-stores-card .stores-page__head-text {
  min-width: 0;
}
.app-main--admin .stores-page__subtitle {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 38rem;
}
.app-main--admin .admin-stores-toolbar {
  padding: 12px var(--app-panel-pad-x) 14px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-main--admin .admin-stores-toolbar .app-list-search {
  margin: 0;
}
.app-main--admin .admin-stores-toolbar__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.app-main--admin .admin-stores-sync-form {
  margin: 0;
  flex-shrink: 0;
}
.app-main--admin .admin-stores-toolbar__hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  flex: 1 1 14rem;
  min-width: min(100%, 12rem);
}
.app-main--admin .admin-stores-toolbar__code {
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 500;
}
.app-main--admin .admin-stores-add__grid {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.app-main--admin .admin-stores-add__form label {
  display: block;
  margin: 0;
}
.app-main--admin .admin-stores-add-dlg .admin-stores-add-dlg__lede {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.app-main--admin .admin-stores-add-dlg .admin-stores-add__fieldset {
  margin: 12px 0 0;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 10px 12px 12px;
}
.app-main--admin .admin-stores-add-dlg .admin-stores-add__fieldset-legend {
  padding: 0 4px;
  font-size: 0.8rem;
}
.app-main--admin .admin-stores-add__fieldset label {
  margin-top: 0.65rem;
}
.app-main--admin .admin-stores-add__fieldset label:first-of-type {
  margin-top: 0;
}
.app-main--admin .admin-stores-add-dlg .admin-stores-add-dlg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  border: none;
}
.app-main--admin .store-row__subline {
  font-size: 0.8rem;
  margin-top: 4px;
  word-break: break-word;
  line-height: 1.35;
}
.app-main--admin .admin-stores-data-table.dashboard-stores-table tbody td {
  border-bottom-color: #f1f5f9;
}
.app-main--admin .admin-stores-data-table.dashboard-stores-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}
.app-main--admin .admin-stores-data-table.dashboard-stores-table tbody tr:hover td,
.app-main--admin .admin-stores-data-table.dashboard-stores-table tbody tr:nth-child(even):hover td {
  background: #f4fbf8;
}
.app-main--admin .admin-stores-card .admin-stores-page.panel-table-wrap {
  border-top: none;
}

.app-main--admin .admin-subsection__title {
  margin: 0 0 4px;
  padding: clamp(16px, 2.2vw, 20px) var(--app-panel-pad-x) 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}
/* Settings: full-width sheet in admin main column */
body.app--panel .app-main--admin .card--admin-settings.card--panel {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-left: none;
  border-right: none;
  box-sizing: border-box;
}
/* Payments toolbar: h2 matches page titles */
.table-toolbar__title {
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}
.table-toolbar h2 {
  margin: 0 0 4px;
}
.app-main--admin .admin-referrals__settings-block {
  border-bottom: 1px solid var(--pp-edge, #e5e7eb);
  margin-bottom: 0;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--app-text);
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.card p.muted,
.card .muted {
  font-size: 0.9rem;
  line-height: 1.5;
}

article.card,
.card .card,
main .grid > .card {
  background: var(--app-elev);
  border: 1px solid var(--app-border);
  box-shadow: none;
  padding: 14px 16px 14px;
}

/* KPI — grid on all sizes for even blocks */
.kpi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
.kpi > div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--app-elev);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.kpi strong {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  display: block;
  color: var(--app-text);
  letter-spacing: -0.02em;
}
.kpi .muted {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
}

@media (min-width: 600px) {
  .kpi {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .kpi > div {
    padding: 12px 14px;
  }
}
@media (min-width: 900px) {
  .kpi {
    gap: 16px 20px;
  }
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--app-tap);
  padding: 10px 16px;
  background: var(--app-primary);
  color: #fff !important;
  border: none;
  border-radius: var(--app-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(13, 100, 92, 0.2);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover {
  background: var(--app-primary-hover);
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(13, 100, 92, 0.2);
}
.btn:active:not([disabled]) {
  transform: translateY(0.5px);
}
.btn:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}
.btn-sm {
  min-height: 38px;
  padding: 6px 14px;
  font-size: 0.85rem;
}
.btn-outline,
.btn.ghost {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong) !important;
  box-shadow: none;
  min-height: 40px;
}
.btn-outline:hover,
.btn.ghost:hover {
  background: var(--app-elev) !important;
  color: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
  box-shadow: var(--app-shadow);
}
.btn.danger.ghost {
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
.btn.danger.ghost:hover {
  color: #991b1b !important;
  background: #fef2f2 !important;
  border-color: #f87171 !important;
}

/* Dialog (admin balance) */
.app-dialog {
  max-width: min(96vw, 28rem);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 20px 22px;
  box-shadow: var(--app-shadow-lg);
  background: var(--app-surface);
}
.app-dialog::backdrop {
  background: rgba(15, 20, 35, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.app-dialog .app-dialog__title {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--app-text);
}

.app-dialog.app-dialog--wide {
  max-width: min(96vw, 44rem);
  width: 100%;
}

/* Shared modal chrome (title row + dismiss — close via button only, not backdrop) */
.admin-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.admin-dialog-head__text {
  flex: 1;
  min-width: 0;
}
.admin-dialog-head__title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--app-text);
}
.admin-dialog-head__sub {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--app-muted, #64748b);
}
.admin-dialog-x {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: -4px -6px 0 0;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
  color: var(--app-muted, #64748b);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-radius-sm);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.admin-dialog-x:hover {
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-border) 35%, transparent);
  border-color: color-mix(in srgb, var(--app-border) 55%, transparent);
}

.admin-remotedb-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: start;
}
.admin-remotedb-form__grid > label {
  margin: 0;
}
.admin-remotedb-form__grid .admin-remotedb-form__full {
  grid-column: 1 / -1;
}
@media (max-width: 540px) {
  .admin-remotedb-form__grid {
    grid-template-columns: 1fr;
  }
}
.admin-remotedb-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 4px;
}

/* ——— List search (admin + user panel tables) ——— */
.app-list-search {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.1rem;
}
.app-list-search__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem 0.65rem;
  width: 100%;
}
.app-list-search__field {
  display: flex;
  align-items: center;
  flex: 1 1 18rem;
  min-width: min(100%, 18rem);
  min-height: var(--app-tap, 44px);
  padding: 0 2px 0 4px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.app-list-search__field:hover {
  border-color: var(--app-border-strong);
}
.app-list-search__field:focus-within {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-primary-soft);
  background: #fff;
}
.app-list-search__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  min-height: 100%;
  color: var(--app-primary);
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}
.app-list-search__icon-svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: middle;
}
.app-list-search__input {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 9px 14px 9px 0;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.app-list-search__input::placeholder {
  color: #94a3b8;
  opacity: 1;
}
.app-list-search__input::search-cancel-button,
.app-list-search__input::-webkit-search-cancel-button {
  margin-right: 4px;
  cursor: pointer;
}
.app-list-search__input:focus {
  outline: 0;
}
.app-list-search__submit {
  flex: 0 0 auto;
  min-height: var(--app-tap, 44px);
  margin: 0;
  padding: 0 1.25rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--app-primary);
  border: 1px solid var(--app-primary);
  border-radius: var(--app-radius-sm);
  box-shadow: 0 1px 2px rgba(13, 148, 136, 0.2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.app-list-search__submit:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.28);
}
.app-list-search__submit:active {
  transform: scale(0.99);
}
.app-list-search__submit:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}
.app-list-search__clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 36px;
  padding: 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--app-muted);
  text-decoration: none;
  border-radius: var(--app-radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.app-list-search__clear:hover,
.app-list-search__clear:focus-visible {
  color: var(--app-primary);
  text-decoration: none;
  background: var(--app-primary-soft);
  outline: none;
}
.app-main--admin .app-list-search__field {
  background: #fff;
}
/* List search: align with .stores-page__head and table insets (panel) */
body.app--panel .app-main--user .card--panel.card--stores .app-list-search,
body.app--panel .app-main--user .card--panel.card--invoices .app-list-search,
body.app--panel .app-main--user .card--wallet .app-list-search,
body.app--panel .app-main--admin .card--panel.card--stores .app-list-search,
body.app--panel .app-main--admin .table-toolbar-card .app-list-search {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0 var(--app-panel-pad-x) 0;
}
/* Optional: when search is last control before a tight table, breathing room is handled by .app-list-search margin */
@media (min-width: 720px) {
  .app-list-search__field {
    flex: 1 1 24rem;
    min-width: min(100%, 24rem);
  }
}

/* ——— Table pagination ——— */
.table-pager--footer,
.table-pager[aria-label] {
  margin: 14px 0 0;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  background: var(--app-elev);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  font-size: 0.875rem;
}
.table-pager__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.table-pager__per-label,
.table-pager__page {
  font-size: 0.8rem;
}
.table-pager__per {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--app-primary) !important;
  border: 1px solid var(--app-border);
  transition: background 0.12s, border-color 0.12s;
}
.table-pager__per:hover {
  background: #fff;
  border-color: var(--app-border-strong);
}
.table-pager__per.is-active {
  font-weight: 700;
  color: #fff !important;
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}
.table-pager__empty {
  margin: 10px 0 0;
  font-size: 0.9rem;
}
a.table-pager__nav.is-disabled {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* Tags */
.tag {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  background: var(--app-elev);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: middle;
  line-height: 1.35;
}
.tag--status-pending {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.tag--status-in_progress {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.tag--status-active {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.tag--status-frozen {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0369a1;
}
.tag--status-suspended {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #b45309;
}
.tag--status-terminated {
  background: #f4f4f5;
  border-color: #d4d4d8;
  color: #3f3f46;
}
.tag--status-expired {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.tag--status-cancelled {
  background: #f4f4f5;
  border-color: #d4d4d8;
  color: #52525b;
}
.tag.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: var(--ok);
}
.tag.warn,
.tag[variant="warn"] {
  background: #fffbeb;
  border-color: #fde68a;
  color: var(--warn);
}

/* Forms */
.form label {
  display: block;
  margin: 12px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3d4a5c;
  letter-spacing: 0.01em;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: #fff;
  color: var(--app-text);
  font-size: 0.98rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
/* Restores native checkboxes/radios (global .form input sets appearance:none and 100% width) */
.form input[type="checkbox"],
.form input[type="radio"] {
  width: auto;
  min-width: 1.125em;
  min-height: 1.125em;
  max-width: none;
  margin-top: 0;
  margin-right: 0.4rem;
  padding: 0;
  -webkit-appearance: auto;
  appearance: auto;
  display: inline-block;
  align-self: center;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: none;
}
.form input:hover,
.form textarea:hover,
.form select:hover {
  border-color: #c5ced9;
}
.form textarea {
  min-height: 120px;
  resize: vertical;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}
.form p {
  margin: 16px 0 0;
}
/* ——— User /settings: wide block, no empty side strips ——— */
.app-main--user .user-settings-page {
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.app-main--user .user-settings-page__title {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.app-main--user .user-settings-page__inner {
  max-width: none;
  width: 100%;
  text-align: left;
  background: #f4f5f7;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.15rem 1.15rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (min-width: 600px) {
  .app-main--user .user-settings-page__inner {
    padding: 1.2rem 1.35rem 1.2rem;
  }
}
.app-main--user .user-settings-page__inner .app-user-settings {
  margin: 0;
}
.app-main--user .user-settings-page__inner .form label {
  display: block;
  margin-top: 0.85rem;
}
.app-main--user .user-settings-page__inner .form label:first-of-type {
  margin-top: 0;
}
.app-main--user .user-settings-page__inner .app-user-settings__submit {
  text-align: center;
  margin: 1rem 0 0;
}
.app-main--user .user-settings-page__inner .app-user-settings__submit .btn {
  min-width: 10rem;
}

.app-user-settings__tz-label {
  display: block;
}
.app-user-settings__tz-hint {
  display: block;
  margin: 2px 0 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.02em;
}
.app-user-settings__tz,
.form select.app-user-settings__tz,
.user-settings-page .form select.app-user-settings__tz {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  font-size: 0.86rem;
  line-height: 1.35;
  padding: 10px 40px 10px 12px;
  border-radius: 10px;
  border: 1px solid #c5ced9;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1.1rem 1.1rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.app-user-settings__tz:hover,
.form select.app-user-settings__tz:hover {
  border-color: #94a3b8;
}
.app-user-settings__tz:focus,
.form select.app-user-settings__tz:focus {
  outline: none;
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-primary-soft);
}
/* Options list is OS-native; long labels (GMT+… · IANA) readable when open */
@media (min-width: 500px) {
  .app-user-settings__tz,
  .form select.app-user-settings__tz {
    font-size: 0.88rem;
  }
}

/* ——— Data tables: scrollable, touch-friendly ——— */
.table-wrap {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  position: relative;
}
/* Space below section title (when table follows heading + description) */
.card > h3 + p.muted + .table-wrap,
.card > h3 + .table-wrap {
  margin-top: 12px;
}
.card > h3 + p.muted {
  margin-bottom: 0;
}
.table-wrap--spaced {
  margin-top: 12px;
}
.table-wrap table,
table.data-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--app-surface);
}
/* Wide tables: horizontal scroll on small / medium viewports */
@media (max-width: 900px) {
  .table-wrap:not(.table-wrap--auto) {
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap:not(.table-wrap--auto) table {
    min-width: 640px;
  }
  .table-wrap:not(.table-wrap--auto) table.dashboard-stores-table {
    min-width: 880px;
  }
  .app-main--admin .table-wrap:not(.table-wrap--auto) table.data-table {
    min-width: 800px;
  }
}
@supports not (selector(:has(*))) {
  .app-main .card > table {
    display: block;
    overflow-x: auto;
  }
}
thead th {
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--app-muted);
  padding: 12px 14px;
  background: var(--app-elev);
  border-bottom: 1px solid var(--app-border);
  box-shadow: none;
  white-space: nowrap;
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  color: #334155;
  vertical-align: top;
  word-break: break-word;
}
tbody tr {
  transition: background 0.12s ease;
}
tbody tr:hover td {
  background: #f5f7fa;
}
tbody tr:nth-child(even) td {
  background: #fcfcfd;
}
tbody tr:nth-child(even):hover td {
  background: #f2f4f7;
}
tbody tr:last-child td {
  border-bottom: none;
}
td.table-cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.table-cell-actions {
  vertical-align: middle;
  min-width: 12rem;
}
.table-cell-actions .table-cell-actions__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}
.table-cell-actions__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
}
.table-cell-actions__row--tight {
  gap: 6px 8px;
}
.table-cell-actions__form--credit {
  max-width: 100%;
  width: 100%;
  align-items: center;
}
.table-cell-actions__input-amount {
  width: 6.5rem;
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  padding: 6px 8px;
  font-size: 0.875rem;
}
.table-cell-actions__input-note {
  min-width: 0;
  flex: 1 1 7rem;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  padding: 6px 8px;
  font-size: 0.875rem;
}
td.table-cell-usage {
  font-size: 0.9rem;
  white-space: nowrap;
}
.table-ref-detail {
  margin-top: 4px;
  font-size: 0.8rem;
  word-break: break-all;
  max-width: min(18rem, 100%);
}
.table-wrap .table-cell-actions select {
  min-height: 40px;
  max-width: 100%;
  font-size: 0.875rem;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  background: #fff;
  padding: 6px 8px;
}

/* ——— Admin list tables: same as user .panel-table / .dashboard-stores-table (see below) ——— */
.app-main--admin .table-wrap {
  border: none;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  border-top: 1px solid #f0f2f5;
}
.app-main--admin .data-table {
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--app-surface);
  word-break: normal;
  overflow-wrap: normal;
}
.app-main--admin .data-table.panel-table td {
  vertical-align: middle;
  padding: 12px 12px 13px;
  background: #fff;
  border-color: #f3f4f6;
}
.app-main--admin .data-table.panel-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.app-main--admin .data-table.panel-table tbody tr:hover td,
.app-main--admin .data-table.panel-table tbody tr:nth-child(even):hover td {
  background: #f4fbf9;
}

/* Admin → Settings (tabbed) */
.card--admin-settings .admin-settings__head {
  margin: 0 0 1.1rem;
  padding: 0 0 0.1rem;
}
.card--admin-settings .admin-settings__title {
  margin: 0 0 0.3rem;
  font-size: clamp(1.12rem, 1rem + 0.3vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.card--admin-settings .admin-settings__lede {
  margin: 0 0 0.25rem;
  line-height: 1.55;
  font-size: 0.87rem;
}
.card--admin-settings .admin-settings__lede a {
  color: var(--app-link);
  font-weight: 500;
  text-decoration: none;
}
.card--admin-settings .admin-settings__lede a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Same raised surface as user /settings > .user-settings-page__inner */
.card--admin-settings .admin-settings__pane-surface {
  text-align: left;
  background: #f4f5f7;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.15rem 1.1rem 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
@media (min-width: 500px) {
  .card--admin-settings .admin-settings__pane-surface {
    padding: 1.2rem 1.35rem 1.15rem;
  }
}
.card--admin-settings .admin-settings__form--divided {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--app-border);
}
.card--admin-settings .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid #d9dee6;
}
.card--admin-settings .admin-settings__subhead {
  margin: 1.1rem 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.card--admin-settings .admin-settings__form h3.admin-settings__subhead:first-of-type,
.card--admin-settings .admin-settings__pane-surface h3.admin-settings__subhead:first-of-type {
  margin-top: 0;
}
.card--admin-settings .admin-settings__form-desc,
.card--admin-settings .admin-tabs__pane > .admin-settings__form-desc,
.card--admin-settings .admin-settings__pane-surface > .admin-settings__form-desc:first-child {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #64748b;
}
.card--admin-settings .admin-tabs__pane > p.muted {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #64748b;
}
.card--admin-settings .admin-tabs__pane > p.muted a {
  color: var(--app-link);
  font-weight: 500;
}
/* Settings: mobile = native select; wide = segmented tabs (centered row; scroll if needed) */
.card--admin-settings .admin-tabs__switcher {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
}
.card--admin-settings .admin-tabs__select-field {
  display: none;
  margin: 0 auto 0.85rem;
  width: 100%;
  max-width: 32rem;
}
.card--admin-settings .admin-tabs__select-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}
.card--admin-settings .admin-tabs__select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 36px 10px 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #0f172a;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.card--admin-settings .admin-tabs__select:focus {
  outline: none;
  border-color: rgba(13, 148, 136, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}
@media (max-width: 900px) {
  .card--admin-settings .admin-tabs__select-field {
    display: block;
    max-width: none;
  }
  .card--admin-settings .admin-tabs__list {
    display: none;
  }
}
/* Segmented control: teal = active; centered as a group */
.card--admin-settings .admin-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px 6px;
  margin: 0 auto;
  padding: 5px 6px;
  list-style: none;
  background: #eef2f7;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  width: fit-content;
  max-width: 100%;
}
.card--admin-settings .admin-tabs__list::-webkit-scrollbar {
  height: 6px;
}
.card--admin-settings .admin-tabs__list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.card--admin-settings .admin-tabs__tab {
  flex: 0 0 auto;
  min-width: 5.5rem;
  margin: 0;
  padding: 9px 12px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.card--admin-settings .admin-tabs__tab:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}
.card--admin-settings .admin-tabs__tab[aria-selected="true"] {
  color: #0d9488;
  background: #fff;
  border-color: rgba(13, 148, 136, 0.3);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.card--admin-settings .admin-tabs__tab:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 1px;
}
.card--admin-settings .admin-tabs__panes {
  margin-top: 0.9rem;
}
.card--admin-settings .admin-tabs__pane {
  padding: 0;
  min-width: 0;
}
.card--admin-settings .admin-tabs__pane[hidden] {
  display: none;
}
.card--admin-settings .admin-settings__form label,
.card--admin-settings .app-user-settings label {
  display: block;
  margin-top: 0.85rem;
}
.card--admin-settings .admin-settings__form > label:first-of-type,
.card--admin-settings .app-user-settings > label:first-of-type {
  margin-top: 0;
}
.card--admin-settings .app-user-settings .muted + label {
  margin-top: 0.85rem;
}
.card--admin-settings .app-user-settings,
.card--admin-settings .admin-settings__form {
  max-width: 100%;
}
/* Account: submit row in surface */
.card--admin-settings .admin-settings__pane-surface .app-user-settings__submit {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid #d9dee6;
  text-align: center;
}
.card--admin-settings .admin-settings__pane-surface .app-user-settings__submit .btn {
  min-width: 10rem;
}

/* User /referrals */
.user-referrals {
  max-width: 48rem;
}
.user-referrals--clean .user-referrals__title {
  margin-bottom: 4px;
}
.user-referrals__meta {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
.user-referrals__meta a {
  font-weight: 600;
  color: #0d9488;
}
.user-referrals__info {
  margin: 0 0 1.2rem;
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 44em;
}
.user-referrals__info-line {
  margin: 0 0 0.65em;
}
.user-referrals__info-line:last-child {
  margin-bottom: 0;
}
.user-referrals__info-em {
  color: #0f172a;
  font-weight: 700;
}
.user-referrals--clean .user-referrals__info strong {
  color: #0f172a;
  font-weight: 600;
}
.user-referrals__share {
  margin: 0 0 1.25rem;
}
.user-referrals__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.user-referrals__line:last-of-type {
  margin-bottom: 0;
}
.user-referrals__line--link .user-referrals__url {
  flex: 1 1 12rem;
  min-width: 0;
}
.user-referrals__code {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #0f172a;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.user-referrals__stat-grid--tight {
  margin-bottom: 0.5rem;
}
.user-referrals__h3--table {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.user-referrals--clean .user-referrals__table-wrap {
  margin-top: 0.5rem;
}
.user-referrals__title {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.user-referrals__lede {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.user-referrals__lede a {
  color: #0d9488;
  font-weight: 600;
}
.user-referrals__h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.02em;
}
.user-referrals__link-box {
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.user-referrals__link-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 0.5rem;
}
.user-referrals__url {
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px 7px;
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-all;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.user-referrals__code-fallback,
.user-referrals__code-hint {
  font-size: 0.82rem;
  width: 100%;
  margin: 0.35rem 0 0;
}
.user-referrals__stat-grid {
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 10px 12px;
}
.user-referrals__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 10px 12px 11px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  min-height: 4.25rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.user-referrals__stat-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.25;
}
.user-referrals__stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.user-referrals__table-wrap {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 0.5rem;
}
.user-referrals__ledger {
  min-width: 0;
  font-size: 0.8125rem;
}
.user-referrals__ledger th,
.user-referrals__ledger td {
  vertical-align: top;
  padding: 9px 10px 10px;
}
.user-referrals__type--in {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
  font-size: 0.65rem;
  box-shadow: none;
}
.user-referrals__type--out {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
  font-size: 0.65rem;
  box-shadow: none;
}
.user-referrals__amt--in {
  color: #047857;
  font-weight: 700;
}
.user-referrals__amt--out {
  color: #c2410c;
  font-weight: 700;
}
.user-referrals__note {
  color: #475569;
  word-break: break-word;
  max-width: 20rem;
}
.user-referrals__when {
  font-size: 0.8rem;
  white-space: nowrap;
}
.user-referrals__empty {
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.6rem 0.25rem;
}
@media (min-width: 800px) {
  .user-referrals {
    max-width: 52rem;
  }
  .user-referrals__stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1100px) {
  .user-referrals__stat-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* User /referrals — refreshed layout */
.card--referrals {
  padding: 0;
  overflow: hidden;
  max-width: 52rem;
}
.card--referrals .stores-page__head.referrals-page__head {
  background: linear-gradient(155deg, #ecfdf5 0%, #f8fafc 42%, #fff 100%);
  border-bottom: 1px solid #e7eef5;
  padding: 1rem var(--app-panel-pad-x, 14px) 1.1rem;
  margin: 0;
}
.referrals-page__head-text {
  min-width: 0;
}
.referrals-page__lede {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 40rem;
}
.referrals-page__hero-metric {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}
.referrals-page__hero-metric-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.referrals-page__hero-metric-value {
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #047857;
  font-variant-numeric: tabular-nums;
}
.referrals-page__program {
  padding: 1.1rem var(--app-panel-pad-x, 14px) 1rem;
  border-bottom: 1px solid #f0f2f5;
}
.referrals-page__h3 {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.referrals-page__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: refstep;
}
.referrals-page__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: start;
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
}
.referrals-page__step:last-child {
  margin-bottom: 0;
}
.referrals-page__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f766e;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  flex-shrink: 0;
  margin-top: 1px;
}
.referrals-page__step-body strong {
  color: #0f172a;
  font-weight: 600;
}
.referrals-page__share-card {
  padding: 1rem var(--app-panel-pad-x, 14px) 1.05rem;
  border-bottom: 1px solid #f0f2f5;
  background: #fafbfc;
}
.card--referrals .referrals-page__share-card .referrals-page__h3 {
  margin-bottom: 0.75rem;
}
.referrals-page__share-empty {
  padding: 0.35rem 0 0.15rem;
}
.referrals-page__share-empty-title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #334155;
}
.referrals-page__share-empty-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
.referrals-page__field {
  margin: 0 0 12px;
}
.referrals-page__field:last-child {
  margin-bottom: 0;
}
.referrals-page__field-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 6px;
}
.referrals-page__field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.referrals-page__field-row--url .referrals-page__url {
  flex: 1 1 12rem;
  min-width: 0;
}
.referrals-page__code {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.referrals-page__url {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 8px 11px;
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-all;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.referrals-page__stat-grid {
  list-style: none;
  margin: 0;
  padding: 12px var(--app-panel-pad-x, 14px) 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 10px;
  border-bottom: 1px solid #f0f2f5;
}
@media (min-width: 720px) {
  .referrals-page__stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1100px) {
  .referrals-page__stat-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.referrals-page__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 11px 12px 12px;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  min-height: 4.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.referrals-page__stat--accent {
  background: linear-gradient(160deg, #ecfdf5 0%, #fff 55%);
  border-color: #a7f3d0;
}
.referrals-page__stat-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.2;
}
.referrals-page__stat-value {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.referrals-page__stat--accent .referrals-page__stat-value {
  color: #047857;
}
.referrals-page__activity {
  padding: 12px var(--app-panel-pad-x, 14px) 16px;
}
.referrals-page__activity-h {
  margin: 0 0 10px;
}
.referrals-page__table-wrap {
  border-radius: 8px;
  border: 1px solid #e8edf3;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 0.5rem;
  background: #fff;
}
.referrals-page__ledger {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  font-size: 0.8125rem;
}
.referrals-page__ledger th,
.referrals-page__ledger td {
  vertical-align: middle;
  padding: 10px 12px;
}
.referrals-page__ledger thead th:nth-child(1),
.referrals-page__ledger tbody td:nth-child(1) {
  width: 7.25rem;
  min-width: 6.5rem;
}
.referrals-page__ledger thead th:nth-child(2),
.referrals-page__ledger tbody td:nth-child(2) {
  width: 5.5rem;
  min-width: 4.75rem;
}
.referrals-page__ledger thead th:nth-child(4),
.referrals-page__ledger tbody td:nth-child(4) {
  width: 9rem;
  min-width: 8rem;
  text-align: right;
  white-space: nowrap;
}
.referrals-page__ledger thead th:nth-child(3),
.referrals-page__ledger tbody td:nth-child(3) {
  width: auto;
}
.referrals-page__ledger thead th.table-cell--numeric,
.referrals-page__ledger tbody td.table-cell--numeric {
  text-align: right;
}
.referrals-page__ledger .referrals-page__type,
.referrals-page__ledger .user-referrals__type {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  max-width: none;
}
.referrals-page__ledger thead th:first-child {
  white-space: nowrap;
}
.referrals-page__ledger .referrals-page__note,
.referrals-page__ledger .user-referrals__note {
  max-width: none;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
@media (max-width: 520px) {
  .referrals-page__ledger thead th:nth-child(1),
  .referrals-page__ledger tbody td:nth-child(1) {
    width: 6.75rem;
    min-width: 6rem;
  }
  .referrals-page__ledger thead th:nth-child(4),
  .referrals-page__ledger tbody td:nth-child(4) {
    width: 8.25rem;
    min-width: 7.25rem;
  }
}
.referrals-page__empty {
  padding: 1.25rem 1rem;
  text-align: center;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #fafbfc;
}
.referrals-page__empty-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #334155;
}
.referrals-page__empty-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

/* Wallet */
.card--wallet {
  padding: 0;
  overflow: hidden;
}
.card--wallet .stores-page__head.wallet-page__head {
  background: linear-gradient(160deg, #f0fdfa 0%, #f8fafc 50%, #fff 100%);
}
.wallet-page__head-text {
  min-width: 0;
}
.wallet-page__balance {
  margin: 6px 0 0;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.wallet-page__balance-label {
  font-size: 0.65em;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.2em;
}
.wallet-page__head-actions {
  flex-shrink: 0;
  align-self: flex-start;
}
#wallet-topup-dlg .wallet-topup-dlg__select,
#wallet-topup-dlg select.wallet-topup-dlg__select {
  width: 100%;
  max-width: 100%;
  min-height: 2.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--app-border-strong, #e2e8f0);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
/* /stores — Request domain change: name servers (matches Order a store) */
#user-store-domain-dlg .user-store-domain-dlg__ns {
  margin: 0 0 1rem;
  padding: 12px 12px 10px;
  max-height: min(50vh, 20rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  box-sizing: border-box;
}
#user-store-domain-dlg .user-store-domain-dlg__ns-h {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f46e5;
}
#user-store-domain-dlg .user-store-domain-dlg__ns-h--dns {
  margin-top: 0.75rem;
  color: #64748b;
}
#user-store-domain-dlg .name-server-list {
  margin: 0 0 2px;
  max-width: 100%;
}
#user-store-domain-dlg .user-store-domain-dlg__dns-txt {
  max-width: 100%;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}
#user-store-domain-dlg .user-store-domain-dlg__ns + label {
  margin-top: 0.25rem;
}
.card--wallet .wallet-ledger__h {
  margin: 0;
  padding: 0.9rem var(--app-panel-pad-x) 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}
.card--wallet .wallet-ledger__wrap {
  margin: 0 clamp(0px, 0.2vw, 2px) 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}
.card--wallet .wallet-ledger__date {
  white-space: nowrap;
  font-size: 0.82rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.card--wallet .wallet-ledger__note {
  font-size: 0.88rem;
  color: #334155;
}
.card--wallet .wallet-ledger__amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card--wallet .wallet-amt--in {
  color: #0d9488;
}
.card--wallet .wallet-amt--out {
  color: #c2410c;
}
.card--wallet .table-pager--footer {
  margin: 0;
  padding: 10px var(--app-panel-pad-x) 4px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
}
.card--wallet .table-pager__empty {
  padding: 0 var(--app-panel-pad-x) 1rem;
}
/* User area: default data tables (wallet, support, etc.) — same card style when not /stores, /invoices, or /wallet (wallet uses .card--wallet) */
.app-main--user .table-wrap:not(.dashboard-stores-table-wrap):not(.invoices-table-wrap):not(.wallet-ledger__wrap) {
  border-color: #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 3px rgba(15, 23, 42, 0.04);
}
.app-main--user .table-wrap:not(.dashboard-stores-table-wrap):not(.invoices-table-wrap):not(.wallet-ledger__wrap) table.data-table {
  font-size: 0.85rem;
}
.app-main--user .table-wrap:not(.dashboard-stores-table-wrap):not(.invoices-table-wrap):not(.wallet-ledger__wrap) .data-table td {
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
  border-color: #f1f5f9;
}
.app-main--user .table-wrap:not(.dashboard-stores-table-wrap):not(.invoices-table-wrap):not(.wallet-ledger__wrap) .data-table tbody tr:hover td {
  background: #fafbfc;
}

/* Legacy: raw table in card (should use .table-wrap) */
.app-main .card > table {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  overflow: hidden;
}
.app-main .card:has(> .table-wrap) {
  overflow: visible;
}

p.notice {
  border: 1px solid #fef3c7;
  background: #fffbeb;
  color: #b45309;
  padding: 10px 14px;
  border-radius: var(--app-radius-sm);
  margin: 8px 0 0;
  font-size: 0.9rem;
}

code {
  font-size: 0.8rem;
  padding: 2px 6px;
  background: #f1f5f9;
  border: 1px solid var(--app-border);
  border-radius: 4px;
  color: #0f172a;
  word-break: break-all;
}

/* ——— Mobile & tablet: drawer nav + toggle ——— */
@media (max-width: 1023px) {
  :root {
    --app-header-h: 60px;
  }
  .app-logged-in .nav-menu-toggle {
    display: inline-flex;
  }
  /* Mobile nav: center sheet under header (not left edge drawer) */
  .app-sidebar,
  .sidebar {
    position: fixed;
    z-index: 220;
    top: calc(8px + var(--app-header-h) + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    max-width: min(28rem, calc(100% - 20px));
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 0;
    max-height: min(78dvh, calc(100dvh - var(--app-header-h) - 24px));
    padding: 8px 6px 12px;
    border-radius: 16px !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.22) !important;
    transform: translate3d(0, -20px, 0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0.2s;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
  }
  body.app-nav-open .nav-menu-toggle__bars {
    background: transparent !important;
  }
  body.app-nav-open .nav-menu-toggle__bars::before {
    top: 0 !important;
    transform: translateY(0) rotate(45deg) !important;
  }
  body.app-nav-open .nav-menu-toggle__bars::after {
    top: 0 !important;
    transform: translateY(0) rotate(-45deg) !important;
  }
  body.app-nav-open .nav-menu-toggle__bars,
  body.app-nav-open .nav-menu-toggle__bars::before,
  body.app-nav-open .nav-menu-toggle__bars::after {
    transition: transform 0.2s ease, top 0.2s ease, background 0.2s ease;
  }
  .app-backdrop {
    z-index: 205;
  }
  .app-topbar,
  .topbar {
    z-index: 230;
  }
  body.app-nav-open .app-sidebar,
  body.app-nav-open .sidebar {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .app-sidebar a,
  .sidebar a {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .split,
  .app-panel {
    grid-template-columns: 1fr;
  }
  body.app--panel .split,
  body.app--panel .app-panel {
    grid-template-columns: 1fr;
  }
  .app-topbar,
  .topbar {
    margin-left: calc(-1 * clamp(16px, 4vw, 24px));
    margin-right: calc(-1 * clamp(16px, 4vw, 24px));
  }
  body.app--panel .app-topbar,
  body.app--panel .topbar {
    margin-left: 0;
    margin-right: 0;
  }
  /* Sign out only in side menu on small screens (never duplicate in header) */
  .app-topbar__signout--header-desktop {
    display: none !important;
  }
  body.app--panel .app-main--admin .stores-page__head,
  body.app--panel .app-main--admin .admin-payments-list-card__head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body.app--panel .app-main--admin .stores-page__head .stores-page__cta,
  body.app--panel .app-main--admin .admin-payments-list-card__head .stores-page__cta {
    width: 100%;
    justify-content: center;
  }
  body.app--panel .app-main--admin .admin-dash__hero {
    flex-direction: column;
    align-items: stretch;
  }
  body.app--panel .app-main--admin .admin-dash__hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  body.app--panel .app-main--admin .admin-dash__reports-cta,
  body.app--panel .app-main--admin .admin-dash__run-billing,
  body.app--panel .app-main--admin .admin-dash__run-billing .btn {
    width: 100%;
    justify-content: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .sidebar {
      transition-duration: 0.01ms !important;
    }
  }
}

/* Large screens */
@media (min-width: 1280px) {
  .app-shell {
    padding-bottom: 48px;
  }
}

/* ——— List toolbars (e.g. combined payments) ——— */
.table-toolbar-card > .table-toolbar,
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 4px 0;
}
.table-toolbar h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--app-text);
}
.table-toolbar__lead {
  margin: 0;
  max-width: 40rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.table-toolbar-card .table-wrap,
.table-toolbar + .table-wrap {
  margin-top: 4px;
}

/* ——— Admin support ticket thread ——— */
.support-ticket {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 16px 16px 14px;
  margin: 0 0 12px;
  box-shadow: var(--app-shadow);
  max-width: 100%;
}
.support-ticket strong {
  font-size: 1rem;
  color: var(--app-text);
  display: block;
  margin-bottom: 4px;
}
.support-ticket .form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--app-border);
}

/* Support: dedicated ticket page (user + admin) */
.support-ticket-page__head {
  margin-bottom: 1rem;
}
.support-ticket-page--user .support-ticket-page__head {
  max-width: 40rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 1rem;
}
.support-ticket-page--user .support-ticket-reply--closed {
  max-width: 40rem;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.support-ticket-page__back {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.support-ticket-page__back:hover {
  text-decoration: underline;
}
.support-ticket-page__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--app-text);
}
.support-ticket-page__sub2 {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--app-text);
}
.support-ticket-page__tag[data-status="open"] {
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.35);
}
.support-ticket-page__tag[data-status="closed"] {
  color: var(--app-text-muted, #6b7280);
  background: var(--app-elev, #f3f4f6);
  border: 1px solid var(--app-border);
}
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto 1.25rem;
  max-width: 40rem;
}
/* User (customer) panel: your messages right, support staff left. */
.support-thread__row--user {
  display: flex;
  justify-content: flex-end;
}
.support-thread__row--staff {
  display: flex;
  justify-content: flex-start;
}
/* Admin ticket view: mirror — staff (you) on the right, customer on the left. */
.app-main--admin .admin-support-ticket .support-thread__row--staff {
  justify-content: flex-end;
}
.app-main--admin .admin-support-ticket .support-thread__row--user {
  justify-content: flex-start;
}
.support-thread__bubble {
  max-width: min(100%, 32rem);
  padding: 10px 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-elev, #f8fafc);
  text-align: left;
}
.support-thread__row--user .support-thread__bubble {
  background: var(--app-primary-tint, rgba(20, 184, 166, 0.1));
  border-color: rgba(20, 184, 166, 0.28);
}
.support-thread__bubble[data-staff] {
  background: #fff;
  border-color: var(--app-border-strong, #e2e8f0);
}
.support-thread__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.8rem;
}
.support-thread__author {
  font-weight: 600;
  color: var(--app-text);
}
.support-thread__time {
  font-size: 0.78rem;
  white-space: nowrap;
}
.support-thread__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--app-text);
  word-break: break-word;
}
.support-ticket-reply {
  margin: 0 auto;
  padding: 1rem 0 0;
  border-top: 1px solid var(--app-border);
  max-width: 40rem;
  width: 100%;
  box-sizing: border-box;
}
.support-ticket-reply--closed {
  padding: 0.5rem 0 0;
}
.support-ticket-reply__h {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
/* Full-width thread (matches store sheet) */
.support-ticket-page--user .support-ticket-page__head--full {
  max-width: none;
  width: 100%;
  margin: 0 0 1rem;
  box-sizing: border-box;
}
.support-thread--wide {
  max-width: none;
  width: 100%;
  margin: 0 0 1.25rem;
}
.support-thread--wide .support-thread__bubble {
  max-width: min(100%, 60rem);
}
.support-ticket-page--user .support-ticket-reply--with-files,
.support-ticket-page--user .support-ticket-reply.support-ticket-reply--with-files,
.support-ticket-reply--admin {
  max-width: none;
}

/* Admin: /admin/support?id= — typographic + meta (header padding: body.app--panel above) */
.app-main--admin .admin-support-ticket__customer {
  margin: 0.2rem 0 0.35rem;
  line-height: 1.5;
  font-size: 0.9rem;
}
.app-main--admin .admin-support-ticket__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.2rem 0 0;
  line-height: 1.5;
  font-size: 0.88rem;
}
.app-main--admin .admin-support-ticket__meta .tag,
.app-main--admin .admin-support-ticket__meta .support-ticket-page__tag {
  flex: 0 0 auto;
}
.app-main--admin .admin-support-ticket__subject {
  flex: 1 1 10rem;
  min-width: 0;
  font-weight: 600;
  color: var(--app-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-main--admin .admin-support-ticket__updated {
  flex: 0 0 auto;
  max-width: 100%;
  font-size: 0.86rem;
  margin-left: auto;
}
@media (max-width: 540px) {
  .app-main--admin .admin-support-ticket__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .app-main--admin .admin-support-ticket__meta > .admin-support-ticket__updated {
    width: 100%;
    margin-left: 0;
  }
  .app-main--admin .admin-support-ticket__subject {
    white-space: normal;
  }
}
.app-main--admin .admin-support-ticket__thread .support-thread--wide {
  margin: 0;
}
/* Admin reply: padding from body.app--panel (match user /support); only typographic overrides here */
.app-main--admin .admin-support-ticket__reply {
  text-align: left;
}
.app-main--admin .admin-support-ticket__reply .support-ticket-reply__h {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.app-main--admin .admin-support-ticket__attach-hint {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}
.app-main--admin .admin-support-ticket__form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid #d9dee6;
}

/* Admin /admin/support list — same table shell as user /support */
.app-main--admin .admin-support-ticket-list .user-support-list-table th,
.app-main--admin .admin-support-ticket-list .user-support-list-table td {
  padding: 14px 18px 16px;
  text-align: left;
  vertical-align: top;
}
.app-main--admin .admin-support-ticket-list .user-support-list-table thead th {
  vertical-align: bottom;
}
.app-main--admin .admin-support-ticket-list .user-support-list-table th.stores-th--actions,
.app-main--admin .admin-support-ticket-list .user-support-list-table td.user-support-td--view {
  text-align: right;
  min-width: 6.5rem;
  width: 1%;
}
.app-main--admin .admin-support-ticket-list .user-support-list-table th:nth-child(1),
.app-main--admin .admin-support-ticket-list .user-support-list-table td.user-support-td--id {
  width: 1%;
  white-space: nowrap;
}
.app-main--admin .admin-support-ticket-list .user-support-list-table th.admin-support-th--date,
.app-main--admin .admin-support-ticket-list .user-support-list-table td.admin-support-td--date {
  min-width: 11.5rem;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
  font-weight: 500;
}
.app-main--admin .admin-support-ticket-list .user-support__id-badg,
.app-main--admin .admin-support-ticket-list a.user-support__id-badg {
  display: inline-block;
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.app-main--admin .admin-support-ticket-list a.user-support__id-badg:hover,
.app-main--admin .admin-support-ticket-list a.user-support__id-badg:focus-visible {
  color: #0d9488;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.app-main--admin .admin-support-ticket-list tr.user-support-row--unread {
  background: #f0fdfa;
  box-shadow: inset 3px 0 0 0 #14b8a6;
}
.app-main--admin .admin-support-ticket-list tr.user-support-row--unread td {
  background: transparent;
}
.app-main--admin .admin-support-ticket-list a.user-support__subj {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  color: #0f172a;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  word-break: break-word;
}
.app-main--admin .admin-support-ticket-list a.user-support__subj:hover,
.app-main--admin .admin-support-ticket-list a.user-support__subj:focus-visible {
  color: #0d9488;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.app-main--admin .admin-support-td--user {
  min-width: 8.5rem;
  max-width: 15rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.app-main--admin .admin-support-td__name {
  display: block;
  font-weight: 600;
  color: #0f172a;
}
.app-main--admin .admin-support-td__em {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
}
.app-main--admin .admin-support-td__preview {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}
.app-main--admin .admin-support-td--subj {
  min-width: 10rem;
  max-width: 28rem;
  width: 32%;
}
.app-main--admin .admin-support-ticket-list .user-support-th--status,
.app-main--admin .admin-support-ticket-list .user-support-td--status {
  width: 1%;
  white-space: nowrap;
}
body.app--panel .app-main--admin .admin-support-ticket-list .user-support-table-wrap {
  width: 100%;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  background: #fcfcfd;
}

.support-thread__attach {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
a.support-attach__imglink {
  display: block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
  width: fit-content;
  max-height: 420px;
  border: 1px solid var(--app-border);
  background: #f8fafc;
}
.support-attach__img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}
.support-attach__file {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--app-primary, #0d9488);
}
.support-attach__file:hover {
  text-decoration: underline;
}
.support-attach-field {
  margin: 10px 0 0;
  padding: 0;
  border: none;
}
.support-attach-field__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--app-text);
}
.support-file-previews[hidden] {
  display: none !important;
}
.support-file-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
.support-file-previews__item {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
}
.support-file-previews__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, transform 0.1s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.support-file-previews__remove:hover,
.support-file-previews__remove:focus {
  background: #b91c1c;
  color: #fff;
  outline: none;
  transform: scale(1.05);
}
.support-file-previews__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.support-file-previews__pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b91c1c;
  text-align: center;
  padding: 2px;
}
.support-file-previews__err {
  font-size: 0.72rem;
  color: #b91c1c;
  margin-top: 4px;
  width: 100%;
}
.user-support__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 0 0 1.1rem;
}
.user-support__head-text {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 36rem;
}
.user-support__title {
  margin: 0 0 6px;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--app-text);
  line-height: 1.25;
}
.user-support__lede {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}
.user-support__head-actions {
  flex: 0 0 auto;
}
/* “Create ticket” — same CTA row as /stores (full-width on narrow screens) */
body.app--panel .user-support .stores-page__head .btn#user-support-new-ticket-open {
  white-space: normal;
  text-align: center;
  max-width: 100%;
  padding: 8px 14px;
  line-height: 1.25;
  font-size: 0.9rem;
  font-weight: 600;
}
.user-support__history-h {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--app-text);
}
/* /support list: same table shell as /stores; top-align so all columns share one text baseline on line 1 */
.app-main--user .user-support .user-support-list-table th,
.app-main--user .user-support .user-support-list-table td {
  padding: 14px 18px 16px;
  text-align: left;
  vertical-align: top;
}
.app-main--user .user-support .user-support-list-table thead th {
  vertical-align: bottom;
}
.app-main--user .user-support .user-support-list-table th.stores-th--actions,
.app-main--user .user-support .user-support-list-table td.user-support-td--view {
  text-align: right;
}
.app-main--user .user-support .user-support-list-table th.user-support-th--status,
.app-main--user .user-support .user-support-list-table td.user-support-td--status,
.app-main--user .user-support .user-support-list-table th:nth-child(1),
.app-main--user .user-support .user-support-list-table td.user-support-td--id {
  width: 1%;
  white-space: nowrap;
}
.app-main--user .user-support .user-support-list-table th:nth-child(4),
.app-main--user .user-support .user-support-list-table th:nth-child(5),
.app-main--user .user-support .user-support-list-table td.user-support-td--date {
  min-width: 13rem;
  white-space: nowrap;
}
.app-main--user .user-support .user-support-td--subject {
  min-width: 12rem;
  max-width: none;
  width: 36%;
}
.app-main--user .user-support .user-support__id-badg,
.app-main--user .user-support a.user-support__id-badg {
  display: inline-block;
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.app-main--user .user-support a.user-support__id-badg:hover,
.app-main--user .user-support a.user-support__id-badg:focus-visible {
  color: #0d9488;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.app-main--user .user-support tr.user-support-row--unread {
  background: #f0fdfa;
  box-shadow: inset 3px 0 0 0 #14b8a6;
}
.app-main--user .user-support tr.user-support-row--unread td {
  background: transparent;
}
/* No .app-link here — that class uses inline-flex + min tap height and breaks row alignment */
.app-main--user .user-support a.user-support__subj {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 0;
  max-width: 100%;
  line-height: 1.5;
  color: #0f172a;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  word-break: break-word;
}
.app-main--user .user-support a.user-support__subj:hover,
.app-main--user .user-support a.user-support__subj:focus-visible {
  color: #0d9488;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.app-main--user .user-support .user-support-td--date {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
  font-weight: 500;
}
.app-main--user .user-support .user-support-list-table .user-support-td--status {
  line-height: 1.5;
}
.app-main--user .user-support .user-support-list-table th.stores-th--actions,
.app-main--user .user-support .user-support-list-table td.user-support-td--view {
  min-width: 6.5rem;
  width: 1%;
}
/* Empty list (no rows): match stores empty rhythm */
.app-main--user .user-support .user-support__empty-block {
  margin: 0;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 3vw, 28px);
  text-align: center;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
}
.app-main--user .user-support .user-support__empty-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.app-main--user .user-support .user-support__empty-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  body.app--panel .user-support .stores-page__head .btn#user-support-new-ticket-open {
    width: 100%;
    max-width: 100%;
  }
}

/* /support list + ticket detail (panel): same insets as /stores full-bleed sheet */
body.app--panel .app-main--user .user-support .user-support__history-h {
  margin: 0;
  padding: 14px var(--app-panel-pad-x) 0.4rem;
  box-sizing: border-box;
}
body.app--panel .app-main--user .user-support .user-support__filters {
  margin: 0;
  padding: 0 var(--app-panel-pad-x) 14px;
  box-sizing: border-box;
}
/* Table wrap full-bleed (inherits .card--stores + .panel-table-wrap from /stores) */
body.app--panel .app-main--user .user-support .user-support-table-wrap {
  border-radius: 0;
  border: none;
  background: #fff;
  box-shadow: none;
  border-top: 1px solid #f0f2f5;
  padding: 12px var(--app-panel-pad-x) 8px;
  box-sizing: border-box;
  margin: 0;
  max-width: none;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
body.app--panel .app-main--user .user-support .user-support__empty-block,
body.app--panel .app-main--user .user-support > .table-pager--footer,
body.app--panel .app-main--user .user-support > .table-pager,
body.app--panel .app-main--user .user-support > nav.table-pager {
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
body.app--panel .app-main--user .user-support > .table-pager--footer,
body.app--panel .app-main--user .user-support > .table-pager,
body.app--panel .app-main--user .user-support > nav.table-pager {
  padding-left: var(--app-panel-pad-x);
  padding-right: var(--app-panel-pad-x);
}
body.app--panel .app-main--user .user-support .user-support__empty-block {
  border-top: 1px solid #eef0f3;
  padding: clamp(28px, 5vw, 40px) var(--app-panel-pad-x);
}
/* Ticket thread view: top bar + content gutters (match .stores-page__head rhythm) */
body.app--panel .app-main--user .support-ticket-page--user .support-ticket-page__head--full {
  margin: 0 0 0;
  padding: clamp(18px, 2.2vw, 24px) var(--app-panel-pad-x);
  border-bottom: 1px solid #eef0f3;
  background: #fff;
  box-sizing: border-box;
}
body.app--panel .app-main--user .support-ticket-page--user .support-thread--wide,
body.app--panel .app-main--user .support-ticket-page--user .support-ticket-reply,
body.app--panel .app-main--user .support-ticket-page--user .support-ticket-reply--closed {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--app-panel-pad-x);
  padding-right: var(--app-panel-pad-x);
}
body.app--panel .app-main--user .support-ticket-page--user .support-thread--wide {
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 0;
}
body.app--panel .app-main--user .support-ticket-page--user .support-ticket-reply:not(.support-ticket-reply--closed) {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid var(--app-border);
  margin-top: 0;
}
body.app--panel .app-main--user .support-ticket-page--user .support-ticket-reply--closed {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid var(--app-border);
  margin-top: 0;
}
/* “Not found” (still full-bleed list card) */
body.app--panel .app-main--user .card--panel.card--stores.support-ticket-list-card {
  padding: clamp(20px, 2.2vw, 24px) var(--app-panel-pad-x) 24px;
  box-sizing: border-box;
}

/* Admin /admin/support?id= : same top bar + content gutters as user /support ticket */
body.app--panel .app-main--admin .admin-support-ticket .support-ticket-page__head--full {
  margin: 0 0 0;
  padding: clamp(18px, 2.2vw, 24px) var(--app-panel-pad-x);
  border-bottom: 1px solid #eef0f3;
  background: #fff;
  box-sizing: border-box;
}
body.app--panel .app-main--admin .admin-support-ticket__thread,
body.app--panel .app-main--admin .admin-support-ticket .support-ticket-reply {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--app-panel-pad-x);
  padding-right: var(--app-panel-pad-x);
}
body.app--panel .app-main--admin .admin-support-ticket__thread {
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 0;
  background: #fff;
}
/* Same as user ticket reply: line + top/bottom padding (gutters: rule above) */
body.app--panel .app-main--admin .admin-support-ticket .support-ticket-reply {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid var(--app-border);
  margin-top: 0;
}

/* Admin: plans */
.plans-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.plans-header__actions {
  flex-shrink: 0;
}
.plans-grip-inline,
.plans-grip {
  display: inline-block;
  font-size: 0.85em;
  letter-spacing: -2px;
  color: var(--app-text-muted, #6b7280);
  line-height: 1;
  vertical-align: text-bottom;
}
.plans-td-grip,
.plans-th-grip {
  width: 2.25rem;
  padding: 4px 0 !important;
  text-align: center;
  user-select: none;
}
.plans-td-grip {
  cursor: grab;
  vertical-align: middle;
}
.plans-td-grip:active {
  cursor: grabbing;
}
.plans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.plans-table th,
.plans-table td {
  border-bottom: 1px solid var(--app-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.plans-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--app-text-muted, #6b7280);
  background: var(--app-elev);
  font-weight: 600;
}
.plans-tbody tr.plan-row:last-child td {
  border-bottom: 1px solid var(--app-border);
}
tr.plan-row.is-dragging {
  opacity: 0.55;
}
tr.plan-row--over {
  outline: 2px solid var(--app-primary);
  outline-offset: -2px;
  background: rgba(20, 184, 166, 0.06);
}
.plans-h4 {
  color: var(--app-text);
}
.plans-table-wrap {
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm, 8px);
  overflow: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 800px) {
  .plans-table th:nth-child(3),
  .plans-table th:nth-child(4),
  .plans-table td:nth-child(3),
  .plans-table td:nth-child(4) {
    min-width: 5rem;
  }
}

/* User dashboard polish */
.dashboard-hero {
  border: 1px solid var(--app-border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.dashboard-hero__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.dashboard-kpi > div {
  background: #fff;
  border: 1px solid var(--app-border);
}
.dashboard-kpi--sub > div {
  background: #f8fafc;
}
.dashboard-plan-usage {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.dashboard-plan-usage__item {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* ——— /stores: page header, empty state, data table ——— */
.app-main--user .card--stores.card--panel,
.app-main--user .card--invoices.card--panel {
  padding: 0;
  overflow: hidden;
}
.card--stores {
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 22px) clamp(18px, 2.2vw, 24px);
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: var(--app-shadow);
}
.stores-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0;
  padding: clamp(16px, 2.2vw, 24px) var(--app-panel-pad-x);
  border-bottom: 1px solid #eef0f3;
  background: #fff;
}
.stores-page__title {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
  line-height: 1.2;
}
.stores-page__lede {
  margin: 8px 0 0;
  max-width: 32rem;
  line-height: 1.5;
  font-size: 0.875rem;
}
.stores-page__cta {
  flex-shrink: 0;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.stores-page__empty {
  text-align: center;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 28px);
  margin: 0;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
}
.stores-page__empty-visual {
  display: none;
}
.stores-page__empty-icon {
  display: none;
}
.stores-page__empty-icon::before {
  content: none;
}
.stores-page__empty-icon::after {
  content: none;
}
.stores-page__empty-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.stores-page__empty-text {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.stores-page__empty .btn {
  min-width: 8.5rem;
}
.dashboard-stores-table .th-sub {
  display: inline;
  margin-left: 0.2em;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #94a3b8;
}
/* In-page tables: top/side padding (overridden in body.app--panel for list cards) */
.app-main--user .dashboard-stores-table-wrap,
.app-main--user .panel-table-wrap,
.app-main--user .invoices-table-wrap,
.app-main--user .wallet-ledger__wrap,
.app-main--user .user-referrals__table-wrap,
.app-main--user .referrals-page__table-wrap,
.app-main--admin .table-wrap.table-wrap--spaced {
  padding: 8px 10px 4px;
  box-sizing: border-box;
}
/* Pager: align with table insets; panel uses --app-panel-pad-x */
.app-main--user .table-pager,
.app-main--user .table-pager--footer,
.app-main--admin .table-pager,
.app-main--admin .table-pager--footer {
  padding-left: var(--app-panel-pad-x, 10px);
  padding-right: var(--app-panel-pad-x, 10px);
  box-sizing: border-box;
}
.dashboard-stores-table-wrap {
  border-radius: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: none;
  background: #fff;
}
/* Full-bleed table under header: top + side gap inside the card (same as --app-panel-pad-x) */
.card--stores .dashboard-stores-table-wrap,
.card--stores .panel-table-wrap {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
  border-radius: 0;
  padding: 12px var(--app-panel-pad-x) 8px;
  box-sizing: border-box;
}
/* Pager under stores table: match side inset, space above and below */
.card--stores .table-pager--footer,
.card--stores .table-pager,
.card--stores > nav.table-pager {
  padding: 8px var(--app-panel-pad-x) 16px;
  box-sizing: border-box;
}
/* Panel: override generic .app-main--* .table-wrap padding so admin + user list sheets match */
body.app--panel .app-main--user .card--panel.card--stores .table-wrap.table-wrap--spaced,
body.app--panel .app-main--user .card--panel.card--invoices .table-wrap.table-wrap--spaced,
body.app--panel .app-main--admin .card--panel.card--stores .table-wrap.table-wrap--spaced,
body.app--panel .app-main--admin .table-toolbar-card .table-wrap.table-wrap--spaced,
body.app--panel .app-main--user .card--panel.card--wallet .wallet-ledger__wrap,
body.app--panel .app-main--user .user-referrals .user-referrals__table-wrap,
body.app--panel .app-main--user .user-referrals .referrals-page__table-wrap {
  margin-left: 0;
  margin-right: 0;
  padding: 12px var(--app-panel-pad-x) 8px;
  border-radius: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.panel-table-wrap.table-wrap {
  box-shadow: none;
  background: #fff;
  border-top: 1px solid #f0f2f5;
}
.dashboard-stores-table-wrap.table-wrap {
  box-shadow: none;
  background: #fff;
}
@media (min-width: 1200px) {
  .dashboard-stores-table {
    min-width: 1040px;
  }
  .user-support .dashboard-stores-table.user-support-list-table {
    min-width: 58rem;
  }
}
.dashboard-stores-table thead th,
.panel-table thead th {
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  vertical-align: bottom;
}
.panel-table tbody td {
  border-bottom: 1px solid #f3f4f6;
}
.panel-table tbody tr:last-child td {
  border-bottom: none;
}
/* Plan column (stores only — /support reuses .dashboard-stores for a different column set) */
.app-main--user .dashboard-stores-table:not(.user-support-list-table) thead th:nth-child(2),
.app-main--admin .admin-stores-data-table.dashboard-stores-table:not(.user-support-list-table) thead th:nth-child(3) {
  min-width: 5.5rem;
}
/* Orders column: one-line header (see .th-sub) */
.app-main--user .dashboard-stores-table:not(.user-support-list-table) thead th:nth-child(3),
.app-main--admin .admin-stores-data-table.dashboard-stores-table:not(.user-support-list-table) thead th:nth-child(4) {
  white-space: nowrap;
  min-width: 7.5rem;
}
.dashboard-stores-table td {
  vertical-align: middle;
  padding: 12px 12px 13px;
  background: #fff;
  word-break: normal;
  overflow-wrap: normal;
  border-color: #f3f4f6;
}
.dashboard-stores-table tbody tr {
  position: relative;
}
.dashboard-stores-table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.dashboard-stores-table tbody tr:hover td,
.dashboard-stores-table tbody tr:nth-child(even):hover td {
  background: #f4fbf9;
}
.dashboard-stores-table tr.store-row td:first-child {
  box-shadow: none;
}
.dashboard-stores-table tr.store-row[data-store-status="active"] td:first-child,
.dashboard-stores-table tr.store-row[data-store-status="pending"] td:first-child,
.dashboard-stores-table tr.store-row[data-store-status="frozen"] td:first-child,
.dashboard-stores-table tr.store-row[data-store-status="suspended"] td:first-child {
  box-shadow: none;
}
.store-row__domain {
  min-width: 11rem;
  max-width: 100%;
}
.store-row__title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.store-row__host {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: #111827;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
.dashboard-stores-table .store-row__host {
  font-size: 0.9375rem;
}
.store-row__name {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-row__chip {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
/* /stores: pending name-server row (full table width) */
.store-row--ns-follows > td {
  border-bottom: none;
  padding-bottom: 6px;
}
.app-main--user .dashboard-stores-table tr.store-row-dns > td,
.app-main--user .dashboard-stores-table tr.store-row-dns th,
.app-main--admin .dashboard-stores-table tr.store-row-dns > td,
.app-main--admin .dashboard-stores-table tr.store-row-dns th {
  background: #f0f4f8 !important;
  border-top: 1px solid #e2e8f0;
  box-shadow: inset 3px 0 0 #0d9488;
  padding: 0;
  vertical-align: top;
}
.app-main--user .dashboard-stores-table tr.store-row-dns:hover > td,
.app-main--user .dashboard-stores-table tr.store-row:hover + tr.store-row-dns > td,
.app-main--admin .dashboard-stores-table tr.store-row-dns:hover > td,
.app-main--admin .dashboard-stores-table tr.store-row:hover + tr.store-row-dns > td {
  background: #e8eff5 !important;
}
.store-row-dns {
  --store-dns-border: #e2e8f0;
  --store-dns-muted: #64748b;
  --store-dns-text: #0f172a;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--store-dns-text);
  box-sizing: border-box;
}
.store-row-dns__bar {
  position: relative;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.7rem 1.25rem;
  padding: 0.5rem 0.75rem 0.55rem 0.9rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
}
.store-row-dns__col--our {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 64rem) {
  .store-row-dns__bar {
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .store-row-dns__state {
    flex: 0 1 auto;
    align-self: stretch;
    min-width: 8.5rem;
    margin-left: auto;
    max-width: min(24rem, 40vw);
  }
}
.store-row-dns--awaiting .store-row-dns__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(13, 148, 136, 0) 0%,
    rgba(13, 148, 136, 0.09) 50%,
    rgba(13, 148, 136, 0) 100%
  );
  background-size: 220% 100%;
  animation: store-row-dns-sheen 2.6s ease-in-out infinite;
  opacity: 0.9;
}
.store-row-dns__bar > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .store-row-dns--awaiting .store-row-dns__bar::after {
    animation: none;
    opacity: 0.4;
  }
}
@keyframes store-row-dns-sheen {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.store-row-dns__lab {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--store-dns-muted);
  margin: 0 0 0.35rem;
}
.store-row-dns__hosts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
}
.store-row-dns__hostrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.6rem;
  min-width: 0;
}
.store-row-dns__code {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0.2rem 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.25;
}
.store-row-dns__copy,
.store-row-dns__hostrow .order-copy-btn {
  flex: 0 0 auto;
  font-size: 0.64rem;
  min-height: 1.6rem;
  padding: 0.12rem 0.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.store-row-dns__state {
  display: flex;
  flex: 1 1 10rem;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  text-align: left;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.store-row-dns__state-okrow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 0.65rem;
  min-height: 2.45rem;
  padding: 0.55rem 0.7rem 0.55rem 0.7rem;
}
.store-row-dns__state--ok {
  border-color: #6ee7b7;
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
  color: #047857;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.1);
}
.store-row-dns__state-okrow .store-row-dns__msg {
  margin: 0;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: left;
  max-width: 100%;
}
.store-row-dns__state--info,
.store-row-dns__state--wait,
.store-row-dns__state--miss,
.store-row-dns__state--err {
  --store-dns-pulse-bg: rgba(15, 23, 42, 0.06);
  --store-dns-pulse-fg: #0d9488;
  --store-dns-accent: #0d9488;
  --store-dns-surface: linear-gradient(100deg, rgba(13, 148, 136, 0.06) 0%, #fff 42%);
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--store-dns-accent);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.store-row-dns__state--info {
  --store-dns-pulse-fg: #0d9488;
  --store-dns-accent: #0d9488;
}
.store-row-dns__state--wait {
  --store-dns-pulse-fg: #64748b;
  --store-dns-pulse-bg: rgba(100, 116, 139, 0.12);
  --store-dns-accent: #64748b;
  --store-dns-surface: linear-gradient(100deg, rgba(100, 116, 139, 0.08) 0%, #fff 50%);
  color: #1e293b;
}
.store-row-dns__state--miss {
  --store-dns-pulse-fg: #b45309;
  --store-dns-pulse-bg: rgba(180, 83, 9, 0.1);
  --store-dns-accent: #d97706;
  --store-dns-surface: linear-gradient(100deg, rgba(245, 158, 11, 0.1) 0%, #fffbeb 48%, #fff 100%);
  border: 1px solid #fde68a;
  border-left: 3px solid var(--store-dns-accent);
  color: #7c2d12;
}
.store-row-dns__state--err {
  --store-dns-pulse-fg: #be123c;
  --store-dns-pulse-bg: rgba(190, 18, 60, 0.1);
  --store-dns-accent: #e11d48;
  --store-dns-surface: linear-gradient(100deg, rgba(225, 29, 72, 0.07) 0%, #fff1f2 40%, #fff 100%);
  border: 1px solid #fecdd3;
  border-left: 3px solid var(--store-dns-accent);
  color: #9f1239;
}
.store-row-dns__state--info .store-row-dns__state-waiting,
.store-row-dns__state--wait .store-row-dns__state-waiting,
.store-row-dns__state--miss .store-row-dns__state-waiting,
.store-row-dns__state--err .store-row-dns__state-waiting {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: var(--store-dns-surface);
}
.store-row-dns__state-waiting {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  gap: 0.65rem 0.85rem;
  padding: 0.65rem 0.75rem 0.65rem 0.65rem;
  min-height: 2.5rem;
  box-sizing: border-box;
}
.store-row-dns__state-waiting-anim {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 2.4rem;
  min-height: 2rem;
}
.store-row-dns__state-waiting-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.15rem 0.25rem;
  padding: 0.1rem 0 0.1rem 0;
}
.store-row-dns__state-waiting-line,
.store-row-dns__state-waiting-sub,
.store-row-dns__state-okrow .store-row-dns__msg {
  text-align: left;
}
.store-row-dns__state-okrow .store-row-dns__state-ok-hint {
  margin: 0.2rem 0 0 0;
  max-width: 100%;
  font-size: 0.62rem;
  line-height: 1.4;
  font-weight: 500;
  color: #166534;
  word-break: break-word;
}
.store-row-dns__state-okrow .store-row-dns__state-ok-hint .store-row-dns__obs-c {
  color: #14532d;
}
.store-row-dns__state-waiting-line {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: inherit;
  max-width: 100%;
}
.store-row-dns__state-waiting-sub {
  margin: 0;
  font-size: 0.69rem;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
  opacity: 0.9;
  max-width: 100%;
}
.store-row-dns__state-waiting-sub--err {
  opacity: 1;
  margin-top: 0.04rem;
}
.store-row-dns__state-waiting-sub .store-row-dns__errc {
  display: inline;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #fecdd3;
  border-radius: 4px;
  padding: 0.15rem 0.3rem 0.12rem;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-all;
  color: #9f1239;
}
.store-row-dns__ico {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: #047857;
  flex-shrink: 0;
}
.store-row-dns__msg {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  text-align: inherit;
  max-width: 100%;
}
.store-row-dns__errc {
  font-size: 0.68rem;
  font-weight: 500;
  color: #9d174d;
  word-break: break-all;
  background: rgba(255, 255, 255, 0.6);
  border: 0;
  padding: 0 0.1rem;
}
.store-row-dns__miss {
  font-weight: 700;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.store-row-dns__state-waiting-obs {
  margin: 0.2rem 0 0 0;
  font-size: 0.64rem;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.72);
  max-width: 100%;
  word-break: break-word;
}
.store-row-dns__state-waiting-obs .store-row-dns__obs-c {
  display: inline;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 3px;
  padding: 0.06rem 0.22rem 0.05rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: #334155;
  word-break: break-all;
}
.store-row-dns__errtxt {
  display: block;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #9f1239;
}
.store-row-dns__state--err .store-row-dns__errtxt {
  color: #9b1c1c;
}
.store-row-dns__pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  line-height: 0;
  flex-shrink: 0;
  padding: 0.4rem 0.48rem;
  color: var(--store-dns-pulse-fg, #0d9488);
  background: var(--store-dns-pulse-bg, rgba(15, 23, 42, 0.06));
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.store-row-dns__dot {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  animation: store-row-dns-dot 1.05s ease-in-out infinite;
}
.store-row-dns__dot:nth-child(1) {
  animation-delay: 0ms;
}
.store-row-dns__dot:nth-child(2) {
  animation-delay: 0.12s;
}
.store-row-dns__dot:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes store-row-dns-dot {
  0%,
  70%,
  100% {
    opacity: 0.25;
    transform: scale(0.9);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .store-row-dns__dot {
    animation: none;
    opacity: 0.55;
  }
}
.store-row-dns__recheck {
  margin-top: 0.65rem;
  padding: 0 0.75rem 0.15rem 0.85rem;
  box-sizing: border-box;
}
.store-row-dns__recheck-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 14px;
  padding: 12px 14px 13px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #14b8a6;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
.store-row-dns__recheck-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  color: #0f766e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.store-row-dns__recheck-icon-svg {
  display: block;
  opacity: 0.95;
}
.store-row-dns__recheck-body {
  min-width: 0;
}
.store-row-dns__recheck-title {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.25;
}
.store-row-dns__recheck-list {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #475569;
}
.store-row-dns__recheck-list li {
  margin: 0 0 4px;
}
.store-row-dns__recheck-list li:last-child {
  margin-bottom: 0;
}
.store-row-dns__recheck-list strong {
  color: #334155;
  font-weight: 600;
}
.store-row-dns__recheck-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 2px;
}
.store-row-dns__recheck-form {
  margin: 0;
}
.store-row-dns__recheck-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.store-row-dns__recheck-btn-svg {
  flex-shrink: 0;
  opacity: 0.95;
}
@media (max-width: 720px) {
  .store-row-dns__recheck-panel {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .store-row-dns__recheck-icon-wrap {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .store-row-dns__recheck-body {
    grid-column: 2;
    grid-row: 1;
  }
  .store-row-dns__recheck-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: stretch;
    padding-top: 2px;
  }
  .store-row-dns__recheck-form {
    width: 100%;
  }
  .store-row-dns__recheck-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 380px) {
  .store-row-dns__recheck-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .store-row-dns__recheck-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
  }
  .store-row-dns__recheck-body {
    grid-column: 1;
    grid-row: auto;
  }
  .store-row-dns__recheck-actions {
    grid-column: 1;
    grid-row: auto;
  }
}
.store-row__orders {
  min-width: 7.25rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.store-row__orders-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
}
.store-row__stat {
  display: inline;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.store-row__stat-label {
  display: inline;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.2;
}
.store-row__stat-meta {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
}
.store-row__quota {
  color: #334155;
  font-weight: 600;
}
.store-row__renews {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
  max-width: 9.5rem;
}
/* Renewal: two lines (date, then time), no zone label */
.store-renewal-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
td.store-row__renews .store-renewal-stack {
  width: 100%;
}
.store-renewal-stack__date {
  display: block;
  font-weight: 600;
  color: #0f172a;
  font-size: 0.8rem;
}
.store-renewal-stack__time {
  display: block;
  font-weight: 500;
  color: #64748b;
  font-size: 0.75rem;
}
.admin-store-renewal-cell {
  min-width: 6.5rem;
  line-height: 1.2;
  font-size: 0.85rem;
  vertical-align: top;
  max-width: 10rem;
}
.admin-store-renewal-cell .store-renewal-stack {
  align-items: flex-start;
  text-align: left;
}
.admin-store-renewal-cell .store-renewal-stack__date,
.admin-store-renewal-cell .store-renewal-stack__time {
  font-size: 0.82rem;
}
.en-dash {
  user-select: none;
}
.store-row__status {
  min-width: 5.25rem;
  white-space: nowrap;
  vertical-align: middle;
}
.store-row__staff-cell {
  min-width: 6.5rem;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
}
/* Admin stores: leading ID column */
.app-main--admin .admin-stores-data-table .stores-th--id,
.app-main--admin .admin-stores-data-table .stores-td--id {
  width: 1%;
  max-width: 5.5rem;
  white-space: nowrap;
  vertical-align: middle;
}
.app-main--admin .admin-stores-data-table .stores-id-badge {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.2;
}
.stores-th--staff,
.stores-th--actions {
  text-align: right;
  vertical-align: bottom;
  white-space: nowrap;
}
.dashboard-stores-table thead th.stores-th--actions,
.dashboard-stores-table thead th.stores-th--staff {
  text-align: right;
}
/* Last two columns: th/td use same width + alignment (global td.table-cell-actions { min-width: 12rem } is for admin/credit UIs) */
.dashboard-stores-table th.stores-th--staff,
.dashboard-stores-table td.store-row__staff-cell {
  width: 1%;
  min-width: 6.5rem;
  text-align: right;
  vertical-align: middle;
  box-sizing: border-box;
}
.dashboard-stores-table th.stores-th--actions,
.dashboard-stores-table td.table-cell-actions.store-row__action-cell {
  width: 1%;
  /* Action dropdown (same family as admin store actions) */
  min-width: min(12.5rem, 32vw);
  text-align: right;
  vertical-align: middle;
  box-sizing: border-box;
}
.dashboard-stores-table th.stores-th--actions,
.dashboard-stores-table th.stores-th--staff {
  padding-left: 10px;
  padding-right: 12px;
}
.dashboard-stores-table td.store-row__staff-cell,
.dashboard-stores-table td.table-cell-actions.store-row__action-cell {
  padding-left: 10px;
  padding-right: 12px;
}
/* Global .tag uses word-break: break-word — keep status on one line */
.dashboard-stores-table .store-row__status .tag {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  max-width: max-content;
}
.store-row__staff-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f766e;
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.store-row__staff-link:hover {
  color: #0d9488;
  text-decoration: none;
  background: rgba(13, 148, 136, 0.08);
}
.store-row__staff-ico {
  flex-shrink: 0;
  color: #0d9488;
  opacity: 0.9;
}
.store-row__staff-link:hover .store-row__staff-ico {
  opacity: 1;
}
.store-row__staff-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.store-row__staff-open {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  line-height: 1;
  padding: 4px 2px;
}
.store-row__staff-open:hover {
  color: #0d9488;
}
.store-row__action-cell {
  min-width: 6.5rem;
  width: 1%;
  text-align: right;
  vertical-align: middle;
}
/* Admin → Stores: full domain + action menu */
.admin-store-domain-cell {
  min-width: 9rem;
  max-width: 22rem;
  vertical-align: top;
}
code.admin-store-dom {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  word-break: break-all;
  white-space: normal;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 8px 6px;
  color: #0f172a;
}
.admin-store-action-td {
  min-width: 12.5rem;
  max-width: 18rem;
  vertical-align: middle;
}
.admin-store-action-wrap {
  display: block;
  min-width: 0;
}
select.admin-store-action-select {
  width: 100%;
  min-width: 11.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.3;
  font-weight: 500;
  color: #0f172a;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
select.admin-store-action-select:hover {
  border-color: #94a3b8;
  background: #fff;
}
select.admin-store-action-select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.22);
  outline: none;
}
/* /stores: action button + floating menu (not a native <select>) */
.store-action-dd {
  position: relative;
  display: block;
  max-width: 12.5rem;
  margin-left: auto;
  text-align: right;
}
.store-action-dd__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  min-width: 5.5rem;
  margin: 0 0 0 auto;
  padding: 0 0.7rem 0 0.85rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #0f172a;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.store-action-dd__trigger:hover {
  border-color: #94a3b8;
  background: #fff;
  color: #0a756c;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}
.store-action-dd__trigger.is-open,
.store-action-dd__trigger[aria-expanded='true'] {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
  color: #0d9488;
}
.store-action-dd__chev {
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.1rem;
  transition: transform 0.15s ease;
  opacity: 0.85;
}
.store-action-dd__trigger.is-open .store-action-dd__chev,
.store-action-dd__trigger[aria-expanded='true'] .store-action-dd__chev {
  transform: rotate(225deg);
  margin-top: 0.12rem;
}
.store-action-dd__menu {
  position: fixed;
  z-index: 5000;
  min-width: 10.5rem;
  max-width: min(18rem, 92vw);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.store-action-dd__menu[hidden] {
  display: none;
}
.store-action-dd__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.6rem 1rem;
  text-align: left;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #0f172a;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, color 0.1s;
}
.store-action-dd__item:hover {
  background: #f0fdfa;
  color: #0d9488;
  outline: none;
}
.store-action-dd__item:focus {
  outline: none;
}
.store-action-dd__item:focus-visible {
  background: #ecfdf5;
  color: #0d9488;
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.35);
}
.store-action-dd__item + .store-action-dd__item {
  border-top: 1px solid #f1f5f9;
}
/* Staff page (/admin/staff, /staff): align Actions column like Admin → Stores */
.admin-store-staff-table thead th.store-staff__action-cell,
.admin-store-staff-table td.store-staff__action-cell {
  width: 1%;
  min-width: min(12.5rem, 32vw);
  text-align: right;
  vertical-align: middle;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 12px;
}
@media (max-width: 600px) {
  .store-action-dd__menu {
    max-width: min(20rem, calc(100vw - 16px));
  }
  .store-action-dd__trigger {
    min-width: 5.25rem;
  }
}
.dashboard-orders-cell {
  min-width: 140px;
  font-size: 0.875rem;
}
.store-cell-tight {
  width: 1%;
  white-space: nowrap;
}
.store-cell--renew {
  vertical-align: middle;
}
.store-auto-renew-form {
  display: block;
  margin: 0;
  vertical-align: middle;
}
.store-ar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.store-ar-hint {
  display: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  line-height: 1;
}
@media (min-width: 1200px) {
  .store-ar-hint {
    display: inline;
  }
}
button.store-ar-switch {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  vertical-align: middle;
  border-radius: 999px;
  flex-shrink: 0;
}
button.store-ar-switch:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 3px;
}
.store-ar-switch__track {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #e5e7eb;
  transition: background 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.store-ar-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
button.store-ar-switch[aria-checked='true'] .store-ar-switch__track {
  background: #34d399;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.4);
}
button.store-ar-switch[aria-checked='true'] .store-ar-switch__thumb {
  transform: translateX(18px);
  box-shadow: 0 1px 4px rgba(5, 46, 22, 0.2);
}
button.store-ar-switch:hover .store-ar-switch__track {
  background: #d1d5db;
}
button.store-ar-switch[aria-checked='true']:hover .store-ar-switch__track {
  background: #2dd4bf;
}
@media (max-width: 900px) {
  .card--stores,
  .app-main--admin .card {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ——— /invoices: list uses same table shell as /stores (.dashboard-stores-table); status pills + detail line items ——— */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* List rows = panel-table + .inv-row; zebra / hover from .dashboard-stores-table */
a.invoices-td__id {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 4px;
}
a.invoices-td__id:hover,
a.invoices-td__id:focus-visible {
  color: var(--app-primary, #0d9488);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
a.invoices-td__id:focus-visible {
  box-shadow: 0 0 0 2px var(--app-primary-soft, rgba(13, 148, 136, 0.2));
  text-decoration: none;
}
.dashboard-stores-table.invoices-list-table .invoices-list-table__amt {
  display: inline-block;
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.dashboard-stores-table.invoices-list-table .invoices-list-table__due {
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dashboard-stores-table.invoices-list-table th.stores-th--actions,
.dashboard-stores-table.invoices-list-table td.table-cell-actions.store-row__action-cell {
  min-width: 5.25rem;
  width: 1%;
}
.invoices-table__usage,
.invoices-table__usage * {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}
.invoices-usage__unit {
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.invoices-usage__sep {
  color: #cbd5e1;
  margin: 0 0.1em;
}
/* Invoice detail: boxed host line (line items) */
.invoices-table__host {
  display: inline-block;
  max-width: 100%;
  font-size: 0.75rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 3px 7px 4px;
  word-break: break-all;
  line-height: 1.2;
}
.inv-pill,
.tag.inv-tag--unpaid,
.inv-tag--unpaid {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 6px;
  line-height: 1.2;
  border: 1px solid transparent;
}
.inv-pill--unpaid,
.inv-tag--unpaid,
.tag.inv-tag--unpaid {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}
.inv-pill--paid,
.inv-tag--paid,
.tag.inv-tag--paid {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #6ee7b7;
  font-weight: 600;
}
.inv-pill--cancelled,
.inv-tag--cancelled,
.tag.inv-tag--cancelled {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-weight: 600;
}
a.invoices-table__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
  background: #fff;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.06);
}
a.invoices-table__view:hover {
  background: #f0fdfa;
  border-color: #2dd4bf;
  color: #0f766e;
  text-decoration: none;
  box-shadow: 0 2px 4px -2px rgba(15, 118, 110, 0.15);
}
.invoices-table__view-arr {
  font-size: 0.85em;
  opacity: 0.7;
  transform: translateX(0);
  transition: transform 0.12s;
}
a.invoices-table__view:hover .invoices-table__view-arr {
  transform: translateX(1px);
}
/* Single-invoice view: centered “receipt” in main (panel + default) */
.invoice-detail-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(12px, 2.5vw, 28px) 0 28px;
  margin: 0;
  text-align: center;
}
body.app--panel .app-main--user > .invoice-detail-page {
  flex: 1 1 auto;
  min-width: 0;
  /* Gray canvas with centered card (not full-bleed like list rows) */
  background: var(--pp-canvas, #ebedf0);
  padding: clamp(20px, 3.5vw, 40px) clamp(16px, 2.5vw, 32px) 36px;
}
.card--invoice-detail {
  max-width: min(28rem, 100%);
  width: 100%;
  border-color: #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 4px 24px -12px rgba(15, 23, 42, 0.2);
  text-align: center;
  border-radius: 16px;
  padding: clamp(20px, 3.5vw, 30px) clamp(18px, 3vw, 28px) clamp(22px, 3.5vw, 32px);
}
.invoice-detail__head {
  text-align: center;
}
.invoice-detail__back {
  display: inline-block;
  margin: 0 auto 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
}
.invoice-detail__back:hover {
  text-decoration: underline;
}
.invoice-detail__back::before {
  content: '← ';
  opacity: 0.7;
}
.invoice-detail__title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0f172a;
  line-height: 1.2;
}
.invoice-detail__sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}
.invoice-detail__sub-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 4px;
}
.invoice-detail__domain {
  display: block;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.95rem;
  word-break: break-word;
  margin-top: 2px;
}
.invoice-detail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.9rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  padding: 16px 0 0;
  text-align: left;
  border: none;
  border-top: 1px solid #e2e8f0;
  margin-top: 14px;
}
.invoice-detail__meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  padding: 0;
  border: none;
}
.invoice-detail__meta dt {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0;
}
.invoice-detail__meta dd {
  margin: 0;
  font-size: 0.875rem;
  color: #0f172a;
}
.invoice-detail__amount {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0d9488;
  letter-spacing: -0.02em;
}
.invoice-detail__pay {
  margin: 0 auto;
  margin-top: 10px;
  max-width: 20rem;
  width: 100%;
  text-align: center;
  padding: 20px 0 0;
  border: none;
  background: none;
  box-shadow: none;
}
.invoice-detail__pay-h {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #64748b;
}
.invoice-detail__pay-lede {
  margin: 0 0 20px;
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 19rem;
  margin-left: auto;
  margin-right: auto;
}
.invoice-pay-form {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
}
.invoice-pay-form__field {
  text-align: left;
  margin-bottom: 10px;
}
.invoice-pay-form__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}
.invoice-pay-form__select {
  display: block;
  width: 100%;
  min-height: 46px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.invoice-pay-form__select:hover {
  border-color: #94a3b8;
}
.invoice-pay-form__select:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}
.invoice-pay-form__hint {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 20px;
  min-height: 2.4em;
}
.invoice-pay-form__submit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.invoice-pay-form__btn {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
  border: 1px solid #0d9488;
  color: #fff;
  box-shadow: 0 2px 4px rgba(15, 118, 110, 0.25);
  padding: 12px 20px;
  letter-spacing: -0.01em;
}
.invoice-pay-form__btn:hover:not([disabled]) {
  filter: brightness(1.05);
}
.invoice-pay-form__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: #94a3b8;
  border-color: #94a3b8;
  box-shadow: none;
}
@media (max-width: 600px) {
  .invoice-detail__meta {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  body.app--panel .app-main--user > .invoice-detail-page {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ——— Order new store (clean flow) ——— */
.auth-wrap--order {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(16px, 4vw, 28px);
}
.order-page-card {
  border: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
}
.order-page-card--public {
  width: 100%;
}
.order-flow {
  max-width: 100%;
}
.order-flow__title {
  margin: 0 0 18px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--app-text);
}
.order-flow__grid {
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
}
@media (min-width: 700px) {
  .order-flow__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.order-card {
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.order-card--summary {
  text-align: center;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
  border-color: #99f6e4;
  margin-bottom: 20px;
  padding: 18px 16px 16px;
}
.order-card__kicker {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0d9488;
}
.order-card__price {
  margin: 0 0 8px;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0f172a;
  line-height: 1.1;
}
.order-card__currency {
  font-size: 1.1rem;
  font-weight: 700;
  color: #14b8a6;
  vertical-align: 0.15em;
  margin-right: 2px;
}
.order-card__fine {
  margin: 0;
  font-size: 0.85rem;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
.order-card--ns {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}
.order-card--plan {
  border-color: #ddd6fe;
  background: linear-gradient(180deg, #f5f3ff 0%, #fff 100%);
}
.order-card--dns {
  border-color: #a5f3fc;
  background: linear-gradient(180deg, #ecfeff 0%, #fff 100%);
  margin: 0 0 20px;
}
.order-dns-prose {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--app-text);
  word-wrap: break-word;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.card--admin-settings .app-settings-textarea,
#admin-panel-platform .app-settings-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 4.5em;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--app-border-strong, #e2e8f0);
  border-radius: 8px;
  background: #fafbfc;
  resize: vertical;
}
#admin-panel-platform textarea[rows="5"].app-settings-textarea {
  font-family: inherit;
  min-height: 7.5em;
}
.order-card__h {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e1b4b;
}
.order-card__p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.order-card__foot,
.order-card__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}
.order-card__foot em,
.order-card__p em {
  font-style: normal;
  color: #64748b;
}
.name-server-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.name-server-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}
.name-server-list__host {
  font-size: 0.88rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #0f172a;
  font-weight: 500;
  word-break: break-all;
}
.tag--plan-a {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
  font-weight: 600;
}
.order-plan-facts {
  margin: 0 0 10px;
  padding: 0;
  font-size: 0.88rem;
}
.order-plan-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) 1fr;
  gap: 8px 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  align-items: start;
}
.order-plan-facts > div:last-of-type {
  border-bottom: none;
}
.order-plan-facts dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.order-plan-facts dd {
  margin: 0;
  color: #1e293b;
}
@media (max-width: 480px) {
  .order-plan-facts > div {
    grid-template-columns: 1fr;
  }
}
.order-fieldset.form-fieldset,
.order-fieldset {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 0 0 20px;
  background: #fafafa;
}
.order-admin-fieldset-wrap {
  margin: 1.25rem 0 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.order-fieldset--admin.order-fieldset,
.order-fieldset--admin {
  margin: 0;
  padding: 1rem 1.125rem 1.125rem;
  box-sizing: border-box;
  width: 100%;
  border-radius: 12px;
  border-color: #e2e8f0;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.order-fieldset--admin__row {
  display: grid;
  gap: 14px;
  margin: 0;
}
@media (min-width: 700px) {
  .order-fieldset--admin__row {
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    align-items: start;
  }
}
.order-fieldset--admin__row label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.order-fieldset--admin__row label input {
  width: 100%;
  box-sizing: border-box;
}
.order-flow__form .order-fieldset--admin__row label {
  margin-bottom: 0;
}
.order-fieldset legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--app-text);
}
.order-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Order form: domain block */
.order-domain-block {
  margin: 0 0 1.35rem;
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 12px;
  border: 1px solid rgba(13, 148, 136, 0.22);
  background: linear-gradient(165deg, #f0fdfa 0%, #f8fafc 52%, #ffffff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.order-domain-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.order-domain-block__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  cursor: pointer;
}
.order-domain-block__badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
  background: rgba(45, 212, 191, 0.18);
  border: 1px solid rgba(13, 148, 136, 0.28);
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
}
.order-domain-block__lede {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #64748b;
}
.order-domain-block__kbd {
  font-weight: 600;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}
.order-domain-block__field {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.order-domain-block__field:focus-within {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
}
.order-domain-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  color: #94a3b8;
  background: rgba(241, 245, 249, 0.85);
  border-right: 1px solid #e2e8f0;
}
.order-domain-block__icon svg {
  display: block;
  opacity: 0.95;
}
.order-domain-block__field:focus-within .order-domain-block__icon {
  color: #0d9488;
  background: rgba(240, 253, 250, 0.95);
  border-right-color: rgba(45, 212, 191, 0.35);
}
.order-domain-block .order-domain-block__input,
.order-domain-block input.order-domain-block__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.order-domain-block .order-domain-live {
  margin: 10px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
.order-domain-live[data-variant="warn"] {
  color: #b45309;
}
.order-domain-live[data-variant="ok"] {
  color: #047857;
  font-weight: 500;
}
.order-flow__form .form-hint {
  margin: -2px 0 14px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.order-flow__form label {
  margin-bottom: 0.4rem;
}
.order-flow__actions {
  margin: 8px 0 0;
  padding-top: 4px;
}
.order-flow__submit {
  width: 100%;
  min-height: 48px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.28);
}
.order-copy-btn.is-copied {
  border-color: #5eead4;
  color: #0f766e;
  background: #ecfdf5;
}
.order-flow__form input[type="text"],
.order-flow__form input[type="email"],
.order-flow__form input[type="password"] {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong, #e2e8f0);
}