/* ============================================================================
   SPOOFDIAL — UNIFIED DESIGN SYSTEM  (claud.css)
   ----------------------------------------------------------------------------
   One file. One language. Every page.

   Replaces the former 12-file cascade:
   spoofdial.css / -app / -skin / -finish / -unity / -god / -w6 / -polish /
   -ultra / -steroids / -icons / -mobile / -dashboard / -settings / -sip /
   -cdr / -routes / -p1 / -deposit / -auth / sms.css / vps.css / landing.css

   Structure:
     1. Tokens
     2. Reset + base
     3. Typography
     4. Icon system
     5. Layout: app shell, sidebar, header, content
     6. Panels (cards)
     7. Hero headers
     8. Buttons
     9. Forms
    10. Tables
    11. Pills, chips, badges, alerts
    12. Empty / loading / error states
    13. Toast
    14. Modals + overlays
    15. Page: dashboard
    16. Page: SIP
    17. Page: rates / routes
    18. Page: CDR
    19. Page: deposit
    20. Page: SMS
    21. Page: VPS
    22. Page: P1
    23. Page: settings
    24. Auth pages
    25. Landing (body.lp)
    26. Cookie banner
    27. Mobile tab bar
    28. Motion
    29. Accessibility
   ========================================================================== */

/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* -- surfaces: charcoal, not purple-black -------------------------------- */
  --bg: #0c0c10;
  --bg-2: #121218;
  --surface: #16161e;
  --surface-2: #1a1a22;
  --surface-3: #22222c;
  --surface-inset: #101016;

  /* -- borders ------------------------------------------------------------ */
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(111, 78, 255, 0.42);

  /* -- ink ---------------------------------------------------------------- */
  --ink: #ececf2;
  --ink-2: #b8b8c4;
  --ink-3: #8a8a98;
  --ink-4: #5c5c68;
  --ink-faint: #45454f;

  /* -- brand: twilight iris (product DNA). Not Tailwind violet-500. ------- */
  --accent: #6F4EFF;
  --accent-hot: #7d5fff;
  --accent-deep: #5739E0;
  --accent-text: #c4b8ff;
  --accent-s: rgba(111, 78, 255, 0.14);
  --accent-m: rgba(111, 78, 255, 0.22);
  --accent-h: rgba(111, 78, 255, 0.38);
  --accent-softer: rgba(111, 78, 255, 0.08);
  --on-accent: #0b0912;
  --grad: var(--accent);

  /* -- semantics ------------------------------------------------------------ */
  --ok: #34d399;
  --ok-mute: rgba(52, 211, 153, 0.12);
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-mute: rgba(251, 191, 36, 0.12);
  --warn-soft: rgba(251, 191, 36, 0.14);
  --bad: #f87171;
  --bad-mute: rgba(248, 113, 113, 0.12);
  --bad-soft: rgba(248, 113, 113, 0.14);
  --info: #7dd3fc;
  --info-mute: rgba(125, 211, 252, 0.12);
  --ok-border: rgba(52, 211, 153, 0.32);
  --warn-border: rgba(251, 191, 36, 0.32);
  --bad-border: rgba(248, 113, 113, 0.32);

  /* -- type ------------------------------------------------------------------ */
  --ff: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  /* -- spacing scale -------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --gap: 16px;
  --gap-lg: 24px;

  /* -- geometry -------------------------------------------------------------- */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 10px;
  --r-pill: 999px;
  --sidebar-w: 248px;
  --sidebar-c: 72px;
  --header-h: 60px;
  --brand-h: 56px;
  --ctrl-sm: 32px;
  --ctrl-md: 38px;
  --ctrl-lg: 44px;
  --content-max: 1160px;

  /* -- elevation --------------------------------------------------------------
     Restraint: panels float a little, modals more, nothing glows. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-panel: var(--shadow-1);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-deep);

  /* -- z ---------------------------------------------------------------------- */
  --z-header: 40;
  --z-sidebar: 50;
  --z-overlay: 60;
  --z-modal: 80;
  --z-toast: 90;
  --z-skip: 100;

  /* -- motion ------------------------------------------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 120ms var(--ease);
  --med: 180ms var(--ease);
  --slow: 260ms var(--ease);

  /* legacy aliases (pages reference these; keep pointing at the system) */
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-faint: var(--ink-3);
  --accent-border: var(--border-accent);
  --border-soft: var(--border-soft);
  --surface-raised: var(--surface-2);
  --radius: var(--r);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);
  --r-panel: var(--r-lg);
  --green: var(--ok);
  --red: var(--bad);
  --amber: var(--warn);
  --t1: var(--ink);
  --t2: var(--ink-2);
  --t3: var(--ink-3);
  --t4: var(--ink-4);
  --font: var(--ff);
  --mono: var(--fm);
  --sd-ff: var(--ff);
  --sd-fm: var(--fm);
}

/* ============================================================================
   2. RESET + BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  accent-color: var(--accent);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--text-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

::selection {
  background: var(--accent-h);
  color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hot); }
ul, ol { list-style: none; }
code {
  font-family: var(--fm);
  font-size: 0.9em;
  background: var(--accent-s);
  color: var(--accent-text);
  padding: 1px 6px;
  border-radius: 5px;
}
hr { border: none; border-top: 1px solid var(--border); }
.hidden, .is-hidden { display: none !important; }
[hidden] { display: none !important; }

/* Kill decorative leftovers from the old cascade */
.app::before,
.app::after,
body::before,
body::after,
.content::before,
.content::after {
  display: none !important;
  content: none !important;
}

/* ============================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--ff);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-2xl); font-weight: 650; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); font-weight: 600; }

p { color: var(--ink-2); }
strong, b { font-weight: 600; color: var(--ink); }

.meta,
.sub,
.note {
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.sub { font-size: var(--text-base); color: var(--ink-3); line-height: var(--lh-relaxed); }
.meta { font-variant-numeric: tabular-nums; }

.num,
.mono,
.mono-v {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kicker,
.sd-brand,
.db-brand,
.dep-brand,
.vps-brand,
.cdr-kicker,
.lp-kicker,
.auth-kicker {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================================
   4. ICON SYSTEM
   ========================================================================== */
.sd-ico {
  flex: none;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.125em;
}
svg.sd-ico { display: inline-block; }
.sd-ico-txt { display: inline; }

h1 .sd-ico,
h2 .sd-ico,
h3 .sd-ico {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  color: var(--accent);
  vertical-align: -0.1em;
  opacity: 0.9;
}

/* ============================================================================
   5. LAYOUT — APP SHELL / SIDEBAR / HEADER / CONTENT
   ========================================================================== */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.app .main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.content > * {
  min-width: 0;
  max-width: 100%;
}

/* -- sidebar ------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  transition: width var(--med);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--brand-h);
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--border-soft);
  flex: none;
  background: var(--bg-2);
  min-width: 0;
  overflow: hidden;
}
.brand-link {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  color: var(--ink);
  overflow: hidden;
}
.brand-wordmark {
  display: block;
  width: auto;
  height: 22px;
  max-height: 22px;
  max-width: 148px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  flex: none;
  background: transparent;
}
.brand-compact {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #16161e;
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  flex: none;
}
.brand-mark {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
}
.brand-mark img,
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
.brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.brand-fallback {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #16161e;
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.brand-fallback:not([hidden]) { display: flex; }
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.sidebar-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.sidebar-kicker {
  margin: 0 var(--sp-3) 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sidebar-rule {
  height: 1px;
  background: var(--border-soft);
  margin: 0 var(--sp-2) var(--sp-2);
}
.sidebar-nav ul { display: flex; flex-direction: column; gap: 2px; }

.nav-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  border-radius: var(--r);
  color: var(--ink-3);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.nav-tile .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
}
.nav-tile .icon .sd-ico {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0;
}
.nav-tile:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.nav-tile.active {
  background: var(--accent-softer);
  color: var(--accent-text);
  font-weight: 600;
}
.nav-tile.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.nav-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sidebar-foot {
  flex: none;
  padding: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(0deg, rgba(111, 78, 255, 0.08), transparent 70%);
}
.sidebar-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.sidebar-user-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.avatar-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: default;
}
.logout-btn { color: var(--ink-3); flex: none; width: 38px; justify-content: center; padding: 0; }
.logout-btn:hover { background: var(--bad-mute); color: var(--bad); }
.logout-btn .icon { display: flex; margin: 0 auto; }

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  flex: none;
  border-radius: var(--r-sm);
  color: var(--ink-4);
  transition: color var(--fast), background var(--fast);
}
.collapse-toggle:hover { color: var(--ink-2); background: var(--surface-2); }
.collapse-toggle .sd-ico { transition: transform var(--med); }

/* collapsed rail */
.app.collapsed .sidebar,
.app.sidebar-collapsed .sidebar,
.sidebar.collapsed,
body.sb-collapsed .sidebar { width: var(--sidebar-c); }
.app.collapsed .nav-label,
.app.sidebar-collapsed .nav-label,
.sidebar.collapsed .nav-label,
body.sb-collapsed .nav-label { display: none; }
.app.collapsed .brand-text,
.app.sidebar-collapsed .brand-text,
.sidebar.collapsed .brand-text,
body.sb-collapsed .brand-text,
.app.collapsed .brand-wordmark,
.app.sidebar-collapsed .brand-wordmark,
.sidebar.collapsed .brand-wordmark,
body.sb-collapsed .brand-wordmark { display: none; }
.app.collapsed .brand-compact,
.app.sidebar-collapsed .brand-compact,
.sidebar.collapsed .brand-compact,
body.sb-collapsed .brand-compact { display: flex; }
.app.collapsed .sidebar-kicker,
.app.sidebar-collapsed .sidebar-kicker,
.sidebar.collapsed .sidebar-kicker,
body.sb-collapsed .sidebar-kicker,
.app.collapsed .sidebar-user-meta,
.app.sidebar-collapsed .sidebar-user-meta,
.sidebar.collapsed .sidebar-user-meta,
body.sb-collapsed .sidebar-user-meta { display: none; }
.app.collapsed .sidebar-user,
.app.sidebar-collapsed .sidebar-user,
.sidebar.collapsed .sidebar-user,
body.sb-collapsed .sidebar-user { justify-content: center; }
.app.collapsed .nav-tile,
.app.sidebar-collapsed .nav-tile,
.sidebar.collapsed .nav-tile,
body.sb-collapsed .nav-tile { justify-content: center; padding: 0; }
.app.collapsed .nav-tile .icon,
.app.sidebar-collapsed .nav-tile .icon,
.sidebar.collapsed .nav-tile .icon,
body.sb-collapsed .nav-tile .icon { width: auto; }
.app.collapsed .sidebar-brand,
.app.sidebar-collapsed .sidebar-brand,
.sidebar.collapsed .sidebar-brand,
body.sb-collapsed .sidebar-brand {
  justify-content: center;
  padding: 8px 0 10px;
  height: auto;
  min-height: var(--brand-h);
  flex-direction: column;
  gap: 8px;
}
.app.collapsed .brand-link,
.app.sidebar-collapsed .brand-link,
.sidebar.collapsed .brand-link,
body.sb-collapsed .brand-link { justify-content: center; flex: none; }
.app.collapsed .collapse-toggle .sd-ico,
.app.sidebar-collapsed .collapse-toggle .sd-ico,
.sidebar.collapsed .collapse-toggle .sd-ico,
body.sb-collapsed .collapse-toggle .sd-ico { transform: rotate(180deg); }
.app.collapsed .logout-btn,
.app.sidebar-collapsed .logout-btn,
.sidebar.collapsed .logout-btn,
body.sb-collapsed .logout-btn { display: none; }
.app.collapsed .sidebar-dock,
.app.sidebar-collapsed .sidebar-dock,
.sidebar.collapsed .sidebar-dock,
body.sb-collapsed .sidebar-dock { justify-content: center; }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sidebar) - 1);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--med);
  pointer-events: none;
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

/* -- header --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
  padding: 0 var(--sp-6);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  color: var(--ink-2);
}
.menu-toggle:hover { background: var(--surface-2); color: var(--ink); }
.crumb-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crumb-kicker {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-base);
  color: var(--ink-3);
}
.breadcrumb a { color: var(--ink-3); font-weight: 500; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink-faint); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

.header .right { display: flex; align-items: center; gap: var(--sp-3); }
.hdr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-base);
  font-weight: 500;
  transition: border-color var(--fast), color var(--fast);
}
button.hdr-chip { cursor: pointer; font: inherit; }
.hdr-chip-ico { display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.hdr-chip-ico .sd-ico { width: 16px; height: 16px; display: block; }
.cart-chip .cart-ico { color: var(--ink); }
.cart-chip .cart-ico .sd-ico { width: 18px; height: 18px; }
.hdr-chip-text { font-variant-numeric: tabular-nums; }
.balance-wrap { gap: 0; padding-right: 4px; }
.balance { color: var(--ink); font-weight: 600; }
.currency { color: var(--ink-3); margin-right: 1px; }
.add-funds-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  border-radius: 3px;
  background: var(--accent-softer);
  color: var(--accent-text);
  transition: background var(--fast), color var(--fast);
}
.add-funds-btn:hover { background: var(--accent-m); color: var(--accent-hot); }
.add-funds-btn .sd-ico { width: 8px; height: 8px; }

/* ============================================================================
   6. PANELS
   ========================================================================== */
.panel,
.db-panel,
.dep-panel,
.sip-panel,
.rt-panel,
.p1d-panel,
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.panel + .panel { margin-top: 0; }

.panel-head,
.db-panel-h,
.dep-panel-h,
.sip-panel-h,
.rt-panel-h,
.p1d-panel-h,
.panel-h,
.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}
.panel-head h2,
.db-panel-h h2,
.dep-panel-h h2,
.sip-panel-h h2,
.rt-panel-h h2,
.p1d-panel-h h2,
.panel-h h2,
.card-head h2 {
  font-size: var(--text-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  color: var(--ink);
}
.panel-head h2 .sd-ico,
.db-panel-h h2 .sd-ico { width: 16px; height: 16px; color: var(--accent); opacity: 0.85; }
.spacer { flex: 1 1 auto; }

.panel-b,
.db-panel-b,
.dep-panel-b,
.sip-panel-b,
.rt-panel-b,
.p1d-panel-b,
.panel-body,
.card-body {
  padding: var(--sp-5);
}

/* ============================================================================
   7. HERO HEADERS (page tops)
   ========================================================================== */
.sd-hero,
.db-hero,
.dep-hero,
.vps-hero,
.cdr-hero,
.sip-hero,
.rt-hero,
.p1-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: visible;
  min-width: 0;
}
.p1-hero {
  flex-wrap: wrap;
  align-items: center;
}
.sd-hero-bg,
.db-hero-bg,
.dep-hero-bg,
.vps-hero-bg,
.cdr-hero-bg {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.sd-hero-main,
.db-hero-main,
.dep-hero-main,
.vps-hero-main,
.cdr-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.sd-hero h1,
.db-hero h1,
.dep-hero h1,
.vps-hero h1,
.cdr-hero h1,
.sip-hero h1,
.rt-hero h1,
.p1-hero h1 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}
.sd-hero h1 .sd-ico,
.db-hero h1 .sd-ico,
.dep-hero h1 .sd-ico,
.vps-hero h1 .sd-ico { width: 22px; height: 22px; color: var(--accent); }
.sd-hero .sub,
.db-hero .sub,
.dep-hero .sub,
.vps-hero .sub { max-width: 60ch; }

.sd-aside,
.dep-ledger,
.vps-hero-aside,
.cdr-hero-aside {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}
.sd-aside-actions { display: flex; gap: var(--sp-2); }
.sd-aside-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sd-aside-v {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sd-aside-sub { font-size: var(--text-xs); color: var(--ink-3); }
.dep-ledger {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.dep-ledger-v { font-family: var(--fm); font-size: var(--text-xl); font-weight: 600; color: var(--accent-text); }
.dep-ledger-v .cur { color: var(--ink-3); }

/* ============================================================================
   8. BUTTONS
   ========================================================================== */
.btn,
.sip-btn,
.dep-btn,
.db-icon-btn,
.cdr-btn,
.rt-filter,
.vps-card-toggle,
button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast), transform var(--fast);
  -webkit-user-select: none;
  user-select: none;
}
.btn-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.btn:active,
.sip-btn:active { transform: translateY(1px); }

.btn-primary,
.dep-btn.primary,
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
}
.btn-primary:hover,
.dep-btn.primary:hover,
.btn.primary:hover {
  background: var(--accent-hot);
  box-shadow: 0 0 0 1px var(--accent-h);
}

.btn-secondary,
.sip-btn,
.btn.btn-secondary,
.dep-btn:not(.primary):not(.ghost):not(.danger) {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink-2);
}
.btn-secondary:hover,
.sip-btn:hover,
.btn.btn-secondary:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface-3);
}

.btn-ghost,
.dep-btn.ghost,
.btn.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-3);
}
.btn-ghost:hover,
.dep-btn.ghost:hover,
.btn.btn-ghost:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface-2);
}

.btn-danger,
.btn.btn-danger,
.dep-btn.danger {
  background: var(--bad-mute);
  border-color: var(--bad-border);
  color: var(--bad);
}
.btn-danger:hover,
.btn.btn-danger:hover {
  background: var(--bad-soft);
  color: #fca5a5;
}

.btn-sm,
.btn.btn-sm,
.db-icon-btn {
  height: var(--ctrl-sm);
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  gap: var(--sp-1);
}

.db-icon-btn { width: var(--ctrl-sm); padding: 0; }
.db-icon-btn .sd-ico { width: 15px; height: 15px; }

button[disabled],
.btn[disabled],
.btn[aria-disabled="true"],
.sip-btn[disabled],
.dep-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.btn:focus-visible,
.sip-btn:focus-visible,
.dep-btn:focus-visible,
.db-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* icon-only square variant */
.btn-icon {
  width: var(--ctrl-md);
  padding: 0;
}

/* buttons w/ label helper (icon + text) */
.sd-ico-txt { white-space: nowrap; }

/* ============================================================================
   9. FORMS
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field-label,
label.fld-k {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.input,
.select,
textarea,
.input-ico input {
  width: 100%;
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--text-base);
  font-family: inherit;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
textarea {
  height: auto;
  min-height: 88px;
  padding: var(--sp-2) var(--sp-3);
  resize: vertical;
  line-height: var(--lh-base);
}
select.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c9e' 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 var(--sp-3) center;
  padding-right: var(--sp-6);
  cursor: pointer;
}
.input::placeholder,
textarea::placeholder { color: var(--ink-4); }
.input:hover,
.select:hover,
textarea:hover { border-color: var(--border-strong); }
.input:focus,
.select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.input:disabled,
.select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input[readonly] { color: var(--ink-2); }

.input-ico { position: relative; display: flex; align-items: center; }
.input-ico .sd-ico {
  position: absolute;
  left: var(--sp-3);
  width: 15px;
  height: 15px;
  color: var(--ink-4);
  pointer-events: none;
}
.input-ico input { padding-left: calc(var(--sp-3) + 24px); }
.input-ico:focus-within .sd-ico { color: var(--accent); }

.field-err,
.dep-field-err {
  font-size: var(--text-xs);
  color: var(--bad);
  line-height: var(--lh-snug);
  min-height: 0;
}

/* checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ============================================================================
   10. TABLES
   ========================================================================== */
.db-table-wrap,
.cdr-table-wrap,
.dep-table-wrap,
.sip-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.db-table,
.cdr-table,
.dep-table,
.sip-table,
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.db-table th,
.cdr-table th,
.dep-table th,
.sip-table th,
table.tbl th {
  position: sticky;
  top: 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}
.db-table td,
.cdr-table td,
.dep-table td,
.sip-table td,
table.tbl td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-2);
  vertical-align: middle;
  min-width: 0;
}
.db-table tbody tr:last-child td,
.cdr-table tbody tr:last-child td,
.dep-table tbody tr:last-child td,
.sip-table tbody tr:last-child td,
table.tbl tbody tr:last-child td { border-bottom: none; }
.db-table tbody tr:hover,
.cdr-table tbody tr:hover,
.dep-table tbody tr:hover,
.sip-table tbody tr:hover,
table.tbl tbody tr:hover { background: var(--surface-2); }
.db-table .num,
.cdr-table .num,
.dep-table .num { text-align: right; }

/* ============================================================================
   11. PILLS / CHIPS / BADGES / ALERTS
   ========================================================================== */
.sd-pill,
.db-pill,
.billing-badge,
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sd-pill .sd-ico,
.db-pill .sd-ico { width: 12px; height: 12px; }
.sd-pill .dot,
.db-pill .dot,
.sip-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.db-pill.ok, .sd-pill.ok, .pill-ok { color: var(--ok); border-color: var(--ok-border); background: var(--ok-mute); }
.db-pill.ok .dot, .sd-pill.ok .dot { background: var(--ok); }
.db-pill.warn, .sd-pill.warn, .pill-warn { color: var(--warn); border-color: var(--warn-border); background: var(--warn-mute); }
.db-pill.warn .dot, .sd-pill.warn .dot { background: var(--warn); }
.db-pill.bad, .sd-pill.bad, .pill-bad { color: var(--bad); border-color: var(--bad-border); background: var(--bad-mute); }
.db-pill.bad .dot, .sd-pill.bad .dot { background: var(--bad); }
.db-pill.accent, .sd-pill.accent { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-s); }

/* status colors for dep-status */
.dep-status.finished, .dep-status.confirmed, .dep-status.credited,
.dep-status.ok { color: var(--ok); border-color: var(--ok-border); background: var(--ok-mute); }
.dep-status.failed, .dep-status.expired, .dep-status.refunded,
.dep-status.bad { color: var(--bad); border-color: var(--bad-border); background: var(--bad-mute); }
.dep-status.confirming, .dep-status.sending, .dep-status.partially_paid,
.dep-status.waiting { color: var(--warn); border-color: var(--warn-border); background: var(--warn-mute); }

.sip-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sip-chip.accent { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-s); }
.sip-chip.accent .dot { background: var(--accent); }

/* alerts */
.dep-alert,
.alert,
.vps-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--text-base);
  line-height: var(--lh-snug);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
}
.dep-alert .sd-ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.dep-alert.ok, .alert.ok, .vps-msg.ok { border-color: var(--ok-border); background: var(--ok-mute); color: var(--ok); }
.dep-alert.warn, .alert.warn { border-color: var(--warn-border); background: var(--warn-mute); color: var(--warn); }
.dep-alert.err, .alert.err, .vps-msg.err { border-color: var(--bad-border); background: var(--bad-mute); color: var(--bad); }

/* ============================================================================
   12. EMPTY / LOADING / ERROR STATES
   ========================================================================== */
.sd-empty,
.db-empty-state,
.empty-state,
.vps-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}
.sd-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--ink-4);
}
.sd-empty-ico .sd-ico { width: 24px; height: 24px; }
.sd-empty-title,
.empty-desc,
.db-empty-title { font-size: var(--text-md); font-weight: 600; color: var(--ink-2); }
.sd-empty-sub,
.empty-title { font-size: var(--text-sm); color: var(--ink-3); }
.vps-loading { color: var(--ink-3); font-size: var(--text-base); }

/* skeleton */
.skeleton,
.skel {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.skeleton::after,
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: sd-sweep 1.4s infinite;
}
@keyframes sd-sweep { to { transform: translateX(100%); } }

/* spinner */
.sd-spin,
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sd-spin 0.8s linear infinite;
  flex: none;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   13. TOAST
   ========================================================================== */
.toast,
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  transform: translateX(-50%) translateY(8px);
  max-width: min(92vw, 480px);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--ink);
  font-size: var(--text-base);
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--med), transform var(--med);
}
.toast.show,
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.ok { border-color: var(--ok-border); }
.toast.err { border-color: var(--bad-border); }

/* ============================================================================
   14. MODALS + OVERLAYS
   ========================================================================== */
.modal,
.sd-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.62);
}
.modal-card,
.sd-modal-card {
  width: min(560px, 100%);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}
.modal-head h3 { flex: 1; }

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 2);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--med);
}
.cart-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal) + 3);
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform var(--med);
  min-width: 0;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--header-h);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  flex: none;
}
.cart-head h2 { font-size: var(--text-lg); font-weight: 650; }
.cart-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
}
.cart-close:hover { background: var(--surface-2); color: var(--ink); }
.cart-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4) var(--sp-5);
}
.cart-empty { color: var(--ink-3); font-size: var(--text-sm); }
.cart-list { display: flex; flex-direction: column; gap: 8px; }
.cart-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  min-width: 0;
}
.cart-row-main { min-width: 0; flex: 1 1 auto; }
.cart-row-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 4px;
}
.cart-row-t {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.cart-row-m { font-size: var(--text-sm); color: var(--ink-3); margin: 4px 0 0; font-family: var(--fm); }
.cart-row-x {
  flex: none;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--ink-4);
  font-size: var(--text-xs);
}
.cart-row-x:hover { background: var(--bad-mute); color: var(--bad); }
.cart-foot {
  flex: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.cart-total strong { font-family: var(--fm); font-size: var(--text-lg); color: var(--ink); }
.cart-note { font-size: var(--text-xs); color: var(--ink-4); }
.cart-foot .btn { width: 100%; }
.cart-chip { position: relative; }
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-badge[hidden] { display: none; }

.mvr-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.55);
  padding: 0;
}
.mvr-sheet.hidden { display: none; }
.mvr-sheet-card {
  width: min(720px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  min-width: 0;
}
.mvr-sheet-card .panel-head { flex: none; }
.mvr-sheet-card .panel-b {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
#vpsOrder.mvr-sheet,
#fpGenPanel.mvr-sheet {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-soft);
}

/* ============================================================================
   15. PAGE — DASHBOARD
   ========================================================================== */
/* ============================================================================
   15. PAGE — DASHBOARD
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   1160 − 24 − 24 = 1112 inner. Tiles: 3×360 + 2×16 = 1112.
   Split: 2 × minmax(0,1fr) + 16 gap; stack at 900px.
   Iris #6F4EFF · charcoal #0c0c10 · Inter · 8px grid · controls 38px · r 8/10.
   ========================================================================== */
.content.db-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
  gap: var(--gap-lg);
}
.db-page,
.db-page .db-hero,
.db-page .db-hero-main,
.db-page .db-ledger,
.db-page .db-products,
.db-page .db-prod,
.db-page .db-prod-copy,
.db-page .db-p1,
.db-page .db-p1-copy,
.db-page .db-split,
.db-page .db-panel,
.db-page .db-panel-h,
.db-page .db-panel-b,
.db-page .db-panel-tools,
.db-page .db-route,
.db-page .db-route-item,
.db-page .db-table-wrap,
.db-page .db-panel-calls {
  min-width: 0;
  max-width: 100%;
}
.db-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
}

.db-page .mvr-alerts { margin-bottom: 0; }

/* -- hero + ledger: real 2-col grid, not space-between -------------------- */
.db-page .db-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  overflow: visible;
}
.db-page .db-hero-bg {
  pointer-events: none;
  border-radius: inherit;
}
.db-page .db-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  grid-column: 1;
}
.db-page .db-brand {
  margin: 0;
}
.db-page .db-hero h1,
.db-page .db-hero h1.page-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.db-page .db-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}
.db-page .db-hero .sub,
.db-page .db-hero .sd-sub {
  max-width: 52ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
.db-page .db-ledger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px;
  grid-column: 2;
  justify-self: end;
  align-self: end;
  min-width: 0;
  max-width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: right;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.db-page .db-ledger-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.db-page .db-ledger-v {
  font-family: var(--fm);
  font-size: 22px;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.db-page .db-ledger-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: break-word;
}

/* -- product tiles: 3×2 at 1160, equal height ---------------------------- */
.db-page .db-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
  margin: 0;
  width: 100%;
}
.db-page .db-prod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  height: 100%;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fast), background var(--fast);
}
.db-page .db-prod:hover {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.db-page .db-prod:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.db-page .db-prod-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r);
  background: var(--accent-softer);
  color: var(--accent-text);
}
.db-page .db-prod-ico .sd-ico {
  width: 20px;
  height: 20px;
  margin: 0;
  color: var(--accent);
}
.db-page .db-prod-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}
.db-page .db-prod-k,
.db-page .db-prod-v,
.db-page .db-prod-s {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.db-page .db-prod-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.db-page .db-prod-v {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums lining-nums;
}
.db-page .db-prod-s {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}

/* -- press-1 strip: icon | copy | 38px Open ------------------------------- */
.db-page .db-p1 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fast), background var(--fast);
}
.db-page .db-p1:hover {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.db-page .db-p1:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.db-page .db-p1 > .db-prod-ico {
  grid-column: 1;
}
.db-page .db-p1-copy {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.db-page .db-p1-copy strong {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.db-page .db-p1-copy span {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.db-page .db-p1-go {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  flex: none;
  border: 1px solid var(--border-accent);
  border-radius: var(--r);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* -- route + calls split ------------------------------------------------- */
.db-page .db-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
  width: 100%;
}
.db-page .db-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
}
.db-page .db-panel-h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
  min-height: calc(var(--ctrl-md) + var(--sp-2) + var(--sp-2));
  padding: var(--sp-2) var(--sp-5);
}
.db-page .db-panel-h h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.db-page .db-panel-h h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
  opacity: 1;
}
.db-page .db-panel-h .spacer {
  min-width: 8px;
}
.db-page .db-panel-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-width: 0;
}
.db-page .db-panel-h .meta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: break-word;
}
.db-page .db-panel-h a.meta:hover { color: var(--accent-text); }
.db-page .db-panel-b {
  flex: 1 1 auto;
  min-width: 0;
}
.db-page .db-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl-md);
  height: var(--ctrl-md);
  padding: 0;
  gap: 0;
  flex: none;
}
.db-page .db-icon-btn .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
}

.db-page .db-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
}
.db-page .db-route-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.db-page .db-route-item:last-child {
  grid-column: 1 / -1;
}
.db-page .db-route-item .k {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.db-page .db-route-item .v {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums lining-nums;
}
.db-page .db-route-item .v.mono {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums lining-nums;
}

/* -- calls table: scroll the wrap, never clip the grid ------------------- */
.db-page .db-panel-calls .db-panel-b { padding: 0; }
.db-page .db-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.db-page .db-table {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.db-page .db-table th,
.db-page .db-table td {
  padding: var(--sp-2) 10px;
  overflow-wrap: anywhere;
}
.db-page .db-table th:first-child,
.db-page .db-table td:first-child { padding-left: var(--sp-5); }
.db-page .db-table th:last-child,
.db-page .db-table td:last-child { padding-right: var(--sp-5); }
.db-page .db-table th:nth-child(4),
.db-page .db-table td:nth-child(4),
.db-page .db-table th:nth-child(5),
.db-page .db-table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.db-page .db-table .mono,
.db-page .db-table .muted {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums lining-nums;
}
.db-page .db-table .muted { color: var(--ink-4); }
.db-page .db-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  min-width: 0;
}
.db-page .db-pill .sd-ico {
  width: 12px;
  height: 12px;
  margin: 0;
}
.db-page .db-empty,
.db-page .db-table-wrap .sd-empty {
  padding: var(--sp-7) var(--sp-5);
}
.db-page .sd-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- leftover kpi/quick (unused on this page; keep for merge safety) ----- */
.db-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.db-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.db-kpi .lab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.db-kpi .lab .sd-ico { width: 14px; height: 14px; margin: 0; color: var(--ink-4); }
.db-kpi .val {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.db-kpi .val.sm { font-family: var(--ff); font-size: var(--text-md); }
.db-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}
.db-quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-4) var(--sp-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-inset);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: center;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.db-quick a:hover {
  border-color: var(--border-accent);
  color: var(--accent-text);
  background: var(--accent-softer);
}
.db-quick .ico { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.db-quick .ico .sd-ico { width: 20px; height: 20px; margin: 0; }
.db-quick a:hover .ico { color: var(--accent); }

@media (max-width: 900px) {
  .db-page .db-split { grid-template-columns: minmax(0, 1fr); }
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .db-page .db-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .db-page .db-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .db-page .db-hero-main { grid-column: 1; }
  .db-page .db-ledger {
    grid-column: 1;
    justify-self: stretch;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }
  .db-page .db-panel-h { flex-wrap: wrap; }
  .db-page .db-route { grid-template-columns: minmax(0, 1fr); }
  .db-page .db-route-item:last-child { grid-column: auto; }
}

@media (max-width: 480px) {
  .db-page .db-products { grid-template-columns: minmax(0, 1fr); }
  .db-page .db-p1 {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .db-page .db-p1 > .db-prod-ico {
    grid-row: 1 / span 2;
    align-self: start;
  }
  .db-page .db-p1-go {
    grid-column: 2;
    justify-self: start;
  }
  .db-kpis { grid-template-columns: minmax(0, 1fr); }
  .db-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 320px) {
  .db-page .db-hero { padding: var(--sp-4); gap: var(--sp-3); }
  .db-page .db-products,
  .db-page .db-split { gap: var(--sp-2); }
  .db-page .db-prod,
  .db-page .db-p1,
  .db-page .db-ledger { padding: var(--sp-3); }
  .db-page .db-panel-h {
    padding: var(--sp-2) var(--sp-3);
  }
  .db-page .db-table th:first-child,
  .db-page .db-table td:first-child { padding-left: var(--sp-3); }
  .db-page .db-table th:last-child,
  .db-page .db-table td:last-child { padding-right: var(--sp-3); }
}

/* ============================================================================
   16. PAGE — SIP
   ========================================================================== */
/* ============================================================================
   16. PAGE — SIP
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   Host strings wrap (overflow-wrap: anywhere). Tables scroll on .table-wrap.
   Registrar: 3-col wrap. Chips wrap. Create/delete sit on the 38px field grid.
   ========================================================================== */
.content.sip-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
}
.sip-page,
.sip-page .sip-hero,
.sip-page .sip-hero-main,
.sip-page .sip-hero-aside,
.sip-page .sip-panel,
.sip-page .sip-panel-b,
.sip-page .sip-stage,
.sip-page .sip-reg,
.sip-page .sip-reg-item,
.sip-page .field,
.sip-page .sip-tool,
.sip-page .sip-cred,
.sip-page .sip-kv,
.sip-page .sip-status,
.sip-page .sip-chip,
.sip-page .sip-chip-t,
.sip-page .sip-panel-tools,
.sip-page .sip-connect-bar,
.sip-page .sip-ip2ip,
.sip-page .sip-ip2ip-grid,
.sip-page .sip-ip2ip-actions,
.sip-page .table-wrap {
  min-width: 0;
}
.sip-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
}

.sip-page .sip-hero-grid,
.sip-page .sd-hero-grid { display: none; }

/* -- hero ---------------------------------------------------------------- */
.sip-page .sip-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  overflow: visible;
}
.sip-page .sip-hero-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.sip-page .sip-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 280px;
  min-width: 0;
}
.sip-page .sip-brand {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sip-page .sip-hero h1.page-title,
.sip-page .sip-hero h1 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  margin: 0;
  font-size: 22px;
  line-height: var(--lh-tight);
}
.sip-page .sip-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  opacity: 1;
  flex: none;
}
.sip-page .page-desc,
.sip-page .sip-hero .sd-sub {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
.sip-page .sip-hero-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex: 1 1 220px;
  max-width: 100%;
}
.sip-page .sip-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  max-width: 100%;
}
.sip-page .sip-top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  max-width: 100%;
}
.sip-page .sip-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  min-height: 22px;
  padding: 3px 10px;
  max-width: 100%;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sip-page .sip-chip-t {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sip-page .sip-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.sip-page .sip-chip.on .dot { background: var(--ok); }
.sip-page .sip-chip.warn {
  color: var(--warn);
  border-color: var(--warn-border);
  background: var(--warn-mute);
}
.sip-page .sip-chip.warn .dot { background: var(--warn); }
.sip-page .sip-chip.accent {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-s);
}
.sip-page .sip-chip.accent .dot { background: var(--accent); }
.sip-page .sip-chip.on:not(.warn):not(.accent) {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-mute);
}

/* -- panels -------------------------------------------------------------- */
.sip-page .sip-panel {
  overflow: visible;
}
.sip-page .sip-panel-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  row-gap: 6px;
}
.sip-page .sip-panel-h h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-tight);
}
.sip-page .sip-panel-h h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  color: var(--accent);
  opacity: 0.9;
  flex: none;
}
.sip-page .sip-panel-h .meta,
.sip-page .sip-panel-h .sip-panel-tools {
  margin-left: auto;
}
.sip-page .sip-panel-h .meta {
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
}
.sip-page .sip-panel-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-3);
  max-width: 100%;
}
.sip-page .sip-cdr-link {
  color: var(--accent-text);
  font-weight: 600;
}
.sip-page .sip-cdr-link:hover { color: var(--accent-hot); }
.sip-page .sip-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--accent-s);
  border: 1px solid var(--border-accent);
  color: var(--accent-text);
  font-family: var(--fm);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* -- buttons (page variants; 38px default, 32px copy) -------------------- */
.sip-page .sip-btn {
  height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  gap: var(--sp-2);
}
.sip-page .sip-btn .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}
.sip-page .sip-btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 650;
}
.sip-page .sip-btn.primary:hover {
  background: var(--accent-hot);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--accent-h);
}
.sip-page .sip-btn.ghost {
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  background: transparent;
  border-color: var(--border);
  color: var(--ink-3);
}
.sip-page .sip-btn.ghost:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface-2);
}
.sip-page .sip-btn.danger {
  background: var(--bad-mute);
  border-color: var(--bad-border);
  color: var(--bad);
}
.sip-page .sip-btn.danger:hover {
  background: var(--bad-soft);
  color: #fca5a5;
}
.sip-page .sip-btn.is-copied {
  border-color: var(--ok-border);
  color: var(--ok);
}

/* -- registrar: 3-col wrap ----------------------------------------------- */
.sip-page .sip-reg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sip-page .sip-reg-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px var(--sp-2);
  flex: 1 1 200px;
  min-width: min(100%, 200px);
  padding: var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
}
.sip-page .sip-reg-item .k {
  grid-column: 1 / -1;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sip-page .sip-reg-item .v {
  grid-column: 1;
  min-width: 0;
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sip-page .sip-reg-item .sip-btn {
  grid-column: 2;
  grid-row: 2;
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
  min-width: 0;
  padding: 0 10px;
  justify-self: end;
  align-self: center;
}

/* -- alert / help / details ---------------------------------------------- */
.sip-page .sip-alert {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border: 1px solid var(--border-accent);
  background: var(--accent-softer);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.sip-page .sip-alert-h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
}
.sip-page .sip-alert-h .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--accent);
  flex: none;
}
.sip-page .sip-alert p { margin: 0; color: var(--ink-3); }
.sip-page .sip-alert strong { color: var(--accent-text); }

.sip-page .sip-details {
  margin-top: var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
}
.sip-page .sip-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  user-select: none;
}
.sip-page .sip-details > summary::-webkit-details-marker { display: none; }
.sip-page .sip-details > summary .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--accent);
  flex: none;
}
.sip-page .sip-details > summary::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(45deg);
  flex: none;
}
.sip-page .sip-details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.sip-page .sip-details .sip-help {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}

.sip-page .sip-help {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-inset);
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.sip-page .sip-help-h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
}
.sip-page .sip-help-h .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--accent);
  flex: none;
}
.sip-page .sip-help ol {
  list-style: decimal;
  padding-left: 18px;
  margin: 0;
}
.sip-page .sip-help li + li { margin-top: 4px; }

/* -- stage: caller ID + provision ---------------------------------------- */
.sip-page .sip-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: var(--gap);
  align-items: start;
  width: 100%;
}
.sip-page .sip-tool {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sip-page .sip-tool .field,
.sip-page .sip-ip2ip-grid .field { margin: 0; min-width: 0; }
.sip-page .sip-tool-row,
.sip-page .sip-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: end;
}
.sip-page .sip-tool-row .sip-btn,
.sip-page .sip-create-row .sip-btn,
.sip-page .sip-ip2ip-actions .sip-btn {
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  flex: none;
  align-self: end;
  white-space: nowrap;
}
.sip-page .sip-cli-hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  overflow-wrap: break-word;
}
.sip-page .input-mono {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
}

.sip-page .sip-mode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sip-page .sip-seg {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--sp-2);
  row-gap: 4px;
  align-items: start;
  text-align: left;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: inherit;
  cursor: pointer;
}
.sip-page .sip-seg .sd-ico {
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  height: 16px;
  margin: 0;
  margin-top: 1px;
  color: var(--ink-4);
  flex: none;
}
.sip-page .sip-seg strong {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: break-word;
}
.sip-page .sip-seg small {
  grid-column: 2;
  grid-row: 2;
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.sip-page .sip-seg.on {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.sip-page .sip-seg.on .sd-ico { color: var(--accent); }
.sip-page .sip-seg.on strong { color: var(--accent-text); }

.sip-page .sip-ip2ip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sip-page .sip-ip2ip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(88px, 0.55fr) minmax(0, 1fr) minmax(0, 0.75fr);
  gap: var(--sp-3);
  align-items: end;
}
.sip-page .sip-ip2ip-grid .input { width: 100%; min-width: 0; }
.sip-page .sip-ip2ip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-2);
}
.sip-page .sip-ip2ip-actions .sip-btn {
  min-height: var(--ctrl-md);
}
.sip-page .sip-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  min-width: 0;
}
.sip-page .sip-check input { flex: none; margin-top: 2px; }
.sip-page .sip-check span { overflow-wrap: break-word; min-width: 0; }
.sip-page .sip-ip2ip-help { margin: 0; }

.sip-page .sip-msg {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r);
  border: 1px solid var(--border-soft);
  background: var(--surface-inset);
  color: var(--ink-2);
  font-family: var(--fm);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sip-page .sip-msg.ok {
  border-color: var(--ok-border);
  color: var(--ok);
  background: var(--ok-mute);
}
.sip-page .sip-msg.err {
  border-color: var(--bad-border);
  color: var(--bad);
  background: var(--bad-mute);
}
.sip-page .sip-msg.warn {
  border-color: var(--warn-border);
  color: var(--warn);
  background: var(--warn-mute);
}

/* -- connect ------------------------------------------------------------- */
.sip-page .sip-connect-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  min-width: 0;
}
.sip-page .sip-connect-bar .select,
.sip-page #connectAccount {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
  height: var(--ctrl-md);
}
.sip-page .sip-connect-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  min-width: 0;
  max-width: 100%;
}
.sip-page .sip-tab {
  height: var(--ctrl-sm);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.sip-page .sip-tab:hover { color: var(--ink); }
.sip-page .sip-tab.on {
  color: var(--accent-text);
  background: var(--accent-s);
  border-color: var(--border-accent);
}

.sip-page .sip-cred,
.sip-page .sip-grid-cred,
.sip-page .sip-cred-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  min-width: 0;
}
.sip-page .sip-kv {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 0;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}
.sip-page .sip-kv:last-child { border-bottom: 0; }
.sip-page .sip-kv .k {
  grid-column: 1;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sip-page .sip-kv .v {
  grid-column: 2;
  min-width: 0;
  font-family: var(--fm);
  font-size: var(--text-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sip-page .sip-kv .sip-btn {
  grid-column: 3;
  grid-row: 1;
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
  min-width: 0;
  padding: 0 10px;
}
.sip-page .sip-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* -- tables: overflow-x auto on wrap only -------------------------------- */
.sip-page,
.sip-page .sip-panel-b,
.sip-page .content {
  overflow: visible;
}
.sip-page .table-wrap,
.sip-page .sip-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.sip-page .sip-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.sip-page .sip-table th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}
.sip-page .sip-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-2);
  vertical-align: middle;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sip-page .sip-table tbody tr:last-child td { border-bottom: none; }
.sip-page .sip-table tbody tr:hover { background: var(--surface-2); }
.sip-page .sip-table .mono,
.sip-page .sip-authid {
  overflow-wrap: anywhere;
}
.sip-page .sip-authid {
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--ink-4);
}
.sip-page .sip-table .tag,
.sip-page .sip-mode-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-accent);
  background: var(--accent-s);
  color: var(--accent-text);
  font-size: var(--text-2xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sip-page .sip-mode-badge { margin-top: 0; }
.sip-page .sip-mode-badge.ip {
  color: var(--info);
  background: var(--info-mute);
  border-color: rgba(125, 211, 252, 0.32);
}
.sip-page .sip-table .tag {
  color: var(--ok);
  background: var(--ok-mute);
  border-color: var(--ok-border);
}
.sip-page .sip-pass-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.sip-page .sip-pass-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sip-page .sip-pass-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl-sm);
  height: var(--ctrl-sm);
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  background: transparent;
}
.sip-page .sip-pass-toggle:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}
.sip-page .sip-pass-toggle .sd-ico { width: 14px; height: 14px; margin: 0; }
.sip-page .sip-table .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
}
.sip-page .sip-table .actions .sip-btn {
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
  padding: 0 10px;
  font-size: var(--text-sm);
}
.sip-page .sip-table .actions .sip-btn.danger {
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
}
.sip-page .sip-table .muted { color: var(--ink-4); }

.sip-page .sip-empty { padding: 0; }
.sip-page .sip-empty .sd-empty { padding: var(--sp-7) var(--sp-4); }

/* -- confirm / caller-id modals (roots sit outside .sip-page) ------------ */
#confirmRoot .confirm-overlay,
#cliModalRoot .confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.62);
}
#confirmRoot .confirm-modal,
#cliModalRoot .confirm-modal {
  width: min(420px, 100%);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  min-width: 0;
}
#confirmRoot .confirm-modal h3,
#cliModalRoot .confirm-modal h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-lg);
  font-weight: 650;
}
#confirmRoot .confirm-modal p,
#cliModalRoot .confirm-modal p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
#confirmRoot .confirm-modal .input,
#cliModalRoot .confirm-modal .input {
  width: 100%;
  min-width: 0;
  height: var(--ctrl-md);
  margin-bottom: var(--sp-4);
}
#confirmRoot .confirm-modal .btn-group,
#cliModalRoot .confirm-modal .btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: var(--sp-2);
}
#confirmRoot .confirm-modal .btn,
#cliModalRoot .confirm-modal .btn {
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
}

@media (max-width: 900px) {
  .sip-page .sip-stage,
  .sip-page .sip-mode-row { grid-template-columns: minmax(0, 1fr); }
  .sip-page .sip-ip2ip-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sip-page .sip-hero { align-items: flex-start; }
  .sip-page .sip-hero-aside {
    align-items: flex-start;
    width: 100%;
    flex-basis: 100%;
  }
  .sip-page .sip-status,
  .sip-page .sip-top-actions { justify-content: flex-start; }
  .sip-page .sip-tool-row,
  .sip-page .sip-create-row { grid-template-columns: minmax(0, 1fr); }
  .sip-page .sip-tool-row .sip-btn,
  .sip-page .sip-create-row .sip-btn,
  .sip-page .sip-ip2ip-actions .sip-btn { width: 100%; }
}
@media (max-width: 640px) {
  .sip-page .sip-ip2ip-grid { grid-template-columns: minmax(0, 1fr); }
  .sip-page .sip-kv {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sip-page .sip-kv .k { grid-column: 1 / -1; }
  .sip-page .sip-kv .v { grid-column: 1; }
  .sip-page .sip-kv .sip-btn { grid-column: 2; grid-row: 2; }
  .sip-page .sip-connect-bar { align-items: stretch; }
  .sip-page .sip-connect-bar .select,
  .sip-page #connectAccount { flex-basis: 100%; }
  .sip-page .sip-panel-h .meta,
  .sip-page .sip-panel-h .sip-panel-tools {
    margin-left: 0;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
  }
  .sip-page .sip-ip2ip-actions .sip-btn {
    white-space: normal;
  }
}

/* ============================================================================
   17. PAGE — RATES / ROUTES
   ========================================================================== */
/* ============================================================================
   17. PAGE — RATES / ROUTES
   Geometry only. Real class names from rates.php + JS lane renderer.
   No overflow:hidden as a layout patch. No glow blobs. No fake hero grid.
   ========================================================================== */

.content.rt-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
}
.rt-page,
.rt-page .rt-hero,
.rt-page .rt-panel,
.rt-page .panel,
.rt-page .rt-toolbar,
.rt-page .rt-search-wrap,
.rt-page #routeGrid,
.rt-page .rt-lanes,
.rt-page .rt-lane,
.rt-page .rt-price-grid,
.rt-page .rt-price-card {
  min-width: 0;
}

/* Kill leftover decorative overlays / checkmarks / glows */
.rt-hero-grid,
.rt-page .sd-hero-grid {
  display: none;
}
.rt-lane::before,
.rt-lane::after,
.rt-lane.is-on::before,
.rt-lane.is-on::after,
.rt-lane.is-off::before,
.rt-lane.is-off::after,
.rt-lane.is-pick::before,
.rt-lane.is-pick::after,
.rt-tag::before,
.rt-tag::after {
  content: none;
  display: none;
}

/* -- hero ---------------------------------------------------------------- */
.rt-hero {
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  gap: var(--sp-6);
}
.rt-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
.rt-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 220px;
}
.rt-brand {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rt-hero h1,
.rt-hero h1.page-title {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rt-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}
.rt-page .page-desc,
.rt-hero .sub,
.rt-hero .sd-sub {
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}

/* Active lane meter — wraps; never forces a horizontal min */
.rt-meter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-3);
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.rt-meter-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.rt-meter-k {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.rt-meter-k .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  box-shadow: none;
  animation: none;
}
.rt-meter-v {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: var(--lh-tight);
  min-width: 0;
  overflow-wrap: anywhere;
}
.rt-meter-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  min-width: 0;
}
.rt-meter-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 64px;
}
.rt-meter-stat .k {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.rt-meter-stat .v {
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* -- lanes panel --------------------------------------------------------- */
.rt-panel {
  overflow: visible;
}
.rt-panel-h {
  flex-wrap: wrap;
  row-gap: 6px;
}
.rt-panel-h h2 {
  gap: var(--sp-2);
  min-width: 0;
  flex-wrap: nowrap;
}
.rt-panel-h h2 .sd-ico,
.rt-platform .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
  opacity: 0.85;
}
.rt-panel-h .meta,
.rt-platform .panel-head .meta {
  margin-left: auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  color: var(--ink-3);
  font-size: var(--text-xs);
}
.rt-platform {
  overflow: visible;
}
.rt-platform .panel-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* -- toolbar / search / region chips ------------------------------------- */
.rt-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  min-width: 0;
}
.rt-search-row {
  width: 100%;
  min-width: 0;
}
.rt-search-wrap,
.rt-page label.sd-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  min-width: 0;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.rt-search-wrap:hover,
.rt-page label.sd-search:hover {
  border-color: var(--border-strong);
}
.rt-search-wrap:focus-within,
.rt-page label.sd-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.rt-search-wrap .sd-ico,
.rt-page label.sd-search .sd-ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-4);
  pointer-events: none;
}
.rt-search-wrap:focus-within .sd-ico,
.rt-page label.sd-search:focus-within .sd-ico {
  color: var(--accent);
}
.rt-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-base);
  font-family: var(--ff);
  box-shadow: none;
  padding: 0;
}
.rt-search::placeholder { color: var(--ink-4); }

.rt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}
.rt-filter,
.rt-filter.on {
  height: var(--ctrl-sm);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-inset);
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.rt-filter:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}
.rt-filter.on {
  background: var(--accent-softer);
  border-color: var(--border-accent);
  color: var(--accent-text);
}
.rt-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -- lane grid: shrinkable equal columns, no overflow -------------------- */
#routeGrid {
  min-width: 0;
  width: 100%;
}
.rt-lanes,
.route-grid,
.rt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  min-width: 0;
  width: 100%;
}

.rt-lane,
.route-card,
.rt-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  transition: border-color var(--fast), background var(--fast);
}
.rt-lane.is-pick { cursor: pointer; }
.rt-lane.is-pick:hover,
.route-card:hover {
  border-color: var(--border-strong);
}
.rt-lane.is-on,
.route-card.active,
.route-card.selected {
  border-color: var(--accent);
  background: var(--accent-softer);
  box-shadow: none;
}
.rt-lane.is-off {
  border-color: var(--bad-border);
  background: var(--bad-mute);
  cursor: default;
  opacity: 0.78;
}
.rt-lane.is-off:hover {
  border-color: var(--bad-border);
}
.rt-lane:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rt-lane-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}
.rt-lane-top > div {
  min-width: 0;
  flex: 1 1 auto;
}
.rt-lane-name,
.route-card .rc-name {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ink);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.rt-lane-region {
  margin-top: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

.rt-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rt-tag.is-on {
  border-color: var(--border-accent);
  background: var(--accent-s);
  color: var(--accent-text);
}
.rt-tag.is-ready {
  border-color: var(--ok-border);
  background: var(--ok-mute);
  color: var(--ok);
}
.rt-tag.is-off {
  border-color: var(--bad-border);
  background: var(--bad-mute);
  color: var(--bad);
}

.rt-lane-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  min-width: 0;
}
.rt-fact {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface-inset);
  font-family: var(--fm);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  overflow-wrap: anywhere;
  white-space: normal;
}
.rt-fact.mono { font-variant-numeric: tabular-nums; }

.rt-lane-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  min-width: 0;
}
.rt-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}
.rt-metric .k {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.rt-metric .v {
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rt-metric.rate .v,
.route-card .rc-price {
  color: var(--accent-text);
  font-family: var(--fm);
  font-size: var(--text-md);
  font-weight: 650;
}
.route-card .rc-price .per {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-family: var(--ff);
}
.route-card .rc-desc {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}

.rt-lane-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: auto;
  min-width: 0;
}
.rt-lane-hint {
  flex: 1 1 140px;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--ink-4);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.rt-lane.is-off .rt-lane-hint { color: var(--bad); }

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: none;
  height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--ff);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.rt-btn .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
}
.rt-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface-3);
}
.rt-btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 650;
}
.rt-btn.primary:hover:not(:disabled) {
  background: var(--accent-hot);
  color: var(--on-accent);
  box-shadow: none;
}
.rt-btn:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.rt-lane.is-on .rt-btn:disabled {
  opacity: 1;
  border-color: var(--border-accent);
  background: var(--accent-s);
  color: var(--accent-text);
  pointer-events: none;
}
.rt-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rt-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-base);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: var(--surface-inset);
}
#routeGrid .sd-empty { padding: var(--sp-8) var(--sp-4); }

/* -- platform pricing ---------------------------------------------------- */
.rt-price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  min-width: 0;
}
.rt-price-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.rt-price-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.rt-price-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r);
  background: var(--accent-softer);
  border: 1px solid var(--border-accent);
  color: var(--accent-text);
}
.rt-price-ico .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  color: var(--accent);
}
.rt-price-head h3 {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.rt-price-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.rt-pr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.rt-pr span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rt-pr b {
  flex: none;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.rt-pr .u {
  font-weight: 500;
  color: var(--ink-4);
  font-size: var(--text-xs);
}
.rt-price-cta {
  margin-top: auto;
  align-self: flex-start;
}
.rt-price-note {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}

/* -- breakpoints --------------------------------------------------------- */
@media (max-width: 1080px) {
  .rt-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .rt-lanes,
  .route-grid,
  .rt-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-meter { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .rt-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .rt-meter { width: 100%; }
  .rt-lane-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-btn { width: 100%; }
  .rt-price-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-price-cta { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .rt-lane-metrics { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-lane,
  .rt-btn,
  .rt-filter,
  .rt-search-wrap {
    transition: none;
  }
}

/* ============================================================================
   18. PAGE — CDR
   ========================================================================== */
/* ============================================================================
   18. PAGE — CDR
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   ========================================================================== */
.cdr-page,
.cdr-page .cdr-hero,
.cdr-page .cdr-hero-main,
.cdr-page .cdr-hero-aside,
.cdr-page .kpi-strip,
.cdr-page .kpi-item,
.cdr-page .kpi-meta,
.cdr-page .panel,
.cdr-page .panel-head,
.cdr-page .panel-b,
.cdr-page .field,
.cdr-page .filter-row,
.cdr-page #cdrRoot {
  min-width: 0;
}

.cdr-page .sd-ico {
  margin-right: 0;
}

.cdr-page [hidden] { display: none !important; }

.content.cdr-page {
  width: 100%;
  max-width: var(--content-max);
}

/* -- hero ---------------------------------------------------------------- */
.cdr-page .cdr-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  overflow: visible;
}

.cdr-page .cdr-hero-bg {
  background: transparent;
  pointer-events: none;
}

.cdr-page .cdr-hero-main {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.cdr-page .cdr-brand {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cdr-page .cdr-hero h1.page-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow-wrap: break-word;
}

.cdr-page .cdr-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}

.cdr-page .page-desc,
.cdr-page .cdr-hero .sd-sub {
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}

.cdr-page .page-desc .mono {
  overflow-wrap: anywhere;
}

.cdr-page .cdr-hero-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}

.cdr-page .cdr-hero-aside .btn {
  flex: none;
  height: var(--ctrl-md);
}

/* -- KPI strip ----------------------------------------------------------- */
.cdr-page .kpi-strip,
.cdr-page .cdr-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
}

.cdr-page .kpi-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.cdr-page .kpi-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-3);
}

.cdr-page .kpi-ico .sd-ico {
  width: 14px;
  height: 14px;
  margin: 0;
}

.cdr-page .kpi-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cdr-page .kpi-item .label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow-wrap: break-word;
}

.cdr-page .kpi-item .value {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 650;
  line-height: var(--lh-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cdr-page .kpi-item .value.ok { color: var(--ok); }
.cdr-page .kpi-item .value.bad { color: var(--bad); }
.cdr-page .kpi-item .value.accent { color: var(--accent-text); }

.cdr-page .kpi-item.connected {
  border-color: var(--ok-border);
}
.cdr-page .kpi-item.connected .kpi-ico {
  color: var(--ok);
  background: var(--ok-mute);
}
.cdr-page .kpi-item.failed {
  border-color: var(--bad-border);
}
.cdr-page .kpi-item.failed .kpi-ico {
  color: var(--bad);
  background: var(--bad-mute);
}
.cdr-page .kpi-item.cost {
  border-color: var(--border-accent);
}
.cdr-page .kpi-item.cost .kpi-ico {
  color: var(--accent-text);
  background: var(--accent-s);
}

/* -- panels -------------------------------------------------------------- */
.cdr-page .panel {
  overflow: visible;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cdr-page .panel-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

.cdr-page .panel-head h2 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.cdr-page .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
}

.cdr-page .panel-head .meta {
  flex: none;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
  max-width: 100%;
}

.cdr-page .panel-b {
  min-width: 0;
}

/* -- filters ------------------------------------------------------------- */
.cdr-page .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
  min-width: 0;
  width: 100%;
}

.cdr-page .filter-row .field {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}

.cdr-page .filter-row .search-field {
  flex: 2 1 220px;
}

.cdr-page .filter-row .actions-field {
  flex: 1 1 200px;
}

.cdr-page .filter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.cdr-page .filter-label .sd-ico {
  width: 13px;
  height: 13px;
  margin-right: 0;
  flex: none;
  color: var(--ink-4);
}

.cdr-page .filter-row .input,
.cdr-page .filter-row .select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--ctrl-md);
}

.cdr-page .filter-row input[type="date"] {
  min-width: 0;
}

.cdr-page .filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.cdr-page .filter-actions .btn {
  flex: none;
  height: var(--ctrl-md);
  max-width: 100%;
}

/* -- records / empty ----------------------------------------------------- */
.cdr-page #cdrRoot {
  width: 100%;
}

.cdr-page .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  min-width: 0;
}

.cdr-page .empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--ink-4);
}

.cdr-page .empty-icon .sd-ico {
  width: 24px;
  height: 24px;
  margin: 0;
}

.cdr-page .empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-2);
  overflow-wrap: break-word;
}

.cdr-page .empty-desc {
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

/* -- table scroller (the only overflow-x) -------------------------------- */
.cdr-page .table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cdr-page .table-scroll {
  min-width: 0;
}

.cdr-page .table-wrap table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.cdr-page .table-wrap th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}

.cdr-page .table-wrap td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-2);
  vertical-align: middle;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cdr-page .table-wrap tbody tr:last-child td { border-bottom: none; }
.cdr-page .table-wrap tbody tr:hover { background: var(--surface-2); }

.cdr-page .table-wrap td.num {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.cdr-page .pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 650;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.cdr-page .pill.ok {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-mute);
}
.cdr-page .pill.bad {
  color: var(--bad);
  border-color: var(--bad-border);
  background: var(--bad-mute);
}
.cdr-page .pill.warn {
  color: var(--warn);
  border-color: var(--warn-border);
  background: var(--warn-mute);
}

/* -- pager --------------------------------------------------------------- */
.cdr-page .pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  min-width: 0;
}

.cdr-page .pager .meta {
  min-width: 0;
  flex: 1 1 160px;
  overflow-wrap: break-word;
}

.cdr-page .pager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex: none;
}

.cdr-page .pager .btn .sd-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
}

/* -- breakpoints --------------------------------------------------------- */
@media (max-width: 1080px) {
  .cdr-page .kpi-strip,
  .cdr-page .cdr-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cdr-page .cdr-hero {
    align-items: stretch;
  }
  .cdr-page .cdr-hero-aside {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .cdr-page .kpi-strip,
  .cdr-page .cdr-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  .cdr-page .kpi-item { padding: var(--sp-3); }
  .cdr-page .kpi-item .value { font-size: var(--text-lg); }
  .cdr-page .filter-row .field,
  .cdr-page .filter-row .search-field,
  .cdr-page .filter-row .actions-field {
    flex: 1 1 100%;
  }
}

/* ============================================================================
   19. PAGE — DEPOSIT
   ========================================================================== */
/* ============================================================================
   19. PAGE — DEPOSIT
   Iris #6F4EFF · charcoal #0c0c10 · Inter · 8px grid
   Vault, assets, QR, history on CSS grid. QR capped at 160px.
   Overflow: min-width:0, wrap, overflow-wrap. Never overflow:hidden as a patch.
   ========================================================================== */

.content.dep-page {
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
}

.dep-page,
.dep-page .dep-hero,
.dep-page .dep-hero-main,
.dep-page .dep-ledger,
.dep-page .dep-stage,
.dep-page .dep-panel,
.dep-page .dep-panel-h,
.dep-page .dep-panel-b,
.dep-page .dep-vault,
.dep-page .dep-amt-display,
.dep-page .dep-chips,
.dep-page .dep-assets,
.dep-page .dep-cta-slot,
.dep-page .dep-qr-stage,
.dep-page .dep-qr-wrap,
.dep-page .dep-send,
.dep-page .dep-copy,
.dep-page .dep-addr-block,
.dep-page .table-wrap,
.dep-page .dep-table-wrap {
  min-width: 0;
}

.dep-page svg.sd-ico,
.dep-page h1 .sd-ico,
.dep-page h2 .sd-ico,
.dep-page .dep-btn .sd-ico {
  margin-right: 0;
  margin: 0;
  flex: none;
}

/* -- hero: title | ledger ------------------------------------------------ */
.dep-page .dep-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-6);
  overflow: visible;
}
.dep-page .dep-hero-bg {
  display: none;
}
.dep-page .dep-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.dep-page .dep-brand {
  margin: 0;
}
.dep-page .dep-hero h1,
.dep-page .dep-hero h1.page-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 22px;
  line-height: var(--lh-tight);
}
.dep-page .dep-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  color: var(--accent);
  opacity: 1;
  vertical-align: 0;
}
.dep-page .dep-hero .sub,
.dep-page .dep-hero .page-desc {
  max-width: 60ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}

.dep-page .dep-ledger {
  display: grid;
  justify-items: end;
  align-content: end;
  gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  max-width: 100%;
}
.dep-page .dep-ledger-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dep-page .dep-ledger-v {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.dep-page .dep-ledger-v .cur {
  color: var(--ink-3);
  font-size: var(--text-md);
  font-weight: 600;
}
.dep-page .dep-ledger-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.dep-page .dep-alert {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
}

/* -- stage: form | pay console ------------------------------------------- */
.dep-page .dep-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--gap-lg);
  align-items: start;
  width: 100%;
}

.dep-page .dep-panel {
  overflow: visible;
  width: 100%;
}
.dep-page .dep-panel-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.dep-page .dep-panel-h h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dep-page .dep-panel-h h2 .sd-ico {
  width: 16px;
  height: 16px;
  color: var(--accent);
  opacity: 0.85;
  vertical-align: 0;
}
.dep-page .dep-panel-h .meta,
.dep-page .dep-panel-h .dep-status {
  margin-left: auto;
}
.dep-page .dep-panel-h .meta {
  font-size: var(--text-xs);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.dep-page .dep-panel-form .dep-panel-b {
  display: grid;
  gap: var(--sp-6);
}

.dep-page #depositForm {
  display: grid;
  gap: var(--sp-6);
  min-width: 0;
}

.dep-page .dep-amt-block,
.dep-page .dep-coin-block,
.dep-page .dep-cta-block {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}
.dep-page .dep-amt-block {
  container-type: inline-size;
  container-name: dep-amt;
}
.dep-page .dep-coin-block {
  container-type: inline-size;
  container-name: dep-coin;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}
.dep-page .dep-cta-block {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}

.dep-page .dep-amt-kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Amount vault: $ | input on one grid row */
.dep-page .dep-vault {
  width: 100%;
}
.dep-page .dep-amt-display {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: 56px;
  padding: 0 var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: text;
}
.dep-page .dep-amt-display:focus-within,
.dep-page .dep-amt-display.is-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.dep-page .dep-amt-display.is-custom {
  border-color: var(--border-accent);
}
.dep-page .dep-amt-display .cur {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--accent-text);
  line-height: 1;
}
.dep-page .dep-amt-display input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--fm);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  caret-color: var(--accent);
}
.dep-page .dep-amt-display input:focus {
  outline: none;
  box-shadow: none;
}

.dep-page .dep-talk {
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.dep-page .dep-field-err {
  font-size: var(--text-xs);
  color: var(--bad);
  line-height: var(--lh-snug);
}

/* Amount chips: equal cells, never flex leftovers */
.dep-page .dep-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  width: 100%;
}
@container dep-amt (min-width: 360px) {
  .dep-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container dep-amt (min-width: 560px) {
  .dep-chips {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
.dep-page .dep-chip {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-inset);
  color: var(--ink-2);
  text-align: center;
  transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.dep-page .dep-chip:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}
.dep-page .dep-chip.on {
  border-color: var(--border-accent);
  background: var(--accent-softer);
  color: var(--accent-text);
}
.dep-page .dep-chip .chip-a {
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dep-page .dep-chip .chip-n {
  font-size: var(--text-2xs);
  color: var(--ink-4);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dep-page .dep-chip.on .chip-n {
  color: var(--accent-text);
  opacity: 0.75;
}
.dep-page .dep-chip-custom .chip-a {
  font-weight: 600;
}

.dep-page .dep-chip:focus-visible,
.dep-page .dep-asset:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Asset grid: 10 coins, equal cells */
.dep-page .dep-assets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  width: 100%;
}
@container dep-coin (min-width: 280px) {
  .dep-assets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container dep-coin (min-width: 400px) {
  .dep-assets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.dep-page .dep-asset {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-inset);
  color: var(--ink-2);
  text-align: center;
  transition: border-color var(--fast), background var(--fast);
}
.dep-page .dep-asset:hover {
  border-color: var(--border-strong);
}
.dep-page .dep-asset.rec {
  border-color: var(--border-accent);
}
.dep-page .dep-asset.on {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.dep-page .dep-asset .tk {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dep-page .dep-asset .net {
  font-size: var(--text-2xs);
  color: var(--ink-4);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dep-page .dep-asset.on .tk {
  color: var(--accent-text);
}
.dep-page .dep-asset.on .net {
  color: var(--accent-text);
  opacity: 0.75;
}
.dep-page .dep-best {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.dep-page .dep-chip:disabled,
.dep-page .dep-asset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pay button: fills its slot, icon+label optically centered inside */
.dep-page .dep-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-2);
  width: 100%;
}
.dep-page .dep-actions:has(.dep-cta-aside) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.dep-page .dep-cta-slot {
  display: grid;
  grid-column: 1;
  place-items: center;
  width: 100%;
  min-width: 0;
}
.dep-page .dep-cta-aside {
  display: grid;
  grid-column: 2;
  place-items: center;
}
.dep-page .dep-cta-slot .dep-btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  font-size: var(--text-md);
  white-space: normal;
  text-align: center;
}
.dep-page .dep-cta-slot .dep-btn.primary .sd-ico {
  width: 18px;
  height: 18px;
}
.dep-page .dep-cta-slot .dep-btn.primary #submitLabel,
.dep-page .dep-cta-slot .dep-btn.primary .sd-ico-txt,
.dep-page .dep-cta-slot .dep-btn.primary span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dep-page .dep-cta-aside .dep-btn {
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
}
.dep-page .dep-trust {
  font-size: var(--text-xs);
  color: var(--ink-4);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* -- pay console --------------------------------------------------------- */
.dep-page .dep-pay .dep-panel-b {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
  container-type: inline-size;
  container-name: dep-pay;
}
.dep-page .dep-pay.is-ok {
  border-color: var(--ok-border);
}
.dep-page .dep-pay.is-bad {
  border-color: var(--bad-border);
}

.dep-page .dep-honest {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  line-height: var(--lh-snug);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border: 1px solid var(--border-accent);
  background: var(--accent-softer);
  overflow-wrap: anywhere;
}

.dep-page .dep-hint {
  font-size: var(--text-xs);
  color: var(--ink-4);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.dep-page .dep-hint.warn {
  color: var(--warn);
}

.dep-page .dep-warn {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r);
  background: var(--warn-mute);
  border: 1px solid var(--warn-border);
  color: var(--warn);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.dep-page .dep-warn .sd-ico {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}
.dep-page .dep-warn strong {
  color: var(--ink);
}

.dep-page .dep-invoice-go {
  min-width: 0;
}
.dep-page .dep-invoice-go .dep-cta-slot .dep-btn.primary {
  width: 100%;
}

/* QR column capped at 160px so the 208px SVG cannot size the track */
.dep-page .dep-qr-stage {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
@container dep-pay (max-width: 420px) {
  .dep-qr-stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .dep-send {
    justify-items: center;
    width: 100%;
    text-align: center;
  }
}
.dep-page .dep-qr-wrap {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  width: min(160px, 100%);
  max-width: 100%;
}
.dep-page .dep-qr-ring {
  display: none;
}
.dep-page .dep-qr {
  width: min(160px, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  padding: var(--sp-2);
  background: #fff;
  border-radius: var(--r);
}
.dep-page .dep-qr svg,
.dep-page .dep-qr img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 144px;
  aspect-ratio: 1;
}
.dep-page .dep-qr-cap {
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.dep-page .dep-qr-missing {
  width: min(160px, 100%);
  max-width: 100%;
  min-height: 96px;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  color: var(--ink-4);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.dep-page .dep-send {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  min-width: 0;
}
.dep-page .dep-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.dep-page .dep-crypto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--fm);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dep-page .dep-crypto .u {
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.dep-page .dep-send .dep-btn {
  height: var(--ctrl-md);
  gap: var(--sp-2);
}

/* Address / memo: value | 38px copy */
.dep-page .dep-addr-block {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
}
.dep-page .dep-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ctrl-md);
  align-items: start;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.dep-page .dep-copy .val {
  min-width: 0;
  font-family: var(--fm);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dep-page .dep-copy .dep-btn.ghost,
.dep-page .dep-copy .copy-btn {
  width: var(--ctrl-md);
  height: var(--ctrl-md);
  min-width: var(--ctrl-md);
  padding: 0;
  place-self: start center;
}
.dep-page .dep-copy .sd-ico {
  width: 16px;
  height: 16px;
}

.dep-page .dep-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.dep-page .dep-meta .l {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.dep-page .dep-meta .v {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.dep-page .dep-poll {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r);
  background: var(--accent-softer);
  border: 1px solid var(--border-accent);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.dep-page .dep-poll .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dep-pulse 1.6s var(--ease) infinite;
}
.dep-page .dep-poll .dot.off {
  background: var(--ink-4);
  animation: none;
}
.dep-page .dep-poll .dot.ok {
  background: var(--ok);
  animation: none;
}
.dep-page #pollLabel,
.dep-page #pollLast {
  overflow-wrap: anywhere;
}
@keyframes dep-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.dep-page .dep-pay.empty {
  border-style: dashed;
  min-height: 0;
}
.dep-page .dep-pay-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.dep-page .dep-pay-empty-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  color: var(--accent);
}
.dep-page .dep-pay-empty-ico .sd-ico {
  width: 22px;
  height: 22px;
}
.dep-page .dep-pay-empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-3);
}
.dep-page .dep-pay-empty-desc {
  font-size: var(--text-sm);
  color: var(--ink-4);
  max-width: 36ch;
  overflow-wrap: anywhere;
}
.dep-page .dep-pay-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  width: 100%;
  max-width: 28rem;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--ink-4);
}
.dep-page .dep-pay-empty-steps li {
  display: grid;
  place-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  overflow-wrap: anywhere;
}

/* -- history: scroll lives on .table-wrap -------------------------------- */
.dep-page .dep-panel-hist .dep-panel-b {
  padding: 0;
}
.dep-page .dep-empty {
  padding: var(--sp-8) var(--sp-5);
}
.dep-page .table-wrap,
.dep-page .dep-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dep-page .dep-table {
  width: 100%;
  min-width: 36rem;
}
.dep-page .dep-table .amt {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.dep-page .dep-table .muted {
  color: var(--ink-4);
}
.dep-page .dep-coin {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dep-page .dep-coin .tk {
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dep-page .dep-coin .net {
  font-family: var(--fm);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}
.dep-page .dep-cred-y {
  color: var(--ok);
  font-weight: 650;
}
.dep-page .dep-cred-n {
  color: var(--ink-4);
}
.dep-page .dep-opencell {
  text-align: right;
  width: 4.5rem;
}
.dep-page .dep-open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}
.dep-page .dep-open:hover {
  color: var(--accent-hot);
}
.dep-page .dep-open .sd-ico {
  width: 14px;
  height: 14px;
}

@media (max-width: 1080px) {
  .dep-page .dep-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .dep-page .dep-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .dep-page .dep-ledger {
    justify-items: start;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    width: 100%;
  }
  .dep-page .dep-ledger-k { grid-column: 1; }
  .dep-page .dep-ledger-v { grid-column: 2; justify-self: start; }
  .dep-page .dep-ledger-sub { grid-column: 3; justify-self: end; }
  .dep-page .dep-panel-h {
    padding: var(--sp-3) var(--sp-4);
    min-height: 48px;
  }
  .dep-page .dep-panel-b {
    padding: var(--sp-4);
  }
  .dep-page .dep-panel-hist .dep-panel-b {
    padding: 0;
  }
  .dep-page .dep-qr-stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .dep-page .dep-send {
    justify-items: center;
    width: 100%;
    text-align: center;
  }
  .dep-page .dep-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .dep-page .dep-cta-aside {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .dep-page .dep-cta-aside .dep-btn {
    width: 100%;
    justify-content: center;
  }
  .dep-page .dep-meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .dep-page .dep-pay-empty-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .dep-page .dep-poll {
    grid-template-columns: 8px minmax(0, 1fr);
  }
  .dep-page #pollLast {
    grid-column: 2;
  }

  .dep-page .dep-table {
    min-width: 0;
  }
  .dep-page .dep-table thead {
    display: none;
  }
  .dep-page .dep-table,
  .dep-page .dep-table tbody,
  .dep-page .dep-table tr,
  .dep-page .dep-table td {
    display: block;
    width: 100%;
  }
  .dep-page .dep-table tr {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-soft);
  }
  .dep-page .dep-table tbody tr:last-child {
    border-bottom: none;
  }
  .dep-page .dep-table td {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border-bottom: none;
    min-width: 0;
  }
  .dep-page .dep-table td::before {
    content: attr(data-label);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  .dep-page .dep-table td.dep-opencell {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    width: auto;
  }
  .dep-page .dep-table td.dep-opencell::before {
    content: none;
  }
  .dep-page .dep-table .amt {
    text-align: left;
    justify-self: end;
  }
}

/* ============================================================================
   20. PAGE — SMS
   ========================================================================== */
/* ============================================================================
   20. PAGE — SMS
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   Tokens: iris #6F4EFF, charcoal #0c0c10, Inter, 8px grid, controls 38px.
   ========================================================================== */
.content.sms-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
  gap: var(--gap-lg);
  font-family: var(--ff);
}
.sms-page,
.sms-page .panel,
.sms-page .panel-head,
.sms-page .panel-b,
.sms-page .field,
.sms-page .sms-hero,
.sms-page .sms-hero-main,
.sms-page .sms-hero-aside,
.sms-page .sms-wallet-grid,
.sms-page .sms-wallet-cell,
.sms-page .sms-controls-grid,
.sms-page .sms-buy-slot,
.sms-page .sms-prod-grid,
.sms-page .table-wrap,
.sms-page .sms-hist-wrap,
.sms-page .sms-hist-table {
  min-width: 0;
}
.sms-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
}

.sms-page .panel {
  width: 100%;
}
.sms-page .panel-head {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
  column-gap: var(--sp-2);
}
.sms-page .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.sms-page .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
}
.sms-page .panel-head .meta,
.sms-page .panel-head .db-pill {
  flex: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* -- hero ---------------------------------------------------------------- */
.sms-page .sms-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  overflow: visible;
}
.sms-page .sms-hero-bg {
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
}
.sms-page .sms-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 16rem;
}
.sms-page .sms-brand {
  margin: 0;
}
.sms-page .sms-hero h1.page-title,
.sms-page .sms-hero h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.sms-page .sms-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
}
.sms-page .sms-hero .sub,
.sms-page .sms-hero .sd-sub {
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
.sms-page .sms-hero-aside {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex: 0 1 auto;
  max-width: 100%;
}
.sms-page .sms-hero-aside .sd-aside-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
}
.sms-page .sms-hero-aside .sip-btn,
.sms-page .sms-hero-aside .sip-chip {
  flex: none;
  height: var(--ctrl-md);
}

/* -- wallet -------------------------------------------------------------- */
.sms-page .sms-wallet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.sms-page .sms-wallet-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.sms-page .sms-wallet-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  overflow-wrap: anywhere;
  white-space: normal;
}
.sms-page .sms-wallet-v {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.sms-page .sms-wallet-v.accent { color: var(--accent-text); }
.sms-page .sms-wallet-note {
  font-size: var(--text-xs);
  color: var(--ink-4);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  white-space: normal;
}

/* -- find a number ------------------------------------------------------- */
.sms-page .sms-controls .panel-b {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.sms-page .sms-controls-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(11rem, 0.95fr);
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: 0;
}
.sms-page .sms-controls-grid .field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sms-page .sms-controls-grid .field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 16px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-3);
}
.sms-page .sms-controls-grid .field-label .sd-ico {
  width: 13px;
  height: 13px;
  margin-right: 0;
  flex: none;
  color: var(--ink-4);
}
.sms-page .sms-controls-grid .select,
.sms-page .sms-controls-grid .input,
.sms-page .sms-controls-grid .input-ico,
.sms-page .sms-controls-grid .input-ico .input {
  width: 100%;
  max-width: 100%;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  box-sizing: border-box;
}
.sms-page .sms-search-field .input-ico {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--ctrl-md);
}
.sms-page .sms-search-field .input-ico .sd-ico {
  position: absolute;
  left: var(--sp-3);
  width: 14px;
  height: 14px;
  margin-right: 0;
  color: var(--ink-4);
  pointer-events: none;
}
.sms-page .sms-search-field .input {
  padding-left: calc(var(--sp-3) + 24px);
}

.sms-page .sms-buy-slot {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.sms-page .sms-buy-slot .btn,
.sms-page .sms-buy-slot #smsBuyBtn,
.sms-page .sms-buy-slot #smsBuyIdle {
  width: 100%;
  max-width: 100%;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  margin: 0;
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  gap: var(--sp-2);
  overflow-wrap: anywhere;
  white-space: nowrap;
}
.sms-page .sms-buy-slot .btn .sd-ico,
.sms-page .sms-buy-slot #smsBuyBtn .sd-ico {
  width: 15px;
  height: 15px;
  margin-right: 0;
}

.sms-page .sms-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}
.sms-page .sms-prod-grid .vps-loading {
  grid-column: 1 / -1;
}

.sms-page .sms-prod-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--fast), background var(--fast);
}
.sms-page .sms-prod-card:hover { border-color: var(--border-strong); }
.sms-page .sms-prod-card.selected {
  border-color: var(--border-accent);
  background: var(--accent-softer);
  box-shadow: 0 0 0 1px var(--accent-h) inset;
}
.sms-page .sms-prod-card.disabled { opacity: 0.45; cursor: not-allowed; }
.sms-page .sms-prod-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
  overflow-wrap: anywhere;
  white-space: normal;
}
.sms-page .sms-prod-price {
  margin-top: auto;
  font-family: var(--fm);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.sms-page .sms-prod-qty {
  font-size: var(--text-2xs);
  color: var(--ink-4);
  overflow-wrap: anywhere;
}
.sms-page .sms-prod-qty.low { color: var(--warn); }
.sms-page .sms-prod-qty.zero { color: var(--bad); }
.sms-page .sms-prod-afford {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}
.sms-page .sms-prod-afford.no { color: var(--warn); }

/* -- active number (JS fills #smsActiveBody) ----------------------------- */
.sms-page .sms-active-body,
.sms-page #smsActiveBody {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
.sms-page .sms-number-display {
  font-family: var(--fm);
  font-size: clamp(1.25rem, 2vw + 1rem, 1.875rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-align: left;
  padding: var(--sp-2) 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.sms-page .sms-copy-btn,
.sms-page #smsActiveBody > button.btn,
.sms-page .sms-sms-item > button.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  max-width: 100%;
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
  flex: none;
}
.sms-page .sms-copy-btn {
  width: var(--ctrl-md);
  padding: 0;
  color: var(--ink-4);
  border-radius: var(--r-sm);
  transition: color var(--fast);
}
.sms-page .sms-copy-btn:hover { color: var(--accent-text); }
.sms-page .sms-copy-btn.copied { color: var(--ok); }
.sms-page .sms-copy-btn .sd-ico { width: 14px; height: 14px; margin-right: 0; }

.sms-page .sms-charge-note {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ok);
  overflow-wrap: anywhere;
}

.sms-page .sip-cred {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 0;
  background: transparent;
  border: 0;
}
.sms-page .sip-kv {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  margin: 0;
  padding: var(--sp-3);
}
.sms-page .sip-kv .k,
.sms-page .sip-kv .v,
.sms-page .sip-cred .v {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: unset;
}
.sms-page .vps-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.sms-page .vps-card-actions .btn {
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  flex: 0 1 auto;
}

.sms-page .sms-code-display {
  font-family: var(--fm);
  font-size: clamp(1.375rem, 3vw + 0.75rem, 2.125rem);
  font-weight: 600;
  color: var(--accent-text);
  text-align: left;
  letter-spacing: 0.22em;
  padding: var(--sp-4) 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sms-page .sms-sms-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.sms-page .sms-sms-sender {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-text);
  overflow-wrap: anywhere;
}
.sms-page .sms-sms-text {
  font-size: var(--text-base);
  color: var(--ink);
  margin-top: var(--sp-1);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sms-page .sms-sms-time {
  font-size: var(--text-2xs);
  color: var(--ink-4);
  margin-top: var(--sp-1);
  overflow-wrap: anywhere;
}
.sms-page .sms-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
  color: var(--ink-3);
  font-size: var(--text-base);
}
.sms-page .sms-waiting .sd-spin { width: 18px; height: 18px; flex: none; }

/* -- history table (JS still paints #smsHistList items) ------------------ */
.sms-page .table-wrap.sms-hist-wrap,
.sms-page .sms-hist-wrap.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sms-page .sms-hist-table {
  display: grid;
  grid-template-columns:
    minmax(8.5rem, 1.4fr)
    minmax(6rem, 1.1fr)
    minmax(5rem, 7rem)
    minmax(4.5rem, 6rem)
    minmax(5.5rem, 7rem);
  width: 100%;
  min-width: 36rem;
  align-items: center;
}
.sms-page .sms-hist-head,
.sms-page .sms-hist-list,
.sms-page .sms-hist-item {
  display: contents;
}
.sms-page .sms-hist-head > span {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.sms-page .sms-hist-item > * {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
.sms-page .sms-hist-number {
  font-weight: 600;
  color: var(--ink);
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
}
.sms-page .sms-hist-service {
  color: var(--accent-text);
  font-weight: 600;
  text-transform: capitalize;
}
.sms-page .sms-hist-price {
  margin-left: 0;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-family: var(--fm);
}
.sms-page .sms-hist-time {
  color: var(--ink-4);
  font-size: var(--text-xs);
}
.sms-page .sms-hist-item .db-pill {
  justify-self: start;
  max-width: 100%;
}
.sms-page .sms-hist-list > .vps-loading {
  grid-column: 1 / -1;
  padding: var(--sp-6) var(--sp-3);
}

/* -- breakpoints (specificity beats leftover §28 SMS rules) -------------- */
@media (max-width: 900px) {
  .sms-page .sms-wallet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sms-page .sms-controls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sms-page .sms-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }
  .sms-page .sms-hero-aside,
  .sms-page .sms-hero-aside .sd-aside-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .sms-page .sms-controls-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sms-page .sms-buy-slot .btn,
  .sms-page .sms-buy-slot #smsBuyBtn,
  .sms-page .sms-buy-slot #smsBuyIdle {
    white-space: normal;
    height: auto;
    min-height: var(--ctrl-md);
    padding-block: var(--sp-2);
  }
  .sms-page .sms-wallet-v { font-size: var(--text-lg); }
  .sms-page .sms-number-display { font-size: var(--text-xl); }
  .sms-page .sms-code-display { font-size: 1.625rem; letter-spacing: 0.16em; }
  .sms-page .sip-kv {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 400px) {
  .sms-page .sms-wallet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sms-page .sms-prod-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sms-page .sms-prod-card { transition: none; }
}

/* ============================================================================
   21. PAGE — VPS
   ========================================================================== */
/* ============================================================================
   21. PAGE — VPS
   Geometry only. Real class names from vps.php + vps-app.js.
   Tokens: iris #6F4EFF, charcoal #0c0c10, Inter, 8px grid.
   NL/DE flags stay 14×10 SVG (.vps-flag). Equal-height plan cards. Prices
   share the same footer row. Chip labels centered. Order rows wrap.
   No overflow:hidden as a layout patch. No !important as the primary fix.
   ========================================================================== */
.content.vps-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
  font-family: var(--ff);
}
.vps-page,
.vps-page .panel,
.vps-page .panel-head,
.vps-page .panel-b,
.vps-page .vps-hero,
.vps-page .vps-hero-main,
.vps-page .vps-hero-aside,
.vps-page .vps-order-body,
.vps-page .vps-filter-row,
.vps-page .vps-filter-tabs,
.vps-page .vps-grid,
.vps-page .vps-card,
.vps-page .vps-prod,
.vps-page .vps-card-titlewrap,
.vps-page .sip-cred,
.vps-page .sip-kv {
  min-width: 0;
}

.vps-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
  margin-right: 0;
}

/* -- hero ---------------------------------------------------------------- */
.vps-page .vps-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  overflow: visible;
}
.vps-page .vps-hero-bg {
  border-radius: inherit;
  pointer-events: none;
}
.vps-page .vps-brand {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vps-page .vps-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 16rem;
}
.vps-page .vps-hero h1.page-title,
.vps-page .vps-hero h1 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}
.vps-page .vps-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
}
.vps-page .vps-hero .sub,
.vps-page .vps-hero .sd-sub {
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
.vps-page .vps-hero-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex: 0 1 auto;
  max-width: 100%;
}
.vps-page .sd-aside-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  max-width: 100%;
}
.vps-page .vps-hero-aside .sip-btn {
  height: var(--ctrl-md);
  flex: none;
  gap: var(--sp-2);
}
.vps-page .vps-hero-aside .sip-btn .sd-ico {
  width: 15px;
  height: 15px;
  margin-right: 0;
}

/* -- panels -------------------------------------------------------------- */
.vps-page .panel {
  overflow: visible;
  width: 100%;
}
.vps-page .panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  row-gap: var(--sp-2);
}
.vps-page .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 600;
}
.vps-page .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
}
.vps-page .panel-head .meta,
.vps-page .panel-head .db-pill {
  flex: none;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.vps-page .panel-head #vdClose {
  height: var(--ctrl-sm);
  width: var(--ctrl-sm);
  padding: 0;
  flex: none;
  justify-content: center;
}
.vps-page .panel-b {
  min-width: 0;
  max-width: 100%;
}
.vps-page .vps-order-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* -- summary tiles ------------------------------------------------------- */
.vps-page .vps-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.vps-page .vps-sum-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  min-width: 0;
}
.vps-page .vps-sum-val {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.vps-page .vps-sum-val.vps-ok { color: var(--ok); }
.vps-page .vps-sum-val.vps-warn { color: var(--warn); }
.vps-page .vps-sum-lbl {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* -- filter chips (centered chooser) ------------------------------------- */
.vps-page .vps-chooser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 var(--gap);
  text-align: center;
}
.vps-page .vps-chooser-k {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.vps-page .vps-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
}
.vps-page .vps-filter-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  min-width: 0;
  max-width: 100%;
}
.vps-page .vps-filter-tabs .rt-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  padding: 0 12px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.vps-page .vps-filter-tabs .rt-filter .sd-ico {
  width: 12px;
  height: 12px;
  margin: 0;
  flex: none;
}
.vps-page .vps-chip-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* NL / DE flags — match vps_flag_svg() 18×12. */
.vps-page .vps-flag,
.vps-page svg.vps-flag,
svg.vps-flag {
  width: 18px;
  height: 12px;
  flex: none;
  display: block;
  border-radius: 2px;
  overflow: visible;
}

/* -- my-servers grid ----------------------------------------------------- */
.vps-page .vps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
  align-items: start;
  width: 100%;
}
.vps-page .vps-grid .sd-empty,
.vps-page .vps-grid .vps-loading,
.vps-page .vps-grid-prod .vps-loading {
  grid-column: 1 / -1;
}
.vps-page .vps-grid .sd-empty {
  min-height: 220px;
  padding: var(--sp-9) var(--sp-4);
  background: none;
  border: none;
}
.vps-page .vps-grid .sd-empty-ico {
  width: auto;
  height: auto;
  background: none;
  border: none;
  margin-bottom: var(--sp-2);
}
.vps-page .vps-loading {
  text-align: center;
  color: var(--ink-4);
  padding: var(--sp-9) var(--sp-4);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

/* -- server cards -------------------------------------------------------- */
.vps-page .vps-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.vps-page .vps-card:hover { border-color: var(--border-strong); }
.vps-page .vps-card.running { border-color: var(--ok-border); }
.vps-page .vps-card.expanded { border-color: var(--border-accent); box-shadow: none; }

.vps-page .vps-card-header { cursor: pointer; min-width: 0; }
.vps-page .vps-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}
.vps-page .vps-card-titlewrap { min-width: 0; flex: 1 1 auto; }
.vps-page .vps-card-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vps-page .vps-card-ip {
  font-size: var(--text-xs);
  color: var(--ink-4);
  margin-top: 2px;
  font-family: var(--fm);
  overflow-wrap: anywhere;
}
.vps-page .vps-card-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex: none;
}
.vps-page .vps-card-badges .db-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  line-height: 1;
}

.vps-page .vps-card-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.vps-page .vps-spec { min-width: 0; }
.vps-page .vps-spec .k {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.vps-page .vps-spec .v {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vps-page .vps-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  border-radius: var(--r);
}
.vps-page .vps-card-toggle .sd-ico,
.vps-page .vps-card-toggle svg {
  width: 14px;
  height: 14px;
  margin-right: 0;
  flex: none;
  transition: transform var(--fast);
}
.vps-page .vps-card.expanded .vps-card-toggle svg { transform: rotate(90deg); }
.vps-page .vps-toggle-text { line-height: 1; }

.vps-page .vps-card-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.vps-page .vps-card-panel.hidden { display: none; }
@keyframes vpsExpand {
  from { opacity: 0; }
  to { opacity: 1; }
}
.vps-page .vps-card-panel:not(.hidden) {
  animation: vpsExpand 0.2s var(--ease);
}

.vps-page .vps-card-price,
.vps-page .vps-prod-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: var(--sp-2);
  min-width: 0;
}
.vps-page .vps-price-v,
.vps-page .vps-prod-price .v {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow-wrap: anywhere;
}
.vps-page .vps-price-per,
.vps-page .vps-prod-price .per {
  font-size: var(--text-xs);
  color: var(--ink-4);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.vps-page .vps-detail-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.vps-page .vps-detail-tools .btn {
  height: var(--ctrl-sm);
  flex: 0 1 auto;
  max-width: 100%;
  gap: var(--sp-2);
}
.vps-page .vps-detail-tools .btn .sd-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
}

.vps-page .sip-cred {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.vps-page .sip-kv {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: var(--sp-3);
}
.vps-page .sip-kv .k,
.vps-page .sip-kv .v {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -- catalog: equal-height plan cards, aligned prices -------------------- */
.vps-page .vps-grid-prod {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--gap);
  align-items: stretch;
  width: 100%;
}

.vps-page .vps-prod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
  position: relative;
  padding: var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  min-width: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.vps-page .vps-prod:hover { border-color: var(--border-accent); box-shadow: none; }

.vps-page .vps-prod-loc-badge {
  grid-column: 2;
  grid-row: 1;
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  background: var(--surface-2);
  color: var(--ink-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  flex: none;
  align-self: center;
  text-align: center;
}
.vps-page .vps-prod-cat {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  overflow-wrap: anywhere;
  line-height: 1;
}
.vps-page .vps-prod-name {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  padding-right: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vps-page .vps-prod-specs-full {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3) 0 0;
  margin: 0;
  border-top: 1px solid var(--border-soft);
  min-width: 0;
  width: 100%;
}
.vps-page .vps-prod-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--ink-3);
  min-width: 0;
}
.vps-page .vps-prod-loc {
  font-size: var(--text-xs);
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

.vps-page .vps-prod-price {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 0;
  padding-top: var(--sp-2);
  align-self: end;
  min-height: 28px;
}
.vps-page .vps-prod-buy {
  grid-column: 1 / -1;
  grid-row: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 100%;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  margin-top: 0;
}
.vps-page .vps-prod-buy .sd-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
}

/* -- order / reinstall forms (wrap, 38px controls) ----------------------- */
.vps-page .vps-reinstall {
  margin-top: var(--sp-1);
  padding: var(--sp-4);
  background: var(--bad-mute);
  border: 1px solid var(--bad-border);
  border-radius: var(--r);
  min-width: 0;
  max-width: 100%;
}
.vps-page .vps-reinstall.hidden { display: none; }
.vps-page .vps-rz-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--bad);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vps-page .vps-rz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.vps-page .vps-rz-row .select,
.vps-page .vps-rz-row .input {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
  height: var(--ctrl-md);
}
.vps-page .vps-rz-row .btn {
  height: var(--ctrl-md);
  flex: 0 1 auto;
  gap: var(--sp-2);
}

/* -- backups / stats in detail panel ------------------------------------- */
.vps-page .vps-backup-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  min-width: 0;
}
.vps-page .vps-bk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r);
  border: 1px solid var(--border-soft);
  min-width: 0;
}
.vps-page .vps-bk-name {
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1 1 12ch;
}
.vps-page .vps-bk-meta {
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  flex: none;
}
.vps-page #vdBody {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.vps-page #vdBody > .btn {
  align-self: flex-start;
  height: var(--ctrl-md);
  gap: var(--sp-2);
  max-width: 100%;
}
.vps-page #vdBody .vps-summary {
  margin: 0;
}

/* -- confirm modal (JS appends to body, outside .vps-page) --------------- */
body > .confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.62);
  box-sizing: border-box;
}
body > .confirm-overlay .confirm-modal {
  width: min(420px, 100%);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  min-width: 0;
  box-sizing: border-box;
}
body > .confirm-overlay .vps-cf-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
}
body > .confirm-overlay .vps-cf-msg {
  margin: 0 0 var(--sp-4);
  max-width: 36em;
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
body > .confirm-overlay .vps-cf-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
body > .confirm-overlay .vps-cf-row .btn {
  height: var(--ctrl-md);
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 1100px) {
  .vps-page .vps-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .vps-page .vps-hero {
    align-items: stretch;
    gap: var(--sp-4);
  }
  .vps-page .vps-hero-aside {
    justify-content: flex-start;
    width: 100%;
  }
  .vps-page .sd-aside-actions {
    justify-content: flex-start;
  }
  .vps-page .vps-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-page .vps-card-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vps-page .vps-prod-specs-full {
    grid-template-columns: minmax(0, 1fr);
  }
  .vps-page .vps-filter-row {
    flex-direction: column;
    align-items: center;
  }
  .vps-page .vps-filter-tabs {
    justify-content: center;
  }
  .vps-page .sip-kv {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 400px) {
  .vps-page .vps-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .vps-page .vps-grid,
  .vps-page .vps-grid-prod {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vps-page .vps-card,
  .vps-page .vps-prod,
  .vps-page .vps-card-panel:not(.hidden),
  .vps-page .vps-card-toggle svg {
    animation: none;
    transition: none;
  }
}

/* ============================================================================
   22. PAGE — P1
   ========================================================================== */
/* ============================================================================
   22. PAGE — P1
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   8px grid. Controls 38px. Radius 8/10. Iris via --accent. Inter via --ff.
   Sticky #p1RunSchedule lives in p1-run.css — do not unstick it here.
   ========================================================================== */

.content.p1-page {
  max-width: 1280px;
  min-width: 0;
  width: 100%;
}

.p1-page,
.p1-page .p1-hero,
.p1-page .p1-hero-main,
.p1-page .p1-hero-aside,
.p1-page .p1-hero-status,
.p1-page .p1-hero-cta,
.p1-page .p1-access-gate,
.p1-page .p1-access-shell,
.p1-page .p1-access-plan,
.p1-page .layout,
.p1-page .setup,
.p1-page .monitor,
.p1-page .panel,
.p1-page .field,
.p1-page .xfer-grid,
.p1-page .xfer-card,
.p1-page .xfer-copy,
.p1-page .xfer-panels,
.p1-page .xfer-panel,
.p1-page .dtmf-grid,
.p1-page .slider-field,
.p1-page .p1d-hero,
.p1-page .p1d-tile,
.p1-page .p1d-panel,
.p1-page .p1d-live-list,
.p1-page .p1d-log,
.p1-page .campaign-row,
.p1-page .audio-item,
.p1-page .btn-group,
.p1-page .btn-face {
  min-width: 0;
}

.p1-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
  vertical-align: 0;
}

.p1-page .panel {
  overflow: visible;
}

.p1-page .page-desc,
.p1-page .p1-hero .sd-sub,
.p1-page .panel-sub,
.p1-page .field-hint,
.p1-page .amd-hint,
.p1-page .billing-note,
.p1-page .xfer-privacy {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* -- hero ---------------------------------------------------------------- */
.p1-page .p1-hero {
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  gap: var(--sp-6);
}
.p1-page .p1-hero-bg {
  border-radius: inherit;
  pointer-events: none;
}
.p1-page .p1-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 240px;
  min-width: 0;
}
.p1-page .p1-brand {
  margin: 0;
}
.p1-page .p1-hero h1.page-title,
.p1-page .p1-hero h1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.p1-page .p1-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin: 0;
  color: var(--accent);
  flex: none;
}
.p1-page .page-desc,
.p1-page .p1-hero .sd-sub {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}
.p1-page .p1-hero-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 100%;
}
.p1-page .p1-hero-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.p1-page .p1-hero-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.p1-page .p1-access-live {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-accent);
  background: var(--accent-s);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.p1-page .p1-access-live.hidden,
.p1-page .p1-access-live[hidden] {
  display: none;
}
.p1-page .running-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.p1-page .running-pill strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* -- buttons: icon + label optically centered ---------------------------- */
.p1-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  min-width: 0;
  max-width: 100%;
  padding: 0 16px;
}
.p1-page .btn-sm {
  height: 32px;
  padding: 0 12px;
  gap: 8px;
}
.p1-page .btn-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  line-height: 1;
}
.p1-page .btn .sd-ico,
.p1-page .btn-face .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  display: block;
  color: currentColor;
}
.p1-page .btn-sm .sd-ico,
.p1-page .btn-sm .btn-face .sd-ico {
  width: 14px;
  height: 14px;
}
.p1-page .btn .sd-ico-txt,
.p1-page .btn-face .sd-ico-txt {
  display: block;
  line-height: 1;
  min-width: 0;
}
.p1-page .p1-hero-aside .btn,
.p1-page .p1-hero-cta .btn {
  flex: none;
  min-width: 0;
  height: 38px;
}
.p1-page .p1-hero-cta #startCampaignBtn,
.p1-page .p1-hero-cta #stopCampaignBtn {
  min-width: 0;
  max-width: 100%;
}

/* -- access gate --------------------------------------------------------- */
.p1-page .p1-access-gate {
  min-width: 0;
  width: 100%;
}
.p1-page .p1-access-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
}
.p1-page .p1-access-notify {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.p1-page .p1-access-notify-rail {
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  flex: none;
}
.p1-page .p1-access-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 4px var(--accent-s);
}
.p1-page .p1-access-notify-body {
  flex: 1 1 220px;
  min-width: 0;
}
.p1-page .p1-access-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.p1-page .p1-access-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.p1-page .p1-access-lock .sd-ico {
  width: 14px;
  height: 14px;
  margin: 0;
}
.p1-page .p1-access-title {
  margin-top: 6px;
  font-size: var(--text-xl);
  font-weight: 650;
  overflow-wrap: break-word;
}
.p1-page .p1-access-copy {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}
.p1-page .p1-access-bal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--r);
  border: 1px solid var(--border-accent);
  background: var(--accent-softer);
}
.p1-page .p1-access-bal-l {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.p1-page .p1-access-bal-v {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.p1-page .p1-access-bal-v .cur {
  color: var(--ink-3);
  margin-right: 1px;
  font-size: 0.7em;
}

.p1-page .p1-access-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
  width: 100%;
}
.p1-page .p1-access-plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.p1-page .p1-access-plan.featured {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.p1-page .p1-access-plan-ribbon {
  display: flex;
  align-items: center;
  min-height: 20px;
  flex: none;
}
.p1-page .p1-access-plan-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.p1-page .p1-access-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 22px;
}
.p1-page .p1-access-plan-label {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.p1-page .p1-access-plan-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 650;
  white-space: nowrap;
  flex: none;
}
.p1-page .p1-access-plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-height: 36px;
  font-family: var(--fm);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.p1-page .p1-access-plan-price .cur {
  color: var(--ink-3);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.p1-page .p1-access-plan-period {
  min-height: calc(var(--text-xs) * 1.4 * 2);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-4);
}
.p1-page .p1-access-plan-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-soft);
}
.p1-page .p1-access-plan-perks li {
  position: relative;
  padding-left: 14px;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.p1-page .p1-access-plan-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.p1-page .p1-access-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-inset);
  color: var(--ink);
  text-align: left;
  white-space: normal;
}
.p1-page .p1-access-buy:hover:not(:disabled) {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.p1-page .p1-access-buy-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.p1-page .p1-access-buy-primary:hover:not(:disabled) {
  background: var(--accent-hot);
}
.p1-page .p1-access-buy-main {
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.2;
}
.p1-page .p1-access-buy-sub {
  font-size: var(--text-xs);
  opacity: 0.75;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.p1-page .p1-access-buy.is-short { opacity: 0.55; }
.p1-page .p1-access-buy.is-busy,
.p1-page .p1-access-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.p1-page .p1-access-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.p1-page .p1-access-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border-accent);
  background: var(--accent-softer);
  color: var(--ink);
}
.p1-page .p1-access-cta:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.p1-page .p1-access-cta-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
}
.p1-page .p1-access-cta-ico .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
}
.p1-page .p1-access-cta-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.p1-page .p1-access-cta-txt strong { color: var(--ink); }
.p1-page .p1-access-cta-txt small {
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow-wrap: break-word;
}
.p1-page .p1-access-cta-arrow {
  flex: none;
  color: var(--accent-text);
}
.p1-page .p1-access-foot {
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: break-word;
}
.p1-page .p1-access-cta-row:not([hidden]) ~ .p1-access-foot-ok {
  display: none;
}

.p1-page.p1-locked .p1-hero-aside { display: flex; }
.p1-page.p1-locked #p1Console { display: grid; }
.p1-page.p1-locked .p1-access-gate:not([hidden]) { display: block; }
#p1Console[hidden] { display: none; }
.p1-preview-banner {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.p1-access-coupon {
  margin-top: 14px;
  max-width: 280px;
}
.p1-access-coupon .field-label { display: block; margin-bottom: 6px; }
.p1-preview-banner[hidden],
.p1-preview-ops[hidden],
#p1UnlockHero[hidden],
#p1UnlockRun[hidden],
#startCampaignBtn[hidden],
#startCampaignBtnInline[hidden] { display: none; }
.p1-preview-ops { margin-top: 8px; }
.p1-preview-tag {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.p1-preview-copy {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
  max-width: 36ch;
}

/* -- two-column console -------------------------------------------------- */
.p1-page .layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: var(--gap-lg);
  align-items: start;
  width: 100%;
}
.p1-page .setup,
.p1-page .monitor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.p1-page .setup .panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.p1-page .setup .panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  row-gap: 6px;
  min-height: 52px;
}
.p1-page .setup .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.p1-page .setup .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  color: var(--accent);
  opacity: 0.9;
}
.p1-page .setup .panel-head .meta,
.p1-page .setup .rate-chip {
  flex: none;
  margin-left: 0;
}
.p1-page .setup .panel-head .meta {
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.p1-page .setup .rate-chip,
.p1-page .setup .rate-chip.sm {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-accent);
  background: var(--accent-s);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 650;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.p1-page .setup .panel > :not(.panel-head) {
  margin-left: var(--sp-5);
  margin-right: var(--sp-5);
}
.p1-page .setup .panel > .panel-head + * { margin-top: var(--sp-4); }
.p1-page .setup .panel > :last-child { margin-bottom: var(--sp-5); }

.p1-page .panel-sub,
.p1-page .field-hint,
.p1-page .amd-hint {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}
.p1-page .panel-sub { margin-bottom: 2px; }

.p1-page .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.p1-page .field-label {
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--ink-3);
}
.p1-page .input,
.p1-page .select,
.p1-page .textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.p1-page .input,
.p1-page .select {
  height: 38px;
}
.p1-page #leadsTextarea { min-height: 140px; }

.p1-page .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.p1-page .btn-group .btn { max-width: 100%; }

.p1-page .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.p1-page .row-end { justify-content: flex-end; }

.p1-page .check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  min-width: 0;
}
.p1-page .check-row input {
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
}
.p1-page .lead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.p1-page .lead-count {
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.p1-page .lead-count strong {
  font-family: var(--fm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.p1-page .audio-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.p1-page .audio-toolbar .field-hint {
  flex: 1 1 180px;
  min-width: 0;
}

.p1-page .upload-progress {
  display: none;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.p1-page .upload-progress.visible { display: block; }
.p1-page .upload-progress .bar {
  height: 100%;
  width: 0;
  max-width: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.p1-page .audio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.p1-page .audio-list .sd-empty,
.p1-page .p1d-live-list .sd-empty,
.p1-page .p1d-log .sd-empty,
.p1-page .p1d-fails-list .sd-empty {
  padding: var(--sp-5) var(--sp-3);
}
.p1-page .audio-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 160px) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.p1-page .audio-item:has(input:checked) {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.p1-page .audio-item .name {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.p1-page .audio-item .name-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font-size: var(--text-sm);
}
.p1-page .audio-item audio {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 32px;
}
.p1-page .audio-item .actions {
  display: flex;
  gap: 2px;
  flex: none;
}

/* -- campaign list ------------------------------------------------------- */
.p1-page .campaign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.p1-page .campaign-main { min-width: 0; }
.p1-page .campaign-title {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.p1-page .campaign-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.p1-page .campaign-row .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
  justify-content: flex-end;
}
.p1-page .campaign-row .actions .btn {
  height: 32px;
}

.p1-page .caller-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.p1-page .caller-list .caller-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  min-width: 0;
}
.p1-page .caller-list .caller-row .num {
  min-width: 0;
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.p1-page .cid-live {
  font-size: var(--text-sm);
  font-family: var(--fm);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.p1-page .cid-live.ok { color: var(--ok); font-weight: 650; }
.p1-page .cid-live.bad { color: var(--bad); }
.p1-page .input.cid-ok { border-color: var(--ok-border); }
.p1-page .input.cid-bad { border-color: var(--bad-border); }

.p1-page .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--ink-4);
  flex: none;
}
.p1-page .icon-btn .sd-ico {
  width: 14px;
  height: 14px;
  margin: 0;
}
.p1-page .icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.p1-page .icon-btn.active { color: var(--warn); border-color: var(--warn-border); }
.p1-page .icon-btn.danger:hover {
  color: var(--bad);
  background: var(--bad-mute);
  border-color: var(--bad-border);
}

.p1-page .toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.p1-page .toggle-copy { min-width: 0; flex: 1 1 auto; }
.p1-page .toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex: none;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  border: 1px solid var(--border);
}
.p1-page .toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: transform var(--fast), background var(--fast);
}
.p1-page .toggle.active,
.p1-page .toggle.on {
  background: var(--accent);
  border-color: var(--accent);
}
.p1-page .toggle.active .knob,
.p1-page .toggle.on .knob {
  transform: translateX(16px);
  background: #fff;
}

/* -- sliders ------------------------------------------------------------- */
.p1-page .slider-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3ch;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 38px;
}
.p1-page .slider-field input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  border: 0;
  accent-color: var(--accent);
}
.p1-page .slider-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.p1-page .slider-field input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.p1-page .slider-field .val {
  width: 3ch;
  min-width: 3ch;
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  line-height: 1;
}

.p1-page .billing-note {
  font-size: var(--text-sm);
  font-family: var(--fm);
  line-height: var(--lh-snug);
  color: var(--accent-text);
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--border-accent);
  background: var(--accent-softer);
}

/* -- transfer cards ------------------------------------------------------ */
.p1-page .xfer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.p1-page .xfer-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: start;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 12px;
  text-align: left;
  white-space: normal;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink-2);
}
.p1-page .xfer-card:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}
.p1-page .xfer-card.active {
  border-color: var(--border-accent);
  background: var(--accent-softer);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent-m);
}
.p1-page .xfer-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.p1-page .xfer-ico {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: var(--r);
  background: var(--accent-s);
  color: var(--accent);
  flex: none;
}
.p1-page .xfer-card.active .xfer-ico {
  background: var(--accent);
  color: var(--on-accent);
}
.p1-page .xfer-ico .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
}
.p1-page .xfer-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  align-self: stretch;
}
.p1-page .xfer-card .title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.p1-page .xfer-card .desc {
  display: block;
  flex: 1 1 auto;
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.p1-page .xfer-card[data-xfer="callback"] {
  grid-column: 1 / -1;
}
.p1-page .xfer-panel { display: none; min-width: 0; }
.p1-page .xfer-panel.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p1-page .xfer-num-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.p1-page .xfer-num-row .input { width: 100%; min-width: 0; }
.p1-page .xfer-num-row .btn { flex: none; height: 38px; }
.p1-page .xfer-num-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.p1-page .xfer-num-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--text-sm);
}
.p1-page .xfer-num-chip .num {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.p1-page .xfer-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--border-soft);
  background: var(--surface-inset);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}
.p1-page .xfer-privacy .sd-ico {
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  flex: none;
  color: var(--accent);
}

/* -- DTMF keypad --------------------------------------------------------- */
.p1-page .dtmf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}
.p1-page .dtmf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-height: 40px;
  padding: 0;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-inset);
  color: var(--ink);
  font-family: var(--fm);
  font-size: var(--text-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.p1-page .dtmf-btn:hover {
  border-color: var(--border-strong);
}
.p1-page .dtmf-btn.selected,
.p1-page .dtmf-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-s);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.p1-page .dtmf-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -- monitor ------------------------------------------------------------- */
.p1-page .p1-ops { min-width: 0; width: 100%; }
.p1-page .p1d-hero {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.p1-page .p1d-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.p1-page .p1d-hero-top > div {
  min-width: 0;
  flex: 1 1 auto;
}
.p1-page .p1d-hero-title {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.p1-page .p1d-hero-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.p1-page .p1d-hero-counts .big {
  font-family: var(--fm);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.p1-page .p1d-hero-counts .sep,
.p1-page .p1d-hero-counts #p1STotal {
  font-family: var(--fm);
  font-size: var(--text-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.p1-page .p1d-hero-counts .pct {
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.p1-page .p1d-cid-row {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.p1-page .p1d-cid-row strong {
  color: var(--ink);
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
}
.p1-page .p1d-bar-wrap { margin-top: 10px; }
.p1-page .progress-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.p1-page .progress-fill {
  height: 100%;
  width: 0;
  max-width: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.p1-page .p1d-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--ink-3);
  line-height: 1;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.p1-page .p1d-status-ico {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p1-page .p1d-status-ico .sd-ico {
  width: 12px;
  height: 12px;
  margin: 0;
}
.p1-page .p1d-status.running {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-mute);
}
.p1-page .p1d-status.failed {
  color: var(--bad);
  border-color: var(--bad-border);
  background: var(--bad-mute);
}
.p1-page .p1d-status.stopped,
.p1-page .p1d-status.completed { color: var(--ink-2); }

.p1-page .p1d-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.p1-page .p1d-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  height: 100%;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.p1-page .p1d-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3);
}
.p1-page .p1d-tile-icon .sd-ico {
  width: 14px;
  height: 14px;
  margin: 0;
}
.p1-page .p1d-tile-val {
  font-family: var(--fm);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.p1-page .p1d-tile-lbl {
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.p1-page .p1d-tile.connected { border-left: 2px solid var(--ok); }
.p1-page .p1d-tile.connected .p1d-tile-icon { color: var(--ok); background: var(--ok-mute); }
.p1-page .p1d-tile.connected .p1d-tile-val { color: var(--ok); }
.p1-page .p1d-tile.pressed { border-left: 2px solid var(--accent); }
.p1-page .p1d-tile.pressed .p1d-tile-icon { color: var(--accent-text); background: var(--accent-s); }
.p1-page .p1d-tile.pressed .p1d-tile-val { color: var(--accent-text); }
.p1-page .p1d-tile.failed { border-left: 2px solid var(--bad); }
.p1-page .p1d-tile.failed .p1d-tile-icon { color: var(--bad); background: var(--bad-mute); }
.p1-page .p1d-tile.failed .p1d-tile-val { color: var(--bad); }
.p1-page .p1d-tile.other { border-left: 2px solid var(--warn); }
.p1-page .p1d-tile.other .p1d-tile-icon { color: var(--warn); background: var(--warn-mute); }
.p1-page .p1d-tile.other .p1d-tile-val { color: var(--warn); }

.p1-page .p1d-panel { min-width: 0; overflow: visible; }
.p1-page .p1d-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.p1-page .p1d-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  min-width: 0;
}
.p1-page .p1d-panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.p1-page .p1d-panel-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.p1-page .p1d-panel-head .btn { margin-left: 0; }
.p1-page .p1d-live-list,
.p1-page .p1d-log,
.p1-page .p1d-fails-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  min-width: 0;
  max-height: 240px;
  overflow-y: auto;
}
.p1-page .p1d-live-row,
.p1-page .p1d-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.p1-page .p1d-live-row .num,
.p1-page .p1d-log-row .num {
  min-width: 0;
  font-family: var(--fm);
  font-size: var(--text-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.p1-page .p1d-live-row .meta,
.p1-page .p1d-log-row .meta {
  min-width: 0;
  max-width: 12ch;
  font-family: var(--fm);
  font-size: var(--text-xs);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}
.p1-page .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 650;
  flex: none;
  line-height: 1;
}
.p1-page .pill.ok,
.p1-page .pill.running,
.p1-page .pill.live,
.p1-page .pill.connected,
.p1-page .pill.pressed {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-mute);
}
.p1-page .pill.warn,
.p1-page .pill.waiting,
.p1-page .pill.ringing,
.p1-page .pill.calling {
  color: var(--warn);
  border-color: var(--warn-border);
  background: var(--warn-mute);
}
.p1-page .pill.failed,
.p1-page .pill.busy,
.p1-page .pill.danger {
  color: var(--bad);
  border-color: var(--bad-border);
  background: var(--bad-mute);
}

.p1-page .p1d-fail-row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.p1-page .p1d-fail-row .label {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.p1-page .p1d-fail-row .bar-bg {
  min-width: 0;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.p1-page .p1d-fail-row .fill {
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.p1-page .p1d-fail-row .pct {
  font-family: var(--fm);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -- 768 ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .p1-page .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .p1-page .p1-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .p1-page .p1-hero-aside {
    align-items: stretch;
    margin-left: 0;
    width: 100%;
  }
  .p1-page .p1-hero-status,
  .p1-page .p1-hero-cta {
    justify-content: flex-start;
    width: 100%;
  }
  .p1-page .p1-hero-cta .btn,
  .p1-page .p1-hero-cta #startCampaignBtn,
  .p1-page .p1-hero-cta #stopCampaignBtn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .p1-page .p1-access-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .p1-page .p1-access-plan.featured { order: -1; }
  .p1-page .p1-access-notify { align-items: stretch; }
  .p1-page .p1-access-bal {
    align-items: flex-start;
    width: 100%;
  }
  .p1-page .xfer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .p1-page .xfer-card[data-xfer="callback"] {
    grid-column: auto;
  }
}

/* -- 320 / narrow -------------------------------------------------------- */
@media (max-width: 480px) {
  .p1-page .p1-hero {
    padding: var(--sp-5) var(--sp-4);
  }
  .p1-page .p1-hero h1.page-title,
  .p1-page .p1-hero h1 {
    font-size: 22px;
  }
  .p1-page .setup .panel > :not(.panel-head) {
    margin-left: var(--sp-4);
    margin-right: var(--sp-4);
  }
  .p1-page .audio-item {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }
  .p1-page .audio-item audio { grid-column: 1 / -1; }
  .p1-page .campaign-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .p1-page .campaign-row .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }
  .p1-page .campaign-row .actions .btn {
    width: 100%;
    min-width: 0;
  }
  .p1-page .xfer-num-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .p1-page .xfer-num-row .btn {
    width: 100%;
  }
  .p1-page .toggle-row {
    flex-wrap: wrap;
  }
  .p1-page .p1d-live-row,
  .p1-page .p1d-log-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .p1-page .p1d-live-row .meta,
  .p1-page .p1d-log-row .meta {
    grid-column: 1 / -1;
    max-width: 100%;
    text-align: left;
  }
  .p1-page .p1d-fail-row {
    grid-template-columns: minmax(0, 1fr) 2.4rem;
  }
  .p1-page .p1d-fail-row .bar-bg {
    grid-column: 1 / -1;
  }
  .p1-page .p1d-hero-counts .big { font-size: 24px; }
  .p1-page .dtmf-grid { max-width: 100%; }
  .p1-page .btn {
    white-space: nowrap;
  }
  .p1-page .btn .sd-ico-txt {
    overflow-wrap: normal;
  }
}

/* ============================================================================
   P1 Run / Schedule — append-only (do not restyle the rest of P1)
   Scoped to #p1RunSchedule. 8px grid. Iris #6F4EFF. No overflow:hidden.
   ========================================================================== */

#p1RunSchedule {
  overflow: visible;
  position: relative;
  top: auto;
  z-index: 1;
  margin: 0;
  border-color: var(--border-accent);
  box-shadow: none;
  background: var(--surface);
}

#p1RunSchedule > .runmode-seg + *,
#p1RunSchedule > #scheduleFields + .p1-launch-row {
  margin-top: 8px;
}

/* -- segmented track ------------------------------------------------------- */
#p1RunSchedule .runmode-row,
#p1RunSchedule .runmode-seg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  height: 38px;
  margin: 0;
  padding: 3px;
  gap: 0;
  flex-wrap: nowrap;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

#p1RunSchedule .runmode-opt {
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-3);
}

#p1RunSchedule .runmode-opt input,
#p1RunSchedule .runmode-opt input[type="radio"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
}

#p1RunSchedule .runmode-opt input:focus {
  outline: none;
}

#p1RunSchedule .runmode-opt > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 8px;
  border-radius: 5px;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1;
  color: var(--ink-3);
  background: transparent;
  user-select: none;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast), box-shadow var(--fast);
}

#p1RunSchedule .runmode-txt {
  display: inline;
  min-width: 0;
}

#p1RunSchedule .runmode-opt > span .sd-ico,
#p1RunSchedule .runmode-opt .sd-ico {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  display: block;
  color: currentColor;
}

#p1RunSchedule .runmode-opt:hover > span {
  color: var(--ink);
}

#p1RunSchedule .runmode-opt input:checked + span {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-1);
}

#p1RunSchedule .runmode-opt input:checked + span .sd-ico {
  color: var(--on-accent);
}

#p1RunSchedule .runmode-opt:hover input:checked + span,
#p1RunSchedule .runmode-opt:has(input:checked):hover > span {
  background: var(--accent-hot, #7d5fff);
  color: var(--on-accent);
}

#p1RunSchedule .runmode-opt input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

#p1RunSchedule .runmode-opt input:checked:focus-visible + span {
  box-shadow: var(--focus-ring), var(--shadow-1);
}

/* -- schedule datetime ----------------------------------------------------- */
#p1RunSchedule #scheduleFields {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  overflow: visible;
}

#p1RunSchedule #scheduleAt {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 38px;
}

#p1RunSchedule #scheduleAt::-webkit-datetime-edit,
#p1RunSchedule #scheduleAt::-webkit-datetime-edit-fields-wrapper {
  min-width: 0;
}

#p1RunSchedule #scheduleAt::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

#p1RunSchedule #scheduleAt::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* -- launch -------------------------------------------------------------- */
#p1RunSchedule .p1-launch-row,
#p1RunSchedule .btn-group.p1-launch-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#p1RunSchedule .p1-launch-row .btn,
#p1RunSchedule .p1-launch-row .btn-launch,
#p1RunSchedule #startCampaignBtnInline,
#p1RunSchedule #stopCampaignBtnInline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
}

#p1RunSchedule .btn-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  line-height: 1;
}

#p1RunSchedule #startCampaignBtnInline .sd-ico,
#p1RunSchedule #stopCampaignBtnInline .sd-ico,
#p1RunSchedule .btn-face .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  display: block;
  color: currentColor;
  vertical-align: 0;
}

#p1RunSchedule #startCampaignBtnInline .sd-ico-txt,
#p1RunSchedule #stopCampaignBtnInline .sd-ico-txt,
#p1RunSchedule .btn-face .sd-ico-txt {
  display: block;
  line-height: 1;
  white-space: normal;
}

#p1RunSchedule .panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  min-width: 0;
}

#p1RunSchedule .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

#p1RunSchedule .field-hint {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

#p1RunSchedule .panel-head .meta {
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: right;
}

@media (max-width: 360px) {
  #p1RunSchedule .runmode-opt > span {
    gap: 4px;
    padding: 0 4px;
  }
  #p1RunSchedule .runmode-txt {
    overflow-wrap: anywhere;
    white-space: nowrap;
  }
}

/* ============================================================================
   23. PAGE — SETTINGS
   ========================================================================== */
/* ============================================================================
   23. PAGE — SETTINGS
   Tight console. Jump nav on a real grid. 2-col set-row / 1-col phone.
   Labels + 38px inputs share a baseline (subgrid). Save sits on the input row.
   Telegram is Press-1 callback only (#tgBot / #tgChat).
   ========================================================================== */
.content.set-page,
.content.settings-stack {
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
  gap: var(--gap);
}
.set-page,
.set-page .set-hero,
.set-page .set-hero-main,
.set-page .set-jump,
.set-page .set-panel,
.set-page .set-panel-h,
.set-page .set-panel-b,
.set-page .set-row,
.set-page .field,
.set-page .profile-card,
.set-page .profile-meta,
.set-page .set-actions {
  min-width: 0;
}
.set-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
}

/* -- hero + jump ----------------------------------------------------------- */
.set-page .set-hero.sd-hero,
.set-page .set-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-6);
  overflow: visible;
  min-width: 0;
}
.set-page .set-hero-bg,
.set-page .sd-hero-bg {
  border-radius: inherit;
  pointer-events: none;
}
.set-page .set-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.set-page .set-brand {
  margin: 0;
}
.set-page .set-hero h1 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 22px;
  line-height: var(--lh-tight);
}
.set-page .set-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
  opacity: 1;
}
.set-page .set-sub,
.set-page .set-hero .sd-sub {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

.set-page .set-jump.set-hero-aside,
.set-page .set-jump.sd-aside,
.set-page .set-jump {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  align-self: end;
  gap: var(--sp-2);
  flex: 0 1 auto;
  max-width: 100%;
}
.set-page .set-jump-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--ctrl-md);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  max-width: 100%;
}
.set-page .set-jump-link .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--ink-3);
}
.set-page .set-jump-link:hover {
  border-color: var(--border-accent);
  color: var(--accent-text);
  background: var(--accent-softer);
}
.set-page .set-jump-link:hover .sd-ico { color: var(--accent); }
.set-page .set-jump-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -- panels ---------------------------------------------------------------- */
.set-page .set-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.set-page .set-panel-danger {
  border-color: var(--bad-border);
}
.set-page .set-panel-h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-height: var(--ctrl-lg);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.set-page .set-panel-h h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
  overflow-wrap: break-word;
}
.set-page .set-panel-h h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
  opacity: 1;
}
.set-page .set-panel-danger .set-panel-h h2 .sd-ico { color: var(--bad); }
.set-page .set-panel-b {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
}
.set-page .set-desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

/* -- profile --------------------------------------------------------------- */
.set-page .profile-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0;
  background: none;
  border: 0;
}
.set-page .profile-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-s);
  border: 1px solid var(--border-accent);
  color: var(--accent-text);
  font-size: var(--text-md);
  font-weight: 650;
  line-height: 1;
}
.set-page .profile-avatar img {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.set-page .profile-avatar img[hidden] { display: none; }
.set-page .profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.set-page .profile-name {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.set-page .profile-co {
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.set-page .set-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: nowrap;
}
.set-page .set-chip.accent {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-s);
}
.set-page .set-chip.soft {
  color: var(--ink-4);
  background: var(--surface-inset);
}

.set-page .tg-status,
.set-page .pref-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 100%;
  white-space: nowrap;
}
.set-page .tg-status.on,
.set-page .pref-status.on {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-mute);
}
.set-page .tg-status .dot,
.set-page .pref-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* -- rows / fields: 2-col, shared label + input baseline ------------------- */
.set-page .set-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto var(--ctrl-md) auto;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
}
.set-page .set-row > .field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 2;
  gap: 0;
  margin: 0;
  min-width: 0;
}
.set-page .set-row > .field-full {
  grid-column: 1 / -1;
}
.set-page .set-row > .field > .field-label {
  grid-row: 1;
  align-self: end;
  min-height: 16px;
  line-height: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.set-page .set-row > .field > .input,
.set-page .set-row > .field > .input-ico,
.set-page .set-row > .field > .pw-wrap {
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: var(--ctrl-md);
}
.set-page .set-row > .set-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-content: flex-end;
}
.set-page .set-row-save {
  grid-template-columns: minmax(0, 1fr) auto;
}
.set-page .set-row-save > .set-actions {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
  height: var(--ctrl-md);
}

.set-page .field {
  margin: 0;
  min-width: 0;
}
.set-page .field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.set-page .input,
.set-page .select {
  width: 100%;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  min-width: 0;
  padding: 0 var(--sp-3);
  border-radius: var(--r);
  font-size: var(--text-base);
}
.set-page .input-mono {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
}
.set-page .field-hint {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

.set-page .input-ico {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--ctrl-md);
}
.set-page .input-ico .ico,
.set-page .input-ico .sd-ico {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  margin: 0;
  color: var(--ink-4);
  pointer-events: none;
  z-index: 1;
}
.set-page .input-ico .input {
  height: var(--ctrl-md);
  padding-left: calc(var(--sp-3) + 24px);
}
.set-page .input-ico:focus-within .sd-ico { color: var(--accent); }

.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--ctrl-md);
}
.pw-wrap .input {
  height: var(--ctrl-md);
  padding-right: var(--sp-8);
}
.pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
}
.pw-toggle .sd-ico { width: 16px; height: 16px; margin: 0; }
.pw-toggle:hover { color: var(--ink-2); background: var(--surface-2); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -- actions / messages ---------------------------------------------------- */
.set-page .set-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.set-page .set-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--ff);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex: none;
  max-width: 100%;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.set-page .set-btn .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
}
.set-page .set-btn:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface-3);
}
.set-page .set-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.set-page .set-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}
.set-page .set-btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 650;
}
.set-page .set-btn.primary:hover {
  background: var(--accent-hot);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--accent-h);
}
.set-page .set-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-3);
}
.set-page .set-btn.ghost:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface-2);
}
.set-page .set-btn.danger {
  background: var(--bad-mute);
  border-color: var(--bad-border);
  color: var(--bad);
}
.set-page .set-btn.danger:hover {
  background: var(--bad-soft);
  color: #fca5a5;
}

.msg-box {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.msg-box.ok {
  color: var(--ok);
  background: var(--ok-mute);
  border-color: var(--ok-border);
}
.msg-box.err {
  color: var(--bad);
  background: var(--bad-mute);
  border-color: var(--bad-border);
}

.set-page .privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-inset);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  overflow-wrap: break-word;
}
.set-page .privacy-note .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
  margin-top: 1px;
  flex: none;
  color: var(--accent);
}

@media (max-width: 900px) {
  .set-page .set-hero.sd-hero,
  .set-page .set-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sp-4);
  }
  .set-page .set-jump.set-hero-aside,
  .set-page .set-jump {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .set-page .set-hero.sd-hero,
  .set-page .set-hero {
    padding: var(--sp-5) var(--sp-4);
  }
  .set-page .set-row,
  .set-page .set-row-save {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .set-page .set-row > .field,
  .set-page .set-row > .field-full {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    grid-row: auto;
    grid-column: 1;
  }
  .set-page .set-row > .field > .field-label,
  .set-page .set-row > .field > .input,
  .set-page .set-row > .field > .input-ico,
  .set-page .set-row > .field > .pw-wrap {
    grid-row: auto;
  }
  .set-page .set-row > .set-actions,
  .set-page .set-row-save > .set-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    height: auto;
  }
  .set-page .set-panel-h,
  .set-page .set-panel-b {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .set-page .set-actions .set-btn.primary { flex: 1 1 auto; }
}

/* ============================================================================
   PAGE — ALERTS
   ========================================================================== */
/* ============================================================================
   PAGE — ALERTS
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   ========================================================================== */
.content.alerts-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
}
.alerts-page,
.alerts-page .alerts-hero,
.alerts-page .alerts-hero-main,
.alerts-page .alerts-hero-aside,
.alerts-page .alerts-page-list,
.alerts-page .alert-card,
.alerts-page .alert-card-head,
.alerts-page .alert-card-title,
.alerts-page .alert-card-msg,
.alerts-page .alerts-empty,
.alerts-page .sd-empty {
  min-width: 0;
}

.alerts-hero {
  align-items: flex-end;
}
.alerts-page .alerts-hero h1 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.alerts-page .alerts-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}
.alerts-page .alerts-hero .sub,
.alerts-page .alerts-hero .sd-sub {
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}

.alerts-hero-aside {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 1 auto;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.alerts-aside-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.alerts-aside-v {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}
.alerts-aside-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow-wrap: break-word;
  text-align: right;
}

.alerts-page-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.alerts-page .alert-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-lg);
  transition: background var(--fast), border-color var(--fast);
}
.alerts-page .alert-card:hover {
  background: var(--surface-2);
}

.alerts-page .alert-card-info { border-left-color: var(--accent); }
.alerts-page .alert-card-success { border-left-color: var(--ok); }
.alerts-page .alert-card-warning { border-left-color: var(--warn); }
.alerts-page .alert-card-danger { border-left-color: var(--bad); }
.alerts-page .alert-card-maintenance { border-left-color: var(--ink-4); }

.alerts-page .alert-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  flex-wrap: wrap;
}
.alerts-page .alert-card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--ink-3);
}
.alerts-page .alert-card-ico .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
}

.alerts-page .alert-card-info .alert-card-ico {
  color: var(--accent);
  background: var(--accent-softer);
  border-color: var(--border-accent);
}
.alerts-page .alert-card-success .alert-card-ico {
  color: var(--ok);
  background: var(--ok-mute);
  border-color: var(--ok-border);
}
.alerts-page .alert-card-warning .alert-card-ico {
  color: var(--warn);
  background: var(--warn-mute);
  border-color: var(--warn-border);
}
.alerts-page .alert-card-danger .alert-card-ico {
  color: var(--bad);
  background: var(--bad-mute);
  border-color: var(--bad-border);
}
.alerts-page .alert-card-maintenance .alert-card-ico {
  color: var(--ink-3);
  background: var(--surface-2);
  border-color: var(--border);
}

.alerts-page .alert-card-sev {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.alerts-page .alert-card-info .alert-card-sev { color: var(--accent-text); }
.alerts-page .alert-card-success .alert-card-sev { color: var(--ok); }
.alerts-page .alert-card-warning .alert-card-sev { color: var(--warn); }
.alerts-page .alert-card-danger .alert-card-sev { color: var(--bad); }
.alerts-page .alert-card-maintenance .alert-card-sev { color: var(--ink-4); }

.alerts-page .alert-card-date {
  margin-left: auto;
  font-family: var(--fm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.alerts-page .alert-card-title {
  margin: 0;
  width: 100%;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}
.alerts-page .alert-card-msg {
  margin: 0;
  width: 100%;
  font-size: var(--text-base);
  color: var(--ink-3);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}

.alerts-page .alert-card-cta {
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  min-height: var(--ctrl-sm);
  white-space: normal;
  text-align: left;
  overflow-wrap: break-word;
}

.alerts-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.alerts-page .alerts-empty .sd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0;
  text-align: center;
  max-width: 42ch;
}
.alerts-page .alerts-empty .sd-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-lg);
  background: var(--ok-mute);
  border: 1px solid var(--ok-border);
  color: var(--ok);
}
.alerts-page .alerts-empty .sd-empty-ico .sd-ico {
  width: 24px;
  height: 24px;
  margin-right: 0;
}
.alerts-page .alerts-empty .sd-empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.alerts-page .alerts-empty .sd-empty-sub {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .alerts-page .alerts-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .alerts-hero-aside {
    align-items: flex-start;
    width: 100%;
  }
  .alerts-aside-sub { text-align: left; }
  .alerts-page .alert-card {
    padding: var(--sp-4);
  }
  .alerts-page .alert-card-date {
    margin-left: 0;
    flex: 1 1 100%;
    padding-left: calc(28px + var(--sp-3));
  }
}

/* ============================================================================
   PAGE — PROXY
   ========================================================================== */
/* ============================================================================
   PAGE — PROXY
   Geometry only. Real class names. No overflow:hidden as a layout patch.
   Tokens: iris #6F4EFF, charcoal #0c0c10, Inter, 8px grid, controls 38px.
   ========================================================================== */
.content.proxy-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
  gap: var(--gap-lg);
}
.proxy-page,
.proxy-page .fp-hero,
.proxy-page .fp-hero-main,
.proxy-page .fp-ledger,
.proxy-page .panel,
.proxy-page .panel-head,
.proxy-page .panel-b,
.proxy-page .field,
.proxy-page .fp-order-row,
.proxy-page .fp-pkg-grid,
.proxy-page .fp-pkg,
.proxy-page .fp-gen-form,
.proxy-page .fp-gen-grid,
.proxy-page .fp-result,
.proxy-page .fp-proxy-list,
.proxy-page .table-wrap {
  min-width: 0;
}
.proxy-page .sd-hero-grid,
.proxy-page .fp-hero-grid { display: none; }

.proxy-page .panel { overflow: visible; }
.proxy-page .panel-head {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}
.proxy-page .panel-head h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.proxy-page .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  vertical-align: 0;
  color: var(--accent);
  opacity: 0.9;
  flex: none;
}
.proxy-page .panel-head .meta {
  margin-left: 0;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
}
.proxy-page .panel-head .btn .sd-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
  flex: none;
}

/* -- hero + ledger ------------------------------------------------------- */
.proxy-page .fp-hero {
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: visible;
  gap: var(--sp-6);
}
.proxy-page .fp-hero-bg {
  border-radius: inherit;
  pointer-events: none;
}
.proxy-page .fp-brand { margin: 0; }
.proxy-page .fp-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 16rem;
  min-width: 0;
}
.proxy-page .fp-hero h1.page-title,
.proxy-page .fp-hero h1 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}
.proxy-page .fp-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  vertical-align: 0;
  color: var(--accent);
  opacity: 1;
  flex: none;
}
.proxy-page .fp-hero .sub,
.proxy-page .fp-hero .sd-sub {
  max-width: 56ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
.proxy-page .fp-ledger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: 0 1 auto;
  margin-left: auto;
  padding: var(--sp-3) var(--sp-5);
  text-align: right;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  max-width: 100%;
}
.proxy-page .fp-ledger-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.proxy-page .fp-ledger-v {
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: var(--lh-tight);
}
.proxy-page .fp-ledger-v .cur { color: var(--ink-3); }
.proxy-page .fp-ledger-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

/* -- buy data: one aligned row ------------------------------------------- */
.proxy-page .fp-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(88px, 140px) auto;
  gap: var(--sp-3);
  align-items: end;
  width: 100%;
}
.proxy-page .fp-order-row .field { margin: 0; min-width: 0; }
.proxy-page .fp-order-row .field-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.proxy-page .fp-order-row .input,
.proxy-page .fp-order-row select {
  width: 100%;
  min-width: 0;
  height: var(--ctrl-md);
}
.proxy-page .fp-order-row .btn {
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  padding: 0 var(--sp-4);
  justify-self: start;
  white-space: nowrap;
}
.proxy-page .fp-order-row .btn .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
}
.proxy-page .fp-order-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  overflow-wrap: break-word;
}
.proxy-page .fp-order-note b {
  font-family: var(--fm);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.proxy-page .fp-buy .msg-box { margin-top: var(--sp-3); }

/* -- packages as wrapping cards ------------------------------------------ */
.proxy-page .fp-pkg-grid,
.proxy-page #fpPackages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
  align-items: stretch;
  width: 100%;
}
.proxy-page .fp-pkg-grid > .sd-empty,
.proxy-page #fpPackages > .sd-empty {
  grid-column: 1 / -1;
}
.proxy-page .fp-pkg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
  min-width: 0;
}
.proxy-page .fp-pkg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.proxy-page .fp-pkg-titlewrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 0;
  max-width: 100%;
}
.proxy-page .fp-pkg-name {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.proxy-page .fp-pkg .set-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  height: auto;
  min-height: 22px;
  padding: 3px 10px;
  line-height: var(--lh-snug);
}
.proxy-page .fp-pkg-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.proxy-page .fp-pkg-spec { min-width: 0; }
.proxy-page .fp-pkg-spec .k {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.proxy-page .fp-pkg-spec .v {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.proxy-page .fp-pkg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  color: var(--ink-4);
  overflow-wrap: anywhere;
}
.proxy-page .fp-pkg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
}
.proxy-page .fp-pkg-actions .btn {
  flex: 1 1 auto;
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
  padding: 0 var(--sp-3);
}
.proxy-page .fp-pkg-actions .btn .sd-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
  flex: none;
}
.proxy-page .fp-pkg-gb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-2);
  align-items: center;
}
.proxy-page .fp-pkg-gb .input {
  width: 100%;
  min-width: 0;
  height: var(--ctrl-sm);
}
.proxy-page .fp-pkg-gb .btn {
  height: var(--ctrl-sm);
  min-height: var(--ctrl-sm);
  padding: 0 var(--sp-3);
  white-space: nowrap;
}

/* -- generate form grid -------------------------------------------------- */
.proxy-page .fp-gen-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.proxy-page .fp-gen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: end;
  width: 100%;
}
.proxy-page .fp-gen-grid .field { margin: 0; min-width: 0; }
.proxy-page .fp-gen-grid .input,
.proxy-page .fp-gen-grid select {
  width: 100%;
  min-width: 0;
  height: var(--ctrl-md);
}
.proxy-page .fp-gen-adv-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.proxy-page .fp-gen-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.proxy-page .fp-gen-submit .btn {
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
}
.proxy-page .fp-gen-submit .btn .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
}

.proxy-page .fp-adv {
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
}
.proxy-page .fp-adv > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  user-select: none;
}
.proxy-page .fp-adv > summary::-webkit-details-marker { display: none; }
.proxy-page .fp-adv > summary .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}
.proxy-page .fp-adv > summary::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(45deg);
  flex: none;
}
.proxy-page .fp-adv[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.proxy-page .fp-adv .fp-gen-grid {
  padding: 0 var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-3);
}

/* -- generated proxy list: wrapping cards + table-wrap raw --------------- */
.proxy-page .fp-result {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  min-width: 0;
}
.proxy-page .fp-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
}
.proxy-page .fp-result-head .meta {
  overflow-wrap: anywhere;
}
.proxy-page .fp-result-head .btn .sd-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
  flex: none;
}
.proxy-page .fp-proxy-list,
.proxy-page #fpProxyList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-2);
  align-items: stretch;
  width: 100%;
}
.proxy-page .fp-proxy-card {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-inset);
}
.proxy-page .fp-proxy-line {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-family: var(--fm);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.proxy-page .table-wrap,
.proxy-page .fp-result-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.proxy-page .fp-result-box {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 88px;
  font-family: var(--fm);
  font-size: var(--text-xs);
  line-height: var(--lh-base);
  white-space: pre;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .proxy-page .fp-gen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .proxy-page .fp-hero { align-items: flex-start; }
  .proxy-page .fp-ledger {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    width: 100%;
  }
  .proxy-page .fp-order-row { grid-template-columns: minmax(0, 1fr); }
  .proxy-page .fp-order-qty { max-width: none; }
  .proxy-page .fp-order-row .btn { width: 100%; justify-self: stretch; }
  .proxy-page .fp-gen-adv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proxy-page .panel-head .meta { text-align: left; }
}
@media (max-width: 640px) {
  .proxy-page .fp-gen-grid,
  .proxy-page .fp-gen-adv-grid { grid-template-columns: minmax(0, 1fr); }
  .proxy-page .fp-pkg-gb { grid-template-columns: minmax(0, 1fr); }
  .proxy-page .fp-pkg-gb .btn { width: 100%; }
  .proxy-page .fp-pkg-specs { grid-template-columns: minmax(0, 1fr); }
  .proxy-page .fp-gen-submit .btn { width: 100%; }
}

/* ============================================================================
   PAGE — REFERRALS
   ========================================================================== */
/* ============================================================================
   PAGE — REFERRALS
   Geometry only. Real class names from refer.php.
   Iris #6F4EFF · charcoal #0c0c10 · Inter · 8px grid · controls 38px.
   No overflow:hidden as a layout patch. No !important as the primary fix.
   ========================================================================== */

.content.rf-page {
  max-width: var(--content-max);
  min-width: 0;
  width: 100%;
}

.rf-page,
.rf-page .rf-hero,
.rf-page .rf-hero-main,
.rf-page .rf-hero-bal,
.rf-page .panel,
.rf-page .panel-head,
.rf-page .panel-b,
.rf-page .rf-link-row,
.rf-page .rf-link-input,
.rf-page .rf-stats,
.rf-page .rf-stat,
.rf-page .rf-rates,
.rf-page .rf-rate,
.rf-page .rf-convert,
.rf-page .rf-conv-field,
.rf-page .rf-conv-row,
.rf-page .rf-tbl-wrap,
.rf-page .field {
  min-width: 0;
}

.rf-page svg.sd-ico {
  display: block;
  max-width: none;
  flex: none;
  margin: 0;
}

/* -- hero + referral balance --------------------------------------------- */
.rf-page .rf-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  overflow: visible;
}

.rf-page .rf-hero-bg {
  background: transparent;
  pointer-events: none;
}

.rf-page .rf-hero-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 280px;
  min-width: 0;
}

.rf-page .rf-brand {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rf-page .rf-hero h1,
.rf-page .rf-hero h1.page-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
}

.rf-page .rf-hero h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}

.rf-page .rf-hero .sd-sub,
.rf-page .rf-hero .page-desc {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-3);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}

.rf-page .rf-hero-bal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: 0 1 auto;
  margin-left: auto;
  padding: var(--sp-3) var(--sp-4);
  text-align: right;
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}

.rf-page .rf-hero-bal .sd-aside-k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.rf-page .rf-hero-bal .sd-aside-v {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  font-family: var(--fm);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.rf-page .rf-hero-bal .sd-aside-v .cur {
  color: var(--ink-3);
  font-size: var(--text-md);
  font-weight: 600;
}

.rf-page .rf-hero-bal .sd-aside-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

/* -- panels -------------------------------------------------------------- */
.rf-page .panel {
  overflow: visible;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rf-page .panel-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

.rf-page .panel-head h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.rf-page .panel-head h2 .sd-ico {
  width: 16px;
  height: 16px;
  margin-right: 0;
  flex: none;
  color: var(--accent);
  opacity: 0.85;
}

.rf-page .panel-head .meta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  text-align: right;
  max-width: 100%;
}

.rf-page .panel-b {
  min-width: 0;
}

.rf-page .btn {
  height: var(--ctrl-md);
  gap: var(--sp-2);
}

.rf-page .btn .sd-ico {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* -- link: input + Copy on one desktop line ------------------------------ */
.rf-page .rf-link-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}

.rf-page .rf-link-input,
.rf-page #rfLink {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: var(--ctrl-md);
  font-family: var(--fm);
  overflow-wrap: anywhere;
}

.rf-page #rfCopy {
  flex: 0 0 auto;
  height: var(--ctrl-md);
  white-space: nowrap;
}

/* -- stats: 4 → 2 → 1 ---------------------------------------------------- */
.rf-page .rf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.rf-page .rf-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.rf-page .rf-stat-v {
  display: block;
  font-family: var(--fm);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.rf-page .rf-stat-k {
  display: block;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

.rf-page .rf-stat-accent {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}

.rf-page .rf-stat-accent .rf-stat-v {
  color: var(--accent-text);
}

/* -- rates: label left / percent right ----------------------------------- */
.rf-page .rf-rates {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rf-page .rf-rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--ctrl-md);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-soft);
}

.rf-page .rf-rate:last-of-type {
  border-bottom: none;
}

.rf-page .rf-rate .k {
  min-width: 0;
  font-size: var(--text-base);
  color: var(--ink-2);
  overflow-wrap: break-word;
}

.rf-page .rf-rate .v {
  flex: none;
  font-family: var(--fm);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.rf-page .rf-rate-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-inset);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

/* -- convert: amount + submit on one control row ------------------------- */
.rf-page .rf-convert-b {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.rf-page .rf-convert {
  display: block;
  width: 100%;
  min-width: 0;
}

.rf-page .rf-conv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.rf-page .rf-conv-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}

.rf-page .rf-conv-row #rfAmount {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: var(--ctrl-md);
  font-variant-numeric: tabular-nums;
}

.rf-page .rf-conv-row #rfConvertBtn {
  flex: 0 0 auto;
  height: var(--ctrl-md);
  white-space: nowrap;
}

.rf-page .rf-conv-note {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  overflow-wrap: break-word;
}

.rf-page #rfMsg {
  max-width: 36rem;
}

/* -- tables -------------------------------------------------------------- */
.rf-page .panel-b:has(.rf-tbl-wrap) {
  padding: 0;
}

.rf-page .rf-tbl-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rf-page .panel-b:has(#rfPayoutEmpty:not(.hidden)) .rf-tbl-wrap,
.rf-page .panel-b:has(#rfRewardsEmpty:not(.hidden)) .rf-tbl-wrap {
  display: none;
}

.rf-page .db-table th,
.rf-page .db-table td {
  overflow-wrap: anywhere;
}
.rf-page .db-table th:first-child,
.rf-page .db-table td:first-child { padding-left: var(--sp-5); }
.rf-page .db-table th:last-child,
.rf-page .db-table td:last-child { padding-right: var(--sp-5); }

.rf-page .db-table .mono {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
}

.rf-page .sd-empty {
  padding: var(--sp-7) var(--sp-5);
}

.rf-page .sd-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-page .sd-empty-ico .sd-ico {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* -- breakpoints --------------------------------------------------------- */
@media (max-width: 900px) {
  .rf-page .rf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rf-page .rf-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }

  .rf-page .rf-hero-bal {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    width: 100%;
  }

  .rf-page .rf-hero-bal .sd-aside-v {
    justify-content: flex-start;
  }

  .rf-page .rf-link-row {
    flex-wrap: wrap;
  }

  .rf-page .rf-link-input,
  .rf-page #rfLink {
    flex: 1 1 100%;
    width: 100%;
  }

  .rf-page #rfCopy {
    width: 100%;
  }

  .rf-page .rf-conv-row {
    flex-wrap: wrap;
  }

  .rf-page .rf-conv-row #rfAmount,
  .rf-page .rf-conv-row #rfConvertBtn {
    flex: 1 1 100%;
    width: 100%;
  }

  .rf-page .rf-conv-row #rfConvertBtn {
    white-space: normal;
  }

  .rf-page .panel-head .meta {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .rf-page .rf-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   24. AUTH PAGES
   ========================================================================== */
/* ============================================================================
   24. AUTH PAGES
   Wordmark 180×28 above the card. Fields on one grid. Submit 38px.
   Charcoal #0c0c10 · iris #6F4EFF · Inter · 8px spacing.
   Never crop the wordmark into a square. Never the Telegram bot photo.
   ========================================================================== */

body.auth-body {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff);
}

body.auth-body,
.auth-shell {
  min-width: 0;
}

.auth-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-4);
  background: var(--bg);
}

.auth-shell .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  width: min(400px, 100%);
}
.auth-shell a.brand:hover { color: inherit; }
.auth-shell .logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.auth-shell .logo .brand-wordmark,
.auth-shell .brand-wordmark {
  display: block;
  width: auto;
  height: 28px;
  max-height: 28px;
  max-width: 180px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
}
.auth-shell .brand-fallback:not([hidden]) {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.auth-shell .tag {
  font-size: var(--text-xs);
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.auth-shell .card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: visible;
  min-width: 0;
}
.auth-shell .card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
.auth-shell .card-head h1 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.auth-shell .card-head h1 .sd-ico {
  width: 22px;
  height: 22px;
  margin-right: 0;
  color: var(--accent);
  flex: none;
}
.auth-shell .card-head p {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}

.auth-shell form,
.auth-shell .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  min-width: 0;
}

.auth-shell .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.auth-shell .field > label,
.auth-shell .captcha-head label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.auth-shell .field .wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.auth-shell .field .wrap .sd-ico,
.auth-shell .field .wrap > svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  margin-right: 0;
  color: var(--ink-4);
  pointer-events: none;
  flex: none;
}
.auth-shell .field .wrap input {
  width: 100%;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  padding: 0 12px 0 40px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  transition: border-color var(--fast), box-shadow var(--fast);
  min-width: 0;
}
.auth-shell .field .wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.auth-shell .field .wrap:focus-within > svg,
.auth-shell .field .wrap:focus-within .sd-ico { color: var(--accent); }
.auth-shell .field .hint,
.auth-shell .hint {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  overflow-wrap: break-word;
}
.auth-shell #keyLenHint {
  font-family: var(--fm);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}

.auth-shell .btn,
.auth-shell button[type="submit"],
.auth-shell a.btn {
  width: 100%;
  height: var(--ctrl-md);
  min-height: var(--ctrl-md);
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r);
  font-size: var(--text-md);
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--fast), box-shadow var(--fast);
  text-decoration: none;
  cursor: pointer;
}
.auth-shell .btn:hover,
.auth-shell button[type="submit"]:hover,
.auth-shell a.btn:hover {
  background: var(--accent-hot);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--accent-h);
}
.auth-shell .btn .sd-ico,
.auth-shell .btn svg,
.auth-shell a.btn .sd-ico {
  width: 15px;
  height: 15px;
  margin-right: 0;
  flex: none;
}
.auth-shell .btn.is-busy,
.auth-shell button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: wait;
}

.auth-shell .msg {
  min-height: 20px;
  padding: 0 var(--sp-6) var(--sp-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.auth-shell .msg.err,
.auth-shell .msg.error { color: var(--bad); }
.auth-shell .msg.ok,
.auth-shell .msg.success { color: var(--ok); }
.auth-shell .rule { height: 1px; background: var(--border-soft); }
.auth-shell .links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  min-width: 0;
}
.auth-shell .links a { color: var(--ink-3); font-weight: 500; }
.auth-shell .links a:hover { color: var(--accent-text); }

/* -- captcha: layout only; CRT look stays in spoofdial-captcha.css -------- */
.auth-shell .captcha-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.auth-shell .captcha-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.auth-shell .captcha-badge {
  flex: none;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}
.auth-shell .captcha-badge.is-ok { color: var(--ok); border-color: var(--ok-border); }
.auth-shell .captcha-box {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}
.auth-shell .captcha-frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-shell .captcha-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 112px;
  object-fit: contain;
  background: #0a0616;
}
.auth-shell .captcha-reload {
  flex: none;
  width: var(--ctrl-md);
  min-width: var(--ctrl-md);
  height: auto;
  min-height: var(--ctrl-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: pointer;
}
.auth-shell .captcha-reload:hover:not(:disabled) {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-softer);
}
.auth-shell .captcha-reload .sd-ico,
.auth-shell .captcha-reload svg {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}
.auth-shell .captcha-field .wrap input {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--fm);
}
.auth-shell .captcha-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.4;
}
.auth-shell .hp-field,
.auth-shell .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;
}

body.auth-body .toast,
.auth-shell ~ .toast,
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
}

@media (max-height: 760px) {
  .auth-shell {
    justify-content: flex-start;
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }
}

@media (max-width: 400px) {
  .auth-shell { padding: var(--sp-4) var(--sp-3); gap: var(--sp-5); }
  .auth-shell .card-head,
  .auth-shell form,
  .auth-shell .card-body,
  .auth-shell .msg,
  .auth-shell .links {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .auth-shell .logo .brand-wordmark,
  .auth-shell .brand-wordmark {
    width: auto;
    height: 24px;
    max-height: 24px;
    max-width: 156px;
  }
}

@media (max-width: 320px) {
  .auth-shell .logo .brand-wordmark,
  .auth-shell .brand-wordmark {
    width: auto;
    height: 22px;
    max-height: 22px;
    max-width: 142px;
  }
  .auth-shell .links { justify-content: flex-start; }
}

/* ============================================================================
   25. LANDING (body.lp)
   ========================================================================== */
body.lp {
  --lp-bg: var(--bg);
  --lp-surface: var(--surface);
  --lp-border: var(--border);
  --lp-text: var(--ink);
  --lp-dim: var(--ink-2);
  --lp-faint: var(--ink-3);
  --lp-accent: var(--accent);
  --lp-accent-text: var(--accent-text);
  --lp-grad: var(--grad);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.65;
}
body.lp h1, body.lp h2, body.lp h3 { color: var(--ink); line-height: 1.2; margin: 0; font-weight: 650; }
body.lp p { margin: 0; }
body.lp a { color: var(--accent-text); }
body.lp a:hover { color: var(--accent-hot); }
body.lp code { font-family: var(--fm); font-size: 0.88em; background: var(--accent-s); padding: 2px 7px; border-radius: 5px; color: var(--accent-text); }
body.lp ::selection { background: var(--accent-h); color: #fff; }
body.lp :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lp-wrap-narrow { max-width: 780px; }

.lp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.lp-header-in {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 68px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
}
.lp-brand img,
.lp-wordmark {
  display: block;
  height: 22px;
  width: auto;
  max-height: 22px;
  max-width: 142px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  background: transparent;
}
.lp-brand:hover { color: #fff; }
.lp-nav { display: flex; gap: 22px; margin-left: 12px; }
.lp-nav a { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.lp-nav a:hover { color: var(--ink); }
.lp-header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

body.lp .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
body.lp .lp-btn:hover { background: var(--accent-hot); color: var(--on-accent); }
body.lp .lp-btn:active { transform: translateY(1px); }
body.lp .lp-btn-lg { height: 48px; padding: 0 28px; font-size: 15.5px; }
body.lp .lp-btn-full { width: 100%; }
body.lp .lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
body.lp .lp-btn-ghost:hover { border-color: var(--border-accent); color: var(--accent-text); background: var(--accent-softer); }
body.lp .lp-btn-ghost.lp-btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }

.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.lp-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 88px;
}
.lp-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.lp-hero h1 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.02em; margin-bottom: 18px; }
.lp-sub { color: var(--ink-2); font-size: 17px; max-width: 54ch; margin-bottom: 28px; }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  padding: 0;
  font-size: 14px;
  color: var(--ink-3);
}
.lp-hero-points li { display: flex; align-items: center; gap: 8px; }
.lp-hero-points li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.lp-hero-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.lp-shot-bar {
  display: flex;
  gap: 7px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.lp-shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.lp-shot-bar span:first-child { background: var(--bad); opacity: 0.7; }
.lp-shot-bar span:nth-child(2) { background: var(--warn); opacity: 0.7; }
.lp-shot-bar span:last-child { background: var(--ok); opacity: 0.7; }
.lp-shot { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.lp-shot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border-soft);
}
.lp-shot-row:last-child { border-bottom: none; padding-bottom: 0; }
.lp-shot-k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.lp-shot-v { font-family: var(--fm); font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lp-shot-v.lp-ok { color: var(--ok); }
.lp-shot-cap {
  padding: 13px 20px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--ink-4);
}

.lp-section { padding: 84px 0; }
.lp-section.lp-alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-section h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.015em; margin-bottom: 12px; }
.lp-lead { color: var(--ink-3); font-size: 16.5px; max-width: 60ch; margin-bottom: 44px; }
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: border-color var(--fast), transform var(--fast);
}
.lp-card:hover { border-color: var(--border-strong); }
.lp-card h3 { font-size: 16.5px; margin-bottom: 9px; }
.lp-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: lpstep;
}
.lp-steps li { display: flex; flex-direction: column; }
.lp-step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--fm);
  font-size: 14px;
  font-weight: 600;
}
.lp-steps h3 { font-size: 15.5px; margin-bottom: 8px; }
.lp-steps p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

.lp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.lp-price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}
.lp-price.lp-featured { border-color: var(--border-accent); background: linear-gradient(180deg, var(--accent-softer), var(--surface) 55%); }
.lp-badge {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-price h3 { font-size: 17px; margin-bottom: 14px; }
.lp-price-v {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--fm);
  font-size: 34px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.lp-cur { font-size: 18px; color: var(--ink-3); }
.lp-per { font-size: 13px; color: var(--ink-4); font-family: var(--ff); }
.lp-price-sub { font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; min-height: 40px; }
.lp-price ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.lp-price li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-2);
}
.lp-price li::before {
  content: "";
  margin-top: 6px;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--ok-mute);
  border: 1px solid var(--ok-border);
}
.lp-price .lp-btn { margin-top: auto; }
.lp-price-note { text-align: center; font-size: 13px; color: var(--ink-4); margin-top: 26px; }

.lp-faq { display: flex; flex-direction: column; gap: 12px; }
.lp-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--ink-4);
  border-bottom: 2px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform var(--fast);
}
.lp-faq details[open] summary::after { transform: rotate(225deg); }
.lp-faq summary:hover { color: var(--accent-text); }
.lp-faq details p { padding: 0 22px 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

.lp-cta {
  padding: 90px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.lp-cta-in { text-align: center; }
.lp-cta h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.lp-cta p { color: var(--ink-2); font-size: 16px; margin-bottom: 28px; }
.lp-cta .lp-hero-cta { justify-content: center; }

.lp-footer { border-top: 1px solid var(--border); background: var(--bg-2); }
.lp-footer-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-top: 44px;
  padding-bottom: 44px;
  flex-wrap: wrap;
}
.lp-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.lp-footer-brand .lp-wordmark { height: auto; max-height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.lp-footer-brand > div { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.lp-footer-brand p { font-size: 13.5px; color: var(--ink-4); max-width: 32ch; }
.lp-footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.lp-footer-nav a { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.lp-footer-nav a:hover { color: var(--ink); }
.lp-footer-legal { padding-top: 22px; padding-bottom: 26px; border-top: 1px solid var(--border-soft); }
.lp-footer-legal p { font-size: 12.5px; color: var(--ink-4); }

body.lp .lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: start;
  min-width: 0;
}
body.lp .lp-prose {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
body.lp .lp-prose h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 28px;
}
body.lp .lp-prose .sd-ico { color: var(--accent); flex: none; }
body.lp .lp-nav { flex-wrap: wrap; }

/* -- platform landing extras (body.lp) ------------------------------------ */

body.lp .lp-wrap { max-width: 1160px; }
body.lp .lp-section[id],
body.lp main [id] { scroll-margin-top: 80px; }

body.lp .lp-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
}
body.lp .lp-menu span {
  display: block;
  height: 2px;
  width: 16px;
  background: var(--ink);
  border-radius: 1px;
}
body.lp .lp-nav-overlay {
  position: fixed;
  inset: 68px 0 0 0;
  background: rgba(6, 6, 8, 0.55);
  z-index: 90;
}
body.lp.lp-nav-open { overflow: hidden; }

body.lp .lp-dd { position: relative; }
body.lp .lp-dd-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
body.lp .lp-dd-btn:hover,
body.lp .lp-dd.is-open .lp-dd-btn {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
body.lp .lp-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 120;
  min-width: 420px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body.lp .lp-dd.is-open .lp-dd-panel { display: grid; }
body.lp .lp-dd-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
body.lp .lp-dd-col a {
  display: block;
  padding: 6px 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 0;
  white-space: nowrap;
}
body.lp .lp-dd-col a:hover { color: var(--ink); }

body.lp .lp-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
body.lp .lp-hero { padding: 0; }
body.lp .lp-hero-in {
  padding-top: 32px;
  padding-bottom: 28px;
  gap: 40px;
  align-items: start;
}
body.lp .lp-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  max-width: 18ch;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
body.lp .lp-sub { max-width: 46ch; color: var(--ink-2); font-size: 16.5px; }
body.lp .lp-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
body.lp .lp-signals li {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

body.lp .lp-plat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
}
body.lp .lp-plat-bar,
body.lp .lp-prev-bar,
body.lp .lp-dash-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
body.lp .lp-plat-title,
body.lp .lp-prev-name { color: var(--ink); flex: 1; min-width: 0; }
body.lp .lp-prev-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 2px 6px;
}
body.lp .lp-prev-dots { display: inline-flex; gap: 5px; }
body.lp .lp-prev-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
body.lp .lp-plat-bal {
  padding: 20px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.lp .lp-plat-bal span,
body.lp .lp-dash-bal span { font-size: 12px; color: var(--ink-4); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
body.lp .lp-plat-bal strong,
body.lp .lp-dash-bal strong {
  font-size: 36px;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.lp .lp-plat-svcs {
  list-style: none;
  margin: 0;
  padding: 8px 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.lp .lp-plat-svcs li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
body.lp .lp-plat-svcs b { color: var(--ink); font-weight: 650; }

body.lp .lp-snap-sec { padding-top: 12px; padding-bottom: 36px; }
body.lp .lp-snap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
body.lp .lp-snap a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink-2);
  text-decoration: none;
  min-width: 0;
}
body.lp .lp-snap a:hover { border-color: var(--border-accent); color: var(--ink); }
body.lp .lp-snap .sd-ico { color: var(--accent); }
body.lp .lp-snap strong { color: var(--ink); font-size: 14px; }
body.lp .lp-snap span { font-size: 12.5px; color: var(--ink-4); }

body.lp .lp-svc-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
body.lp .lp-svc-group {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
}
body.lp .lp-svc-group ul { list-style: none; padding: 12px 0 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
body.lp .lp-svc-group a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
body.lp .lp-svc-group a:hover strong { color: var(--accent-text); }
body.lp .lp-svc-group span { font-size: 13px; color: var(--ink-4); }

body.lp .lp-caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
body.lp .lp-caps li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  color: var(--ink-2);
}
body.lp .lp-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
}
body.lp .lp-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 14px;
  color: var(--ink-2);
}

body.lp .lp-prev {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
}
body.lp .lp-prev-wide { margin-top: 20px; }
body.lp .lp-prev-body { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 0; }
body.lp .lp-kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
body.lp .lp-kv-k { color: var(--ink-4); font-weight: 600; }
body.lp .lp-kv-v { color: var(--ink); font-family: var(--fm); overflow-wrap: anywhere; }
body.lp .lp-ok { color: var(--ok); }

body.lp .lp-tbl-wrap { overflow: auto; padding: 0 0 12px; }
body.lp .lp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
body.lp .lp-tbl th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
body.lp .lp-tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.lp .lp-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 16px;
}
body.lp .lp-flow-h {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
body.lp .lp-flow-step {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
  background: var(--surface-2);
}
body.lp .lp-flow-step.on {
  border-color: var(--border-accent);
  color: var(--accent-text);
  background: var(--accent-s);
}
body.lp .lp-flow-arrow { text-align: center; color: var(--ink-4); font-size: 14px; }

body.lp .lp-mini-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
}
body.lp .lp-mini-kpis div {
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  min-width: 0;
}
body.lp .lp-mini-kpis span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp .lp-mini-kpis b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--ink);
}

body.lp .lp-meter {
  height: 8px;
  background: var(--surface-inset);
  border-radius: 99px;
  overflow: hidden;
  margin: 12px 0 4px;
}
body.lp .lp-meter-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}

body.lp .lp-inbox { margin-top: 12px; }
body.lp .lp-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
body.lp .lp-msg-from,
body.lp .lp-msg-to { font-size: 12px; color: var(--ink-4); }
body.lp .lp-msg-body { color: var(--ink); font-size: 14px; }
body.lp .lp-msg-meta { font-size: 11px; color: var(--ink-4); }

body.lp .lp-inst { padding: 12px 16px 16px; }
body.lp .lp-inst-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

body.lp .lp-dash {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  margin-top: 24px;
  min-width: 0;
}
body.lp .lp-dash-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: #0a0a0e;
  border-right: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-3);
}
body.lp .lp-dash-brand {
  font-weight: 700;
  color: var(--ink);
  padding: 4px 8px 12px;
  letter-spacing: 0.04em;
}
body.lp .lp-dash-side span { padding: 6px 8px; border-radius: 6px; }
body.lp .lp-dash-side span:nth-child(2) { background: var(--accent-s); color: var(--accent-text); }
body.lp .lp-dash-main { min-width: 0; }
body.lp .lp-dash-bal { padding: 16px; }

body.lp .lp-tg-msg {
  padding: 16px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.lp .lp-tg-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 16px;
}
body.lp .lp-tg-keys span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-2);
  background: var(--surface-2);
}
body.lp .lp-tg-keys span.wide { grid-column: 1 / -1; color: var(--accent-text); border-color: var(--border-accent); }

body.lp .lp-steps {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
body.lp .lp-steps li span {
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: 8px;
}
body.lp .lp-steps li strong { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
body.lp .lp-begin {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
body.lp .lp-begin article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
body.lp .lp-begin h3 { font-size: 16px; margin-bottom: 8px; }
body.lp .lp-begin p { font-size: 14px; color: var(--ink-2); }

body.lp .lp-arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
  color: var(--ink-4);
}
body.lp .lp-arch-node {
  min-width: 180px;
  text-align: center;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 650;
  background: var(--surface);
}
body.lp .lp-arch-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
body.lp .lp-arch-row div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
}
body.lp .lp-arch-row b { display: block; color: var(--ink); margin-bottom: 4px; }
body.lp .lp-rels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-2);
  font-size: 14px;
}

body.lp .lp-why {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
body.lp .lp-why article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  min-width: 0;
}
body.lp .lp-why h3 { font-size: 15px; margin-bottom: 8px; }
body.lp .lp-why p { font-size: 13.5px; color: var(--ink-2); }

body.lp .lp-price-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.lp .lp-faq-g {
  margin: 28px 0 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp .lp-faq details + details { border-top: 1px solid var(--border-soft); }
body.lp .lp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 4px;
  font-weight: 650;
  min-height: 44px;
  display: flex;
  align-items: center;
}
body.lp .lp-faq summary::-webkit-details-marker { display: none; }
body.lp .lp-faq details[open] summary { color: var(--accent-text); }
body.lp .lp-faq details p { padding: 0 4px 16px; color: var(--ink-2); font-size: 14.5px; }

body.lp .lp-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 36px 24px 28px;
}
body.lp .lp-footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.lp .lp-footer-col p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
body.lp .lp-footer-col a { color: var(--ink-3); font-size: 14px; font-weight: 500; }
body.lp .lp-footer-col a:hover { color: var(--ink); }
body.lp .lp-footer-brand .lp-mark-sm {
  height: 22px;
  max-width: 140px;
}

body.lp .lp-split-rev { direction: rtl; }
body.lp .lp-split-rev > * { direction: ltr; }

body.lp .lp-section { padding: 56px 0; }
body.lp .lp-alt { background: #0a0a0e; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }

@media (prefers-reduced-motion: reduce) {
  body.lp * { transition: none !important; }
}

@media (max-width: 1080px) {
  body.lp .lp-menu { display: inline-flex; }
  body.lp .lp-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 24px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  body.lp .lp-nav.is-open { display: flex; }
  body.lp .lp-nav a,
  body.lp .lp-dd-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  body.lp .lp-dd-panel {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: 0;
    padding: 0 0 8px 12px;
    grid-template-columns: 1fr;
  }
  body.lp .lp-svc-groups,
  body.lp .lp-snap,
  body.lp .lp-begin,
  body.lp .lp-why,
  body.lp .lp-steps-5,
  body.lp .lp-price-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.lp .lp-dash { grid-template-columns: 1fr; }
  body.lp .lp-dash-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  body.lp .lp-footer-grid { grid-template-columns: 1fr 1fr; }
  body.lp .lp-mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lp .lp-caps { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body.lp .lp-hero-in,
  body.lp .lp-split { grid-template-columns: minmax(0, 1fr); }
  body.lp .lp-split-rev { direction: ltr; }
  body.lp .lp-hero h1 { max-width: none; }
  body.lp .lp-svc-groups,
  body.lp .lp-snap,
  body.lp .lp-begin,
  body.lp .lp-why,
  body.lp .lp-steps-5,
  body.lp .lp-price-wide,
  body.lp .lp-arch-row,
  body.lp .lp-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.lp .lp-kv { grid-template-columns: minmax(0, 1fr); }
  body.lp .lp-header-cta .lp-btn-ghost { display: none; }
  body.lp .lp-wordmark,
  body.lp .lp-brand img {
    height: 24px;
    max-height: 24px;
    max-width: 148px;
  }
}

@media (max-width: 375px) {
  body.lp .lp-wordmark,
  body.lp .lp-brand img {
    height: 22px;
    max-height: 22px;
    max-width: 132px;
  }
  body.lp .lp-plat-bal strong { font-size: 28px; }
}

body.lp .lp-nav a[aria-current="page"] { color: var(--ink); }

body.lp .lp-four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px 72px;
}
body.lp .lp-four-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: 28px 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--fast), transform var(--fast);
}
body.lp .lp-four-card:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  transform: translateY(-2px);
}
body.lp .lp-four-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp .lp-four-sip { border-top: 2px solid var(--accent); }
body.lp .lp-four-sms { border-top: 2px solid var(--info); }
body.lp .lp-four-proxy { border-top: 2px solid var(--ok); }
body.lp .lp-four-vps { border-top: 2px solid var(--warn); }
body.lp .lp-four-card h2 {
  font-size: 28px;
  letter-spacing: -0.03em;
  margin: 0;
}
body.lp .lp-four-card p {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.55;
  max-width: 36ch;
  flex: 1 1 auto;
}
body.lp .lp-four-go {
  font-size: 13px;
  font-weight: 650;
  color: var(--accent-text);
}

body.lp .lp-price-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.lp .lp-price-four .lp-price-v { font-size: 28px; }
body.lp .lp-price-four .lp-btn,
body.lp .lp-price-four .lp-btn-ghost { margin-top: auto; }
body.lp .lp-p1-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-sm);
  max-width: 52rem;
}

body.lp .lp-chapter {
  padding: 72px 0;
}
body.lp .lp-chapter-in { max-width: 720px; }
body.lp .lp-sip-hero,
body.lp .lp-sms-hero,
body.lp .lp-proxy-hero,
body.lp .lp-vps-hero {
  padding-top: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
body.lp.lp-sip .lp-sip-hero { background: linear-gradient(180deg, var(--accent-softer), transparent 70%); }
body.lp.lp-sms .lp-sms-hero { background: linear-gradient(180deg, var(--info-mute), transparent 70%); }
body.lp.lp-proxy .lp-proxy-hero { background: linear-gradient(180deg, var(--ok-mute), transparent 70%); }
body.lp.lp-vps .lp-vps-hero { background: linear-gradient(180deg, var(--warn-mute), transparent 70%); }

body.lp .lp-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
body.lp .lp-choice article {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
body.lp .lp-choice h3 { font-size: 16px; margin-bottom: 8px; }
body.lp .lp-choice p { color: var(--ink-3); font-size: 14px; }

body.lp .lp-also {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
body.lp .lp-also a {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
body.lp .lp-also a:hover { color: var(--ink); border-color: var(--border-strong); }

body.lp .lp-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
body.lp .lp-spec-table th,
body.lp .lp-spec-table td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
body.lp .lp-spec-table th { color: var(--ink-4); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
body.lp .lp-spec-table td:first-child { color: var(--ink-3); width: 28%; }
body.lp .lp-spec-table td:last-child { color: var(--ink); font-weight: 550; }

body.lp .lp-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-4);
}
body.lp .lp-prev {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-width: 0;
}
body.lp .lp-prev-bar,
body.lp .lp-plat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-3);
}
body.lp .lp-prev-tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.lp .lp-kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
body.lp .lp-kv span { color: var(--ink-4); }
body.lp .lp-kv b { color: var(--ink); font-weight: 600; font-family: var(--fm); font-size: 12.5px; overflow-wrap: anywhere; }
body.lp .lp-msg { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
body.lp .lp-msg-from { font-size: 12px; color: var(--ink-3); }
body.lp .lp-msg-body { color: var(--ink); font-size: 14px; }
body.lp .lp-msg-meta { font-size: 11px; color: var(--ink-4); }

body.lp .lp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
body.lp .lp-footer-brand .lp-mark-sm {
  height: 22px;
  max-height: 22px;
  max-width: 140px;
}

@media (max-width: 900px) {
  body.lp .lp-four,
  body.lp .lp-price-four,
  body.lp .lp-choice { grid-template-columns: minmax(0, 1fr); }
  body.lp .lp-four-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.lp .lp-four-card { transition: none; }
}

/* ============================================================================
   26. COOKIE BANNER
   ========================================================================== */
.cookie-banner,
.sd-cookies {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-toast) - 1);
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.cookie-banner .cookie-text { flex: 1; line-height: var(--lh-snug); }
.cookie-acts { display: flex; gap: var(--sp-2); flex: none; }

/* ============================================================================
   27. MOBILE TAB BAR
   ========================================================================== */
.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: none;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0 7px;
  color: var(--ink-4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mbar a .mbar-ico { display: flex; }
.mbar a .mbar-ico .sd-ico { width: 20px; height: 20px; }
.mbar a.on { color: var(--accent-text); }
.mbar a:hover { color: var(--ink-2); }

/* ============================================================================
   28. RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
  .vps-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .db-kpis, .cdr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p1-access-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-nav { display: none; }
}

@media (max-width: 900px) {
  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--med);
    box-shadow: var(--shadow-3);
  }
  .sidebar.open,
  body.sb-open .sidebar { transform: translateX(0); }
  body.sb-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  .collapse-toggle { display: none; }
  .app.collapsed .sidebar,
  body.sb-collapsed .sidebar { width: var(--sidebar-w); }
  .app.collapsed .nav-label,
  body.sb-collapsed .nav-label { display: inline; }
  .app.collapsed .nav-tile,
  body.sb-collapsed .nav-tile { justify-content: flex-start; padding: 0 var(--sp-3); }

  .menu-toggle { display: flex; }
  .header { padding: 0 var(--sp-4); }
  .content { padding: var(--sp-4) var(--sp-4) calc(var(--sp-9) + 56px); gap: var(--gap); }
  .crumb-kicker { display: none; }
  .rate-chip .hdr-chip-text { display: none; }
  .rate-chip { padding: 0 10px; }

  .db-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sms-wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sms-controls-grid { grid-template-columns: 1fr; }
  .mbar { display: flex; }
}

@media (max-width: 640px) {
  h1 { font-size: var(--text-xl); }
  .sd-hero,
  .db-hero,
  .dep-hero,
  .vps-hero,
  .cdr-hero,
  .p1-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .p1-hero-aside {
    align-items: stretch;
    width: 100%;
  }
  .p1-hero-status,
  .p1-hero-cta {
    justify-content: flex-start;
    width: 100%;
  }
  .p1-hero-cta .btn { flex: 1 1 auto; min-width: 0; }
  .xfer-grid { grid-template-columns: minmax(0, 1fr); }
  .audio-item {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }
  .audio-item audio { grid-column: 1 / -1; }
  .dtmf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p1-access-notify { align-items: stretch; }
  .p1-access-bal { align-items: flex-start; width: 100%; }
  .p1-access-plan.featured { order: -1; }
  .campaign-row .actions { width: 100%; }
  .campaign-row .actions .btn { flex: 1 1 auto; }
  .dep-ledger { align-items: flex-start; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .sd-aside { justify-content: space-between; width: 100%; }

  .panel-head,
  .db-panel-h,
  .dep-panel-h { padding: var(--sp-3) var(--sp-4); min-height: 48px; flex-wrap: wrap; }
  .panel-b,
  .db-panel-b,
  .dep-panel-b { padding: var(--sp-4); }

  .db-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .db-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-card-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-prod-specs-full { grid-template-columns: 1fr; }
  .vps-filter-row { flex-direction: column; align-items: center; }
  .vps-grid { grid-template-columns: 1fr; }

  .sms-number-display { font-size: 22px; }
  .sms-code-display { font-size: 26px; letter-spacing: 0.16em; }
  .sms-wallet-v { font-size: var(--text-lg); }
  .sms-hist-item { flex-wrap: wrap; gap: 6px 12px; }


  .lp-hero-in { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 56px; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-section { padding: 56px 0; }
  .lp-header-in { gap: 14px; }
  .lp-nav { display: none; }
  .lp-footer-in { flex-direction: column; gap: 28px; }

  .hdr-chip-text.balance { font-size: var(--text-sm); }
}

@media (max-width: 400px) {
  .content { padding: var(--sp-3) var(--sp-3) calc(var(--sp-9) + 56px); }
  .db-kpis, .cdr-kpis { grid-template-columns: 1fr; }
  .sms-wallet-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   29. MOTION + ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--fast);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:focus-visible,
.sip-btn:focus-visible,
.nav-tile:focus-visible,
.dep-btn:focus-visible,
.hdr-chip:focus-visible,
.input:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   30. SHARED UTILITIES (small, justified set)
   ========================================================================== */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* copy affordance */
.copy-btn { color: var(--ink-4); }
.copy-btn:hover { color: var(--accent-text); }
.copy-btn.copied { color: var(--ok); }
.sd-copy { color: var(--ink-3); }
.sd-copy:hover { color: var(--accent-text); border-color: var(--border-strong); }

/* balance-gate / gate panels reused across pages */
.gate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}

/* generic page-level centering for sms/vps content */
.vps-page .content,
.sms-page .content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.vps-page .content > *,
.sms-page .content > * {
  width: 100%;
}

/* ============================================================================
   31. LEGACY-COMPAT MAPPING
   Old pages emit markup with these classes; map them onto the system so the
   rebuild needs no HTML surgery on 15+ PHP files. Each rule is a thin alias,
   not a re-style.
   ========================================================================== */
.db-page .content,
.sip-page .content,
.rt-page .content,
.cdr-page .content,
.p1-page .content,
.set-page .content,
.dep-page .content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.stat-label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.stat-value { font-family: var(--fm); font-size: var(--text-xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* error page (404) */
.err-wrap {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  text-align: center;
}
.err-wrap h1 { font-size: clamp(40px, 8vw, 72px); font-family: var(--fm); color: var(--accent); }
.err-acts { display: flex; gap: var(--sp-2); }

/* generic KPI row used by CDR */
.cdr-kpis { margin-bottom: 0; }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.kpi .k { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); }
.kpi .v { font-family: var(--fm); font-size: var(--text-xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* search row on CDR */
.cdr-search input[type="text"],
.cdr-search select { min-width: 150px; }

/* settings account page */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-lg); align-items: start; }

/* key-value list (used by several pages) */
.kv-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.kv-row:last-child { border-bottom: none; padding-bottom: 0; }
.kv-row .k { font-size: var(--text-sm); color: var(--ink-3); }
.kv-row .v { font-size: var(--text-base); font-weight: 600; color: var(--ink); font-family: var(--fm); overflow-wrap: anywhere; text-align: right; }

/* responsive for utilities */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-row { flex-direction: column; gap: 2px; align-items: flex-start; }
  .kv-row .v { text-align: left; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
}

/* captcha inline styles normalization */
.captcha-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* account avatar chip in header of settings */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}

/* Tawk widget positioning fix — never under the mobile bar */
#tawkchat-iframe-container { z-index: var(--z-modal) !important; }

.avatar-slot {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
}
.avatar-photo {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
  border: 2px solid var(--accent);
}
.avatar-slot .avatar-tile {
  position: absolute;
  inset: 0;
  width: 36px;
  height: 36px;
  margin: 0;
}
.avatar-slot .avatar-tile[hidden],
.avatar-photo[hidden] { display: none !important; }

.vps-grid .sd-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  padding: var(--sp-9) var(--sp-4);
  background: none;
  border: none;
}
.vps-grid .sd-empty-ico {
  width: auto;
  height: auto;
  background: none;
  border: none;
  margin-bottom: var(--sp-2);
}

.toast.show,
#toast.show { pointer-events: auto; }
.toast-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.toast-x:hover { color: var(--ink); background: var(--surface-2); }
.toast.warn { border-color: var(--warn-border); }
.toast.info { border-color: var(--border-accent); }

.mvr-alerts { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--gap); }
.mvr-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.mvr-alert-ico { display: flex; margin-top: 2px; color: var(--accent-text); }
.mvr-alert-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.mvr-alert-body b { font-weight: 600; }
.mvr-alert-x {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
}
.mvr-alert-success { border-color: var(--ok-border); }
.mvr-alert-warning, .mvr-alert-maintenance { border-color: var(--warn-border); }
.mvr-alert-danger { border-color: var(--bad-border); }

.fp-pkg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: var(--sp-3);
  min-width: 0;
}
.fp-pkg-head, .fp-pkg-meta, .fp-pkg-actions, .fp-pkg-gb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.fp-pkg-head { justify-content: space-between; }
.fp-pkg-gb .input { width: 96px; }
.fp-gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  align-items: end;
}
.fp-adv { margin: var(--sp-3) 0; }
.fp-adv summary { cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); font-weight: 600; }
.fp-result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.fp-result-box {
  font-family: var(--fm);
  white-space: pre;
  overflow: auto;
  min-height: 140px;
}

.rf-link-row, .rf-convert, .rf-stats { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.rf-link-input { flex: 1 1 240px; min-width: 0; }
.rf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--gap) 0; }
.rf-stat {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  min-width: 0;
}
.rf-stat-v { display: block; font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.rf-stat-k { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--ink-3); }
.rf-rates { display: flex; flex-direction: column; gap: var(--sp-2); }
.rf-rate { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-soft); }
.rf-rate .v { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .rf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cart-coupon {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cart-coupon-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cart-coupon-row .input { flex: 1 1 auto; min-width: 0; }
.cart-coupon-msg { font-size: var(--text-xs); color: var(--ink-3); margin: 0; }
.cart-coupon-msg[hidden] { display: none; }

.proxy-page .fp-packs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.proxy-page .fp-pack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
}
.proxy-page .fp-pack:hover { border-color: var(--border-strong); }
.proxy-page .fp-pack.is-on { border-color: var(--accent); background: var(--accent-softer); }
.proxy-page .fp-pack-gb { font-size: var(--text-sm); font-weight: 650; }
.proxy-page .fp-pack-unit { font-size: var(--text-xs); color: var(--ink-3); }
.proxy-page .fp-pack-total { font-family: var(--fm); font-size: var(--text-lg); font-weight: 650; font-variant-numeric: tabular-nums; }
.proxy-page .fp-order-row {
  grid-template-columns: minmax(88px, 160px) auto;
}

.support-page .support-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  max-height: 420px;
  overflow: auto;
  padding: 4px 0 16px;
}
.support-msg {
  max-width: 36rem;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface);
}
.support-msg.me { margin-left: auto; border-color: var(--border-accent); }
.support-msg p { margin: 0; white-space: pre-wrap; }
.support-msg time { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--ink-4); }
.support-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.support-form .input { width: 100%; }

.admin-body { background: var(--bg); color: var(--ink); min-height: 100vh; }
.admin-gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
}
.admin-gate-brand { display: block; }
.admin-gate-card {
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.admin-gate-card h1 { font-size: 18px; margin: 0 0 6px; }
.admin-gate-card p { color: var(--ink-3); font-size: var(--text-sm); margin: 0 0 16px; }
.admin-gate-card .btn { width: 100%; margin-top: 12px; }
.admin-gate-msg { min-height: 18px; font-size: 12px; color: var(--bad); }
.admin-app { display: flex; min-height: 100vh; }
.admin-rail {
  width: 200px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav button {
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.admin-nav button.on, .admin-nav button:hover { background: var(--surface-2); color: var(--ink); }
.admin-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--accent);
}
.admin-out { margin-top: auto; font-size: 13px; color: var(--ink-3); background: none; border: 0; cursor: pointer; text-align: left; }
.admin-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px 48px; }
.admin-view { display: none; }
.admin-view.on { display: block; }
.admin-view h1 { font-size: 22px; margin: 0 0 18px; }
.admin-view h2 { font-size: 15px; margin: 20px 0 10px; }
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-kpi {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.admin-kpi .k { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.admin-kpi .v { display: block; margin-top: 6px; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.admin-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.admin-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-row:last-child { border-bottom: 0; }
.admin-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.admin-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  max-width: 640px;
}
.admin-meta, .admin-empty { color: var(--ink-3); font-size: var(--text-sm); }
.admin-note { min-height: 72px; width: 100%; }
.admin-tx { font-size: 12px; color: var(--ink-2); }
.admin-coupon-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.admin-chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; min-height: 520px; }
.admin-chat-list { border: 1px solid var(--border); border-radius: var(--r); overflow: auto; background: var(--surface); }
.admin-thread {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-thread.unread { background: var(--accent-softer); }
.admin-thread span { color: var(--ink-3); font-size: 12px; }
.admin-chat-pane { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-width: 0; }
.admin-chat-pane h2 { padding: 12px 14px; margin: 0; border-bottom: 1px solid var(--border-soft); }
.admin-chat-log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.admin-msg { max-width: 80%; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--border-soft); }
.admin-msg.me { align-self: flex-end; border-color: var(--border-accent); }
.admin-msg p { margin: 0; white-space: pre-wrap; }
.admin-msg time { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-4); }
.admin-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-soft); }
.admin-chat-form .input { flex: 1; }
.admin-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
}
.admin-toast.show { opacity: 1; }
.admin-toast.bad { border-color: var(--bad); color: var(--bad); }
@media (max-width: 900px) {
  .admin-app { flex-direction: column; }
  .admin-rail { width: auto; flex-direction: row; flex-wrap: wrap; }
  .admin-kpis, .admin-chat, .admin-coupon-form, .proxy-page .fp-packs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .proxy-page .fp-packs { grid-template-columns: 1fr; }
}

/* end of file */