/* ═══════════════════════════════════════════════════════════════
   HQLikes Panel — style.css
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ────────────────────────────────────────────────────────────────
   DESIGN TOKENS
──────────────────────────────────────────────────────────────── */
:root {
  --blue:         #2563eb;
  --blue-d:       #1d4ed8;
  --blue-bg:      #eff6ff;
  --blue-br:      #dbeafe;
  --green:        #16a34a;
  --green-bg:     #f0fdf4;
  --red:          #dc2626;
  --red-bg:       #fef2f2;
  --yellow:       #ca8a04;
  --yellow-bg:    #fefce8;
  --yellow-br:    #fef08a;
  --orange:       #ea580c;
  --orange-bg:    #fff7ed;
  --bg:           #f0f2f5;
  --surface:      #ffffff;
  --border:       #e5e7eb;
  --border-l:     #f3f4f6;
  --text-1:       #111827;
  --text-2:       #374151;
  --text-3:       #6b7280;
  --text-4:       #9ca3af;
  --topbar-h:     58px;
  --sidebar-w:    230px;
  --bottom-nav-h: 60px;
  --r-sm:         6px;
  --r:            10px;
  --r-lg:         14px;
  --sh-sm:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh:           0 4px 12px rgba(0,0,0,.08);
  --sh-lg:        0 10px 32px rgba(0,0,0,.12);
  --font:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease:         cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────────────────────────────────────────────
   RESET + BASE
──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--topbar-h);
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font); color: var(--text-1); font-weight: 700; margin-top: 0; }
img { max-width: 100%; height: auto; }

/* ────────────────────────────────────────────────────────────────
   TOP BAR
──────────────────────────────────────────────────────────────── */
.hq-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 8px;
  z-index: 1040;
  width: 100%;
  max-width: 100vw;
  overflow: visible; /* Must be visible so dropdowns can overlap the main content */
}
/* ════════════════════════════════════════════════════════════
   GUEST TOPBAR — floating frosted glass
════════════════════════════════════════════════════════════ */
.hq-topbar--guest {
  padding: 0 32px;
  background: rgba(15,23,42,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.5);
  flex-wrap: wrap;
  justify-content: space-between;
}
.hq-topbar--guest .hq-brand__name { color: #fff !important; }
.hq-topbar--guest .hq-brand__icon { background: #6366f1 !important; }

/* Desktop nav — centered, active indicator */
.hq-guest-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
}
.hq-guest-nav a {
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.55) !important;
  padding: 6px 14px; border-radius: 7px;
  text-decoration: none !important;
  transition: all .15s; position: relative;
}
.hq-guest-nav a:hover { color: #fff !important; background: rgba(255,255,255,.07); }
.hq-guest-nav a.gn-active { color: #fff !important; background: rgba(255,255,255,.1); }

/* Sign In button */
.hq-guest-cta {
  display: inline-flex; align-items: center;
  background: #fff; color: #0f172a !important;
  padding: 7px 18px; border-radius: 99px;
  font-weight: 700; font-size: 13px;
  text-decoration: none !important;
  transition: all .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  border: none;
  white-space: nowrap;
}
.hq-guest-cta:hover {
  background: #e0e7ff; color: #3730a3 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── Hamburger ── */
.hq-hamburger-guest {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 38px; height: 38px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; cursor: pointer; padding: 0; transition: background .13s;
}
.hq-hamburger-guest:hover { background: rgba(255,255,255,.14); }
.hq-hamburger-guest span {
  display: block; width: 17px; height: 1.5px;
  background: rgba(255,255,255,.7); border-radius: 2px; transition: all .2s;
}
.hq-hamburger-guest.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hq-hamburger-guest.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hq-hamburger-guest.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile menu ── */
.hq-guest-mobile-menu {
  display: none; width: 100%;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 16px 20px;
  flex-direction: column; gap: 2px;
}
.hq-guest-mobile-menu.is-open { display: flex; }
.hq-guest-mobile-menu a {
  display: block; padding: 12px 14px;
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important; border-radius: 8px; transition: all .13s;
}
.hq-guest-mobile-menu a:hover { color: #fff !important; background: rgba(255,255,255,.07); }
.hq-guest-mobile-menu__divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0; }
.hq-guest-mobile-menu__cta {
  background: #6366f1 !important; color: #fff !important;
  font-weight: 700 !important; text-align: center !important;
  margin-top: 2px !important;
}
.hq-guest-mobile-menu__cta:hover { background: #4f46e5 !important; }
.hq-guest-mobile-menu__signin {
  text-align: center !important; font-size: 13px !important;
  color: rgba(255,255,255,.35) !important; padding: 8px 14px !important;
}

/* ════════════════════════════════════════════════════════════
   GUEST FOOTER
════════════════════════════════════════════════════════════ */
.hq-guest-footer {
  background: #080f1a;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 60px;
}
.hq-guest-footer__inner {
  max-width: 1120px; margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 40px;
}
/* Col 1 — Brand */
.hq-gf-brand__logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important; margin-bottom: 14px; display: inline-flex;
}
.hq-gf-brand__tag {
  font-size: 13px; color: rgba(255,255,255,.35);
  line-height: 1.65; margin: 0 0 18px;
}
.hq-gf-social { display: flex; gap: 8px; }
.hq-gf-social a {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45); text-decoration: none !important; transition: all .13s;
}
.hq-gf-social a:hover { background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.4); color: #818cf8; }

/* Cols 2 & 3 — Links */
.hq-gf-col__title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,.3);
  margin-bottom: 16px;
}
.hq-gf-col a {
  display: block; font-size: 13.5px; color: rgba(255,255,255,.45) !important;
  text-decoration: none !important; padding: 4px 0;
  transition: color .13s;
}
.hq-gf-col a:hover { color: #fff !important; }

/* Col 4 — CTA */
.hq-gf-cta__title {
  font-size: 15px; font-weight: 700; color: #fff;
  margin-bottom: 8px;
}
.hq-gf-cta__sub {
  font-size: 13px; color: rgba(255,255,255,.4);
  line-height: 1.6; margin-bottom: 18px;
}
.hq-gf-cta__btn {
  display: inline-flex; align-items: center;
  background: #6366f1; color: #fff !important;
  font-size: 13.5px; font-weight: 700;
  padding: 10px 20px; border-radius: 99px;
  text-decoration: none !important; transition: all .15s;
  box-shadow: 0 2px 12px rgba(99,102,241,.35);
}
.hq-gf-cta__btn:hover { background: #4f46e5; box-shadow: 0 4px 18px rgba(99,102,241,.45); }

/* Footer bar */
.hq-guest-footer__bar {
  max-width: 1120px; margin: 0 auto;
  padding: 18px 32px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,.25);
}
.hq-gf-bar__links { display: flex; gap: 20px; }
.hq-gf-bar__links a { color: rgba(255,255,255,.3) !important; text-decoration: none !important; transition: color .13s; }
.hq-gf-bar__links a:hover { color: rgba(255,255,255,.7) !important; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .hq-topbar--guest { padding: 0 16px; }
  .hq-guest-nav { display: none !important; }
  .hq-hamburger-guest { display: flex; }
  .hq-guest-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 20px 28px; }
  .hq-gf-cta { grid-column: 1 / -1; }
  .hq-guest-footer__bar { flex-direction: column; gap: 10px; text-align: center; padding: 16px 20px; }
  /* Services page search bar */
  body.hq-guest .ord-search-li { margin-left: auto !important; float: none !important; }
  body.hq-guest .ord-pills { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .hq-guest-footer__inner { grid-template-columns: 1fr; }
}

.hq-topbar__left {
  display: flex; align-items: center; gap: 8px;
  width: var(--sidebar-w);
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 900px) { .hq-topbar__left { width: auto; } }

.hq-hamburger {
  background: none; border: none; cursor: pointer;
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
  border-radius: var(--r-sm); transition: background .15s;
  flex-shrink: 0;
}
.hq-hamburger:hover { background: var(--border-l); }
.hq-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--text-3); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
  transform-origin: center;
}
body.sidebar-open .hq-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.sidebar-open .hq-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.sidebar-open .hq-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hq-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important;
  color: var(--text-1) !important;
  font-weight: 700; font-size: 16px; letter-spacing: -.3px;
  min-width: 0; overflow: hidden;
}
.hq-brand__logo { height: 26px; width: auto; flex-shrink: 0; }
.hq-brand__icon { color: var(--blue); flex-shrink: 0; display: flex; }
.hq-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hq-topbar__center {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 8px;
}
.hq-topbar__center strong { color: var(--text-1); font-weight: 600; }
@media (max-width: 900px) { .hq-topbar__center { display: none; } }

.hq-topbar__right {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.hq-topbar__right--guest { margin-left: auto; }

.hq-balance-pill {
  display: flex; align-items: center; gap: 5px;
  background: var(--blue-bg);
  border: 1.5px solid var(--blue-br);
  border-radius: 99px;
  padding: 5px 12px 5px 9px;
  color: var(--blue-d) !important;
  text-decoration: none !important;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.hq-balance-pill:hover { background: var(--blue-br); border-color: var(--blue); }
.hq-balance-pill svg { flex-shrink: 0; width: 14px; height: 14px; }
.hq-balance-pill__lbl { color: var(--text-3); font-weight: 400; font-size: 11.5px; }
.hq-balance-pill__val { font-weight: 800; color: var(--blue); }
.hq-caret { opacity: .5; transition: transform .2s; flex-shrink: 0; }
.hq-open .hq-caret { transform: rotate(180deg); }
@media (max-width: 900px) {
  .hq-balance-pill__lbl { display: none; }
  .hq-balance-pill { padding: 5px 10px; }
}

.hq-avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 700;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0; letter-spacing: .5px;
}
.hq-avatar:hover { background: var(--blue-d); }
.hq-avatar-wrap { position: relative; }

.hq-dropdown-wrap { position: relative; overflow: visible; }
.hq-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  min-width: 200px; z-index: 9000;
  overflow: hidden;
  animation: hqDropIn .16s var(--ease);
}
.hq-dropdown--left  { left: 0; right: auto; }
.hq-dropdown--right { right: 0; left: auto; }
.hq-dropdown--currencies { max-height: 260px; overflow-y: auto; }
.hq-open .hq-dropdown { display: block; }

@keyframes hqDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hq-dropdown__header {
  padding: 10px 16px 6px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-4);
}
.hq-dropdown__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px; gap: 8px;
  font-size: 13px; color: var(--text-2) !important;
  text-decoration: none !important;
  transition: background .1s;
}
.hq-dropdown__item:hover { background: var(--border-l); }
.hq-dropdown__item.is-active { color: var(--blue) !important; font-weight: 600; }
.hq-dropdown__item-sub { color: var(--text-4); font-size: 12px; }
.hq-dropdown__divider { height: 1px; background: var(--border); margin: 4px 0; }
.hq-dropdown__user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--blue-bg);
}
.hq-dropdown__user-avatar {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hq-dropdown__user-name { font-weight: 700; font-size: 13.5px; color: var(--text-1); }
.hq-dropdown__user-bal  { font-size: 12px; color: var(--blue); font-weight: 600; }

/* ────────────────────────────────────────────────────────────────
   ALERT BARS
──────────────────────────────────────────────────────────────── */
.hq-alert-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 20px;
  font-size: 13px; flex-wrap: wrap;
}
.hq-alert-bar--warn { background: var(--yellow-bg); border-bottom: 1px solid var(--yellow-br); color: #78350f; }
.hq-alert-bar--info { background: var(--blue-bg); border-bottom: 1px solid var(--blue-br); color: var(--blue-d); }
.hq-alert-bar__btn {
  background: #f59e0b; color: #fff !important;
  padding: 5px 14px; border-radius: 99px;
  font-weight: 700; font-size: 12px;
  text-decoration: none !important; white-space: nowrap; flex-shrink: 0;
  transition: background .13s;
}
.hq-alert-bar__btn:hover { background: #d97706; }
.hq-alert-bar__close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: inherit; opacity: .5; padding: 0; line-height: 1; flex-shrink: 0;
}
.hq-alert-bar__close:hover { opacity: 1; }

/* ────────────────────────────────────────────────────────────────
   SIDEBAR
──────────────────────────────────────────────────────────────── */
.hq-sidebar {
  position: fixed;
  top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  z-index: 1030;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex; flex-direction: column;
}
.hq-sidebar::-webkit-scrollbar { width: 3px; }
.hq-sidebar::-webkit-scrollbar-track { background: transparent; }
.hq-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.hq-sidebar__nav { flex: 1; }
.hq-sidebar__nav ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hq-sidebar__nav li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; font-size: 13.5px;
  color: var(--text-2) !important; text-decoration: none !important;
  transition: background .12s, color .12s;
  white-space: nowrap; border-left: 3px solid transparent;
}
.hq-sidebar__nav li a:hover { background: var(--border-l); color: var(--text-1) !important; }
.hq-sidebar__nav li.is-active a {
  background: var(--blue-bg); color: var(--blue) !important;
  font-weight: 600; border-left-color: var(--blue);
}
.hq-sidebar__nav li a i { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; }
.hq-sidebar__nav li a span { overflow: hidden; text-overflow: ellipsis; }

.hq-sidebar__footer { padding: 14px; border-top: 1px solid var(--border); }
.hq-sidebar__balance-card {
  display: block;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  border-radius: var(--r); padding: 14px 16px;
  text-decoration: none !important;
  transition: box-shadow .15s, transform .15s; cursor: pointer;
}
.hq-sidebar__balance-card:hover { box-shadow: 0 6px 20px rgba(37,99,235,.35); transform: translateY(-1px); }
.hq-sidebar__balance-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hq-sidebar__balance-card__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.7); }
.hq-sidebar__balance-card__top svg { color: rgba(255,255,255,.6); }
.hq-sidebar__balance-card__amount { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 10px; }
.hq-sidebar__balance-card__cta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.15); border-radius: 99px;
  padding: 5px 12px; width: fit-content; transition: background .13s;
}
.hq-sidebar__balance-card:hover .hq-sidebar__balance-card__cta { background: rgba(255,255,255,.25); }

@media (max-width: 768px) {
  .hq-sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); box-shadow: none; }
  .hq-sidebar.hq-open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.14); }
}

body.sidebar-collapsed .hq-sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
body.sidebar-collapsed .hq-main { margin-left: 0 !important; }

.hq-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1029;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.hq-backdrop.hq-open { display: block; }

/* ────────────────────────────────────────────────────────────────
   MAIN CONTENT
──────────────────────────────────────────────────────────────── */
.hq-main {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--topbar-h));
  padding: 24px 0 40px;
  transition: margin-left .25s var(--ease);
}
.hq-guest-main {
  min-height: calc(100vh - var(--topbar-h));
  padding: 24px 0 40px;
}

@media (max-width: 767px) {
  .hq-main {
    margin-left: 0 !important;
    padding-bottom: calc(var(--bottom-nav-h) + 24px) !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAV
   Phones only — hidden on tablet (768px+) and desktop.
   Two rules do the work:
   1. display:none !important by default (beats everything)
   2. display:block !important at max-width:767px (beats the default)
   767px = just below iPad portrait width of 768px.
──────────────────────────────────────────────────────────────── */
.hq-bottom-nav {
  display: none !important;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: var(--bottom-nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  z-index: 2000;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hq-bottom-nav__rail {
  display: flex;
  align-items: stretch;
  height: var(--bottom-nav-h);
  width: 100%;
}

.hq-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4) !important;
  text-decoration: none !important;
  transition: color .13s;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.hq-bottom-nav__item svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  stroke-width: 1.8;
}
.hq-bottom-nav__item span {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hq-bottom-nav__item.is-active { color: var(--blue) !important; }
.hq-bottom-nav__item.is-active svg { stroke: var(--blue); }
.hq-bottom-nav__item.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--blue);
  border-radius: 0 0 2px 2px;
}
.hq-bottom-nav__item--funds { color: var(--blue) !important; }
.hq-bottom-nav__item--funds svg { stroke: var(--blue); }

/* Show on phones only — NOT on iPad (768px) or larger */
@media (max-width: 767px) {
  .hq-bottom-nav { display: block !important; }
}

/* ────────────────────────────────────────────────────────────────
   GUEST NAV
──────────────────────────────────────────────────────────────── */
.hq-lang { position: relative; }
.hq-lang__btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: var(--border-l); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 13px; color: var(--text-2);
  cursor: pointer; transition: background .13s;
}
.hq-lang__btn:hover { background: var(--border); }

.hq-guest-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.hq-guest-nav a {
  padding: 6px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text-2) !important; text-decoration: none !important;
  transition: background .13s;
}
.hq-guest-nav a:hover { background: var(--border-l); }
.hq-guest-nav a.is-active { color: var(--blue) !important; background: var(--blue-bg); }

/* Hide nav links on mobile — only show Sign In button */
@media (max-width: 767px) {
  .hq-guest-nav { display: none; }
}

.hq-guest-cta {
  display: inline-flex; align-items: center;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-2) !important;
  padding: 6px 14px; border-radius: 99px;
  font-weight: 600; font-size: 13px;
  text-decoration: none !important;
  transition: all .13s;
  white-space: nowrap;
}
.hq-guest-cta:hover {
  border-color: var(--blue); color: var(--blue) !important;
  background: var(--blue-bg);
}

/* ────────────────────────────────────────────────────────────────
   NOTIFICATIONS
──────────────────────────────────────────────────────────────── */
#notify-wrapper {
  position: fixed !important;
  bottom: calc(var(--bottom-nav-h) + 12px); right: 16px;
  z-index: 9999 !important;
  min-width: 280px; max-width: calc(100vw - 32px);
  border-radius: var(--r) !important;
}
@media (min-width: 768px) {
  #notify-wrapper { bottom: 20px; right: 20px; }
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL COMPONENTS
──────────────────────────────────────────────────────────────── */
.page-title    { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 0 0 3px; }
.page-subtitle { font-size: 13px; color: var(--text-3); margin: 0 0 20px; }
@media (max-width: 480px) { .page-title { font-size: 18px; } }

.container, .container-fluid {
  padding-left: 20px !important; padding-right: 20px !important;
  max-width: 100% !important; width: 100% !important;
}
@media (min-width: 769px) {
  .container, .container-fluid { padding-left: 28px !important; padding-right: 28px !important; }
}

.well {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 22px !important; margin-bottom: 18px !important;
}
.well.well-float { padding: 0 !important; overflow: visible; }
/* Public services/terms pages — tables inside wells inherit rounded corners */
body.hq-guest .well { overflow: hidden; border-radius: var(--r-lg) !important; }
body.hq-guest .well table { border-radius: 0; }
body.hq-guest .well table thead tr:first-child th:first-child { border-top-left-radius: var(--r-lg); }
body.hq-guest .well table thead tr:first-child th:last-child  { border-top-right-radius: var(--r-lg); }
body.hq-guest .well table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--r-lg); }
body.hq-guest .well table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--r-lg); }
@media (max-width: 768px) { .well { padding: 16px !important; border-radius: var(--r) !important; } }
@media (max-width: 480px) { .well { padding: 14px !important; } }

.btn {
  font-family: var(--font) !important; font-weight: 600 !important;
  font-size: 13.5px !important; border-radius: var(--r) !important;
  padding: 9px 18px !important; border: none !important;
  cursor: pointer; display: inline-flex !important; align-items: center; gap: 6px;
  transition: background .15s, box-shadow .15s, transform .1s !important;
  text-decoration: none !important; line-height: 1.4 !important; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(37,99,235,.2) !important; }
.btn-primary, .btn-primary:visited { background: var(--blue) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(37,99,235,.25) !important; }
.btn-primary:hover { background: var(--blue-d) !important; color: #fff !important; }
.btn-default, .btn-default:visited { background: var(--border-l) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.btn-default:hover { background: var(--border) !important; }
.btn-success { background: var(--green) !important; color: #fff !important; }
.btn-danger  { background: var(--red) !important; color: #fff !important; }
.btn-xs { font-size: 12px !important; padding: 4px 10px !important; border-radius: var(--r-sm) !important; }
.btn-sm { font-size: 13px !important; padding: 6px 14px !important; }
.btn-lg { font-size: 15px !important; padding: 12px 24px !important; }
.btn-block { width: 100% !important; justify-content: center !important; }

.form-control {
  font-family: var(--font) !important; font-size: 14px !important;
  color: var(--text-1) !important; background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important; padding: 10px 14px !important;
  height: auto !important; width: 100%;
  transition: border-color .15s, box-shadow .15s !important; box-shadow: none !important;
}
.form-control:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; outline: none !important; }
.form-control::placeholder { color: var(--text-4) !important; }
label, .control-label { font-size: 12.5px !important; font-weight: 700 !important; color: var(--text-2) !important; margin-bottom: 6px !important; display: block; }
.form-group { margin-bottom: 18px !important; }
select.form-control {
  appearance: none !important; -webkit-appearance: none !important;
  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='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important;
  padding-right: 36px !important;
}
.input-group { display: flex !important; }
.input-group .form-control { border-radius: var(--r) 0 0 var(--r) !important; flex: 1; }
.input-group-btn { display: flex !important; }
.input-group-btn .btn { border-radius: 0 var(--r) var(--r) 0 !important; border-left: 1px solid var(--border) !important; margin: 0 !important; }

.table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; margin: 0 !important; }
.table > thead > tr > th { padding: 10px 14px !important; font-size: 11px !important; font-weight: 700 !important; color: var(--text-3) !important; text-transform: uppercase !important; letter-spacing: .5px !important; white-space: nowrap !important; border: none !important; border-bottom: 2px solid var(--border) !important; background: var(--border-l) !important; }
.table > tbody > tr > td { padding: 12px 14px !important; color: var(--text-2) !important; vertical-align: middle !important; border: none !important; border-bottom: 1px solid var(--border-l) !important; }
.table > tbody > tr:last-child > td { border-bottom: none !important; }
.table > tbody > tr:hover > td { background: #fafbfc !important; }
@media (max-width: 480px) { .table > thead > tr > th, .table > tbody > tr > td { padding: 9px 10px !important; } }

.nav-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 !important; margin: 0 0 6px !important; list-style: none !important; }
.nav-pills > li { float: none !important; margin: 0 !important; }
.nav-pills > li > a { font-family: var(--font) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text-2) !important; background: var(--surface) !important; border: 1.5px solid var(--border) !important; border-radius: var(--r) !important; padding: 6px 14px !important; display: inline-block !important; transition: all .15s !important; text-decoration: none !important; }
.nav-pills > li > a:hover { background: var(--blue-bg) !important; color: var(--blue) !important; border-color: var(--blue-br) !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.nav-pills > li.pull-right, .nav-pills > li.search { margin-left: auto !important; float: none !important; }

.alert { border-radius: var(--r) !important; padding: 12px 16px !important; font-size: 13.5px !important; border: none !important; border-left: 4px solid !important; margin-bottom: 16px !important; display: block; }
/* Never override inline display:none — panel uses this to hide error blocks */
.alert[style*="display: none"],
.alert[style*="display:none"] { display: none !important; }
.alert .close { float: right !important; margin-left: 8px !important; background: none !important; border: none !important; font-size: 18px !important; cursor: pointer; opacity: .5; line-height: 1 !important; color: inherit !important; }
.alert-success { background: var(--green-bg) !important; color: #15803d !important; border-left-color: var(--green) !important; }
.alert-danger  { background: var(--red-bg) !important; color: #b91c1c !important; border-left-color: var(--red) !important; }
.alert-warning { background: var(--yellow-bg) !important; color: var(--yellow) !important; border-left-color: #eab308 !important; }
.alert-info    { background: var(--blue-bg) !important; color: var(--blue-d) !important; border-left-color: var(--blue) !important; }
.alert .close  { margin-left: auto !important; background: none !important; border: none !important; font-size: 18px !important; cursor: pointer; opacity: .5; padding: 0 !important; line-height: 1 !important; color: inherit !important; float: none !important; }
.alert-dismissible { padding-right: 16px !important; }

.badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--blue) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; border-radius: 20px !important; padding: 3px 10px !important; min-width: 40px !important; }

.s-completed  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-block; }
.s-pending    { background: #fefce8; color: #a16207; border: 1px solid #fef08a; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-block; }
.s-canceled   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-block; }
.s-inprogress { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-br); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-block; }
.s-partial    { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-block; }

.spd-fast { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #dcfce7; color: #15803d; }
.spd-med  { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #fef9c3; color: #a16207; }
.spd-slow { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #fee2e2; color: #b91c1c; }
.spd-na   { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: #f3f4f6; color: #6b7280; }

ul.pagination, .pagination { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; list-style: none !important; padding: 16px !important; margin: 0 !important; }
.pagination > li > a, .pagination > li > span { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 34px !important; height: 34px !important; padding: 0 10px !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-sm) !important; background: var(--surface) !important; color: var(--text-2) !important; font-size: 13px !important; font-weight: 500 !important; transition: all .15s !important; text-decoration: none !important; }
.pagination > li > a:hover { background: var(--blue-bg) !important; border-color: var(--blue-br) !important; color: var(--blue) !important; }
.pagination > li.active > a, .pagination > li.active > span { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }

.dropdown-menu { border: 1.5px solid var(--border) !important; border-radius: var(--r) !important; box-shadow: var(--sh-lg) !important; padding: 6px !important; font-size: 13.5px !important; min-width: 180px !important; background: var(--surface) !important; }
.dropdown-menu > li > a, .dropdown-menu .dropdown-item { display: flex !important; align-items: center; gap: 8px; padding: 8px 12px !important; border-radius: var(--r-sm) !important; color: var(--text-2) !important; transition: background .12s !important; font-size: 13px !important; text-decoration: none !important; }
.dropdown-menu > li > a:hover, .dropdown-menu .dropdown-item:hover { background: var(--border-l) !important; }

.modal-content { border-radius: var(--r-lg) !important; border: none !important; box-shadow: var(--sh-lg) !important; }
.modal-header  { border-bottom: 1px solid var(--border) !important; padding: 18px 24px !important; }
.modal-title   { font-weight: 700 !important; font-size: 16px !important; }
.modal-body    { padding: 24px !important; }
.modal-footer  { border-top: 1px solid var(--border) !important; padding: 16px 24px !important; }

.hq-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 16px; }
.hq-modal.hq-open { display: flex; }
.hq-modal-box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; animation: hqDropIn .18s var(--ease); }
.hq-modal-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hq-modal-body { padding: 18px 22px; overflow-y: auto; font-size: 13.5px; color: var(--text-2); line-height: 1.7; flex: 1; }
.hq-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

.service-description, .service-description__th { display: none !important; }
tr.service-description { display: none !important; }
#svc-tbl td.svc-act { white-space: nowrap !important; text-align: right !important; width: 130px !important; padding-right: 14px !important; }
#svc-tbl .svc-btns { display: inline-flex !important; align-items: center !important; gap: 6px !important; }

.no-plat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .13s; white-space: nowrap; }
.no-plat-pill:hover { border-color: var(--blue-br); background: var(--blue-bg); color: var(--blue-d); }
.no-plat-pill.no-act { border-color: var(--blue); background: var(--blue-bg); color: var(--blue-d); }
.no-plat-pill svg { width: 14px; height: 14px; }

.nowrap      { white-space: nowrap; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-muted  { color: var(--text-3) !important; }
.hidden      { display: none !important; }
.w-100       { width: 100%; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ────────────────────────────────────────────────────────────────
   AUTH PAGES (Sign In, Sign Up, Reset Password)
   Split layout: dark left panel + white right form.
   Indigo (#6366f1) accent — distinct from dashboard blue (#2563eb)
   so auth pages feel premium/separate from the app shell.
──────────────────────────────────────────────────────────────── */

/* Auth pages hide the topbar via their own inline <style> blocks.
   Content pages (terms, services, api) keep the guest topbar visible. */
body.hq-guest {
  background: #0f172a;
  padding-top: var(--topbar-h);
}
/* Dark bg + floating white cards = content pages look structured and premium */

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 480px;
  align-items: stretch;
}

/* Left panel */
.auth-left {
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 56px;
  position: relative; overflow: hidden;
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.auth-left::after {
  content: ''; position: absolute;
  top: -120px; left: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  pointer-events: none;
}
.auth-left__brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 56px; position: relative; z-index: 1;
}
.auth-left__brand-icon {
  width: 36px; height: 36px; background: #6366f1;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-left__brand-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.4px; }
.auth-left__hero { position: relative; z-index: 1; margin-bottom: 48px; }
.auth-left__tagline {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: #818cf8; margin-bottom: 16px;
}
.auth-left__headline {
  font-size: 36px; font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.8px; margin: 0 0 16px;
}
.auth-left__headline span { color: #818cf8; }
.auth-left__sub { font-size: 15px; color: #94a3b8; line-height: 1.65; max-width: 380px; }
.auth-stats { display: flex; gap: 32px; margin-bottom: 48px; position: relative; z-index: 1; }
.auth-stat__val {
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; line-height: 1; margin-bottom: 4px;
}
.auth-stat__lbl { font-size: 12px; color: #64748b; font-weight: 500; }

/* Auth pillars — shared across signin, signup, resetpassword */
.auth-pillars { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; margin-bottom: 36px; }
.auth-pillar  { display: flex; align-items: flex-start; gap: 12px; }
.auth-pillar__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.25);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #818cf8; margin-top: 1px;
}
.auth-pillar__icon svg { width: 14px !important; height: 14px !important; color: #818cf8 !important; }
.auth-pillar__title { font-size: 13.5px; font-weight: 700; color: #e2e8f0; margin-bottom: 2px; }
.auth-pillar__sub   { font-size: 12px; color: #64748b; line-height: 1.5; }

/* Mobile brand bar — shared across auth pages */
.auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-mobile-brand__icon {
  width: 32px; height: 32px; background: #6366f1; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-mobile-brand__name { font-size: 16px; font-weight: 800; color: #0f172a; }
.auth-mobile-brand__tag  { font-size: 11.5px; color: #64748b; margin-top: 1px; }
@media (max-width: 900px) { .auth-mobile-brand { display: flex; } }

.auth-trust { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.auth-trust__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #94a3b8;
}
.auth-trust__pill svg { width: 13px; height: 13px; color: #818cf8; flex-shrink: 0; }

/* Right panel */
.auth-right {
  background: #ffffff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 44px; position: relative;
}
.auth-form__header { margin-bottom: 28px; }
.auth-form__title {
  font-size: 24px; font-weight: 800; color: #0f172a;
  letter-spacing: -.5px; margin: 0 0 6px; font-family: var(--font);
}
.auth-form__sub { font-size: 14px; color: #64748b; margin: 0; }
.auth-form__sub a { color: #6366f1; font-weight: 600; text-decoration: none; }
.auth-form__sub a:hover { text-decoration: underline; }

/* Auth fields */
.auth-field { margin-bottom: 18px; }
.auth-field label {
  display: block; font-size: 12.5px !important; font-weight: 700 !important;
  color: #374151 !important; margin-bottom: 7px !important;
}
.auth-field input {
  width: 100%; padding: 11px 14px;
  font-size: 14px; font-family: var(--font); color: #0f172a;
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-field input:focus {
  border-color: #6366f1; background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.auth-field input::placeholder { color: #94a3b8; }
.auth-field input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.auth-field__row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
}
.auth-field__row label { margin-bottom: 0 !important; }
.auth-forgot { font-size: 12px; font-weight: 600; color: #6366f1; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }

/* Password toggle */
.auth-pw-wrap { position: relative; }
.auth-pw-wrap input { padding-right: 44px; }
.auth-pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: #94a3b8; display: flex; transition: color .13s;
}
.auth-pw-toggle:hover { color: #6366f1; }
.auth-pw-toggle svg { width: 18px; height: 18px; }
.auth-pw-toggle .eye-off { display: none; }
.auth-pw-toggle.showing .eye-on  { display: none; }
.auth-pw-toggle.showing .eye-off { display: block; }

/* Remember me */
.auth-remember {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 22px; font-size: 13px; color: #64748b; cursor: pointer;
}
.auth-remember input[type="checkbox"] {
  width: 16px; height: 16px; border: 1.5px solid #cbd5e1;
  border-radius: 4px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0;
}

/* Submit */
.auth-submit {
  width: 100%; padding: 13px;
  background: #6366f1; color: #fff; border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
  margin-bottom: 20px;
}
.auth-submit:hover { background: #4f46e5; box-shadow: 0 6px 20px rgba(99,102,241,.45); }
.auth-submit:active { transform: scale(.98); }
.auth-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.auth-submit__spinner {
  display: none; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: authSpin .7s linear infinite;
}
.auth-submit.is-loading .auth-submit__spinner { display: block; }
.auth-submit.is-loading .auth-submit__label  { display: none; }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; font-size: 12px; color: #94a3b8;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: #e2e8f0;
}

/* Support */
.auth-support {
  text-align: center; font-size: 12.5px; color: #94a3b8;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid #f1f5f9;
}
.auth-support a { color: #6366f1; font-weight: 600; text-decoration: none; }
.auth-support a:hover { text-decoration: underline; }

/* Footer note */
.auth-footer-note {
  position: absolute; bottom: 20px; left: 0; right: 0;
  text-align: center; font-size: 11.5px; color: #cbd5e1; padding: 0 44px;
}

/* hCaptcha */
.h-captcha { margin-bottom: 18px; }

/* Responsive */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-left  { display: none; }
  .auth-right {
    min-height: 100vh; padding: 40px 24px;
    justify-content: flex-start; padding-top: 56px;
  }
  .auth-footer-note { position: static; margin-top: 28px; padding: 0; color: #94a3b8; }
  body.hq-guest { background: #0f172a; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .auth-shell { grid-template-columns: 1fr 420px; }
  .auth-left  { padding: 48px 40px; }
  .auth-left__headline { font-size: 28px; }
  .auth-right { padding: 40px 36px; }
}
@media (max-width: 480px) {
  .auth-right { padding: 32px 20px; }
  .auth-form__title { font-size: 22px; }
}

/* ────────────────────────────────────────────────────────────────
   SIGNUP PAGE — additional components
   (auth-shell, auth-left, auth-right, auth-field, auth-submit
   are already defined in the Sign In section above)
──────────────────────────────────────────────────────────────── */

/* Benefits list (signup left panel) */
.auth-benefits {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.auth-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.auth-benefit__icon {
  width: 34px; height: 34px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #818cf8;
}
.auth-benefit__icon svg { width: 16px; height: 16px; }
.auth-benefit__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 2px;
}
.auth-benefit__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* Password strength meter */
.auth-pw-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-pw-strength__bars {
  display: flex;
  gap: 4px;
  flex: 1;
}
.auth-pw-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  transition: background .2s;
}
.auth-pw-strength__bar.active-1 { background: #ef4444; }
.auth-pw-strength__bar.active-2 { background: #f97316; }
.auth-pw-strength__bar.active-3 { background: #eab308; }
.auth-pw-strength__bar.active-4 { background: #16a34a; }
.auth-pw-strength__label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

/* Field validation messages */
.auth-field-msg {
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.auth-field-msg.is-error   { color: #ef4444; }
.auth-field-msg.is-success { color: #16a34a; }

/* Terms checkbox row */
.auth-terms {
  margin-bottom: 20px;
}
.auth-terms__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  line-height: 1.5;
}
.auth-terms__label input[type="checkbox"] {
  width: 16px; height: 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.auth-terms__label a {
  color: #6366f1;
  font-weight: 600;
  text-decoration: none;
}
.auth-terms__label a:hover { text-decoration: underline; }
.auth-terms.is-invalid .auth-terms__label input { outline: 2px solid #ef4444; }

/* ────────────────────────────────────────────────────────────────
   NEW ORDER PAGE
──────────────────────────────────────────────────────────────── */
.no-wrap { max-width: 960px; margin: 0 auto; padding: 0 0 24px; width: 100%; }

/* Compact page header — title + browse link on one line */
.no-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.no-page-header .page-title { margin: 0; font-size: 18px; }
.no-browse-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-3) !important;
  text-decoration: none !important; white-space: nowrap;
  transition: color .13s;
}
.no-browse-link:hover { color: var(--blue) !important; }

/* ── Platform pills section ── */
.no-plat-section {
  margin-bottom: 8px;
}
.no-plat-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.no-plat-header__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4);
}
.no-plat-header__actions {
  display: flex; align-items: center; gap: 10px;
}
.no-browse-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--text-3) !important;
  text-decoration: none !important; transition: color .13s;
}
.no-browse-link:hover { color: var(--blue) !important; }
.no-plat-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-4);
  font-family: var(--font); padding: 0; transition: color .13s;
}
.no-plat-toggle:hover { color: var(--text-2); }

.no-plat-row {
  display: flex; flex-wrap: wrap; gap: 7px;
}

/* Show pills button — when hidden */
.no-plat-show-btn {
  display: none;
  align-items: center; gap: 6px;
  background: var(--border-l); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  cursor: pointer; font-family: var(--font);
  margin-bottom: 12px; transition: all .13s;
}
.no-plat-show-btn:hover { border-color: var(--blue-br); color: var(--blue); background: var(--blue-bg); }

/* Two-column grid */
.no-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}
.no-form-col .well { margin-bottom: 0; }

/* Form head */
.no-form-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-l);
}

/* Service search */
.no-search-group { margin-bottom: 20px; }
.no-search-wrap { position: relative; }
.no-search-wrap svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); width: 15px; height: 15px;
  color: var(--text-4); pointer-events: none;
}
.no-search-wrap .form-control { padding-left: 36px !important; }

/* Service description */
.no-svc-desc-body {
  background: var(--border-l) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  color: var(--text-2) !important;
  line-height: 1.65 !important;
}

/* Charge field */
.no-charge-input {
  font-weight: 700 !important; color: var(--blue) !important;
  background: var(--blue-bg) !important; border-color: var(--blue-br) !important;
  font-size: 16px !important;
}

/* Terms */
.no-terms-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  cursor: pointer;
  line-height: 1.5 !important;
  color: var(--text-3) !important;
  width: 100% !important;
  padding-top: 0 !important;
}
.no-terms-label input[type="checkbox"] {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  accent-color: var(--blue);
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Submit */
.no-submit-btn {
  width: 100% !important; justify-content: center !important;
  padding: 13px !important; font-size: 14.5px !important;
  font-weight: 700 !important; gap: 8px !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.25) !important;
  margin-top: 4px !important;
}

/* #fields injected by panel */
#fields .form-group label { font-size: 12.5px !important; font-weight: 700 !important; }
#fields .form-control {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important; padding: 10px 14px !important;
  font-size: 14px !important; height: auto !important;
  transition: border-color .15s !important;
}
#fields .form-control:focus { border-color: var(--blue) !important; }
#fields textarea.form-control { min-height: 90px; resize: vertical; }

/* ── Summary sidebar ── */
.no-summary-col { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
.no-summary-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
}
.no-summary-head {
  padding: 11px 16px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; color: var(--text-4);
  background: var(--border-l); border-bottom: 1px solid var(--border);
}
.no-summary-body { padding: 4px 0; }
.no-summary-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 9px 16px;
  border-bottom: 1px solid var(--border-l); font-size: 13px;
}
.no-summary-row:last-child { border-bottom: none; }
.no-summary-lbl { color: var(--text-4); font-weight: 500; flex-shrink: 0; }
.no-summary-val {
  color: var(--text-1); font-weight: 600; text-align: right;
  word-break: break-word; font-size: 12.5px;
}
.no-summary-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--blue-bg); border-top: 1px solid var(--blue-br);
}
.no-summary-total__lbl { font-size: 12px; font-weight: 700; color: var(--text-3); }
.no-summary-total__val { font-size: 20px; font-weight: 800; color: var(--blue); }
.no-summary-balance {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.no-summary-balance__row { display: flex; flex-direction: column; gap: 1px; }
.no-summary-balance__lbl { font-size: 11px; color: var(--text-4); font-weight: 500; }
.no-summary-balance__val { font-size: 14px; font-weight: 800; color: var(--text-1); }
.no-summary-topup {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  color: var(--blue) !important; text-decoration: none !important;
  background: var(--blue-bg); border: 1.5px solid var(--blue-br);
  border-radius: 99px; padding: 4px 10px; transition: all .13s;
}
.no-summary-topup:hover { background: var(--blue-br); }

/* Tips card */
.no-tips-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--sh-sm);
}
.no-tips-head {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-4); margin-bottom: 10px;
}
.no-tip {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: var(--text-3); line-height: 1.5;
  margin-bottom: 8px;
}
.no-tip:last-child { margin-bottom: 0; }
.no-tip svg { color: var(--green); flex-shrink: 0; margin-top: 1px; }
.no-tip a { color: var(--blue); font-weight: 600; }

/* Success alert */
.no-success-alert {
  display: flex !important; align-items: flex-start !important;
  border-left: 4px solid var(--green) !important;
  border-radius: var(--r) !important;
  padding: 14px 16px !important; margin-bottom: 20px !important;
}
.no-success-inner { display: flex; align-items: flex-start; gap: 12px; flex: 1; }
.no-success-icon {
  width: 32px; height: 32px; background: var(--green-bg); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--green);
}
.no-success-icon svg { width: 16px; height: 16px; }
.no-success-title { font-weight: 700; font-size: 14px; color: var(--green); margin-bottom: 4px; }
.no-success-details { font-size: 13px; color: var(--text-2); line-height: 1.7; }

.no-footer-text { margin-top: 20px; }

/* Responsive */
@media (max-width: 768px) {
  .no-grid { grid-template-columns: 1fr; width: 100%; }
  .no-summary-col { display: none; }
  .no-wrap { padding: 0 0 32px; width: 100%; max-width: 100%; }
  .no-form-col { width: 100%; min-width: 0; }
  .no-form-col .well { width: 100%; min-width: 0; overflow: hidden; }
  #order-form { width: 100%; }
  #order-form .form-control { max-width: 100%; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .no-grid { grid-template-columns: 1fr 220px; }
}

/* ────────────────────────────────────────────────────────────────
   MASS ORDER PAGE
   Uses Bootstrap col-md-8 / col-md-4 inside .container
   so it works without fighting Bootstrap's grid system.
──────────────────────────────────────────────────────────────── */
.mo-header { margin-bottom: 20px; }

/* Textarea header */
.mo-textarea-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.mo-textarea-header .control-label { margin-bottom: 0 !important; }
.mo-textarea-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mo-line-count {
  font-size: 12px; font-weight: 700;
  color: var(--blue); background: var(--blue-bg);
  border: 1px solid var(--blue-br);
  border-radius: 99px; padding: 2px 10px;
}

.mo-clear-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  cursor: pointer; transition: all .13s; font-family: var(--font);
}
.mo-clear-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

/* Monospace textarea */
.mo-textarea {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  resize: vertical !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 14px !important;
  color: var(--text-1) !important;
  background: #fafafa !important;
  transition: border-color .15s, background .15s !important;
}
.mo-textarea:focus {
  border-color: var(--blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important;
}
.mo-textarea::placeholder { color: var(--text-4) !important; font-family: var(--font) !important; }

.mo-textarea-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; font-size: 11.5px; color: var(--text-4);
}
.mo-char-count { font-weight: 600; }

/* Submit */
.mo-submit-btn {
  width: 100% !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}
.mo-submit-label { display: flex; align-items: center; gap: 8px; }
.mo-spinner-icon { animation: authSpin .8s linear infinite; }

/* Alerts */
.mo-alert {
  border-radius: var(--r) !important;
  padding: 14px 16px !important;
  border-left-width: 4px !important;
  margin-bottom: 20px !important;
  display: block !important;
}
.mo-alert--success { border-left-color: var(--green) !important; }
.mo-alert--error   { border-left-color: var(--red) !important; }
.mo-alert__inner { display: flex; align-items: flex-start; gap: 12px; }
.mo-alert__icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mo-alert__icon--success { background: var(--green-bg); color: var(--green); }
.mo-alert__icon--error   { background: var(--red-bg);   color: var(--red); }
.mo-alert__icon svg { width: 15px; height: 15px; }
.mo-alert__content { flex: 1; min-width: 0; }
.mo-alert__title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.mo-alert--success .mo-alert__title { color: var(--green); }
.mo-alert--error   .mo-alert__title { color: var(--red); }
.mo-alert__counts { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mo-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: var(--r-sm);
}
.mo-count--success { background: var(--green-bg); color: var(--green); }
.mo-count--error   { background: var(--red-bg);   color: var(--red); }
.mo-count strong { font-weight: 800; }
.mo-alert__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700;
  color: var(--blue) !important; text-decoration: none !important;
}
.mo-alert__link:hover { text-decoration: underline !important; }

/* Guide card */
.mo-guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  margin-bottom: 16px;
}
.mo-guide-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: var(--border-l); border: none;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  cursor: pointer; text-align: left; font-family: var(--font); gap: 8px;
}
.mo-guide-toggle > span {
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--text-3);
}
.mo-guide-caret { transition: transform .2s; flex-shrink: 0; }
.mo-guide-card.is-collapsed .mo-guide-caret { transform: rotate(-90deg); }
.mo-guide-card.is-collapsed .mo-guide-body { display: none; }
.mo-guide-body { padding: 14px 16px; }
.mo-guide-section { margin-bottom: 14px; }
.mo-guide-section:last-child { margin-bottom: 0; }
.mo-guide-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-4); margin-bottom: 6px;
}
.mo-guide-code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px; background: #0f172a; color: #94a3b8;
  border-radius: var(--r-sm); padding: 10px 12px;
  word-break: break-all; line-height: 1.6;
}
.mo-guide-rules {
  margin: 0; padding: 0 0 0 16px;
  font-size: 12.5px; color: var(--text-3); line-height: 1.8;
}

/* Stats card */
.mo-stats-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
}
.mo-stats-head {
  padding: 10px 16px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--text-4);
  background: var(--border-l); border-bottom: 1px solid var(--border);
}
.mo-stats-body { padding: 4px 0; }
.mo-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--border-l); font-size: 13px;
}
.mo-stat-row:last-child { border-bottom: none; }
.mo-stat-lbl { color: var(--text-4); font-weight: 500; }
.mo-stat-val { font-weight: 700; color: var(--text-1); }

/* Guide col sticky on desktop */
@media (min-width: 992px) {
  .col-md-4 .mo-guide-card,
  .col-md-4 .mo-stats-card {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
  }
  .col-md-4 .mo-guide-card { position: sticky; top: calc(var(--topbar-h) + 16px); }
}

/* Mobile */
@media (max-width: 767px) {
  .mo-stats-card { display: none; }
  .mo-guide-card.is-collapsed .mo-guide-body { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   DRIP-FEED / SUBSCRIPTIONS PAGE
   Reuses: .nav-pills, .well, .table, .pagination, .s-* chips
   New: bulk bar, progress bars, link truncation, empty state
──────────────────────────────────────────────────────────────── */

/* Pills row spacing */
.df-pills { margin-bottom: 14px !important; }

/* Table wrapper — horizontal scroll on mobile */
.df-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Checkbox column */
.df-col-check {
  width: 36px !important;
  padding-right: 4px !important;
  text-align: center !important;
}
.df-checkbox {
  width: 15px; height: 15px;
  accent-color: var(--blue);
  cursor: pointer;
  vertical-align: middle;
}

/* ID badge */
.df-id-badge {
  display: inline-block;
  background: var(--border-l);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

/* Link column — truncated */
.df-col-link { max-width: 180px; }
.df-link-cell {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--blue);
}

/* Service column — wraps */
.df-col-service {
  min-width: 140px;
  max-width: 220px;
  white-space: normal !important;
  line-height: 1.4;
  font-size: 13px;
}

/* Runs progress */
.df-runs { min-width: 90px; }
.df-runs__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: 4px;
}
.df-runs__link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.df-runs__link:hover { text-decoration: underline; }
.df-runs__sep { color: var(--text-4); }
.df-runs__bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.df-runs__bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width .3s;
  min-width: 4px;
}

/* Row selected state */
.df-row.is-selected > td { background: var(--blue-bg) !important; }

/* ── Bulk action bar ── */
.df-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r);
  padding: 10px 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  animation: hqDropIn .2s var(--ease);
}
.df-bulk-bar__left { flex: 1; }
.df-bulk-bar__count { font-size: 13px; font-weight: 700; }
.df-bulk-bar__actions { display: flex; gap: 8px; align-items: center; }

.df-bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  font-size: 13px; font-weight: 700;
  color: #fff; cursor: pointer;
  font-family: var(--font);
  transition: background .13s;
}
.df-bulk-btn:hover { background: rgba(255,255,255,.3); }
.df-bulk-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,.2);
  font-weight: 500;
}
.df-bulk-btn--ghost:hover { background: rgba(255,255,255,.1); }

.df-copy-toast {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.2);
  border-radius: 99px;
  padding: 3px 10px;
  animation: hqDropIn .15s var(--ease);
}

/* ── Empty state ── */
.df-empty {
  text-align: center !important;
  padding: 48px 20px !important;
}
.df-empty__icon {
  width: 56px; height: 56px;
  background: var(--border-l);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--text-4);
}
.df-empty__title {
  font-size: 15px; font-weight: 700;
  color: var(--text-1); margin-bottom: 6px;
}
.df-empty__sub {
  font-size: 13.5px; color: var(--text-3);
  line-height: 1.6;
}
.df-empty__sub a { color: var(--blue); font-weight: 600; }

/* ────────────────────────────────────────────────────────────────
   DRIP-FEED PAGE
   Reuses: .nav-pills, .table, .pagination, .s-* chips (all global)
   New: progress bar, truncation, empty state, responsive hide cols
──────────────────────────────────────────────────────────────── */

/* Extra top spacing for pill row */
.df-pills { margin-bottom: 16px !important; }

/* Horizontal scroll wrapper for table on mobile */
.df-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ID badge */
.df-id-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--border-l);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  white-space: nowrap;
}

/* Date cell */
.df-date {
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Link + service cells — full text, let table scroll horizontally */
.link { word-break: break-all; font-size: 13px; }

/* Runs column */
.df-runs { min-width: 80px; }
.df-runs__label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.df-runs__link {
  color: var(--blue) !important;
  font-weight: 700;
  text-decoration: none !important;
}
.df-runs__link:hover { text-decoration: underline !important; }
.df-runs__sep   { color: var(--text-4); font-weight: 400; }
.df-runs__total { color: var(--text-3); font-weight: 500; }

/* Progress bar */
.df-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.df-progress__bar {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width .3s ease;
  min-width: 2px;
}

/* Empty state */
.df-empty {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--text-4);
}
.df-empty svg {
  color: var(--border);
  margin-bottom: 14px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.df-empty__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}
.df-empty__sub {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.6;
}
.df-empty__sub a {
  color: var(--blue);
  font-weight: 600;
}

/* Responsive column visibility */
@media (max-width: 991px) {
  .df-hide-md { display: none !important; }
}
@media (max-width: 767px) {
  .df-hide-sm { display: none !important; }
}

/* ── Drip-feed search alignment fix ── */
.df-pills { 
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
.df-pills > li.pull-right.search {
  float: none !important;
  margin-left: auto !important;
}
.df-pills > li.pull-right.search .input-group {
  width: 220px;
}
@media (max-width: 600px) {
  .df-pills > li.pull-right.search {
    width: 100%;
    margin-left: 0 !important;
  }
  .df-pills > li.pull-right.search .input-group {
    width: 100%;
  }
}

/* ────────────────────────────────────────────────────────────────
   SERVICES PAGE
   Reuses: .nav-pills, .table, .hq-modal, .dropdown-menu (global)
──────────────────────────────────────────────────────────────── */

/* Filter bar */
.svc-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
.svc-pills > li { float: none !important; margin: 0 !important; }
.svc-pills > li.pull-right.search { margin-left: auto !important; float: none !important; }
.svc-pills > li.pull-right.search .input-group { width: 220px; }

/* Filter buttons — match our design but keep Bootstrap dropdown working */
.svc-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: var(--r) !important;
  padding: 7px 12px !important;
  transition: all .13s !important;
}
.svc-filter-btn:hover,
.svc-filter-btn:focus {
  background: var(--blue-bg) !important;
  border-color: var(--blue-br) !important;
  color: var(--blue-d) !important;
}
.open .svc-filter-btn {
  background: var(--blue-bg) !important;
  border-color: var(--blue) !important;
  color: var(--blue-d) !important;
}

/* Rate column /1k label */
.svc-per-k {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-4);
  margin-left: 2px;
}

/* Rate value — prominent */
.svc-rate-cell {
  font-weight: 800 !important;
  color: var(--blue) !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
}

/* ID pill */
.svc-id-pill {
  display: inline-block;
  background: var(--border-l);
  color: var(--text-3);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Category header row */
.svc-cat-row td {
  background: var(--border-l) !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-2) !important;
  border-top: 2px solid var(--border) !important;
  letter-spacing: .3px;
}

/* Speed badge — 5-tier colour system */
.svc-speed-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  background: var(--border-l); color: var(--text-3);
  white-space: nowrap;
}
/* Dot indicator */
.svc-speed-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: .7;
}
/* ≤1h  — Instant */
.svc-speed-badge.spd-1 { background: #dcfce7; color: #15803d; }
/* ≤6h  — Fast */
.svc-speed-badge.spd-2 { background: #bbf7d0; color: #166534; }
/* ≤24h — Normal */
.svc-speed-badge.spd-3 { background: #fef9c3; color: #a16207; }
/* ≤48h — Slow */
.svc-speed-badge.spd-4 { background: #ffedd5; color: #c2410c; }
/* >48h  — Very Slow */
.svc-speed-badge.spd-5 { background: #fee2e2; color: #b91c1c; }
/* No time data */
.svc-speed-badge.spd-0 { background: var(--border-l); color: var(--text-4); }

/* Min/Max combined cell */
.svc-minmax { font-size: 13px; white-space: nowrap; }
.svc-minmax-sep { color: var(--text-4); margin: 0 3px; font-weight: 400; }

/* Order button — icon only, compact */
.svc-order-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--blue);
  color: #fff !important;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  transition: background .13s;
  flex-shrink: 0;
}
.svc-order-btn:hover { background: var(--blue-d); }

/* Favorites star */
.svc-star { font-size: 14px !important; color: var(--text-4); cursor: pointer; }
.favorite-active .svc-star,
.fas.fa-star.svc-star { color: #f59e0b !important; }

/* Action buttons cell */
.svc-actions { 
  white-space: nowrap !important; 
  text-align: right !important; 
  padding: 8px 14px 8px 8px !important;
  width: 1% !important; /* shrink to content */
  vertical-align: middle !important;
}
.svc-btn-group { 
  display: inline-flex !important; 
  align-items: center !important; 
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Info / Read more button */
.svc-read-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--border-l);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: all .13s;
  flex-shrink: 0;
}
.svc-read-btn:hover {
  background: var(--blue-bg);
  border-color: var(--blue-br);
  color: var(--blue);
}



/* Modal close button */
.svc-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); transition: all .13s; flex-shrink: 0;
}
.svc-modal-close:hover { background: var(--border-l); color: var(--text-1); }

/* Preserve line breaks in description modal */
#svc-modal-desc { white-space: pre-wrap; word-break: break-word; }
#svc-modal-desc p { white-space: pre-wrap; margin-bottom: 10px; }

/* Empty state */
.svc-empty {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--text-4);
}
.svc-empty svg { color: var(--border); margin: 0 auto 14px; display: block; }
.svc-empty__title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.svc-empty__sub   { font-size: 13.5px; color: var(--text-3); }

/* Table scroll on mobile */
.svc-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Ensure parent never clips the scrollable table */
  min-width: 0;
}
/* Table itself must not force width beyond viewport */
#service-table {
  min-width: 0;
  width: 100%;
}

/* Responsive column visibility */
@media (max-width: 767px) {
  .svc-hide-xs { display: none !important; }
  .svc-pills { flex-wrap: wrap !important; }
  .svc-pills > li.svc-search-li {
    width: 100% !important;
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  .svc-pills > li.svc-search-li .input-group { width: 100% !important; }
  /* Prevent filter buttons from overflowing */
  .svc-filter-btn { font-size: 12px !important; padding: 6px 9px !important; }
  /* Actions column compact on mobile */
  .svc-actions { padding-right: 8px !important; }
  .svc-order-btn { width: 30px !important; padding: 0 !important; }
  /* ID pill compact */
  .svc-id-pill { font-size: 10.5px !important; padding: 1px 6px !important; }
}
@media (max-width: 991px) {
  .svc-hide-sm { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   ORDERS PAGE
   Reuses: .nav-pills, .table, .pagination, .s-* chips, .svc-id-pill
──────────────────────────────────────────────────────────────── */

/* Page header */
.ord-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
  padding-right: 2px; /* consistent right alignment with table content */
}
.ord-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Pills row */
.ord-pills {
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; gap: 6px !important; margin-bottom: 16px !important;
}
.ord-pills > li { float: none !important; margin: 0 !important; }
.ord-pills > li.pull-right.search,
.ord-pills > li.ord-search-li {
  margin-left: auto !important;
  float: none !important;
}
.ord-pills > li.pull-right.search .input-group,
.ord-pills > li.ord-search-li .input-group { width: 220px; }

/* Header buttons */
.ord-copy-btn, .ord-report-btn, .ord-new-btn {
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; font-size: 13px !important; font-weight: 600 !important;
  border-radius: var(--r) !important; padding: 7px 14px !important; white-space: nowrap;
}
.ord-new-btn { font-weight: 700 !important; }
.ord-copy-btn.has-selection { background: var(--green-bg) !important; border-color: var(--green) !important; color: var(--green) !important; }

/* Table */
.ord-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Column widths — proportioned by priority ── */
.ord-col-check  { width: 36px !important; padding: 12px 8px !important; }
.ord-col-id     { width: 110px !important; white-space: nowrap !important; }
.ord-col-date   { width: 90px !important; }
.ord-col-service{ min-width: 160px !important; } /* gets remaining space */
.ord-col-link   { width: 160px !important; }
.ord-col-charge { width: 70px !important; white-space: nowrap !important; }
.ord-col-qty    { width: 70px !important; white-space: nowrap !important; }
.ord-col-status { width: 140px !important; }
.ord-col-actions{ width: 110px !important; white-space: nowrap !important; }

/* Checkbox */
.ord-check { width: 15px; height: 15px; cursor: pointer; accent-color: var(--blue); display: block; margin: 0 auto; }

/* Selected row */
.ord-row.is-selected > td { background: var(--blue-bg) !important; }

/* ID cell */
.ord-id-cell { display: flex; align-items: center; gap: 5px; }
.ord-row-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: none;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-4); cursor: pointer; transition: all .13s;
  padding: 0; flex-shrink: 0; opacity: 0;
}
tr:hover .ord-row-copy-btn { opacity: 1; }
.ord-row-copy-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.ord-row-copy-btn.copied { border-color: var(--green); color: var(--green); background: var(--green-bg); opacity: 1; }

/* Date — two lines */
.ord-date-cell { display: flex; flex-direction: column; gap: 1px; }
.ord-date-day  { font-size: 12.5px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.ord-date-time { font-size: 11px; color: var(--text-4); white-space: nowrap; }

/* Link cell */
.ord-link-wrap { display: flex; align-items: flex-start; gap: 5px; }
.ord-link-text { font-size: 12.5px; color: var(--text-2); word-break: break-all; line-height: 1.4; }
.ord-details-link {
  color: var(--text-3) !important; text-decoration: none !important;
  transition: color .13s; flex-shrink: 0; margin-top: 1px;
}
.ord-details-link:hover { color: var(--blue) !important; }

/* Status cell */
.ord-status-wrap { display: flex; flex-direction: column; gap: 5px; }
.ord-chip-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ord-pct { font-style: normal; font-size: 10px; opacity: .8; }

/* Progress bar */
.ord-bar {
  height: 3px; background: var(--border); border-radius: 2px;
  overflow: hidden; width: 100%; max-width: 110px;
}
.ord-bar__fill {
  height: 100%; background: var(--blue); border-radius: 2px;
  transition: width .3s ease; min-width: 2px;
}
.ord-bar__fill--partial { background: #c2410c; }

/* Cancel reason */
.ord-cancel-reason { color: var(--text-4); cursor: help; }

/* Action cell */
.ord-actions { display: flex; gap: 6px; align-items: center; }
.ord-refilling-label, .ord-cancel-requested { font-size: 12px; color: var(--text-3); font-style: italic; }

/* Empty state */
.ord-empty { text-align: center !important; padding: 48px 20px !important; }
.ord-empty svg { color: var(--border); margin: 0 auto 14px; display: block; }
.ord-empty__title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.ord-empty__sub   { font-size: 13.5px; color: var(--text-3); line-height: 1.6; }
.ord-empty__sub a { color: var(--blue); font-weight: 600; }

/* Responsive */
@media (max-width: 1400px) { .ord-hide-lg { display: none !important; } }
@media (max-width: 1100px) { .ord-hide-md { display: none !important; } }
@media (max-width: 767px)  {
  .ord-hide-sm { display: none !important; }
  .ord-header  { flex-direction: column; }
  .ord-header-actions { width: 100%; justify-content: flex-end; }
  .ord-pills > li.ord-search-li { width: 100%; margin-left: 0 !important; }
  .ord-pills > li.ord-search-li .input-group { width: 100%; }
}



/* ────────────────────────────────────────────────────────────────
   SUBSCRIPTIONS PAGE
   Reuses: .ord-pills, .ord-header, .ord-new-btn, .ord-date-cell,
           .ord-cancel-reason, .ord-empty, .df-progress, .s-* chips,
           .svc-id-pill — zero duplication.
──────────────────────────────────────────────────────────────── */

.subs-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Column widths */
.subs-col-id      { width: 80px !important; }
.subs-col-user    { min-width: 120px !important; font-size: 13px !important; word-break: break-all; }
.subs-col-qty     { width: 80px !important; white-space: nowrap !important; }
.subs-col-posts   { width: 100px !important; }
.subs-col-delay   { width: 80px !important; font-size: 13px !important; }
.subs-col-service { min-width: 160px !important; font-size: 13px !important; }
.subs-col-status  { width: 110px !important; }
.subs-col-date    { width: 90px !important; }
.subs-col-actions { width: 60px !important; white-space: nowrap !important; }

/* Progress cell in posts columns */
.subs-prog-cell { display: flex; flex-direction: column; gap: 4px; min-width: 70px; }
.subs-prog-label {
  display: flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600;
}
.subs-count-link { color: var(--blue) !important; font-weight: 700; text-decoration: none !important; }
.subs-count-link:hover { text-decoration: underline !important; }
.subs-prog-sep   { color: var(--text-4); font-weight: 400; }
.subs-prog-total { color: var(--text-3); font-weight: 500; }

/* Action icon buttons */
.subs-actions { display: flex; gap: 5px; align-items: center; }
.subs-act-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  transition: all .13s; flex-shrink: 0;
  border: 1.5px solid;
}
.subs-act-btn--cancel {
  color: var(--red); border-color: #fecaca; background: var(--red-bg);
}
.subs-act-btn--cancel:hover { background: #fee2e2; border-color: var(--red); color: var(--red) !important; }

.subs-act-btn--resume {
  color: var(--green); border-color: var(--green-br); background: var(--green-bg);
}
.subs-act-btn--resume:hover { background: #dcfce7; border-color: var(--green); color: var(--green) !important; }

.subs-act-btn--reorder {
  color: var(--blue); border-color: var(--blue-br); background: var(--blue-bg);
}
.subs-act-btn--reorder:hover { background: var(--blue-br); border-color: var(--blue); color: var(--blue) !important; }

/* Responsive hide breakpoints
   xl = hide created/updated on tablet portrait and below
   lg = hide expiry + delay on small tablet and below
   md = hide qty/old_posts on mobile only */
@media (max-width: 991px)  { .subs-hide-xl { display: none !important; } }
@media (max-width: 767px)  { .subs-hide-lg { display: none !important; } }
@media (max-width: 575px)  { .subs-hide-md { display: none !important; } }

/* ────────────────────────────────────────────────────────────────
   ADD FUNDS PAGE
──────────────────────────────────────────────────────────────── */
.af-wrap { max-width: 960px; margin: 0 auto; padding-bottom: 40px; }

/* Header */
.af-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.af-balance-display {
  display: flex; flex-direction: column; align-items: flex-end;
  background: var(--blue-bg); border: 1.5px solid var(--blue-br);
  border-radius: var(--r-lg); padding: 10px 18px;
}
.af-balance-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-4); }
.af-balance-val { font-size: 22px; font-weight: 800; color: var(--blue); letter-spacing: -.5px; }

/* Alert */
.af-alert { margin-bottom: 20px; }

/* Two-column grid */
.af-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
.af-form-col .well { margin-bottom: 0; }
.af-info-col { position: sticky; top: calc(var(--topbar-h) + 16px); }

/* Section label */
.af-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-3);
  margin-bottom: 14px;
}
.af-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}

/* ── Payment method tabs ── */
.af-tabs {
  display: flex;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  margin-bottom: 0;
}
.af-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  background: var(--surface);
  border: none;
  border-right: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
  position: relative;
  text-align: left;
}
.af-tab:last-child { border-right: none; }
.af-tab:hover { background: var(--border-l); }

/* Active indicator line at top */
.af-tab--active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0;
}
.af-tab--active.af-tab--crypto::before { background: #f59e0b; }
.af-tab--active.af-tab--card::before   { background: var(--blue); }
.af-tab--active.af-tab--upi::before    { background: #7c3aed; }
.af-tab--active.af-tab--other::before  { background: var(--blue); }

/* Active background tint */
.af-tab--active.af-tab--crypto { background: #fffbeb; }
.af-tab--active.af-tab--card   { background: var(--blue-bg); }
.af-tab--active.af-tab--upi    { background: #f5f3ff; }
.af-tab--active.af-tab--other  { background: var(--blue-bg); }

/* Icon colour */
.af-tab__icon { flex-shrink: 0; transition: color .15s; color: var(--text-4); }
.af-tab--active.af-tab--crypto .af-tab__icon { color: #f59e0b; }
.af-tab--active.af-tab--card   .af-tab__icon { color: var(--blue); }
.af-tab--active.af-tab--upi    .af-tab__icon { color: #7c3aed; }

/* Label */
.af-tab__label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.af-tab__name  { font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.af-tab__hint  { font-size: 11px; color: var(--text-4); white-space: nowrap; }
.af-tab--active .af-tab__name { color: var(--text-1); }
.af-tab--active.af-tab--crypto .af-tab__hint { color: #92400e; }
.af-tab--active.af-tab--card   .af-tab__hint { color: var(--blue); }
.af-tab--active.af-tab--upi    .af-tab__hint { color: #7c3aed; }

/* Bonus badge on crypto tab */
.af-tab__badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; padding: 2px 5px; border-radius: 4px;
}
.af-tab__badge--bonus { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }

/* Tab content */
.af-tab-body {
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 22px 20px;
  margin-bottom: 0;
}
.af-tab-panel { animation: hqDropIn .15s ease; }

/* Crypto step number — orange */
.af-step-num--crypto { background: #f59e0b; }

/* Crypto pay button — orange */
.af-pay-btn--crypto {
  background: #f59e0b !important;
  box-shadow: 0 4px 14px rgba(245,158,11,.3) !important;
}
.af-pay-btn--crypto:hover { background: #d97706 !important; }

/* UPI portal CTA — purple */
.af-portal-cta--upi { background: #7c3aed; box-shadow: 0 4px 12px rgba(124,58,237,.2); }
.af-portal-cta--upi:hover { background: #6d28d9; }
.af-portal-cta--card { background: var(--blue); box-shadow: 0 4px 12px rgba(37,99,235,.2); }
.af-portal-cta--card:hover { background: var(--blue-d); }

/* UPI step number — purple */
.af-portal-step__num--upi { background: #f5f3ff; color: #7c3aed; }

/* Mobile tabs */
@media (max-width: 600px) {
  .af-tab { padding: 12px 8px; gap: 7px; }
  .af-tab__hint { display: none; }
  .af-tab__name { font-size: 12px; }
  .af-tab__badge { display: none; }
}

/* ── Bonus strip ── */
.af-bonus-strip {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.af-bonus-strip__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.af-bonus-badge {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; background: #4f46e5; color: #fff;
  padding: 2px 8px; border-radius: 4px;
}
.af-bonus-meta { font-size: 12px; color: var(--text-4); font-weight: 600; }
.af-bonus-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.af-tier {
  display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 8px; font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.af-tier__amt { color: var(--text-3); font-weight: 600; }
.af-tier__pct { color: var(--text-1); font-weight: 800; }
.af-tier--best { background: #ecfdf5; border-color: #10b981; }
.af-tier--best .af-tier__pct { color: #10b981; }
.af-tier__best {
  background: #10b981; color: #fff; font-size: 9px; font-weight: 900;
  padding: 1px 5px; border-radius: 4px; text-transform: uppercase;
}
.af-tier--blue   { background: #f0f9ff; border-color: #bae6fd; }
.af-tier--blue .af-tier__pct { color: #0369a1; }
.af-tier--purple { background: #f5f3ff; border-color: #ddd6fe; }
.af-tier--purple .af-tier__pct { color: #6d28d9; }
.af-tier--gold   { background: #fffbeb; border-color: #fde68a; }
.af-tier--gold .af-tier__pct { color: #92400e; }

/* ── Amount input ── */
.af-presets {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.af-preset {
  padding: 5px 14px; border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .13s; font-family: var(--font);
}
.af-preset:hover { border-color: var(--blue-br); background: var(--blue-bg); color: var(--blue); }
.af-preset.af-preset--active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue-d); }

.af-amount-input-wrap {
  position: relative; display: flex; align-items: center;
}
.af-currency-symbol {
  position: absolute; left: 14px;
  font-size: 16px; font-weight: 700; color: var(--text-3);
  pointer-events: none;
}
.af-amount-input {
  padding-left: 30px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  height: 52px !important;
  border-radius: var(--r) !important;
}
.af-amount-input:focus { border-color: var(--blue) !important; }

/* Pay button */
.af-pay-btn {
  width: 100% !important; margin-top: 16px !important;
  padding: 14px !important; font-size: 15px !important;
  font-weight: 700 !important; justify-content: center !important;
  gap: 8px !important; border-radius: var(--r-lg) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.3) !important;
}

/* ── Portal section (card/paytm instructions) ── */
.af-portal-card {
  text-align: center;
  padding: 8px 0;
}
.af-portal-icon { font-size: 36px; margin-bottom: 10px; }
.af-portal-title { font-size: 18px; font-weight: 800; color: var(--text-1); margin: 0 0 4px; }
.af-portal-sub { font-size: 13.5px; color: var(--text-3); margin: 0 0 20px; }
.af-portal-steps { text-align: left; margin-bottom: 20px; }
.af-portal-step {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 16px;
}
.af-portal-step:last-child { margin-bottom: 0; }
.af-portal-step__num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--blue-bg); color: var(--blue);
}
.af-portal-step__num--done { background: #ecfdf5; color: #10b981; }
.af-portal-step strong { font-size: 14px; color: var(--text-1); display: block; margin-bottom: 3px; }
.af-portal-step p { font-size: 13px; color: var(--text-3); margin: 0; line-height: 1.5; }
.af-portal-highlight { color: #10b981; font-weight: 700; }
.af-portal-cta {
  display: block; width: 100%;
  background: var(--blue); color: #fff !important;
  text-align: center; padding: 14px;
  border-radius: var(--r-lg); font-size: 15px; font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.2);
  margin-bottom: 16px; transition: background .15s;
}
.af-portal-cta:hover { background: var(--blue-d); }
.af-portal-details { text-align: left; }
.af-portal-details summary {
  font-size: 12.5px; color: var(--text-4); font-weight: 600;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  outline: none;
}
.af-portal-details__body {
  margin-top: 10px; font-size: 12.5px; color: var(--text-3);
  line-height: 1.7; padding: 12px 14px;
  background: var(--border-l); border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.af-portal-details__body a { color: var(--blue); font-weight: 700; }

/* ── Trust panel ── */
.af-trust-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  box-shadow: var(--sh-sm); margin-bottom: 14px;
}
.af-trust-card__title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4); margin-bottom: 14px;
}
.af-trust-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.af-trust-item:last-child { margin-bottom: 0; }
.af-trust-item__icon {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.af-trust-item__icon--green  { background: #dcfce7; color: #16a34a; }
.af-trust-item__icon--blue   { background: var(--blue-bg); color: var(--blue); }
.af-trust-item__icon--purple { background: #f5f3ff; color: #7c3aed; }
.af-trust-item__icon--orange { background: #fff7ed; color: #ea580c; }
.af-trust-item__title { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.af-trust-item__sub   { font-size: 12px; color: var(--text-3); line-height: 1.4; }

/* Admin text block */
.af-admin-text { font-size: 13.5px; line-height: 1.7; }

/* History section */
.af-history-wrap { max-width: 960px; margin: 0 auto 40px; }
.af-history-header { margin-bottom: 14px; }
.af-invoice-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--blue) !important;
  text-decoration: none !important; padding: 4px 10px;
  border: 1.5px solid var(--blue-br); border-radius: var(--r-sm);
  background: var(--blue-bg); transition: all .13s;
}
.af-invoice-btn:hover { background: var(--blue-br); }

/* Responsive */
@media (max-width: 768px) {
  .af-grid { grid-template-columns: 1fr; }
  .af-info-col { position: static; order: -1; }
  .af-trust-card { display: none; } /* hide trust panel on mobile — saves space */
  .af-method-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .af-method-cards { grid-template-columns: repeat(2, 1fr); }
  .af-balance-display { align-items: flex-start; }
}

/* ────────────────────────────────────────────────────────────────
   REFUNDS PAGE
   Reuses: .ord-pills, .ord-header, .ord-empty, .ord-date-cell,
           .svc-id-pill, .s-* chips, .table, .pagination, .well
   New: 2 tiny rules only
──────────────────────────────────────────────────────────────── */

/* Order ID link — remove underline, pill handles the style */
.rfd-order-link { text-decoration: none !important; }
.rfd-order-link:hover .svc-id-pill {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-bg);
}

/* Amount — green to signal money returned */
.rfd-amount-val {
  font-weight: 700;
  color: var(--green);
  font-size: 13.5px;
}

/* ────────────────────────────────────────────────────────────────
   TICKETS PAGE
   Dashboard-consistent design: form + help sidebar.
   Matches the established white card + sidebar pattern.
──────────────────────────────────────────────────────────────── */

/* Telegram button in header */
.tkt-tg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #eff6ff; border: 1.5px solid #bfdbfe;
  border-radius: var(--r); padding: 7px 14px;
  font-size: 13px; font-weight: 700; color: #1d4ed8 !important;
  text-decoration: none !important; transition: all .15s; white-space: nowrap;
}
.tkt-tg-btn:hover { background: #dbeafe; border-color: #93c5fd; }
.tkt-tg-btn svg { color: #229ED9; }

/* Two-column grid */
.tkt-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}
.tkt-form-col .well { margin-bottom: 0; }
.tkt-help-col { position: sticky; top: calc(var(--topbar-h) + 16px); }

/* Form head */
.tkt-form-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-2);
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border-l);
}

/* Textarea */
.tkt-textarea { resize: vertical !important; min-height: 140px !important; }

/* Submit */
.tkt-submit-btn {
  width: 100% !important; justify-content: center !important;
  gap: 8px !important; padding: 12px !important;
  font-size: 14px !important; margin-top: 4px !important;
}

/* Error bar — force hidden until panel JS explicitly shows it */
.ticket-danger { display: none !important; }
.ticket-danger.show,
.ticket-danger[style*="display: block"],
.ticket-danger[style*="display:block"],
.ticket-danger[style*="display: flex"],
.ticket-danger[style*="display:flex"] { display: flex !important; }

/* ── Help sidebar ── */
.tkt-help-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  box-shadow: var(--sh-sm); margin-bottom: 12px;
}
.tkt-help-card__title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-4); margin-bottom: 14px;
}
.tkt-help-item { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }
.tkt-help-item:last-child { margin-bottom: 0; }
.tkt-help-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.tkt-help-icon--blue   { background: var(--blue-bg); color: var(--blue); }
.tkt-help-icon--green  { background: #dcfce7; color: #16a34a; }
.tkt-help-icon--orange { background: #fff7ed; color: #ea580c; }
.tkt-help-item__title { font-size: 12.5px; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.tkt-help-item__sub   { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* Telegram card */
.tkt-tg-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  border-radius: var(--r-lg); padding: 16px;
  text-decoration: none !important;
  transition: opacity .15s; cursor: pointer;
}
.tkt-tg-card:hover { opacity: .92; }
.tkt-tg-card__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.tkt-tg-card__title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.tkt-tg-card__sub   { font-size: 11.5px; color: rgba(255,255,255,.75); margin-bottom: 4px; }
.tkt-tg-card__handle { font-size: 12px; font-weight: 800; color: #fff; }

/* History */
.tkt-history-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.tkt-history-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.tkt-search-form { flex-shrink: 0; }
.tkt-search-form .input-group { width: 220px; }

/* Unread */
.tkt-row--new > td { background: var(--blue-bg) !important; }
.tkt-subject-wrap { display: flex; align-items: center; gap: 7px; }
.tkt-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.tkt-subject-link { color: var(--text-2) !important; text-decoration: none !important; font-size: 13.5px; transition: color .13s; }
.tkt-subject-link:hover { color: var(--blue) !important; }
.tkt-subject-link--new { color: var(--text-1) !important; font-weight: 700; }

/* Responsive */
@media (max-width: 900px) {
  .tkt-grid { grid-template-columns: 1fr; }
  .tkt-help-col { position: static; }
  .tkt-tg-card { flex-direction: row; }
}
@media (max-width: 600px) {
  .tkt-history-header { flex-direction: column; align-items: flex-start; }
  .tkt-search-form, .tkt-search-form .input-group { width: 100%; }
}

/* ────────────────────────────────────────────────────────────────
   VIEW TICKET PAGE
   Reuses: .tkt-help-col, .tkt-help-card, .tkt-help-item, .tkt-help-icon,
           .tkt-tg-card, .tkt-tg-btn, .tkt-submit-btn, .tkt-textarea,
           .ord-header — almost zero new CSS needed.
──────────────────────────────────────────────────────────────── */

/* Back link */
.vt-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--text-3) !important;
  text-decoration: none !important; margin-bottom: 4px;
  transition: color .13s;
}
.vt-back:hover { color: var(--blue) !important; }

/* Two-column layout — reuses tkt-help-col for the sidebar */
.vt-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}
.vt-main-col { min-width: 0; }

/* Thread card */
.vt-thread {
  padding: 20px !important;
  margin-bottom: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Message bubbles ── */
.vt-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}
.vt-msg--user    { align-self: flex-end; align-items: flex-end; }
.vt-msg--support { align-self: flex-start; align-items: flex-start; flex-direction: row; gap: 10px; }

/* Support avatar */
.vt-support-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--border-l); border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-4); margin-top: 2px;
}

/* Bubbles */
.vt-bubble {
  border-radius: var(--r-lg);
  padding: 12px 16px;
  margin-bottom: 5px;
  word-break: break-word;
}
.vt-bubble--user {
  background: var(--blue);
  border-bottom-right-radius: 4px;
}
.vt-bubble--support {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-bottom-left-radius: 4px;
  box-shadow: var(--sh-sm);
}

.vt-bubble__text {
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.vt-bubble--user .vt-bubble__text    { color: #fff; }
.vt-bubble--support .vt-bubble__text { color: var(--text-1); }

/* File attachments */
.vt-files { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.vt-file-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  text-decoration: none !important; transition: all .13s;
  background: rgba(255,255,255,.2); color: rgba(255,255,255,.9) !important;
}
.vt-file-link:hover { background: rgba(255,255,255,.3); }
.vt-file-link--support {
  background: var(--border-l); color: var(--text-2) !important;
}
.vt-file-link--support:hover { background: var(--blue-bg); color: var(--blue) !important; }

/* Meta: author + time */
.vt-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
}
.vt-meta--right { justify-content: flex-end; }
.vt-meta--left  { justify-content: flex-start; padding-left: 2px; }
.vt-meta strong { color: var(--text-2); font-weight: 700; }
.vt-time        { color: var(--text-4); }

/* Reply card */
.vt-reply-card { margin-bottom: 0 !important; }
.vt-reply-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-2);
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-l);
}

/* Responsive */
@media (max-width: 900px) {
  .vt-grid { grid-template-columns: 1fr; }
  .tkt-help-col { position: static; }
  .vt-msg { max-width: 95%; }
}

/* ────────────────────────────────────────────────────────────────
   VIEW TICKET PAGE
   Reuses: .tkt-grid, .tkt-form-col, .tkt-help-col, .tkt-help-card,
           .tkt-help-item, .tkt-help-icon, .tkt-tg-card, .tkt-tg-btn,
           .tkt-submit-btn, .tkt-textarea, .ord-header — all from tickets
   New: chat bubbles, back link, reply section divider
──────────────────────────────────────────────────────────────── */

/* Back link */
.vt-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--text-3) !important;
  text-decoration: none !important; margin-bottom: 2px;
  transition: color .13s;
}
.vt-back:hover { color: var(--blue) !important; }

/* Message thread */
.vt-thread {
  display: flex; flex-direction: column;
  gap: 20px;
  margin-bottom: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-l);
}

/* ── Base message row ── */
.vt-msg { display: flex; flex-direction: column; max-width: 85%; }
.vt-msg--user    { align-self: flex-end; align-items: flex-end; }
.vt-msg--support { align-self: flex-start; align-items: flex-start; flex-direction: row; gap: 10px; }

/* Support avatar */
.vt-support-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--blue-bg); color: var(--blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
  border: 1.5px solid var(--blue-br);
}
.vt-msg__inner { display: flex; flex-direction: column; gap: 5px; }

/* ── Bubbles ── */
.vt-bubble {
  padding: 12px 16px;
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
}

/* User bubble — blue */
.vt-bubble--user {
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Support bubble — light grey */
.vt-bubble--support {
  background: var(--border-l);
  color: var(--text-1);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}

/* Message text — preserve line breaks from backend */
.vt-bubble__text { white-space: pre-wrap; }

/* ── Attachments ── */
.vt-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.vt-bubble--support .vt-attachments { border-top-color: var(--border); }

.vt-attachment {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 99px;
  text-decoration: none !important;
  transition: all .13s;
}
.vt-attachment--user {
  background: rgba(255,255,255,.2); color: #fff !important;
  border: 1px solid rgba(255,255,255,.3);
}
.vt-attachment--user:hover { background: rgba(255,255,255,.3); }
.vt-attachment--support {
  background: var(--surface); color: var(--blue) !important;
  border: 1px solid var(--blue-br);
}
.vt-attachment--support:hover { background: var(--blue-bg); }

/* ── Meta (author + time) ── */
.vt-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-4);
  margin-top: 5px; padding: 0 4px;
}
.vt-meta strong { color: var(--text-3); font-weight: 600; }
.vt-meta--right { justify-content: flex-end; }
.vt-meta--left  { justify-content: flex-start; }

/* ── Reply section ── */
.vt-reply-wrap {
  margin-top: 24px;
  padding-top: 20px;
}
.vt-reply-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 16px;
}

/* Mobile */
@media (max-width: 767px) {
  .vt-msg { max-width: 92%; }
}

/* ────────────────────────────────────────────────────────────────
   API PAGE
   Reuses: .ord-header, .well, .table, .tkt-help-card, .tkt-help-item,
           .tkt-help-icon, .tkt-tg-card, .form-control — minimal new CSS
──────────────────────────────────────────────────────────────── */

/* Two-column grid */
.api-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}
.api-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}

/* ── Connection details card ── */
.api-info-card { margin-bottom: 20px; }
.api-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-4); margin-bottom: 14px;
}
.api-info-table { display: flex; flex-direction: column; gap: 0; }
.api-info-row {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-l);
  flex-wrap: wrap;
}
.api-info-row:last-child { border-bottom: none; }
.api-info-label {
  width: 140px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
}
.api-info-value {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; flex-wrap: wrap;
}

/* Badges */
.api-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.api-badge--post { background: #dcfce7; color: #15803d; }
.api-badge--json { background: #fef9c3; color: #a16207; }

/* API URL code */
.api-url-code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px; color: var(--blue);
  background: var(--blue-bg); border: 1px solid var(--blue-br);
  padding: 4px 10px; border-radius: var(--r-sm);
  word-break: break-all;
}
.api-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: none; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--text-3); transition: all .13s;
}
.api-copy-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.api-copy-btn.copied { border-color: var(--green); color: var(--green); background: #dcfce7; }
.api-key-link { color: var(--blue); font-weight: 600; font-size: 13px; }

/* ── Method cards ── */
.api-method-card { margin-bottom: 20px; }
.api-method-card:last-child { margin-bottom: 0; }

.api-method-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.api-method-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  background: #dcfce7; color: #15803d;
  flex-shrink: 0;
}
.api-method-title {
  font-size: 16px; font-weight: 700; color: var(--text-1);
  flex: 1;
}
.api-method-action {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-sm);
  background: var(--border-l); color: var(--text-3);
  text-transform: lowercase;
}

/* Type selector */
.api-type-selector { margin-bottom: 16px; }
.api-type-label {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  margin-bottom: 6px; display: block;
  text-transform: uppercase; letter-spacing: .5px;
}
.api-type-select { max-width: 280px; }

/* Params table */
.api-params-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4);
  margin-bottom: 8px;
}
.api-params-table { margin-bottom: 20px !important; }
.api-param-name {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px; color: var(--blue);
  background: var(--blue-bg); padding: 2px 7px;
  border-radius: 4px; white-space: nowrap;
}
.api-param-desc { font-size: 13px; color: var(--text-2); }

/* Example response */
.api-example-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4);
  margin-bottom: 8px;
}
.api-pre-wrap {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
}
.api-pre {
  background: #0f172a;
  color: #94a3b8;
  padding: 16px 18px;
  border-radius: var(--r);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  margin: 0 !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.api-pre-copy {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  color: #64748b; cursor: pointer;
  transition: all .13s; opacity: 0;
}
.api-pre-wrap:hover .api-pre-copy { opacity: 1; }
.api-pre-copy:hover { background: rgba(255,255,255,.2); color: #e2e8f0; }
.api-pre-copy.copied { color: #4ade80; border-color: #4ade80; }

/* Nav card */
.api-nav-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm);
}
.api-nav-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-4);
  padding: 10px 16px; background: var(--border-l);
  border-bottom: 1px solid var(--border);
}
.api-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 13px; color: var(--text-2) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border-l);
  transition: background .12s;
}
.api-nav-item:last-child { border-bottom: none; }
.api-nav-item:hover { background: var(--border-l); color: var(--blue) !important; }
.api-nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
}
.api-nav-item:hover .api-nav-dot { background: var(--blue); }

/* Responsive */
@media (max-width: 900px) {
  .api-grid { grid-template-columns: 1fr; }
  .api-sidebar { position: static; }
}
@media (max-width: 600px) {
  .api-info-label { width: 100%; margin-bottom: 4px; }
  .api-info-row { flex-direction: column; align-items: flex-start; }
}

/* ────────────────────────────────────────────────────────────────
   API PAGE — RESELLER HERO + DOCS
──────────────────────────────────────────────────────────────── */

/* ── Hero section ── */
.api-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 55%, #0f172a 100%);
  border-radius: var(--r-lg);
  padding: 48px 44px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.api-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.api-hero::after {
  content: ''; position: absolute;
  top: -100px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  pointer-events: none;
}

.api-hero__left { position: relative; z-index: 1; }
.api-hero__tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: #818cf8; margin-bottom: 14px;
}
.api-hero__headline {
  font-size: 34px; font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.7px;
  margin: 0 0 16px; font-family: var(--font);
}
.api-hero__headline span { color: #818cf8; }
.api-hero__sub {
  font-size: 14px; color: #94a3b8; line-height: 1.7;
  margin-bottom: 28px; max-width: 380px;
}
.api-hero__stats {
  display: flex; gap: 24px; flex-wrap: wrap;
}
.api-hero__stat-val {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; line-height: 1; margin-bottom: 3px;
}
.api-hero__stat-lbl { font-size: 11.5px; color: #64748b; font-weight: 500; }

/* Use cases — right side of hero */
.api-hero__right { position: relative; z-index: 1; }
.api-use-cases {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 20px;
}
.api-use-cases__title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: rgba(255,255,255,.35);
  margin-bottom: 16px;
}
.api-use-case {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px;
}
.api-use-case:last-child { margin-bottom: 0; }
.api-use-case__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.api-use-case__icon--blue   { background: rgba(37,99,235,.25);  color: #60a5fa; }
.api-use-case__icon--purple { background: rgba(99,102,241,.25); color: #a78bfa; }
.api-use-case__icon--green  { background: rgba(16,185,129,.2);  color: #34d399; }
.api-use-case__icon--orange { background: rgba(234,88,12,.2);   color: #fb923c; }
.api-use-case__title { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 2px; }
.api-use-case__sub   { font-size: 11.5px; color: #64748b; line-height: 1.5; }

/* ── Margin strip ── */
.api-margin-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  margin-bottom: 8px;
  box-shadow: var(--sh-sm);
}
.api-margin-strip__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-3);
}
.api-margin-strip__item strong { color: var(--text-1); }
.api-margin-strip__item svg { color: var(--text-4); flex-shrink: 0; }
.api-margin-strip__item--profit {
  color: var(--green);
}
.api-margin-strip__item--profit strong { color: var(--green); }
.api-margin-strip__item--profit svg { color: var(--green); }
.api-margin-strip__arrow {
  font-size: 16px; color: var(--text-4); flex-shrink: 0;
}

/* ── Docs grid ── */
.api-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}
.api-sidebar { position: sticky; top: calc(var(--topbar-h) + 16px); }

/* Connection details */
.api-info-card { margin-bottom: 0; }
.api-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-4); margin-bottom: 14px;
}
.api-info-table { display: flex; flex-direction: column; gap: 0; }
.api-info-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border-l);
  font-size: 13.5px;
}
.api-info-row:last-child { border-bottom: none; }
.api-info-label { color: var(--text-3); font-weight: 500; flex-shrink: 0; }
.api-info-value { display: flex; align-items: center; gap: 8px; }
.api-url-code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px; color: var(--blue);
  background: var(--blue-bg); padding: 3px 8px;
  border-radius: var(--r-sm); border: 1px solid var(--blue-br);
}
.api-key-link { color: var(--blue); font-weight: 600; font-size: 13px; }
.api-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--border-l); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; transition: all .13s;
  color: var(--text-3);
}
.api-copy-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.api-copy-btn.copied { border-color: var(--green); color: var(--green); background: #dcfce7; }

/* Badges */
.api-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; padding: 3px 8px; border-radius: 5px;
}
.api-badge--post { background: #dbeafe; color: #1d4ed8; }
.api-badge--json { background: #fef9c3; color: #a16207; }

/* Method cards */
.api-method-card { margin-bottom: 0; }
.api-method-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.api-method-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  background: #dbeafe; color: #1d4ed8; padding: 2px 7px;
  border-radius: 4px; letter-spacing: .4px; flex-shrink: 0;
}
.api-method-title {
  font-size: 15px; font-weight: 700; color: var(--text-1); flex: 1;
}
.api-method-action {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; letter-spacing: .4px; flex-shrink: 0;
}
/* Dynamic method colours */
.api-badge--add      { background: #dcfce7; color: #166534; }
.api-badge--status   { background: var(--blue-bg); color: var(--blue); }
.api-badge--services { background: #f5f3ff; color: #6d28d9; }
.api-badge--balance  { background: #fef9c3; color: #a16207; }
.api-badge--refill   { background: #fff7ed; color: #c2410c; }
.api-badge--cancel   { background: #fee2e2; color: #b91c1c; }

/* Service type selector */
.api-type-selector { margin-bottom: 16px; }
.api-type-label {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
  display: block;
}
.api-type-select { max-width: 260px !important; }

/* Params table */
.api-params-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4); margin-bottom: 8px;
}
.api-params-table { margin-bottom: 0 !important; }
.api-param-name {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px; color: var(--blue);
  background: var(--blue-bg); padding: 2px 7px;
  border-radius: 4px; white-space: nowrap;
}
.api-param-desc { font-size: 13px; color: var(--text-2); }

/* Example response */
.api-example-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4);
  margin: 16px 0 8px;
}
.api-pre-wrap { position: relative; }
.api-pre {
  background: #0f172a; color: #94a3b8;
  border-radius: var(--r); padding: 16px;
  font-size: 12.5px; line-height: 1.7;
  overflow-x: auto; margin: 0;
  font-family: 'SFMono-Regular', Consolas, monospace;
  white-space: pre;
  border: none;
}
.api-pre-copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm); cursor: pointer; transition: all .13s;
  color: #64748b;
}
.api-pre-copy:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Nav card */
.api-nav-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
}
.api-nav-title {
  padding: 10px 16px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; color: var(--text-4);
  background: var(--border-l); border-bottom: 1px solid var(--border);
}
.api-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  color: var(--text-2) !important; text-decoration: none !important;
  border-bottom: 1px solid var(--border-l); transition: all .13s;
}
.api-nav-item:last-child { border-bottom: none; }
.api-nav-item:hover { background: var(--blue-bg); color: var(--blue) !important; }
.api-nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); flex-shrink: 0; transition: background .13s;
}
.api-nav-item:hover .api-nav-dot { background: var(--blue); }

/* Reseller CTA (unauthenticated) */
.api-reseller-cta {
  background: var(--blue-bg); border: 1.5px solid var(--blue-br);
  border-radius: var(--r-lg); padding: 16px 18px; margin-top: 14px;
}
.api-reseller-cta__title { font-size: 14px; font-weight: 800; color: var(--blue-d); margin-bottom: 6px; }
.api-reseller-cta__sub   { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* Responsive */
@media (max-width: 900px) {
  .api-hero { grid-template-columns: 1fr; padding: 32px 24px; }
  .api-hero__right { display: none; }
  .api-hero__headline { font-size: 26px; }
  .api-grid { grid-template-columns: 1fr; }
  .api-sidebar { position: static; }
  .api-margin-strip { justify-content: flex-start; }
  .api-margin-strip__arrow { display: none; }
}
@media (max-width: 600px) {
  .api-hero { padding: 24px 20px; }
  .api-hero__stats { gap: 16px; }
}

/* ────────────────────────────────────────────────────────────────
   CHILD PANEL ORDER PAGE
   Reuses: .api-hero pattern, .tkt-grid, .tkt-help-card,
           .tkt-tg-card, .tkt-tg-btn, .well, .form-control
──────────────────────────────────────────────────────────────── */

/* ── Hero ── */
.cp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 55%, #0f172a 100%);
  border-radius: var(--r-lg);
  padding: 48px 44px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.cp-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.cp-hero::after {
  content: ''; position: absolute;
  top: -100px; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cp-hero__left { position: relative; z-index: 1; }
.cp-hero__tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: #818cf8; margin-bottom: 14px;
}
.cp-hero__headline {
  font-size: 34px; font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.7px; margin: 0 0 16px;
  font-family: var(--font);
}
.cp-hero__headline span { color: #818cf8; }
.cp-hero__sub { font-size: 14px; color: #94a3b8; line-height: 1.7; margin-bottom: 28px; }
.cp-hero__cta-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cp-hero__cta {
  display: inline-flex !important; align-items: center !important;
  gap: 8px !important; font-weight: 700 !important;
  padding: 12px 22px !important; border-radius: var(--r-lg) !important;
  font-size: 14px !important;
}
.cp-hero__cta-note { font-size: 12px; color: #64748b; }

/* Stats grid */
.cp-hero__right { position: relative; z-index: 1; display: flex; align-items: center; }
.cp-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
}
.cp-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: 14px 16px;
}
.cp-stat__val {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; line-height: 1; margin-bottom: 4px;
}
.cp-stat__lbl { font-size: 11px; color: #64748b; line-height: 1.4; }

/* ── Rebate strip ── */
.cp-rebate-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 24px;
  margin-bottom: 32px; box-shadow: var(--sh-sm);
}
.cp-rebate-strip__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-3);
}
.cp-rebate-strip__item strong { color: var(--text-1); }
.cp-rebate-strip__item svg { color: var(--text-4); flex-shrink: 0; }
.cp-rebate-strip__item--reward { color: var(--green); }
.cp-rebate-strip__item--reward strong { color: var(--green); }
.cp-rebate-strip__item--reward svg { color: var(--green); }
.cp-rebate-strip__arrow { font-size: 16px; color: var(--text-4); flex-shrink: 0; }

/* ── Section headers ── */
.cp-section { margin-bottom: 36px; }
.cp-section__title {
  font-size: 22px; font-weight: 800; color: var(--text-1);
  letter-spacing: -.4px; margin-bottom: 6px;
}
.cp-section__sub { font-size: 14px; color: var(--text-3); margin-bottom: 20px; }

/* ── Comparison table ── */
.cp-compare {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
}
.cp-compare__header {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--border-l); border-bottom: 2px solid var(--border);
}
.cp-compare__feat-col { padding: 12px 16px; }
.cp-compare__col {
  padding: 12px 16px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; text-align: center;
}
.cp-compare__col--manual  { color: var(--text-4); border-left: 1px solid var(--border); }
.cp-compare__col--partner { color: var(--blue); border-left: 1px solid var(--border); background: var(--blue-bg); }

.cp-compare__row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-l);
}
.cp-compare__row:last-child { border-bottom: none; }
.cp-compare__feat {
  padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text-2);
}
.cp-compare__val {
  padding: 12px 16px; font-size: 12.5px; font-weight: 500;
  text-align: center; border-left: 1px solid var(--border-l);
}
.cp-compare__val--yes     { color: var(--green); background: #f0fdf4; }
.cp-compare__val--no      { color: var(--text-4); }
.cp-compare__val--neutral { color: var(--text-3); }
.cp-compare__row:hover .cp-compare__feat,
.cp-compare__row:hover .cp-compare__val { background-color: #fafbfc; }
.cp-compare__row:hover .cp-compare__val--yes { background: #dcfce7; }

/* ── Features grid ── */
.cp-features {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-bottom: 32px;
}
.cp-feature {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--sh-sm); transition: box-shadow .15s;
}
.cp-feature:hover { box-shadow: var(--sh); }
.cp-feature__icon {
  width: 40px; height: 40px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.cp-feature__icon--blue   { background: var(--blue-bg); color: var(--blue); }
.cp-feature__icon--green  { background: #dcfce7; color: #16a34a; }
.cp-feature__icon--purple { background: #f5f3ff; color: #7c3aed; }
.cp-feature__icon--orange { background: #fff7ed; color: #ea580c; }
.cp-feature__title { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.cp-feature__body  { font-size: 13px; color: var(--text-3); line-height: 1.65; }

/* Admin block */
.cp-admin-block { margin-bottom: 32px; }

/* ── FAQ Accordion ── */
.cp-faq {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
}
.cp-faq__item { border-bottom: 1px solid var(--border); }
.cp-faq__item:last-child { border-bottom: none; }
.cp-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px;
  background: var(--surface); border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-1);
  text-align: left; font-family: var(--font);
  transition: background .13s;
}
.cp-faq__q:hover { background: var(--border-l); }
.cp-faq__item.is-open .cp-faq__q { background: var(--blue-bg); color: var(--blue); }
.cp-faq__caret { flex-shrink: 0; transition: transform .2s; color: var(--text-4); }
.cp-faq__item.is-open .cp-faq__caret { transform: rotate(180deg); color: var(--blue); }
.cp-faq__a {
  display: none; padding: 0 20px 18px;
  font-size: 13.5px; color: var(--text-2); line-height: 1.7;
  background: var(--surface);
}
.cp-faq__item.is-open .cp-faq__a { display: block; }

/* ── Order form section ── */
.cp-form-wrap { margin-top: 8px; }
.cp-form-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.cp-form-header__left { flex: 1; }

/* Step indicators */
.cp-form-step {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.cp-form-step__num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.cp-form-step__label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-3);
}

/* DNS nameserver display */
.cp-dns-alert { padding: 14px 16px !important; }
.cp-dns-alert__title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.cp-ns-list { display: flex; flex-direction: column; gap: 6px; }
.cp-ns-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: rgba(255,255,255,.6);
  border-radius: var(--r-sm); padding: 6px 10px;
}
.cp-ns-item code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px; color: var(--blue-d); font-weight: 600;
}
.cp-ns-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; background: none;
  border: 1.5px solid var(--blue-br); border-radius: var(--r-sm);
  color: var(--blue); cursor: pointer; transition: all .13s; flex-shrink: 0;
}
.cp-ns-copy:hover { background: var(--blue-bg); }
.cp-ns-copy.copied { border-color: var(--green); color: var(--green); background: #dcfce7; }

/* Price field */
.cp-price-input {
  font-weight: 800 !important; color: var(--blue) !important;
  background: var(--blue-bg) !important; border-color: var(--blue-br) !important;
  font-size: 18px !important;
}
.cp-price-note { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 5px; }

/* Submit button */
.cp-submit-btn {
  width: 100% !important; justify-content: center !important;
  gap: 8px !important; padding: 14px !important;
  font-size: 15px !important; font-weight: 700 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.3) !important;
  margin-top: 8px !important;
}

/* Responsive */
@media (max-width: 900px) {
  .cp-hero { grid-template-columns: 1fr; padding: 32px 24px; }
  .cp-hero__right { display: none; }
  .cp-hero__headline { font-size: 26px; }
  .cp-features { grid-template-columns: 1fr; }
  .cp-compare__header,
  .cp-compare__row { grid-template-columns: 1fr 1fr; }
  .cp-compare__feat-col,
  .cp-compare__col--manual,
  .cp-compare__val--no,
  .cp-compare__val--neutral { display: none; }
}
@media (max-width: 600px) {
  .cp-rebate-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cp-rebate-strip__arrow { display: none; }
  .cp-hero { padding: 24px 18px; }
  .cp-form-header { flex-direction: column; align-items: flex-start; }
}

/* ────────────────────────────────────────────────────────────────
   AFFILIATES PAGE
──────────────────────────────────────────────────────────────── */
.aff-admin-block { margin-bottom: 20px; }

/* Referral link card */
.aff-link-card { padding: 18px 20px !important; margin-bottom: 20px !important; }
.aff-link-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.aff-link-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-4);
}
.aff-link-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.aff-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-3);
}
.aff-meta-item strong { color: var(--text-1); }
.aff-meta-item svg { color: var(--text-4); flex-shrink: 0; }

.aff-link-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--border-l); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 10px 14px;
}
.aff-link-url {
  flex: 1; font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px; color: var(--blue); word-break: break-all;
  background: none; border: none; padding: 0;
}
.aff-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: all .13s; font-family: var(--font);
  white-space: nowrap; flex-shrink: 0;
}
.aff-copy-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.aff-copy-btn.copied { border-color: var(--green); color: var(--green); background: #dcfce7; }

/* Stats — Bootstrap row with col-md-4 cards, always inside column */
.aff-stats-row { margin-bottom: 8px; }
.aff-stats-row > div { margin-bottom: 14px; }
.aff-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.aff-stat-card--earnings {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.aff-stat-card__icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px; flex-shrink: 0;
}
.aff-stat-card__icon--blue   { background: var(--blue-bg); color: var(--blue); }
.aff-stat-card__icon--purple { background: #f5f3ff; color: #7c3aed; }
.aff-stat-card__icon--green  { background: #dcfce7; color: #16a34a; }
.aff-stat-card__icon--orange { background: #fff7ed; color: #ea580c; }
.aff-stat-card__icon--teal   { background: #f0fdfa; color: #0d9488; }
.aff-stat-card__val {
  font-size: 20px; font-weight: 800; color: var(--text-1);
  letter-spacing: -.4px; line-height: 1;
}
.aff-stat-card__val--green { color: #16a34a; }
.aff-stat-card__lbl { font-size: 12px; color: var(--text-4); font-weight: 500; }
.aff-payout-btn {
  margin-top: 8px !important; width: 100% !important;
  justify-content: center !important; font-size: 12px !important;
  padding: 6px 12px !important;
}
.aff-payout-amount { font-weight: 700; color: var(--green); }
.aff-history-header { margin-bottom: 12px; }

@media (max-width: 767px) {
  .aff-link-row { flex-direction: column; align-items: flex-start; }
  .aff-copy-btn { width: 100%; justify-content: center; }
}



/* ────────────────────────────────────────────────────────────────
   REFILL PAGE
   Reuses: .ord-pills, .ord-empty, .ord-date-cell, .svc-id-pill,
           .rfd-order-link, .s-* chips, .subs-table-wrap, .table
   New: 2 responsive hide rules only
──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .rfl-hide-md { display: none !important; } }
@media (max-width: 767px)  { .rfl-hide-sm { display: none !important; } }

/* ────────────────────────────────────────────────────────────────
   UPDATES PAGE
   Reuses: .ord-header, .svc-filter-btn, .svc-id-pill, .ord-date-cell,
           .ord-empty, .subs-table-wrap, .table, .pagination
──────────────────────────────────────────────────────────────── */
.upd-header-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
  padding-right: 4px; /* prevent search touching right edge on container-fluid */
}
.upd-search { width: 200px; max-width: 100%; }
.upd-service-cell { font-size: 13px; color: var(--text-2); }
.upd-text-cell { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

@media (max-width: 767px) {
  .upd-hide-sm  { display: none !important; }
  .upd-header-right { width: 100%; }
  .upd-search { width: 100%; }
}

/* ── 2FA code input ── */
.twofa-input {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  padding: 14px !important;
  border-radius: 12px !important;
}
.twofa-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

/* ────────────────────────────────────────────────────────────────
   ACCOUNT PAGE
──────────────────────────────────────────────────────────────── */
.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Settings card */
.acc-card { margin-bottom: 0 !important; }
.acc-card__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-l);
}

/* Readonly fields */
.acc-readonly {
  background: var(--border-l) !important;
  color: var(--text-3) !important;
  cursor: default !important;
}

/* Save button */
.acc-save-btn {
  margin-top: 4px !important;
}

/* Change email button */
.acc-change-btn {
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; font-size: 13px !important; font-weight: 600 !important;
}

/* 2FA badge */
.acc-2fa-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 7px; border-radius: 4px;
  margin-left: 4px;
}
.acc-2fa-badge--on  { background: #dcfce7; color: #16a34a; }
.acc-2fa-badge--off { background: #fee2e2; color: #b91c1c; }
.acc-2fa-desc { font-size: 13.5px; color: var(--text-3); line-height: 1.6; margin-bottom: 14px; }

/* API key row */
.acc-apikey-wrap {
  display: flex; gap: 8px; align-items: center;
}
.acc-apikey-input { flex: 1; font-family: 'SFMono-Regular', Consolas, monospace !important; font-size: 12px !important; }
.acc-apikey-date  { color: var(--text-4); font-size: 12px; margin-top: 5px; display: block; }

/* Column stacking */
.acc-col { display: flex; flex-direction: column; gap: 20px; }

/* Responsive */
@media (max-width: 900px) {
  .acc-grid { grid-template-columns: 1fr; }
}

/* Refunds page — inline info note in pills row */
.rfd-note-li {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: var(--text-4) !important;
  padding: 4px 6px !important;
  float: none !important;
}
.rfd-note-li svg { flex-shrink: 0; color: var(--text-4); }

/* ────────────────────────────────────────────────────────────────
   NOTIFICATIONS PAGE
   Reuses: .ord-header, .ord-pills, .acc-card, .acc-card__head,
           .acc-save-btn, .acc-2fa-desc, .well, .subs-table-wrap
──────────────────────────────────────────────────────────────── */

/* Telegram button — blue matching Telegram brand */
.notif-tg-btn { background: #229ED9 !important; border-color: #229ED9 !important; }
.notif-tg-btn:hover { background: #1a8bbf !important; border-color: #1a8bbf !important; }

/* Notifications table */
.notif-sender-col { text-align: center !important; width: 80px !important; white-space: nowrap; }
.notif-name-cell  { font-size: 13.5px; color: var(--text-2); }
.notif-check-cell { text-align: center !important; vertical-align: middle !important; }

/* Checkbox — styled consistently */
.notif-checkbox {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}
.notif-checkbox:disabled { cursor: not-allowed; opacity: .4; }

/* Save button row */
.notif-save-wrap {
  padding: 14px 16px;
  border-top: 1px solid var(--border-l);
}

/* ────────────────────────────────────────────────────────────────
   TERMS OF SERVICE PAGE
──────────────────────────────────────────────────────────────── */
.tms-well { padding: 0 !important; overflow: hidden; }

/* Table of contents */
.tms-toc {
  background: var(--blue-bg); border-bottom: 1px solid var(--blue-br);
  padding: 18px 28px;
}
.tms-toc__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--blue); margin-bottom: 10px;
}
.tms-toc__list {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 24px; list-style: none; counter-reset: toc-counter;
}
.tms-toc__list li {
  font-size: 13px; color: var(--text-2);
  counter-increment: toc-counter; display: flex; align-items: baseline; gap: 6px;
}
.tms-toc__list li::before {
  content: counter(toc-counter) ".";
  font-size: 11px; font-weight: 700; color: var(--text-4); flex-shrink: 0;
}
.tms-toc__list a { color: var(--blue); text-decoration: none; }
.tms-toc__list a:hover { text-decoration: underline; }

/* Body */
.tms-body { padding: 8px 28px 28px; }

/* Sections */
.tms-section { padding: 24px 0; border-bottom: 1px solid var(--border-l); }
.tms-section--last { border-bottom: none; padding-bottom: 0; }

/* Headings */
.tms-h3 {
  font-size: 14.5px; font-weight: 700; color: var(--text-1);
  margin: 0 0 12px; padding-left: 10px;
  border-left: 3px solid var(--blue);
}

/* Body text */
.tms-body p {
  font-size: 13.5px; color: var(--text-2);
  line-height: 1.75; margin-bottom: 10px;
}
.tms-body p:last-child { margin-bottom: 0; }

/* List */
.tms-list {
  margin: 10px 0 0; padding: 0; list-style: none;
}
.tms-list li {
  font-size: 13.5px; color: var(--text-2);
  line-height: 1.75; margin-bottom: 10px;
  padding-left: 16px; position: relative;
}
.tms-list li::before {
  content: '—'; position: absolute; left: 0;
  color: var(--text-4); font-weight: 700;
}
.tms-list li:last-child { margin-bottom: 0; }
.tms-term { font-weight: 700; color: var(--text-1); }

/* Guest CTA */
.tms-guest-cta {
  display: flex; gap: 12px; justify-content: center;
  padding: 28px 0 40px; flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 767px) {
  .tms-toc__list { grid-template-columns: 1fr; }
  .tms-body { padding: 8px 16px 20px; }
  .tms-toc { padding: 14px 16px; }
  .tms-section { padding: 18px 0; }
  .tms-guest-cta .btn { width: 100%; }
}

/* ── Signin homepage — left panel nav links ── */
.hp-nav-links {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  position: relative; z-index: 1;
  margin-bottom: 24px; margin-top: 4px;
}
.hp-nav-link {
  font-size: 12.5px; font-weight: 600; color: #94a3b8;
  text-decoration: none !important; transition: color .13s;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.hp-nav-link:hover { color: #fff; background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.3); }

/* ── CTA section sign in link ── */
.hp-cta__signin {
  display: block; margin-top: 16px;
  font-size: 13.5px; color: #818cf8;
  text-decoration: none !important; font-weight: 500;
  transition: color .13s;
}
.hp-cta__signin:hover { color: #fff; }

/* ── Signin page — mobile header (shown when left panel hides) ── */
.hp-mobile-header {
  display: none;
  align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.hp-mobile-header__brand {
  display: flex; align-items: center; gap: 8px;
}
.hp-mobile-header__nav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.hp-mobile-header__nav a {
  font-size: 12.5px; font-weight: 600; color: #64748b;
  padding: 5px 10px; border-radius: 6px;
  text-decoration: none !important; transition: all .13s;
  background: #f8fafc; border: 1px solid #e2e8f0;
}
.hp-mobile-header__nav a:hover { color: #6366f1; border-color: #c4b5fd; background: #f5f3ff; }

@media (max-width: 960px) {
  .hp-mobile-header { display: flex; }
}