/* ProxyAPI — User Panel CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap');

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES (Light Mode)
   ═══════════════════════════════════════════════════════════ */
:root {
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --primary-light: #eff6ff;
  --success:       #16a34a;
  --success-light: #f0fdf4;
  --danger:        #dc2626;
  --danger-light:  #fef2f2;
  --warning:       #d97706;
  --warning-light: #fffbeb;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --text-dim:      #94a3b8;
  --border:        #e2e8f0;
  --border-2:      #cbd5e1;
  --bg:            #f8fafc;
  --surface:       #ffffff;
  --surface-2:     #f1f5f9;
  --radius:        10px;
  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-size:.9375rem;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE — NAVBAR
   ═══════════════════════════════════════════════════════════ */
.lp-navbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; height:60px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.lp-nav-right { display:flex; align-items:center; gap:.625rem }

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE — HERO
   ═══════════════════════════════════════════════════════════ */
.hero-section {
  min-height:80vh; display:flex; align-items:center;
  background:linear-gradient(160deg, #f8fafc 0%, #eff6ff 50%, #f8fafc 100%);
}
.hero-inner {
  max-width:860px; margin:0 auto; padding:4rem 1.5rem 3rem;
  text-align:center;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:.375rem;
  background:var(--primary-light); color:var(--primary);
  border:1px solid #bfdbfe; border-radius:999px;
  font-size:.78rem; font-weight:700; padding:.3rem .875rem;
  letter-spacing:.3px; text-transform:uppercase; margin-bottom:1.75rem;
}
.hero-title {
  font-size:clamp(2rem,5vw,3.25rem); font-weight:800;
  color:var(--text); letter-spacing:-.75px; line-height:1.15;
  margin-bottom:1.125rem;
}
.hero-desc {
  font-size:1.0625rem; color:var(--text-muted); max-width:580px;
  margin:0 auto 2rem; line-height:1.7;
}
.hero-cta {
  display:flex; align-items:center; justify-content:center;
  gap:.75rem; flex-wrap:wrap;
}
.hero-features {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.25rem; margin-top:4rem; text-align:left;
}
.feature-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:1.375rem 1.25rem;
  box-shadow:var(--shadow); transition:all .2s;
}
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md) }
.feature-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--primary-light); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:.9375rem; margin-bottom:1rem;
}
.feature-title { font-size:.9375rem; font-weight:700; color:var(--text); margin-bottom:.375rem }
.feature-desc  { font-size:.8125rem; color:var(--text-muted); line-height:1.6 }

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE — FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer-strip {
  border-top:1px solid var(--border); padding:1.5rem 2rem;
  text-align:center; font-size:.8125rem; color:var(--text-muted);
  background:var(--surface);
}
.footer { border-top:1px solid var(--border); padding:2rem; text-align:center }

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES (login / register)
   ═══════════════════════════════════════════════════════════ */
.auth-wrapper {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:var(--bg);
}
.auth-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:2.5rem 2rem; width:100%; max-width:420px;
  box-shadow:var(--shadow-lg);
}
.auth-logo {
  font-size:1.25rem; font-weight:800; color:var(--text);
  letter-spacing:-.5px; display:block; margin-bottom:.875rem;
}
.auth-logo span { color:var(--primary) }
.auth-title {
  font-size:1.375rem; font-weight:700; color:var(--text);
  letter-spacing:-.4px; margin-bottom:.25rem;
}
.auth-sub { font-size:.875rem; color:var(--text-muted) }
.divider {
  margin:1.5rem 0; border:none; border-top:1px solid var(--border);
}
.login-link { font-size:.875rem; text-align:center; color:var(--text-muted); margin-top:1rem }
.login-link a { color:var(--primary); font-weight:600 }

/* ═══════════════════════════════════════════════════════════
   GATE PAGE
   ═══════════════════════════════════════════════════════════ */
.gate-wrapper {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:var(--bg);
}
.gate-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:2.5rem 2rem; width:100%; max-width:420px;
  box-shadow:var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════
   USER PANEL NAVBAR
   ═══════════════════════════════════════════════════════════ */
.navbar-main {
  background:var(--surface); border-bottom:1px solid var(--border);
  height:58px; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.75rem; position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 var(--border);
}
.navbar-brand {
  font-size:1.125rem; font-weight:800; color:var(--text);
  text-decoration:none; letter-spacing:-.5px;
}
.navbar-brand span { color:var(--primary) }
.navbar-nav-items { display:flex; align-items:center; gap:.25rem }
.nav-link-item {
  padding:.4375rem .75rem; border-radius:7px; font-size:.8375rem; font-weight:500;
  color:var(--text-muted); text-decoration:none; transition:all .15s; white-space:nowrap;
}
.nav-link-item:hover  { color:var(--text); background:var(--surface-2) }
.nav-link-item.active { color:var(--primary); background:var(--primary-light) }

.nav-theme-toggle {
  width:34px; height:34px; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border); cursor:pointer; display:flex;
  align-items:center; justify-content:center; color:var(--text-muted);
  font-size:.875rem; transition:all .15s; flex-shrink:0;
}
.nav-theme-toggle:hover { background:var(--bg); color:var(--primary); border-color:var(--border-2) }

.nav-logout-btn {
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.8375rem; font-weight:500; color:var(--danger);
  padding:.4375rem .75rem; border-radius:7px; transition:background .15s;
}
.nav-logout-btn:hover { background:var(--danger-light) }

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════════════════════ */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:.5rem; border-radius:6px; flex-shrink:0;
}
.nav-hamburger span {
  display:block; width:20px; height:2px; background:var(--text-muted);
  border-radius:2px; transition:all .25s;
}
.nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:translateX(-8px) }
.nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

.nav-mobile-menu {
  display:none; position:fixed; top:58px; left:0; right:0; bottom:0;
  background:var(--surface); z-index:99;
  flex-direction:column; padding:.75rem;
  border-top:1px solid var(--border); overflow-y:auto;
}
.nav-mobile-menu.open { display:flex }
.nav-mobile-menu .nav-link-item {
  font-size:.9375rem; padding:.75rem 1rem; border-radius:8px;
  display:flex; align-items:center; gap:.625rem;
}
.nav-mobile-menu .nav-link-item i { width:16px; text-align:center }
.nav-mobile-footer {
  margin-top:auto; padding-top:.75rem; padding-bottom:.5rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}

/* ═══════════════════════════════════════════════════════════
   PAGE WRAPPER & HEADERS
   ═══════════════════════════════════════════════════════════ */
.page-wrapper  { max-width:1100px; margin:0 auto; padding:1.75rem 1.25rem 3rem }
.page-header   { margin-bottom:1.75rem }
.page-title    { font-size:1.5rem; font-weight:700; color:var(--text); letter-spacing:-.4px }
.page-subtitle { font-size:.875rem; color:var(--text-muted); margin-top:.25rem }

/* ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */
.alert-custom {
  padding:.875rem 1.125rem; border-radius:9px; font-size:.875rem;
  display:flex; align-items:center; gap:.625rem;
}
.alert-success { background:var(--success-light); border:1px solid #bbf7d0; color:var(--success) }
.alert-danger  { background:var(--danger-light);  border:1px solid #fecaca; color:var(--danger) }
.alert-warning { background:var(--warning-light); border:1px solid #fde68a; color:var(--warning) }
.alert-info    { background:var(--primary-light); border:1px solid #bfdbfe; color:var(--primary) }

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.card-header-custom {
  display:flex; align-items:center; justify-content:space-between;
  padding:.875rem 1.25rem; border-bottom:1px solid var(--border); gap:.75rem;
}
.card-title { font-size:.9375rem; font-weight:600; color:var(--text) }
.card-body  { padding:1.25rem }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════ */
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.125rem 1.25rem; box-shadow:var(--shadow);
}
.stat-label { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.25rem }
.stat-value { font-size:1.5rem; font-weight:700; color:var(--text); letter-spacing:-.5px }
.stat-sub   { font-size:.7rem; color:var(--text-dim); margin-top:.2rem }
.stat-icon  {
  width:40px; height:40px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.stat-icon.blue   { background:#eff6ff; color:var(--primary) }
.stat-icon.green  { background:var(--success-light); color:var(--success) }
.stat-icon.yellow { background:var(--warning-light); color:var(--warning) }
.stat-icon.red    { background:var(--danger-light);  color:var(--danger) }

/* ═══════════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn-primary-custom {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5625rem 1.125rem; background:var(--primary); color:#fff;
  border-radius:8px; font-size:.8375rem; font-weight:600; border:none;
  cursor:pointer; text-decoration:none; font-family:inherit;
  transition:all .15s; letter-spacing:-.1px; white-space:nowrap;
}
.btn-primary-custom:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,.3) }
.btn-primary-custom:active { transform:translateY(0) }

.btn-secondary-custom {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5625rem 1rem; background:var(--surface); color:var(--text-muted);
  border-radius:8px; font-size:.8375rem; font-weight:600;
  border:1px solid var(--border); cursor:pointer; text-decoration:none;
  font-family:inherit; transition:all .15s; white-space:nowrap;
}
.btn-secondary-custom:hover { color:var(--text); background:var(--surface-2); border-color:var(--border-2) }

.btn-danger-custom {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5625rem 1rem; background:var(--danger); color:#fff;
  border-radius:8px; font-size:.8375rem; font-weight:600; border:none;
  cursor:pointer; text-decoration:none; font-family:inherit;
  transition:all .15s; white-space:nowrap;
}
.btn-danger-custom:hover { background:#b91c1c; transform:translateY(-1px) }

.btn-sm-custom { padding:.375rem .75rem; font-size:.78rem; border-radius:6px }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.form-control-custom {
  width:100%; padding:.6875rem .9375rem; background:var(--surface);
  border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:.875rem; font-family:inherit;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.form-control-custom:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12) }
.form-control-custom::placeholder { color:var(--text-dim) }
select.form-control-custom { appearance:auto }
.form-label-custom { display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); margin-bottom:.375rem }
.form-hint { font-size:.78rem; color:var(--text-dim); margin-top:.3rem }

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.table-custom { width:100%; border-collapse:collapse; font-size:.85rem }
.table-custom thead th {
  padding:.625rem 1rem; text-align:left; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
  background:var(--bg); border-bottom:1px solid var(--border);
  font-weight:600; white-space:nowrap;
}
.table-custom tbody tr { border-bottom:1px solid var(--border); transition:background .12s }
.table-custom tbody tr:hover { background:var(--bg) }
.table-custom tbody tr:last-child { border-bottom:none }
.table-custom td { padding:.75rem 1rem; vertical-align:middle }

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge-custom, .badge {
  display:inline-flex; align-items:center; padding:.175rem .575rem;
  border-radius:999px; font-size:.6875rem; font-weight:600;
  letter-spacing:.3px; white-space:nowrap;
}
.badge-active    { background:#dcfce7; color:#16a34a }
.badge-approved  { background:#dcfce7; color:#16a34a }
.badge-pending   { background:#fef3c7; color:#d97706 }
.badge-banned    { background:#fee2e2; color:#dc2626 }
.badge-rejected  { background:#fee2e2; color:#dc2626 }
.badge-inactive  { background:var(--surface-2); color:var(--text-dim) }
.badge-blue      { background:var(--primary-light); color:var(--primary) }

/* ═══════════════════════════════════════════════════════════
   API EXPLORER
   ═══════════════════════════════════════════════════════════ */
.explorer-layout {
  display:grid; grid-template-columns:280px 1fr;
  gap:1.5rem; align-items:start;
}
.endpoint-tag {
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:.72rem; font-weight:700; padding:.175rem .5rem;
  border-radius:5px; letter-spacing:.4px; text-transform:uppercase;
}
.tag-get  { background:#dbeafe; color:#1d4ed8 }
.tag-post { background:#dcfce7; color:#15803d }
.icon-wrap {
  width:36px; height:36px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0;
}
.tab-bar {
  display:flex; gap:.25rem; border-bottom:2px solid var(--border);
  margin-bottom:1rem; overflow-x:auto;
}

/* ═══════════════════════════════════════════════════════════
   PACKAGE CARDS
   ═══════════════════════════════════════════════════════════ */
.pkg-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-bottom:3rem; align-items:start;
}
.pkg-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:14px; padding:1.75rem 1.5rem; position:relative;
  transition:all .2s; box-shadow:var(--shadow);
}
.pkg-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-2) }
.pkg-card-featured { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary),var(--shadow-md) }
.pkg-badge {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--primary); color:#fff; font-size:.6875rem; font-weight:700;
  padding:.2rem .75rem; border-radius:999px; letter-spacing:.5px;
  text-transform:uppercase; white-space:nowrap;
}
.pkg-icon {
  width:48px; height:48px; background:var(--surface-2); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--text-muted); margin-bottom:1.25rem;
}
.pkg-icon-featured { background:var(--primary-light); color:var(--primary) }
.pkg-name     { font-size:1.0625rem; font-weight:700; color:var(--text); margin-bottom:.375rem }
.pkg-desc     { font-size:.8125rem; color:var(--text-muted); margin-bottom:1.25rem; line-height:1.55 }
.pkg-price    { display:flex; align-items:baseline; gap:.25rem; margin-bottom:1.25rem }
.pkg-currency { font-size:.875rem; font-weight:700; color:var(--text-muted) }
.pkg-amount   { font-size:2rem; font-weight:800; color:var(--text); letter-spacing:-.5px }
.pkg-period   { font-size:.8rem; color:var(--text-muted) }
.pkg-features { list-style:none; margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.625rem }
.pkg-features li { display:flex; align-items:center; gap:.5rem; font-size:.8375rem; color:var(--text-muted) }
.pkg-features li i { color:var(--success); font-size:.8rem; flex-shrink:0 }
.pkg-btn {
  width:100%; padding:.6875rem; border-radius:9px; font-size:.875rem; font-weight:600;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; font-family:inherit; transition:all .15s;
}
.pkg-btn:hover { background:var(--surface-2); border-color:var(--border-2); transform:translateY(-1px) }
.pkg-btn-featured { background:var(--primary); color:#fff; border-color:var(--primary) }
.pkg-btn-featured:hover { background:var(--primary-dark); border-color:var(--primary-dark) }
.pkg-how-section { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border) }
.how-step  { text-align:center; padding:1.5rem 1rem }
.how-num   { width:36px; height:36px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-size:.875rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto .875rem }
.how-title { font-size:.9375rem; font-weight:600; color:var(--text); margin-bottom:.375rem }
.how-desc  { font-size:.8125rem; color:var(--text-muted); line-height:1.55 }

/* ═══════════════════════════════════════════════════════════
   ACTIVE PACKAGE BANNER
   ═══════════════════════════════════════════════════════════ */
.active-pkg-banner {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.875rem; padding:1rem 1.25rem; border-radius:var(--radius);
  background:linear-gradient(135deg,#16a34a08,#16a34a12);
  border:1px solid #bbf7d0; color:var(--text);
}
.pkg-banner-icon {
  width:36px; height:36px; background:var(--success-light);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--success); font-size:1rem; flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════
   API KEY BOX
   ═══════════════════════════════════════════════════════════ */
.api-key-box {
  display:flex; align-items:center; gap:.625rem;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:.625rem 1rem;
}
.api-key-val { font-family:monospace; font-size:.8rem; word-break:break-all; flex:1; color:var(--text-muted) }
.copy-btn {
  background:var(--primary-light); color:var(--primary);
  border:none; border-radius:5px; padding:.3rem .75rem;
  font-size:.75rem; cursor:pointer; font-weight:600; flex-shrink:0;
  transition:all .15s;
}
.copy-btn:hover { background:var(--primary); color:#fff }

/* ═══════════════════════════════════════════════════════════
   LOW BALANCE TOAST
   ═══════════════════════════════════════════════════════════ */
.low-balance-toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:1000;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:1rem 1.125rem; max-width:300px;
  box-shadow:var(--shadow-lg); display:none;
}
@keyframes slideUp { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }
.lbt-close { position:absolute; top:.625rem; right:.75rem; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--text-muted); line-height:1 }
.lbt-title { font-size:.875rem; font-weight:700; color:var(--warning); margin-bottom:.25rem }
.lbt-body  { font-size:.8125rem; color:var(--text-muted) }

/* ═══════════════════════════════════════════════════════════
   PAYMENT GRID
   ═══════════════════════════════════════════════════════════ */
.payment-grid { display:grid; grid-template-columns:1fr 1fr; gap:.625rem; margin-top:.375rem }
.payment-btn {
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.75rem .5rem; border:1.5px solid var(--border); border-radius:9px;
  cursor:pointer; transition:all .15s; text-align:center; background:var(--surface);
}
.payment-btn:hover { border-color:var(--border-2); background:var(--surface-2) }
.payment-btn.selected { border-color:var(--primary); background:var(--primary-light) }
.pay-logo   { font-size:.875rem; font-weight:800; letter-spacing:-.3px }
.pay-name   { font-size:.72rem; font-weight:600; color:var(--text-muted) }
.pay-number { font-size:.72rem; color:var(--text-muted); font-family:monospace }
.bkash-logo  { color:#e2156a }
.nagad-logo  { color:#ef4444 }
.rocket-logo { color:#7c3aed }

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px); z-index:500; display:flex;
  align-items:center; justify-content:center; padding:1.25rem;
}
.modal-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; width:100%; max-width:460px;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 1.375rem; border-bottom:1px solid var(--border);
}
.modal-title { font-size:1rem; font-weight:700; color:var(--text) }
.modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--text-muted); line-height:1 }
.modal-body  { padding:1.375rem }

/* ═══════════════════════════════════════════════════════════
   CODE BLOCKS
   ═══════════════════════════════════════════════════════════ */
.code-block-wrapper { position:relative; margin:0 }
.code-block-copy {
  position:absolute; top:.625rem; right:.625rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:5px; padding:.25rem .625rem; font-size:.72rem; font-weight:600;
  cursor:pointer; color:var(--text-muted); transition:all .15s; line-height:1.4;
  font-family:inherit; z-index:1;
}
.code-block-copy:hover { color:var(--primary); border-color:var(--primary) }
.code-block-copy.copied { color:var(--success); border-color:var(--success) }
.code-block {
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.125rem; font-size:.8rem; overflow-x:auto; line-height:1.7;
  color:var(--text); font-family:'Fira Code','Cascadia Code','Consolas',monospace;
  margin:0;
}
pre.code-sample {
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.125rem; font-size:.8rem; overflow-x:auto; line-height:1.7;
  color:var(--text); font-family:'Fira Code','Cascadia Code','Consolas',monospace;
  margin:0; white-space:pre; tab-size:2;
}

/* ═══════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════ */
.faq-item { border-bottom:1px solid var(--border) }
.faq-item:last-child { border-bottom:none }
.faq-question {
  width:100%; background:none; border:none; text-align:left;
  padding:1rem 0; display:flex; align-items:center;
  justify-content:space-between; cursor:pointer;
  font-size:.9375rem; font-weight:600; color:var(--text);
  font-family:inherit; gap:1rem; transition:color .15s;
}
.faq-question:hover { color:var(--primary) }
.faq-chevron { flex-shrink:0; transition:transform .25s; color:var(--text-dim); font-size:.8125rem }
.faq-answer {
  display:none; padding:0 0 1rem;
  font-size:.875rem; color:var(--text-muted); line-height:1.75;
}
.faq-answer code {
  background:var(--bg); padding:.1rem .4rem; border-radius:4px;
  font-size:.8rem; font-family:'Fira Code',monospace;
}
.faq-item.open .faq-answer  { display:block }
.faq-item.open .faq-chevron { transform:rotate(180deg) }
.faq-item.open .faq-question { color:var(--primary) }

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.tab-nav { display:flex; gap:.25rem; border-bottom:2px solid var(--border); margin-bottom:1.25rem; overflow-x:auto }
.tab-item {
  padding:.5rem 1rem; font-size:.8375rem; font-weight:600; color:var(--text-muted);
  border:none; background:none; cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-2px; transition:all .15s; font-family:inherit; white-space:nowrap;
}
.tab-item:hover { color:var(--text) }
.tab-item.active { color:var(--primary); border-bottom-color:var(--primary) }
.tab-panel { display:none }
.tab-panel.active { display:block }

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:1.25rem }
.page-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .625rem;
  border:1px solid var(--border); border-radius:7px;
  font-size:.8125rem; font-weight:500; color:var(--text-muted);
  text-decoration:none; transition:all .15s;
}
.page-link:hover  { color:var(--primary); border-color:var(--primary); background:var(--primary-light) }
.page-link.active { background:var(--primary); color:#fff; border-color:var(--primary) }
.page-link.disabled { opacity:.4; pointer-events:none }

/* ═══════════════════════════════════════════════════════════
   JSON VIEWER
   ═══════════════════════════════════════════════════════════ */
.json-viewer {
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:1rem; overflow:auto; font-size:.8rem;
  font-family:'Fira Code',monospace; line-height:1.6; min-height:80px;
}
.json-key    { color:#2563eb }
.json-string { color:#16a34a }
.json-number { color:#d97706 }
.json-bool   { color:#7c3aed }
.json-null   { color:#64748b }

/* ═══════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════ */
.spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══════════════════════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════════════════════ */
.text-xs           { font-size:.75rem }
.text-sm           { font-size:.8125rem }
.text-muted-custom { color:var(--text-muted) }
.text-dim          { color:var(--text-dim) }
.fw-600            { font-weight:600 }
.d-flex            { display:flex }
.align-center      { align-items:center }
.gap-2             { gap:.5rem }
.w-100             { width:100% }
.wrap              { flex-wrap:wrap }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .pkg-grid      { grid-template-columns:1fr 1fr }
  .hero-features { grid-template-columns:1fr 1fr }
}
@media (max-width:768px) {
  .navbar-nav-items { display:none }
  .nav-hamburger    { display:flex }
  #mob-theme-btn    { display:flex !important }
  .grid-2,.grid-4   { grid-template-columns:1fr }
  .grid-3           { grid-template-columns:1fr 1fr }
  .pkg-grid         { grid-template-columns:1fr 1fr }
  .page-wrapper     { padding:1.25rem 1rem 2rem }
  .explorer-layout  { grid-template-columns:1fr }
  .lp-navbar        { padding:0 1rem }
}
@media (max-width:540px) {
  .pkg-grid,.grid-3 { grid-template-columns:1fr }
  .payment-grid     { grid-template-columns:1fr }
  .hero-features    { grid-template-columns:1fr }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --primary:       #818cf8;
  --primary-dark:  #6366f1;
  --primary-light: #1e1b4b;
  --success:       #4ade80;
  --success-light: #052e16;
  --danger:        #f87171;
  --danger-light:  #450a0a;
  --warning:       #fbbf24;
  --warning-light: #3f1c02;
  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
  --text-dim:      #475569;
  --border:        #1e293b;
  --border-2:      #334155;
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface-2:     #0f172a;
  --shadow:        0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.7);
}
[data-theme="dark"] .badge-active    { background:#14532d; color:#4ade80 }
[data-theme="dark"] .badge-approved  { background:#14532d; color:#4ade80 }
[data-theme="dark"] .badge-pending   { background:#3f1c02; color:#fbbf24 }
[data-theme="dark"] .badge-banned    { background:#450a0a; color:#f87171 }
[data-theme="dark"] .badge-rejected  { background:#450a0a; color:#f87171 }
[data-theme="dark"] .badge-inactive  { background:#1e293b; color:#475569 }
[data-theme="dark"] .badge-blue      { background:#1e1b4b; color:#818cf8 }
[data-theme="dark"] pre.code-sample  { background:#020617; border-color:#1e293b; color:#e2e8f0 }
[data-theme="dark"] .code-block      { background:#020617; border-color:#1e293b; color:#e2e8f0 }
[data-theme="dark"] .json-viewer     { background:#020617; border-color:#1e293b; color:#e2e8f0 }
[data-theme="dark"] .json-key        { color:#7dd3fc }
[data-theme="dark"] .json-string     { color:#86efac }
[data-theme="dark"] .json-number     { color:#fca5a5 }
[data-theme="dark"] .json-bool       { color:#c4b5fd }
[data-theme="dark"] .json-null       { color:#94a3b8 }
[data-theme="dark"] .tag-get         { background:#1e1b4b; color:#93c5fd }
[data-theme="dark"] .tag-post        { background:#052e16; color:#4ade80 }
[data-theme="dark"] .hero-section    { background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%) }
[data-theme="dark"] .feature-card    { background:var(--surface) }
[data-theme="dark"] .lp-navbar       { background:rgba(15,23,42,.95); backdrop-filter:blur(10px) }
[data-theme="dark"] .footer-strip    { background:var(--surface) }
[data-theme="dark"] .active-pkg-banner { background:linear-gradient(135deg,#052e1630,#052e1650); border-color:#166534 }
[data-theme="dark"] .alert-success   { border-color:#166534 }
[data-theme="dark"] .alert-warning   { border-color:#92400e }
[data-theme="dark"] .alert-danger    { border-color:#991b1b }
[data-theme="dark"] .alert-info      { border-color:#1e3a8a }

/* ═══════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition: background-color .2s, border-color .2s, color .05s;
}