/* ══════════════════════════════════════════════════════════
   OnProxyPay — Design System CSS
   Dark fintech theme · Midnight navy + electric cyan
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:          #05080f;
  --bg2:         #080d18;
  --surface:     #0c1220;
  --surface2:    #101827;
  --surface3:    #141f30;
  --surface4:    #192438;
  --border:      rgba(255,255,255,.065);
  --border2:     rgba(255,255,255,.11);
  --border3:     rgba(255,255,255,.18);

  --accent:      #22d3ee;
  --accent-soft: rgba(34,211,238,.14);
  --accent-glow: rgba(34,211,238,.28);

  --green:       #10b981;
  --green-soft:  rgba(16,185,129,.13);
  --amber:       #f59e0b;
  --amber-soft:  rgba(245,158,11,.12);
  --red:         #ef4444;
  --red-soft:    rgba(239,68,68,.12);
  --indigo:      #818cf8;
  --indigo-soft: rgba(129,140,248,.12);
  --rose:        #f43f5e;
  --rose-soft:   rgba(244,63,94,.12);

  --text:        #f0f4f8;
  --text2:       #8899aa;
  --text3:       #445566;

  --font:        'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:        'JetBrains Mono', 'Fira Code', monospace;

  --r:           8px;
  --r-lg:        12px;
  --r-xl:        16px;
  --r-full:      9999px;

  --sidebar-w:   252px;

  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,.5,.3,1);

  --shadow:      0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.7);
  --shadow-glow: 0 0 24px var(--accent-glow);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; line-height: 1.6; font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface4); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--border3); }

/* ── Typography ── */
h1 { font-size:28px; font-weight:800; letter-spacing:-.6px; }
h2 { font-size:22px; font-weight:800; letter-spacing:-.4px; }
h3 { font-size:16px; font-weight:700; letter-spacing:-.2px; }
.mono { font-family:var(--mono); }
.text2 { color:var(--text2); }
.text3 { color:var(--text3); }

/* ═══════════════════════════════════════════════════════
   PAGE LAYOUT SHELL
   ═══════════════════════════════════════════════════════ */
.app-shell {
  display:flex; min-height:100vh;
}
.main-area {
  flex:1; min-width:0; display:flex; flex-direction:column;
}
.page-body {
  flex:1; padding:28px 32px; max-width:1180px; width:100%;
  animation: pgIn .22s var(--ease);
}
@keyframes pgIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w); min-height:100vh; height:100dvh;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; flex-shrink:0; z-index:200;
  transition:transform .28s var(--ease);
}

.sb-header {
  padding:18px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sb-logo {
  width:36px; height:36px; background:var(--accent); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:800; font-size:18px; color:var(--bg);
  box-shadow:0 0 18px var(--accent-glow); flex-shrink:0;
}
.sb-name { font-size:15px; font-weight:800; letter-spacing:-.3px; }
.sb-tag  { font-size:10px; color:var(--text3); font-family:var(--mono); letter-spacing:.4px; }
.sb-close { display:none; margin-left:auto; background:none; border:none; color:var(--text2); font-size:18px; cursor:pointer; padding:4px 6px; border-radius:6px; }
.sb-close:hover { background:var(--surface2); color:var(--text); }

.sb-nav { flex:1; padding:8px 10px; overflow-y:auto; }
.nav-label {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:1.2px;
  padding:16px 10px 5px; user-select:none;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r); margin-bottom:1px;
  color:var(--text2); font-size:13px; font-weight:500;
  cursor:pointer; transition:all .14s; border:1px solid transparent;
  position:relative;
}
.nav-item:hover { color:var(--text); background:var(--surface2); }
.nav-item.active {
  color:var(--accent); background:var(--accent-soft);
  border-color:rgba(34,211,238,.15); font-weight:600;
}
.nav-icon {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--surface3); transition:background .14s;
}
.nav-item:hover .nav-icon { background:var(--surface4); }
.nav-item.active .nav-icon { background:var(--accent-soft); color:var(--accent); }

.sb-footer {
  padding:12px 10px; border-top:1px solid var(--border);
}
.sb-user {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r);
  margin-bottom:8px; overflow:hidden; cursor:pointer; transition:border-color .15s;
}
.sb-user:hover { border-color:var(--border2); }
.sb-avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#6366f1);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; flex-shrink:0;
}
.sb-user-name  { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-email { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logout-btn {
  width:100%; padding:8px 12px; background:none; border:1px solid var(--border);
  border-radius:var(--r); color:var(--text2); font-family:var(--font); font-size:12px;
  font-weight:500; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.logout-btn:hover { border-color:rgba(239,68,68,.4); color:var(--red); background:var(--red-soft); }

.sb-overlay {
  display:none; position:fixed; inset:0; z-index:190;
  background:rgba(0,0,0,.65); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s;
}
.sb-overlay.show { opacity:1; pointer-events:all; }

/* ═══════════════════════════════════════════════════════
   TOPBAR (mobile only)
   ═══════════════════════════════════════════════════════ */
.topbar {
  display:none; position:sticky; top:0; z-index:150;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 16px; align-items:center; gap:10px;
}
.hamburger {
  background:none; border:none; color:var(--text); cursor:pointer;
  padding:6px; border-radius:7px; display:flex; align-items:center;
  transition:background .15s;
}
.hamburger:hover { background:var(--surface2); }
.topbar-logo {
  width:30px; height:30px; background:var(--accent); border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:800; font-size:15px; color:var(--bg);
}
.topbar-name { font-size:15px; font-weight:800; }

/* ═══════════════════════════════════════════════════════
   SESSION BANNER
   ═══════════════════════════════════════════════════════ */
.session-banner {
  position:fixed; top:0; left:0; right:0; z-index:999;
  background:var(--red); color:#fff;
  padding:10px 20px; font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
  animation:bannerIn .3s var(--ease);
}
.session-banner a { color:#fff; text-decoration:underline; }
@keyframes bannerIn { from{transform:translateY(-100%)} to{transform:none} }

/* ═══════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════ */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,211,238,.07) 0%,transparent 70%), var(--bg);
}
.auth-card {
  width:100%; max-width:460px;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r-xl); padding:40px 36px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(34,211,238,.04);
  position:relative; animation:cardIn .45s var(--ease);
}
.auth-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  border-radius:var(--r-xl) var(--r-xl) 0 0; opacity:.5;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.auth-brand {
  display:flex; align-items:center; gap:12px; margin-bottom:30px;
}
.auth-logo {
  width:42px; height:42px; background:var(--accent); border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:800; font-size:20px; color:var(--bg);
  box-shadow:var(--shadow-glow);
}
.auth-app-name { font-size:20px; font-weight:800; letter-spacing:-.3px; }
.auth-app-sub  { font-size:11px; color:var(--text3); font-family:var(--mono); letter-spacing:.4px; }
.auth-sandbox {
  margin-left:auto; padding:3px 10px;
  background:var(--amber-soft); color:var(--amber);
  border:1px solid rgba(245,158,11,.2); border-radius:var(--r-full);
  font-size:9px; font-weight:700; font-family:var(--mono); letter-spacing:.5px;
}
.tab-switch {
  display:flex; background:var(--surface2); border-radius:var(--r); padding:3px; gap:3px; margin-bottom:26px;
}
.tab-btn {
  flex:1; padding:9px; background:none; border:none;
  border-radius:calc(var(--r) - 2px); color:var(--text2);
  font-family:var(--font); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .18s;
}
.tab-btn.active { background:var(--surface4); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.4); }

/* ═══════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════ */
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.form-group { margin-bottom:14px; }
.form-label {
  display:block; font-size:11px; font-weight:700; color:var(--text2);
  margin-bottom:6px; letter-spacing:.4px; text-transform:uppercase;
}
.form-label .req { color:var(--red); margin-left:2px; }
.form-label .hint { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text3); margin-left:4px; }
.form-input {
  width:100%; padding:10px 14px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r); color:var(--text);
  font-family:var(--font); font-size:14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none;
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.form-input::placeholder { color:var(--text3); }
.form-input:disabled { opacity:.5; cursor:not-allowed; }
.form-input.is-error { border-color:var(--red); }
select.form-input { cursor:pointer; }
select.form-input option { background:var(--bg2); }
textarea.form-input { resize:vertical; min-height:80px; }

/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 20px; border:1px solid transparent; border-radius:var(--r);
  font-family:var(--font); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .18s var(--ease);
  white-space:nowrap; text-decoration:none; position:relative;
  -webkit-appearance:none;
}
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-full { width:100%; margin-top:2px; }

.btn-primary  { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.btn-primary:hover { background:#38e8ff; box-shadow:0 4px 18px var(--accent-glow); transform:translateY(-1px); }
.btn-primary:active { transform:none; box-shadow:none; }

.btn-secondary { background:var(--surface3); color:var(--text); border-color:var(--border2); }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

.btn-success { background:var(--green); color:#fff; border-color:var(--green); }
.btn-success:hover { filter:brightness(1.1); transform:translateY(-1px); }

.btn-amber  { background:var(--amber); color:var(--bg); border-color:var(--amber); }
.btn-amber:hover { filter:brightness(1.1); transform:translateY(-1px); }

.btn-danger { background:var(--red); color:#fff; border-color:var(--red); }
.btn-danger:hover { filter:brightness(1.1); transform:translateY(-1px); }

.btn-danger-soft { background:var(--red-soft); color:var(--red); border-color:rgba(239,68,68,.3); }
.btn-danger-soft:hover { background:var(--red); color:#fff; }

.btn-ghost { background:none; color:var(--text2); border-color:var(--border2); }
.btn-ghost:hover { background:var(--surface2); color:var(--text); }

.btn-sm { padding:7px 14px; font-size:12px; }
.btn-xs { padding:5px 10px; font-size:11px; }

/* ═══════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════ */
.pg-hdr { margin-bottom:24px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.pg-hdr-left {}
.pg-title { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.pg-sub   { color:var(--text2); font-size:14px; margin-top:3px; }
.pg-hdr-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════ */
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; position:relative; overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.stat-card:hover { border-color:var(--border2); transform:translateY(-1px); }
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.sc-cyan::after   { background:var(--accent); }
.sc-amber::after  { background:var(--amber); }
.sc-green::after  { background:var(--green); }
.sc-red::after    { background:var(--red); }
.sc-indigo::after { background:var(--indigo); }
.sc-rose::after   { background:var(--rose); }

.stat-lbl { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.stat-val {
  font-family:var(--mono); font-size:30px; font-weight:700; line-height:1;
}
.sv-cyan   { color:var(--accent); }
.sv-amber  { color:var(--amber); }
.sv-green  { color:var(--green); }
.sv-red    { color:var(--red); }
.sv-indigo { color:var(--indigo); }
.sv-rose   { color:var(--rose); }
.stat-meta { font-size:11px; color:var(--text3); margin-top:5px; }

/* ═══════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 24px; margin-bottom:18px;
}
.card-hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; flex-wrap:wrap; gap:10px;
}
.card-title {
  font-size:14px; font-weight:700;
  display:flex; align-items:center; gap:9px;
}
.card-icon {
  width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ci-cyan   { background:var(--accent-soft); color:var(--accent); }
.ci-green  { background:var(--green-soft);  color:var(--green); }
.ci-amber  { background:var(--amber-soft);  color:var(--amber); }
.ci-indigo { background:var(--indigo-soft); color:var(--indigo); }
.ci-red    { background:var(--red-soft);    color:var(--red); }

/* ═══════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r); }
table { width:100%; border-collapse:collapse; min-width:520px; }
thead th {
  text-align:left; padding:10px 14px;
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.8px;
  border-bottom:1px solid var(--border); white-space:nowrap;
  background:var(--surface2);
}
thead th:first-child { border-radius:var(--r) 0 0 0; }
thead th:last-child  { border-radius:0 var(--r) 0 0; }
tbody td {
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.035);
  vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:rgba(255,255,255,.022); }
.td-mono { font-family:var(--mono); font-size:13px; }
.td-ref  { color:var(--accent); font-weight:700; letter-spacing:1.5px; }
.td-amt  { color:var(--amber); font-weight:600; }
.td-muted { color:var(--text2); font-size:12px; }
.td-sm   { font-size:12px; color:var(--text2); }

/* ═══════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:var(--r-full);
  font-size:11px; font-weight:700; font-family:var(--mono);
  white-space:nowrap;
}
.bdot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.badge-pending   { background:var(--amber-soft);  color:var(--amber); }
.badge-pending   .bdot { background:var(--amber);  box-shadow:0 0 5px var(--amber); }
.badge-paid      { background:var(--green-soft);  color:var(--green); }
.badge-paid      .bdot { background:var(--green);  box-shadow:0 0 5px var(--green); }
.badge-expired   { background:var(--red-soft);    color:var(--red); }
.badge-expired   .bdot { background:var(--red);    box-shadow:0 0 5px var(--red); }
.badge-cancelled { background:var(--indigo-soft); color:var(--indigo); }
.badge-cancelled .bdot { background:var(--indigo); }
.badge-delivered { background:var(--green-soft);  color:var(--green); }
.badge-failed    { background:var(--red-soft);    color:var(--red); }

/* ═══════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════ */
.alert {
  display:none; padding:10px 14px; border-radius:var(--r);
  font-size:13px; margin-bottom:14px; border:1px solid;
  animation:alertIn .18s var(--ease);
}
.alert.show { display:flex; align-items:flex-start; gap:8px; }
.alert-icon { flex-shrink:0; font-size:14px; margin-top:1px; }
.alert-error   { background:var(--red-soft);   border-color:rgba(239,68,68,.25);   color:#fca5a5; }
.alert-success { background:var(--green-soft); border-color:rgba(16,185,129,.25);  color:#6ee7b7; }
.alert-info    { background:var(--accent-soft);border-color:rgba(34,211,238,.2);   color:var(--accent); }
.alert-amber   { background:var(--amber-soft); border-color:rgba(245,158,11,.25);  color:var(--amber); }
@keyframes alertIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

/* ═══════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════ */
.pagination {
  display:flex; align-items:center; justify-content:center; gap:5px;
  flex-wrap:wrap; padding:14px 0 2px;
}
.pg-btn {
  width:32px; height:32px; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text2); font-family:var(--mono); font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .13s;
}
.pg-btn:hover { border-color:var(--accent); color:var(--accent); }
.pg-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:700; }

/* ═══════════════════════════════════════════════════════
   KEY BOX & COPY
   ═══════════════════════════════════════════════════════ */
.key-box {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r); padding:10px 14px; overflow:hidden;
}
.key-box code {
  flex:1; font-family:var(--mono); font-size:13px;
  color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.copy-btn {
  flex-shrink:0; padding:5px 12px;
  background:var(--surface3); border:1px solid var(--border2); border-radius:6px;
  color:var(--text2); font-size:11px; font-weight:600; cursor:pointer;
  transition:all .14s; white-space:nowrap; font-family:var(--font);
}
.copy-btn:hover { border-color:var(--accent); color:var(--accent); }
.copy-btn.copied { border-color:var(--green); color:var(--green); }

/* ═══════════════════════════════════════════════════════
   CODE BLOCKS
   ═══════════════════════════════════════════════════════ */
.code-block {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 18px;
  font-family:var(--mono); font-size:12px; line-height:1.9;
  overflow-x:auto; color:var(--text2);
}
.ck { color:var(--text3); }
.cv { color:var(--accent); }
.cs { color:#a5f3fc; }
.cn { color:var(--amber); }
.cm { color:var(--green); }
.ce { color:var(--rose); }

/* ═══════════════════════════════════════════════════════
   MODAL / DIALOG
   ═══════════════════════════════════════════════════════ */
.modal-backdrop {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:20px;
  animation:fadeBg .2s var(--ease);
}
.modal-backdrop.open { display:flex; }
@keyframes fadeBg { from{opacity:0} to{opacity:1} }
.modal-box {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r-xl); padding:0; width:100%; max-width:440px;
  box-shadow:var(--shadow-lg);
  animation:modalIn .25s var(--ease-out);
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.94) translateY(10px); }
  to   { opacity:1; transform:none; }
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 0;
}
.modal-title { font-size:16px; font-weight:800; }
.modal-close {
  background:none; border:none; color:var(--text3); font-size:18px;
  cursor:pointer; padding:4px 6px; border-radius:6px; transition:all .14s;
}
.modal-close:hover { background:var(--surface3); color:var(--text); }
.modal-body {
  padding:14px 24px; font-size:14px; color:var(--text2); line-height:1.7;
}
.modal-footer {
  display:flex; justify-content:flex-end; gap:10px;
  padding:16px 24px 20px;
}

/* ═══════════════════════════════════════════════════════
   LOADING / SKELETON / EMPTY
   ═══════════════════════════════════════════════════════ */
.skeleton {
  background:linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s ease infinite;
  border-radius:4px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.spinner {
  display:inline-block; width:13px; height:13px;
  border:2px solid rgba(255,255,255,.2); border-top-color:currentColor;
  border-radius:50%; animation:spin .5s linear infinite; vertical-align:middle;
}
.spinner-lg { width:22px; height:22px; border-width:3px; }
@keyframes spin { to { transform:rotate(360deg); } }

.empty-state {
  display:flex; flex-direction:column; align-items:center;
  padding:52px 20px; color:var(--text3);
}
.empty-icon { font-size:36px; margin-bottom:12px; opacity:.5; }
.empty-text { font-size:14px; color:var(--text2); font-weight:500; }
.empty-sub  { font-size:12px; margin-top:4px; }

/* ═══════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:22px; right:22px; z-index:9999;
  padding:11px 18px; border-radius:var(--r-lg); font-size:13px; font-weight:600;
  max-width:320px; word-break:break-word;
  transform:translateY(70px) scale(.92); opacity:0;
  transition:all .3s var(--ease); pointer-events:none;
}
.toast.show { transform:translateY(0) scale(1); opacity:1; }
.t-success { background:var(--green);  color:#fff; box-shadow:0 8px 24px rgba(16,185,129,.3); }
.t-error   { background:var(--red);    color:#fff; box-shadow:0 8px 24px rgba(239,68,68,.3); }
.t-info    { background:var(--accent); color:var(--bg); box-shadow:0 8px 24px var(--accent-glow); }
.t-amber   { background:var(--amber);  color:var(--bg); box-shadow:0 8px 24px rgba(245,158,11,.3); }

/* ═══════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════ */
.divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border2), transparent);
  margin:18px 0;
}

/* ═══════════════════════════════════════════════════════
   API DOCS — Endpoint rows
   ═══════════════════════════════════════════════════════ */
.ep-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 16px; background:var(--surface2);
  border:1px solid var(--border); border-radius:var(--r);
  margin-bottom:7px; transition:border-color .15s;
}
.ep-row:hover { border-color:var(--border2); }
.m-tag {
  padding:3px 9px; border-radius:5px;
  font-family:var(--mono); font-size:10px; font-weight:700;
  flex-shrink:0; margin-top:1px;
}
.m-get  { background:var(--indigo-soft); color:var(--indigo); }
.m-post { background:var(--green-soft);  color:var(--green); }
.m-put  { background:var(--amber-soft);  color:var(--amber); }
.m-patch{ background:var(--accent-soft); color:var(--accent); }
.m-del  { background:var(--red-soft);    color:var(--red); }
.ep-url  { font-family:var(--mono); font-size:12px; color:var(--text); }
.ep-desc { font-size:12px; color:var(--text2); margin-top:2px; }

/* ═══════════════════════════════════════════════════════
   REFERENCE RESULT HIGHLIGHT
   ═══════════════════════════════════════════════════════ */
.ref-result-box {
  border:1px solid rgba(34,211,238,.25); background:rgba(34,211,238,.03);
  border-radius:var(--r-lg); padding:22px 24px;
  position:relative; overflow:hidden;
  animation:slideIn .28s var(--ease);
}
.ref-result-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(8px); }
  to   { opacity:1; transform:none; }
}
.ref-number {
  font-family:var(--mono); font-size:38px; font-weight:700;
  color:var(--accent); letter-spacing:4px; line-height:1;
}

/* ═══════════════════════════════════════════════════════
   NOISE TEXTURE OVERLAY
   ═══════════════════════════════════════════════════════ */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════ */
@media (max-width:1080px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .page-body  { padding:22px 20px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .sidebar {
    position:fixed; left:0; top:0; bottom:0;
    transform:translateX(calc(-1 * var(--sidebar-w)));
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open { transform:translateX(0); }
  .sb-close     { display:flex; }
  .topbar       { display:flex; }
  .page-body    { padding:14px 14px; }
  .stats-grid   { grid-template-columns:repeat(2,1fr); gap:10px; }
  .form-row     { grid-template-columns:1fr; gap:0; }
  .form-row3    { grid-template-columns:1fr 1fr; }
  .card         { padding:16px; }
  .auth-card    { padding:28px 18px; }
  .ref-number   { font-size:28px; letter-spacing:2px; }
  .pg-hdr       { flex-direction:column; }
  h1            { font-size:22px; }
}

@media (max-width:480px) {
  .stats-grid   { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-val     { font-size:24px; }
  .form-row3    { grid-template-columns:1fr; }
  .modal-box    { border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .modal-backdrop { align-items:flex-end; }
}