/* ─────────────────────────────────────────────
   TOKENS — Modern SaaS palette
───────────────────────────────────────────── */
:root {
  --bg:       #eef0f6;
  --surface:  #f8f9fc;
  --ink:      #1e293b;
  --ink2:     #374151;
  --ink3:     #64748b;
  --border:   rgba(59,130,246,.12);
  --border-l: rgba(59,130,246,.07);
  --acc:      #2563eb;
  --acc-dk:   #1d4ed8;
  --acc-lt:   #3b82f6;
  --indigo:   #6366f1;
  --violet:   #8b5cf6;
  --cyan:     #06b6d4;
  --green:    #16a34a;
  --yellow:   #a16207;
  --red:      #dc2626;
  --orange:   #ea580c;
  --mono:     'IBM Plex Mono', 'Courier New', monospace;
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:   14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow-xs:  0 1px 2px rgba(37,99,235,.06);
  --shadow-sm:  0 1px 3px rgba(37,99,235,.08), 0 1px 2px rgba(37,99,235,.04);
  --shadow-md:  0 4px 16px -2px rgba(37,99,235,.1), 0 2px 6px rgba(37,99,235,.06);
  --shadow-lg:  0 8px 30px -4px rgba(37,99,235,.12), 0 4px 10px rgba(37,99,235,.07);
  --shadow-xl:  0 16px 40px -6px rgba(37,99,235,.14), 0 8px 20px rgba(37,99,235,.08);
  --shadow-card: 0 2px 8px rgba(37,99,235,.06), 0 4px 16px -2px rgba(37,99,235,.08);
  --shadow-card-hover: 0 4px 12px rgba(37,99,235,.1), 0 12px 36px -4px rgba(37,99,235,.14);
  --glow-acc:   0 0 24px rgba(99,102,241,.2);
  --glow-green: 0 0 24px rgba(22,163,74,.2);
  --glow-red:   0 0 24px rgba(220,38,38,.2);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(99,102,241,.3);
  --focus-ring-green: 0 0 0 2px var(--bg), 0 0 0 4px rgba(22,163,74,.3);
  --focus-ring-red: 0 0 0 2px var(--bg), 0 0 0 4px rgba(220,38,38,.3);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(99,102,241,.3), 0 0 20px rgba(99,102,241,.12);
  --grad-btn:   linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  --grad-acc:   linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  --grad-dark:  linear-gradient(135deg, #1e40af 0%, #4338ca 100%);
  --grad-aurora: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.25,.8,.25,1);
  --ease-bounce: cubic-bezier(.68,-.55,.265,1.55);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-micro: cubic-bezier(.25,.8,.25,1);
  --duration-fast: .15s;
  --duration-normal: .2s;
  --duration-slow: .35s;
}

/* ─────────────────────────────────────────────
   RESET + BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  transition: background-color .4s ease, color .4s ease;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);
}
[data-theme="dark"] body::after {
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 650px 450px at 15% 12%, rgba(59,130,246,.1) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 85% 78%, rgba(139,92,246,.08) 0%, transparent 70%),
    radial-gradient(ellipse 450px 350px at 48% 45%, rgba(99,102,241,.06) 0%, transparent 70%),
    radial-gradient(ellipse 350px 280px at 72% 18%, rgba(6,182,212,.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: bgShift 14s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0% { opacity: .6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 650px 450px at 15% 12%, rgba(59,130,246,.06) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 85% 78%, rgba(139,92,246,.05) 0%, transparent 70%),
    radial-gradient(ellipse 450px 350px at 48% 45%, rgba(99,102,241,.04) 0%, transparent 70%),
    radial-gradient(ellipse 350px 280px at 72% 18%, rgba(6,182,212,.03) 0%, transparent 70%);
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, button, textarea { font-family: var(--sans); }
code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: .875em;
  font-family: var(--mono);
  color: var(--ink2);
}

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
.page {
  max-width: 940px;
  margin: 0 auto;
  padding: 36px 28px 80px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  animation: pageEnter .4s var(--ease-out-expo) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Stagger children — see WOW EFFECTS section for enhanced versions */

/* Gate Field Transitions */
.gate-field {
  overflow: hidden;
  transition: max-height .3s var(--ease-out-expo), opacity .25s ease, margin-top .25s ease;
  max-height: 500px;
  opacity: 1;
  transform-origin: top;
}
.gate-field.collapsed { display: none !important; }

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
.hdr {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(99,102,241,.3), rgba(139,92,246,.2), rgba(6,182,212,.15), transparent) 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.hdr::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, rgba(99,102,241,.4), rgba(139,92,246,.3), transparent);
  filter: blur(4px);
}

/* ─────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────── */
.mono { font-family: var(--mono); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-fade { color: var(--ink3); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.lh-snug { line-height: 1.5; }
.lh-tight { line-height: 1.3; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mb-14 { margin-bottom: 14px; }
.mt-4 { margin-top: 4px; }
.hidden { display: none !important; }
.scroll-y { overflow-y: auto; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-6 { gap: 6px; }
.grow { flex: 1; }
.flex-1 { flex: 1; }
.stretch { align-items: stretch; }
.ml-auto { margin-left: auto; }
.wrap { flex-wrap: wrap; }
.inline { display: inline-flex; align-items: center; }
.text-italic { font-style: italic; }
.pos-rel { position: relative; }
.z-top { z-index: 9000; }
.py-8 { padding: 8px 0; }
.ink-strong { color: var(--ink); }
.svg-v2 { vertical-align: -2px; }
.svg-v1 { vertical-align: -1px; }
.svg-lbl-icon { vertical-align: -2px; margin-right: 2px; }
.svg-ink { flex-shrink: 0; color: var(--ink); }
.svg-tip { flex-shrink: 0; margin-top: 2px; color: var(--ink2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  color: var(--ink3);
  text-transform: uppercase;
}
.pill.green  { color: var(--green); border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.06); }
.pill.yellow { color: var(--yellow); border-color: rgba(202,138,4,.25); background: rgba(202,138,4,.06); }
.pill.red    { color: var(--red); border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.06); }
.pill.orange { color: var(--orange); border-color: rgba(234,88,12,.25); background: rgba(234,88,12,.06); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: var(--bg);
  border: 1px solid var(--border-l);
  color: var(--ink3);
  flex-shrink: 0;
}
.badge.green  { color: var(--green); border-color: rgba(22,163,74,.2); background: rgba(22,163,74,.06); }
.badge.yellow { color: var(--yellow); border-color: rgba(202,138,4,.2); background: rgba(202,138,4,.06); }
.badge.red    { color: var(--red); border-color: rgba(220,38,38,.2); background: rgba(220,38,38,.06); }

.icon-left { display: inline-flex; align-items: center; gap: 6px; }
.icon-14 svg { width: 14px; height: 14px; vertical-align: -2px; }

.brand-icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 4px;
}
.tab-caps {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .5px;
}
.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0 10px;
  color: var(--ink3);
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 38px;
}
.icon-btn:hover {
  border-color: var(--border);
  color: var(--ink);
  background: var(--bg);
}
.icon-btn-ghost {
  background: none;
  border: none;
  line-height: 1;
  padding: 4px 6px;
  height: auto;
  color: var(--ink3);
  border-radius: var(--radius-xs);
}
.icon-btn-ghost:hover {
  background: var(--bg);
  color: var(--ink);
}
.cc-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-label-note {
  color: var(--ink3);
  text-transform: none;
  font-size: 11px;
  font-weight: 400;
  margin-right: auto;
}
.cc-cards-input {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  max-height: 400px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--mono);
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  line-height: 1.7;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-cards-input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.details-content-md { max-width: 520px; }
.link-info-body {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
}
.details-content-md .details-header { padding: 14px 18px; }
.details-content-md .details-body { max-height: 70vh; }
.stat-green  { color: var(--green); }
.stat-yellow { color: var(--yellow); }
.stat-red    { color: var(--red); }
.stat-orange { color: var(--orange); }
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink3);
  margin-top: 6px;
}
.stats-tight { margin: 0; gap: 6px; }
.setting-block { padding: 20px; }
.acc-link { color: #2563eb; text-decoration: none; }
.acc-link:hover { text-decoration: underline; }
.break-all { word-break: break-all; }
.is-disabled { opacity: .5; pointer-events: none; }
.note-error {
  color: var(--red);
  padding: 4px 0;
  font-size: 13px;
}

/* ─────────────────────────────────────────────
   MINI / DETAIL TABLES
───────────────────────────────────────────── */
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-k { padding: 6px 0; color: var(--ink3); width: 100px; vertical-align: top; white-space: nowrap; font-size: 12px; }
.mini-v { padding: 6px 0; color: var(--ink); word-break: break-all; }
.mini-a { padding: 6px 0; width: 40px; text-align: right; vertical-align: top; }
.link-detail-wrap { padding: 24px; }
.link-detail-badge { text-align: center; margin-bottom: 20px; }
.link-detail-actions { margin-top: 20px; display: flex; gap: 8px; justify-content: center; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-k { padding: 8px 12px; color: var(--ink3); width: 100px; border-bottom: 1px solid var(--border-l); vertical-align: top; font-size: 13px; }
.detail-v { padding: 8px 12px; border-bottom: 1px solid var(--border-l); color: var(--ink); font-family: var(--mono); font-size: 13px; }
.result-ed-note { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.quick-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.quick-k { padding: 6px 10px; color: var(--ink3); width: 130px; border-bottom: 1px solid var(--border-l); white-space: nowrap; vertical-align: top; font-size: 12px; }
.quick-v { padding: 6px 10px; font-family: var(--mono); font-size: 12px; border-bottom: 1px solid var(--border-l); word-break: break-all; }
.quick-v-hi { color: var(--yellow); font-weight: 600; }
.quick-v-dim { color: var(--ink3); opacity: .5; }

/* ─────────────────────────────────────────────
   RAW DETAIL (CC result detail modal)
───────────────────────────────────────────── */
.raw-detail { padding: 20px 24px; }
.raw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.raw-status { font-weight: 600; font-size: 14px; letter-spacing: .3px; }
.raw-card { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.raw-elapsed { font-size: 12px; color: var(--ink3); }
.raw-bin { font-size: 12px; color: var(--ink3); margin-bottom: 12px; }
.raw-message {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid var(--border-l);
  background: var(--bg);
}
.tone-green .raw-status, .tone-green .raw-message { color: var(--green); }
.tone-green .raw-message { background: rgba(22,163,74,.05); border-color: rgba(22,163,74,.2); }
.tone-yellow .raw-status, .tone-yellow .raw-message { color: var(--yellow); }
.tone-yellow .raw-message { background: rgba(202,138,4,.05); border-color: rgba(202,138,4,.2); }
.tone-red .raw-status, .tone-red .raw-message { color: var(--red); }
.tone-red .raw-message { background: rgba(220,38,38,.05); border-color: rgba(220,38,38,.2); }
.raw-ed-wrap {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
}
.raw-ed-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ed-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ed-k { padding: 6px 10px; color: var(--ink3); width: 100px; border-bottom: 1px solid var(--border-l); font-size: 12px; }
.ed-v { padding: 6px 10px; border-bottom: 1px solid var(--border-l); font-family: var(--mono); font-size: 12px; color: var(--ink); font-weight: 500; }
.ed-up { text-transform: uppercase; }
.ed-analysis {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-l);
}
.raw-section-title { font-size: 11px; font-weight: 600; color: var(--ink3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.raw-empty { color: var(--ink3); font-size: 13px; margin-bottom: 16px; }
.raw-actions-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.raw-actions-row .raw-section-title { margin-bottom: 0; }
.raw-json {
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink2);
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
  margin: 0;
}

/* Button sizes */
.btn-compact { height: 30px; font-size: 12px; padding: 0 12px; }
.btn-compact .lbl { display: inline-flex; align-items: center; gap: 4px; }

/* ─────────────────────────────────────────────
   WORDMARK / HEADER
───────────────────────────────────────────── */
.wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--ink);
  line-height: 1;
}
.wordmark .neon {
  background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 300% 300%;
  animation: gradientText 4s ease infinite;
  position: relative;
}
@keyframes gradientText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.wordmark span { color: var(--ink3); font-weight: 400; }
.hdr-sub {
  font-size: 13px;
  color: var(--ink3);
  letter-spacing: .2px;
  margin-top: 4px;
  font-weight: 400;
}
.hdr-l { display: flex; flex-direction: column; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  padding: 5px 12px;
  border: 1px solid var(--border-l);
  border-radius: 999px;
  color: var(--ink3);
  background: var(--surface);
  transition: all .2s ease;
  white-space: nowrap;
}
.status-pill.on {
  border-color: rgba(22,163,74,.3);
  color: var(--green);
  background: rgba(22,163,74,.05);
}
.pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background .15s;
}
.status-pill.on .pip { background: var(--green); animation: pipPulse 2s ease-in-out infinite; }
@keyframes pipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}

/* ─────────────────────────────────────────────
   SK BAR
───────────────────────────────────────────── */
.sk-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  align-items: stretch;
}
.sk-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-family: var(--mono);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: all .25s var(--ease-micro);
  letter-spacing: .3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04), var(--shadow-xs);
}
.sk-input:hover {
  border-color: var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04), var(--shadow-sm);
}
.sk-input:focus {
  border-color: var(--acc);
  box-shadow: var(--focus-glow), inset 0 1px 2px rgba(0,0,0,.02);
}
.sk-input.ok  { border-color: var(--green); box-shadow: var(--focus-ring-green), inset 0 1px 2px rgba(0,0,0,.02); }
.sk-input.err { border-color: var(--red); box-shadow: var(--focus-ring-red), inset 0 1px 2px rgba(0,0,0,.02); }

/* ─────────────────────────────────────────────
   STATS STRIP
───────────────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr .55fr;
  gap: 8px;
  margin-bottom: 20px;
}
.stat-box {
  background: var(--surface);
  border: 1.5px solid rgba(99,102,241,.1);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .3s var(--ease-micro);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,255,255,.4) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.08) 55%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
}
.stat-box:hover::after { animation: shimmer .6s ease forwards; }
@keyframes shimmer { to { transform: translateX(100%); } }
.stat-box:hover {
  border-color: rgba(99,102,241,.25);
  box-shadow: var(--shadow-card-hover), 0 0 20px rgba(99,102,241,.08);
  transform: translateY(-3px);
}
.stat-box:active { transform: translateY(0) scale(.98); }
.stat-n {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.stat-n.blank {
  display: inline-block;
  width: 32px; height: 22px;
  border-radius: var(--radius-xs);
  background: var(--border-l);
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .3; } }
.stat-lbl {
  font-size: 12px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   DETAILS MODAL
───────────────────────────────────────────── */
.details-modal {
  position: fixed;
  inset: 0;
  background: rgba(99,102,241,.1);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9000;
}
.details-modal.open { display: flex; }
.details-content {
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: calc(var(--radius) + 4px);
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 80px rgba(99,102,241,.06);
  animation: modalSlideIn .3s var(--ease-out-expo);
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(.95) translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.details-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.details-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.details-close {
  font-size: 20px;
  color: var(--ink3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all .15s ease;
  display: flex;
  align-items: center;
}
.details-close:hover { color: var(--ink); background: var(--bg); }
.details-body { padding: 0; max-height: 60vh; overflow-y: auto; }

/* ─────────────────────────────────────────────
   ITEM ROWS (Payment Links list)
───────────────────────────────────────────── */
.item-row {
  display: flex;
  align-items: flex-start;
  padding: 14px 18px;
  margin: 4px 10px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: all .15s ease;
  cursor: pointer;
  gap: 14px;
  position: relative;
}
.item-row:hover { background: var(--bg); border-color: var(--border); }
.item-row:last-child { margin-bottom: 10px; }
.item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.link-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-row-id { font-size: 12px; font-family: var(--mono); color: var(--ink2); letter-spacing: .1px; }
.link-row-date { font-size: 12px; color: var(--ink3); }
.link-row-mode {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.link-row-mode.live { color: var(--green); background: rgba(22,163,74,.06); }
.link-row-mode.test { color: var(--yellow); background: rgba(202,138,4,.06); }
.item-name { font-size: 13px; font-weight: 500; color: #2563eb; word-break: break-all; line-height: 1.4; }
.item-meta { font-size: 12px; color: var(--ink3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item-meta span { display: inline-flex; align-items: center; }
.item-meta span + span::before { content: '\00B7'; margin-right: 6px; color: var(--border); font-weight: 700; }
.item-actions { display: flex; gap: 6px; flex-shrink: 0; align-self: center; }
.item-btn {
  font-size: 12px;
  padding: 5px 12px;
  height: 28px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink3);
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .1px;
  text-transform: uppercase;
}
.item-btn:hover { border-color: var(--border); color: var(--ink); }
.item-btn.danger { border-color: rgba(220,38,38,.2); color: var(--red); }
.item-btn.danger:hover { border-color: var(--red); color: #fff; background: var(--red); }
.item-btn.success { border-color: rgba(22,163,74,.2); color: var(--green); }
.item-btn.success:hover { border-color: var(--green); color: #fff; background: var(--green); }

/* ─────────────────────────────────────────────
   ACCOUNT INFO CARDS
───────────────────────────────────────────── */
.acct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.acct-card {
  background: var(--surface);
  border: 1.5px solid rgba(99,102,241,.1);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  transition: all .3s var(--ease-micro);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.acct-card:hover { border-color: rgba(99,102,241,.2); transform: translateY(-2px); box-shadow: var(--shadow-md), 0 0 12px rgba(99,102,241,.06); }
.acct-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink3); margin-bottom: 4px; font-weight: 500; }
.acct-val { font-size: 15px; font-weight: 600; color: var(--ink); font-family: var(--mono); }
.acct-val--sm { font-size: 13px; font-weight: 500; }

/* CC stats */
.cc-stats { margin-top: 16px; margin-bottom: 0; }
.cc-stats:not(.stats-tight) { grid-template-columns: 1fr 1fr 1fr .55fr; }
.cc-stats.stats-tight { grid-template-columns: repeat(3, 1fr); }

/* Links panel header */
.links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-l);
  flex-wrap: wrap;
  gap: 8px;
}
.links-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.links-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────
   TABS — Clean horizontal with bottom border
───────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border-l);
  margin-bottom: 24px;
  gap: 2px;
  position: relative;
  background: rgba(0,0,0,.02);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 4px 4px 0;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink3);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .25s var(--ease-micro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.tab svg { flex-shrink: 0; vertical-align: middle; opacity: .5; transition: all .25s var(--ease-micro); }
.tab:hover svg, .tab.on svg { opacity: 1; }
.tab:hover { color: var(--ink); background: rgba(99,102,241,.06); }
.tab.on {
  color: #fff;
  border-bottom-color: transparent;
  font-weight: 700;
  background: var(--grad-btn);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  box-shadow: 0 -2px 8px rgba(99,102,241,.2), inset 0 1px 0 rgba(255,255,255,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.tab.on svg { opacity: 1; color: #fff; }
.tab::after { display: none; }
.tab.on::after {
  display: block !important;
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  border-radius: 2px 2px 0 0;
}

/* ─────────────────────────────────────────────
   PANEL
───────────────────────────────────────────── */
.panel { display: none; opacity: 0; }
.panel.on { display: block; animation: panelFadeIn .35s var(--ease-out-expo) forwards; }
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─────────────────────────────────────────────
   SECTION LABEL
───────────────────────────────────────────── */
.sec-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink2);
  margin-bottom: 12px;
  font-weight: 700;
  position: relative;
  padding-left: 12px;
}
.sec-label::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: var(--grad-aurora);
  border-radius: 2px;
}

/* ─────────────────────────────────────────────
   BLOCKS / CARDS
───────────────────────────────────────────── */
.block {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(99,102,241,.1);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,255,255,.5) inset;
  transition: all .3s var(--ease-micro);
}
.block:hover { box-shadow: var(--shadow-card-hover), 0 0 30px rgba(99,102,241,.08), 0 0 0 1px rgba(255,255,255,.6) inset; transform: translateY(-2px); }
[data-theme="dark"] .block { background: rgba(17,17,20,.85); border-color: rgba(99,102,241,.12); box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,255,255,.03) inset; }
[data-theme="dark"] .block:hover { box-shadow: var(--shadow-card-hover), 0 0 30px rgba(99,102,241,.1), 0 0 0 1px rgba(255,255,255,.05) inset; }
.block + .block { margin-top: 0; }
.block-flat { padding: 0; }
.block-flat > .field-grid { padding: 20px 22px 0; }
.block-flat > .btn-row { padding: 0 22px 22px; }
.block-flat > .result-block { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; }

/* ─────────────────────────────────────────────
   FIELD ROWS
───────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 16px;
}
.field-grid .f-full  { grid-column: 1 / -1; }
.field-grid .f-span2 { grid-column: span 2; }
.field-grid-2 { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink2);
  font-weight: 600;
}
.field input,
.field select {
  height: 42px;
  padding: 0 12px;
  font-size: 15px;
  font-family: var(--sans);
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  transition: all .25s var(--ease-micro);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.field input:hover, .field select:hover { border-color: var(--border); }
.field input:focus, .field select:focus {
  border-color: var(--acc);
  box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.02);
}
.field input::placeholder { color: var(--ink3); font-weight: 400; }
.links-scroll { max-height: 500px; overflow-y: auto; padding-top: 4px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute;
  right: 10px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  color: var(--ink3);
  opacity: .6;
}
.select-wrap:hover::after { opacity: 1; }
.select-wrap select { padding-right: 30px; cursor: pointer; }

/* ─────────────────────────────────────────────
   GATEWAY SUB-BUTTONS — Segmented Control
───────────────────────────────────────────── */
.gate-sub-btns {
  display: flex;
  gap: 0;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border-l);
  position: relative;
}
.gate-sub-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: calc(var(--radius-sm) - 3px);
  background: transparent;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s var(--ease-micro);
  text-align: center;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.gate-sub-btn:hover { color: var(--ink); }
.gate-sub-btn:active { transform: scale(.97); }
.gate-sub-btn.on {
  background: var(--surface);
  color: var(--indigo);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(99,102,241,.12), 0 2px 6px rgba(99,102,241,.06);
  transition: all .3s var(--ease-spring);
}

/* Inbuilt Fields Grid */
.inbuilt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .inbuilt-grid { grid-template-columns: 1fr; } }

/* WooCommerce Fields Grid */
.woo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.woo-grid > .field { display: flex; flex-direction: column; }
.woo-grid > .field textarea { flex: 1; }
@media (max-width: 640px) { .woo-grid { grid-template-columns: 1fr; } }

/* Shopify URLs textarea */
.shopify-urls-input {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.6;
  outline: none;
  transition: all .25s var(--ease-micro);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.shopify-urls-input:hover { border-color: var(--border); }
.shopify-urls-input:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.02); }

/* WooCommerce textarea */
.woo-cookies-input,
.woo-sites-input {
  width: 100%;
  min-height: 56px;
  max-height: 180px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.6;
  outline: none;
  transition: all .25s var(--ease-micro);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.woo-cookies-input:hover, .woo-sites-input:hover { border-color: var(--border); }
.woo-cookies-input:focus, .woo-sites-input:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.02); }

/* Setting Inline */
.setting-inline { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.input-amount { width: 72px; text-align: center; height: 36px; font-size: 13px; }
.select-sm { min-width: 72px; }
.select-sm select { padding: 6px 24px 6px 8px; font-size: 12px; }

/* Setting-card inline controls */
.setting-card input:not([type="checkbox"]):not([type="radio"]),
.setting-card select {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-family: var(--sans);
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: all .25s var(--ease-micro);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.setting-card input:not([type="checkbox"]):not([type="radio"]):hover,
.setting-card select:hover { border-color: var(--border); }
.setting-card input:not([type="checkbox"]):not([type="radio"]):focus,
.setting-card select:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.02); }

.btn-full { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────
   BUTTONS — Flat modern
───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  height: 42px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
  transition: all .25s var(--ease-micro);
  -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent;
  overflow: hidden;
}
.btn-primary {
  background: var(--grad-btn);
  background-size: 200% 200%;
  color: #fff;
  border-color: rgba(255,255,255,.15);
  border-bottom: 3px solid rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(99,102,241,.3), 0 6px 16px rgba(139,92,246,.18);
  transition: all .3s var(--ease-micro);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.btn-primary:hover {
  background-position: 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 12px rgba(99,102,241,.4), 0 12px 28px rgba(139,92,246,.22);
  transform: translateY(-3px);
  border-bottom-width: 4px;
}
.btn-primary:active { background: #4338ca; transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(99,102,241,.2); }
.btn-primary:disabled { background: #93c5fd; border-color: #93c5fd; cursor: not-allowed; opacity: .6; box-shadow: none; }
.btn-primary:disabled:hover { background: #93c5fd; transform: none; box-shadow: none; }

.btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border-bottom: 3px solid rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  color: #fff;
  border-color: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 3px rgba(220,38,38,.2);
}
.btn-danger:hover { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); transform: translateY(-2px); border-bottom-width: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 12px rgba(220,38,38,.3); }
.btn-danger:active { transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }

.btn-warn {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  border-color: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 3px rgba(220,38,38,.2);
}
.btn-warn:hover { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); transform: translateY(-1px); }
.btn-warn:active { transform: translateY(0) scale(.97); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink2);
  border-color: var(--border-l);
  border-bottom: 2px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(37,99,235,.06), 0 2px 6px rgba(37,99,235,.04);
}
.btn-ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--border); border-bottom-width: 3px; box-shadow: 0 2px 4px rgba(37,99,235,.08), 0 6px 14px rgba(37,99,235,.08); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 1px 3px rgba(0,0,0,.08); }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-sq { width: 42px; padding: 0; font-size: 16px; }

.btn .spin {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.95);
  border-radius: 50%;
  animation: spinRotate .65s cubic-bezier(.4,.15,.6,.85) infinite;
}
.btn-ghost .spin { border-color: rgba(0,0,0,.08); border-top-color: var(--ink2); }
.btn-danger .spin,
.btn-warn .spin { border-color: rgba(255,255,255,.2); border-top-color: rgba(255,255,255,.95); }
.btn.busy { pointer-events: none; }
.btn.busy .lbl { opacity: 0; transition: opacity .15s ease; }
.btn.busy .spin { display: block; position: absolute; }
@keyframes spinRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Standalone Spinner (for content areas) ── */
.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--ink3);
  font-size: 13px;
}
.spinner::before {
  content: '';
  width: 20px; height: 20px;
  border: 2.5px solid var(--border-l);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spinRotate .7s cubic-bezier(.4,.15,.6,.85) infinite;
  flex-shrink: 0;
}
.spinner-sm { padding: 16px 12px; font-size: 12px; }
.spinner-sm::before { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { padding: 48px 20px; }
.spinner-lg::before { width: 28px; height: 28px; border-width: 3px; }
.spinner-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.spinner-center::before {
  content: '';
  width: 24px; height: 24px;
  border: 2.5px solid var(--border-l);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spinRotate .7s cubic-bezier(.4,.15,.6,.85) infinite;
}

/* Page-level loading overlay */
.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #0b0f1a;
  z-index: 10000;
  transition: opacity .6s var(--ease-out-expo), visibility .6s var(--ease-out-expo);
  overflow: hidden;
}
.page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(59,130,246,.15) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 80% 60%, rgba(139,92,246,.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(6,182,212,.08) 0%, transparent 70%);
  animation: loaderAuroraPulse 4s ease-in-out infinite alternate;
}
@keyframes loaderAuroraPulse {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}
.page-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-aurora {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.loader-particles {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader-rings {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 6px;
}
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
}
.loader-ring.r1 {
  border-top-color: #3b82f6;
  border-right-color: rgba(59,130,246,.3);
  animation: loaderSpin 1.2s cubic-bezier(.4,.15,.6,.85) infinite;
}
.loader-ring.r2 {
  inset: 8px;
  border-top-color: #8b5cf6;
  border-left-color: rgba(139,92,246,.3);
  animation: loaderSpin 1.6s cubic-bezier(.4,.15,.6,.85) infinite reverse;
}
.loader-ring.r3 {
  inset: 16px;
  border-bottom-color: #06b6d4;
  border-right-color: rgba(6,182,212,.3);
  animation: loaderSpin 2s cubic-bezier(.4,.15,.6,.85) infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.loader-brand {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: #fff;
}
.loader-brand .neon {
  background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6, #06b6d4);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loaderGradShift 3s ease-in-out infinite;
}
@keyframes loaderGradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.loader-tagline {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: -8px;
}
.loader-progress {
  width: 180px;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.loader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width .3s ease;
}
.loader-sub {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  transition: opacity .3s ease;
}
.page-loader-ring {
  width: 36px; height: 36px;
  border: 3px solid var(--border-l);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spinRotate .8s cubic-bezier(.4,.15,.6,.85) infinite;
}
.page-loader-text {
  font-size: 12px;
  color: var(--ink3);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Inline spinner for text */
.spin-inline {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid var(--border-l);
  border-top-color: var(--ink3);
  border-radius: 50%;
  animation: spinRotate .65s cubic-bezier(.4,.15,.6,.85) infinite;
  vertical-align: -2px;
  margin-right: 4px;
}

[data-theme="dark"] .spinner::before { border-color: var(--border); border-top-color: var(--ink); }
[data-theme="dark"] .spinner-center::before { border-color: var(--border); border-top-color: var(--ink); }
[data-theme="dark"] .page-loader-ring { border-color: var(--border); border-top-color: var(--ink); }
[data-theme="dark"] .spin-inline { border-color: var(--border); border-top-color: var(--ink3); }

.btn-row { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────
   RESULT OUTPUT
───────────────────────────────────────────── */
.result-block {
  display: none;
  margin-top: 14px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.result-block.show {
  display: block;
  border-left: 3px solid var(--green);
  animation: fadeup .25s ease both;
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-head {
  background: var(--bg);
  border-bottom: 1px solid var(--border-l);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 14px;
  gap: 2px 12px;
  border-bottom: 1px solid var(--border-l);
  transition: all .25s var(--ease-micro);
  position: relative;
  cursor: pointer;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: var(--bg); transform: translateX(3px); box-shadow: inset 3px 0 0 var(--indigo); }
.result-row .result-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.result-row .result-card { font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 500; }
.result-row .result-elapsed { font-size: 12px; color: var(--ink2); white-space: nowrap; margin-left: auto; }
.result-row .result-bin { width: 100%; font-size: 12px; color: var(--ink2); margin-top: 2px; text-transform: uppercase; letter-spacing: .2px; }
.result-row .result-msg { width: 100%; margin-top: 2px; font-size: 12px; color: var(--ink2); }
.result-row.cc-row-charged .result-msg { color: var(--green); font-weight: 600; }
.result-row.cc-row-live    .result-msg { color: var(--yellow); }
.result-row.cc-row-dead    .result-msg { color: var(--red); }
.result-row.cc-row-error   .result-msg { color: var(--orange); }
.result-row .result-ed { width: 100%; margin-top: 2px; }
.r-lbl { font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .4px; width: 88px; flex-shrink: 0; }
.r-val { flex: 1; font-size: 14px; color: var(--ink); word-break: break-all; line-height: 1.5; }
.r-val a { font-weight: 500; }
.copy-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  height: 24px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink3);
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: .1px;
  transition: all .2s var(--ease-micro);
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-xs);
}
.copy-btn.copy-btn-compact { padding: 4px 10px; height: 26px; font-size: 11px; }
.copy-btn:hover { border-color: var(--border); color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.copy-btn:active { transform: translateY(0) scale(.96); box-shadow: none; }
.copy-btn.done { border-color: var(--green); color: var(--green); background: rgba(22,163,74,.05); }

/* ─────────────────────────────────────────────
   WARN BOX
───────────────────────────────────────────── */
.warn-box {
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────
   LOG TERMINAL
───────────────────────────────────────────── */
.terminal {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.terminal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  z-index: 2;
}
.term-bar {
  background: #1e293b;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #334155;
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.td-r { background: #ef4444; }
.td-y { background: #eab308; }
.td-g { background: #22c55e; }
.term-name {
  font-size: 11px;
  color: #64748b;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: 8px;
  font-weight: 500;
}
.term-clr {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .2px;
  padding: 3px 10px;
  border: 1px solid #334155;
  border-radius: var(--radius-xs);
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.term-clr:hover { color: #94a3b8; border-color: #475569; }
.term-body {
  padding: 14px;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
  background: #0f172a;
}
.log-line {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  animation: logSlideIn .2s var(--ease-out-expo);
}
/* logSlideIn — see WOW EFFECTS section */
.l-ts   { color: #64748b; min-width: 64px; flex-shrink: 0; }
.l-tag  { min-width: 38px; flex-shrink: 0; font-weight: 500; }
.l-tag.ok   { color: #4ade80; }
.l-tag.run  { color: #60a5fa; }
.l-tag.warn { color: #facc15; }
.l-tag.err  { color: #f87171; }
.l-tag.info { color: #a78bfa; }
.l-msg { color: #cbd5e1; line-height: 1.6; }
.l-msg.ok   { color: #e2e8f0; }
.l-msg.err  { color: #f87171; }
.l-msg.warn { color: #facc15; }
.l-msg.info { color: #cbd5e1; }
.term-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  font-size: 13px;
  color: #475569;
  letter-spacing: .3px;
}
.term-cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: #475569;
  vertical-align: text-bottom;
  animation: cur-blink .9s steps(1) infinite;
  margin-left: 2px;
}
@keyframes cur-blink { 50% { opacity: 0; } }

/* ─────────────────────────────────────────────
   TOASTS
───────────────────────────────────────────── */
#toasts {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.tst {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 380px;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  border-left-width: 3px;
  box-shadow: var(--shadow-lg);
  animation: tst-in .25s var(--ease-out-expo) both;
}
/* tst-in — see WOW EFFECTS section */
.tst.out { animation: tst-out .25s ease forwards; }
@keyframes tst-out { to { opacity: 0; transform: translateX(12px) scale(.95); filter: blur(3px); max-height: 0; margin-bottom: -8px; } }
.tst-ok   { background: #0c1929; color: #e2e8f0; border-left-color: #22c55e; }
.tst-err  { background: #1c1014; color: #fca5a5; border-left-color: #f87171; }
.tst-warn { background: #1c1810; color: #fde68a; border-left-color: #facc15; }
.tst-info { background: #0c1929; color: #cbd5e1; border-left-color: #3b82f6; }
.tst-ico  { font-size: 14px; flex-shrink: 0; }
.tst-msg  { flex: 1; }
.tst-x    { font-size: 14px; opacity: .5; transition: opacity .15s; flex-shrink: 0; line-height: 1; }
.tst:hover .tst-x { opacity: 1; }

/* ─────────────────────────────────────────────
   CONFIRM MODAL
───────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(99,102,241,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  z-index: 8888;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 380px; width: 100%;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(99,102,241,.08);
  animation: modal-in .3s var(--ease-out-expo);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(.9) translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.modal-body { font-size: 14px; color: var(--ink2); line-height: 1.6; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ─────────────────────────────────────────────
   LIST / EMPTY STATES
───────────────────────────────────────────── */
.list-empty { padding: 40px 20px; text-align: center; color: var(--ink3); font-size: 13px; line-height: 1.6; }

/* Link Stats */
.links-stats { padding: 10px 16px; border-bottom: 1px solid var(--border-l); }
.stat-box.compact { padding: 10px 12px; cursor: default; }
.stat-box.compact .stat-n { font-size: 20px; }
.links-actions .btn-compact { height: 30px; }

/* Filter Panel */
.result-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.result-scroll { max-height: 400px; overflow-y: auto; }

/* ─────────────────────────────────────────────
   SETTINGS CARDS
───────────────────────────────────────────── */
.setting-stack { display: flex; flex-direction: column; gap: 8px; }
.setting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  gap: 14px;
  transition: border-color .15s ease;
}
.setting-card:hover { border-color: var(--border); }
.setting-icon { display: flex; align-items: center; justify-content: center; color: var(--ink3); flex-shrink: 0; }
.setting-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.setting-title { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.setting-sub { font-size: 12px; color: var(--ink3); margin-top: 2px; line-height: 1.4; }
.setting-fields { display: flex; flex-direction: column; gap: 10px; }

.setting-card-col {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  gap: 0;
  transition: border-color .15s;
}
.setting-card-col:hover { border-color: var(--border); }
.setting-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.setting-card-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* System proxy notice */
.setting-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink2);
}
.setting-notice svg { flex-shrink: 0; margin-top: 2px; }
.setting-notice-info {
  background: rgba(37,99,235,.05);
  border: 1px solid rgba(37,99,235,.15);
  color: #1d4ed8;
}
.setting-notice-info strong { font-weight: 600; }
.setting-notice.hidden { display: none; }

.input-with-btn { display: flex; align-items: center; gap: 8px; }
.input-with-btn input { flex: 1; min-width: 0; height: 36px; font-size: 13px; }
.input-with-btn .btn { flex-shrink: 0; height: 36px; padding: 0 14px; font-size: 12px; white-space: nowrap; }

.btn-save-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  margin-top: 16px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--grad-btn);
  background-size: 200% 200%;
  color: #fff;
  transition: all .35s var(--ease-micro);
  border: 1px solid rgba(255,255,255,.1);
  border-bottom: 3px solid rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(99,102,241,.25), 0 6px 16px rgba(139,92,246,.15);
}
.btn-save-all:hover { background-position: 100% 100%; transform: translateY(-3px); border-bottom-width: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 12px rgba(99,102,241,.35), 0 12px 28px rgba(139,92,246,.2); }
.btn-save-all:active { transform: translateY(1px); border-bottom-width: 1px; box-shadow: inset 0 2px 6px rgba(0,0,0,.2), 0 1px 2px rgba(99,102,241,.15); }
.btn-save-all svg { flex-shrink: 0; }

.proxy-info-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0; }
.proxy-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
}
.proxy-live { background: rgba(22,163,74,.08); color: var(--green); border: 1px solid rgba(22,163,74,.2); }
.proxy-dead { background: rgba(220,38,38,.08); color: var(--red); border: 1px solid rgba(220,38,38,.2); }
.proxy-dead-msg { font-size: 13px; color: var(--ink2); text-align: center; line-height: 1.5; }
.proxy-dead-latency { font-size: 12px; color: var(--ink3); }
.proxy-inline { display: flex; align-items: center; gap: 8px; }
.proxy-inline input { flex: 1; min-width: 0; }
.proxy-inline .btn { white-space: nowrap; flex-shrink: 0; }
.details-content.proxy-modal { max-width: 380px; }
.info-tip {
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
@keyframes detailSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─────────────────────────────────────────────
   PROGRESS BAR
───────────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--border-l);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #6366f1, #3b82f6);
  background-size: 300% 100%;
  border-radius: 4px;
  width: 0%;
  transition: width .5s cubic-bezier(.25,.46,.45,.94);
  position: relative;
  animation: progressGlow 3s ease-in-out infinite;
}
@keyframes progressGlow {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: -2px; right: 0; bottom: -2px;
  width: 28px;
  background: radial-gradient(circle at right, rgba(139,92,246,.5), transparent);
  border-radius: 0 4px 4px 0;
  filter: blur(3px);
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border-l);
  font-size: 12px;
  color: var(--ink3);
  display: flex;
  justify-content: space-between;
  opacity: .6;
  transition: opacity .2s ease;
}
.site-footer:hover { opacity: 1; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (min-width: 1200px) { .page { max-width: 980px; } }

@media (max-width: 1024px) { .page { max-width: 760px; padding: 30px 22px 70px; } }

@media (max-width: 768px) {
  .page { max-width: 100%; padding: 22px 18px 60px; }
  body { font-size: 14px; }
  .field-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .field-grid .f-span2 { grid-column: 1 / -1; }
  .stat-n { font-size: 24px; }
  .stat-lbl { font-size: 11px; }
  .wordmark { font-size: 20px; }
  .details-content { margin: 12px; max-height: 85vh; }
  .log-line { font-size: 12px; gap: 6px; }
  .l-ts { min-width: 52px; font-size: 11px; }
  .l-tag { min-width: 32px; font-size: 11px; }
  .l-msg { font-size: 12px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 14px; font-size: 12px; flex-shrink: 0; }
  .site-footer { font-size: 12px; gap: 8px; }
  .btn { height: 44px; font-size: 14px; padding: 0 16px; }
  .btn-sq { width: 44px; padding: 0; }
  .sk-input { height: 44px; font-size: 15px; }
  .block { padding: 20px; }
  .field input, .field select { height: 42px; font-size: 14px; }
  .setting-title { font-size: 14px; }
}

@media (max-width: 520px) {
  .page { padding: 18px 14px 50px; }
  .hdr { flex-direction: column; gap: 10px; align-items: flex-start; }
  .wordmark { font-size: 19px; }
  .hdr-sub { font-size: 12px; }
  .sk-bar { flex-wrap: wrap; gap: 8px; }
  .sk-input { width: 100%; flex: none; order: -1; height: 46px; font-size: 15px; }
  .field-grid { grid-template-columns: 1fr; gap: 10px; }
  .field-grid .f-full, .field-grid .f-span2 { grid-column: 1; }
  .stats-strip { grid-template-columns: 1fr 1fr 1fr .55fr; gap: 8px; }
  .stat-box { padding: 12px 10px; }
  .stat-n { font-size: 22px; }
  .stat-lbl { font-size: 11px; letter-spacing: .3px; }
  .acct-grid { grid-template-columns: 1fr; gap: 8px; }
  .tabs { gap: 0; }
  .tab { flex: none; padding: 10px 12px; font-size: 12px; }
  .block { padding: 16px; }
  .btn { height: 44px; font-size: 14px; min-height: 44px; }
  .btn-row { gap: 8px; }
  .btn-sq { width: 44px; }
  .result-row { padding: 12px 12px; gap: 8px; }
  .r-lbl { width: 72px; font-size: 11px; }
  .r-val { font-size: 14px; }
  #toasts { left: 12px; right: 12px; top: 12px; }
  .tst { max-width: 100%; font-size: 14px; padding: 12px 14px; }
  .details-content { margin: 0; max-height: 100vh; border-radius: 0; max-width: 100%; }
  .details-modal { padding: 0; }
  .details-header { padding: 14px 16px; }
  .details-body { max-height: calc(100vh - 60px); }
  .item-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; margin: 4px 8px; }
  .item-actions { width: 100%; justify-content: flex-end; }
  .item-meta { font-size: 12px; }
  .modal { padding: 22px; margin: 10px; }
  .modal-title { font-size: 16px; }
  .modal-body { font-size: 14px; }
  .term-body { min-height: 160px; max-height: 250px; padding: 10px; }
  .log-line { font-size: 12px; gap: 4px; }
  .l-ts { min-width: 44px; font-size: 11px; }
  .l-tag { min-width: 28px; font-size: 11px; }
  .l-msg { font-size: 12px; }
  .field input, .field select { height: 42px; font-size: 14px; }
  .field label { font-size: 11px; }
  .site-footer { flex-direction: column; align-items: center; gap: 4px; font-size: 12px; text-align: center; }
}

@media (max-width: 360px) {
  .page { padding: 14px 10px 40px; }
  .sk-bar { gap: 6px; }
  .btn { height: 42px; font-size: 13px; padding: 0 12px; }
  .btn-sq { width: 42px; }
  .block { padding: 14px; }
  .stats-strip { gap: 4px; }
  .stat-box { padding: 10px 8px; }
  .stat-n { font-size: 19px; }
  .stat-lbl { font-size: 10px; letter-spacing: .2px; }
  .tab { padding: 9px 10px; font-size: 11px; }
  .links-header { padding: 10px 12px; }
  .links-title { font-size: 14px; }
  .links-actions { width: 100%; }
  .links-actions .btn { flex: 1; }
  .wordmark { font-size: 18px; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .page { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
  #toasts { top: calc(12px + env(safe-area-inset-top)); }
}

@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px; }
  .btn-sq { min-width: 48px; min-height: 48px; }
  .tab { min-height: 46px; display: inline-flex; align-items: center; }
  .copy-btn { min-height: 36px; padding: 6px 14px; }
  .item-btn { min-height: 36px; padding: 6px 14px; }
  .toggle-switch { width: 50px; height: 28px; }
  .toggle-slider::before { height: 22px; width: 22px; }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }
  .sk-input { height: 48px; font-size: 16px; }
  .field input, .field select { height: 46px; font-size: 16px; }
}

/* ─────────────────────────────────────────────
   TOGGLE SWITCH
───────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background .2s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s var(--ease-smooth);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.toggle-switch input:checked + .toggle-slider { background: var(--indigo); box-shadow: 0 0 10px rgba(99,102,241,.3); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ─────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #09090b;
  --surface:  #111114;
  --ink:      #f8fafc;
  --ink2:     #cbd5e1;
  --ink3:     #94a3b8;
  --border:   rgba(255,255,255,.1);
  --border-l: rgba(255,255,255,.06);
  --acc:      #3b82f6;
  --acc-dk:   #2563eb;
  --acc-lt:   #60a5fa;
  --green:    #4ade80;
  --yellow:   #facc15;
  --red:      #f87171;
  --orange:   #fb923c;
  --shadow-xs:  0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:  0 10px 20px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
  --shadow-xl:  0 20px 30px rgba(0,0,0,.6), 0 8px 12px rgba(0,0,0,.4);
  --shadow-card: 0 2px 6px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  --shadow-card-hover: 0 6px 16px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.25);
  --glow-acc:   0 0 24px rgba(99,102,241,.15);
  --glow-green: 0 0 24px rgba(74,222,128,.15);
  --glow-red:   0 0 24px rgba(248,113,113,.15);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(99,102,241,.3);
  --focus-ring-green: 0 0 0 2px var(--bg), 0 0 0 4px rgba(74,222,128,.25);
  --focus-ring-red: 0 0 0 2px var(--bg), 0 0 0 4px rgba(248,113,113,.25);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(99,102,241,.3), 0 0 16px rgba(99,102,241,.1);
  --grad-btn: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] a { color: #60a5fa; }
[data-theme="dark"] .terminal { background: #070b14; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .term-bar { background: #0d1220; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .term-body { background: #070b14; }
[data-theme="dark"] .tst { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .btn-primary {
  background: var(--grad-btn);
  background-size: 200% 200%;
  color: #fff;
  border-color: rgba(139,92,246,.2);
  border-bottom: 3px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(99,102,241,.3), 0 6px 16px rgba(139,92,246,.18);
}
[data-theme="dark"] .btn-primary:hover {
  background-position: 100% 100%;
  border-bottom-width: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 12px rgba(99,102,241,.4), 0 12px 28px rgba(139,92,246,.22);
}
[data-theme="dark"] .btn-primary:active { background: #4338ca; border-bottom-width: 1px; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
[data-theme="dark"] .btn-primary:disabled { background: #1e3a5f; border-color: #1e3a5f; color: #64748b; box-shadow: none; }
[data-theme="dark"] .btn-primary:disabled:hover { transform: none; box-shadow: none; }
[data-theme="dark"] .btn-ghost { background: var(--surface); border-color: var(--border-l); color: var(--ink2); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .btn-ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .sk-input { box-shadow: inset 0 1px 2px rgba(0,0,0,.15), var(--shadow-xs); }
[data-theme="dark"] .sk-input:hover { border-color: var(--border); box-shadow: inset 0 1px 2px rgba(0,0,0,.1), var(--shadow-sm); }
[data-theme="dark"] .sk-input:focus { border-color: var(--acc); box-shadow: var(--focus-glow), inset 0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .copy-btn { border-color: var(--border-l); color: var(--ink3); background: var(--surface); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .copy-btn:hover { border-color: var(--border); color: var(--ink); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .modal { background: var(--surface); border-color: var(--border-l); box-shadow: var(--shadow-xl); }
[data-theme="dark"] .details-modal { background: rgba(0,0,0,.65); }
[data-theme="dark"] .details-content { background: var(--surface); border-color: var(--border-l); box-shadow: var(--shadow-xl); }
[data-theme="dark"] .details-header { border-color: var(--border-l); }
[data-theme="dark"] .result-row:hover { background: var(--bg); }
[data-theme="dark"] .item-row { background: var(--surface); border-color: var(--border-l); }
[data-theme="dark"] .item-row:hover { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .item-btn { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .item-btn.danger:hover { background: var(--red); border-color: var(--red); }
[data-theme="dark"] .item-btn.success:hover { background: var(--green); border-color: var(--green); }
[data-theme="dark"] .stat-box { box-shadow: var(--shadow-card); }
[data-theme="dark"] .stat-box:hover { box-shadow: var(--shadow-card-hover), 0 0 20px rgba(99,102,241,.06); }
[data-theme="dark"] .site-footer { border-color: var(--border-l); }
[data-theme="dark"] #cc-eye,
[data-theme="dark"] #cc-clean-btn { color: var(--ink3) !important; }
[data-theme="dark"] .toggle-slider { background: var(--border); }
[data-theme="dark"] .copy-btn.done { background: rgba(74,222,128,.08); }
[data-theme="dark"] .warn-box { background: rgba(250,204,21,.06); border-color: rgba(250,204,21,.25); color: #fde68a; }
[data-theme="dark"] .btn-save-all {
  background: var(--grad-btn);
  background-size: 200% 200%;
  color: #fff;
  border-color: rgba(139,92,246,.2);
  border-bottom: 3px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(99,102,241,.25), 0 6px 16px rgba(139,92,246,.15);
}
[data-theme="dark"] .btn-save-all:hover { background-position: 100% 100%; transform: translateY(-3px); border-bottom-width: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 12px rgba(99,102,241,.35), 0 12px 28px rgba(139,92,246,.2); }
[data-theme="dark"] .btn-save-all:active { transform: translateY(1px); border-bottom-width: 1px; }
[data-theme="dark"] .tab:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .tabs { background: rgba(255,255,255,.02); border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .tab.on { background: var(--grad-btn); color: #fff; box-shadow: 0 -2px 8px rgba(99,102,241,.25), inset 0 1px 0 rgba(255,255,255,.1); }
[data-theme="dark"] .gate-sub-btn { color: var(--ink3); }
[data-theme="dark"] .gate-sub-btn:hover { color: var(--ink); }
[data-theme="dark"] .gate-sub-btn.on { background: var(--surface); color: var(--indigo); box-shadow: 0 1px 3px rgba(99,102,241,.2); }
[data-theme="dark"] .gate-sub-btns { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .shopify-urls-input:focus,
[data-theme="dark"] .woo-cookies-input:focus,
[data-theme="dark"] .woo-sites-input:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .setting-card input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] .setting-card select:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.08); }
[data-theme="dark"] .setting-notice-info { background: rgba(96,165,250,.08); border-color: rgba(96,165,250,.2); color: #93c5fd; }

/* ─────────────────────────────────────────────
   EFFECTS
───────────────────────────────────────────── */

/* Dark mode: Admin inline code */
[data-theme="dark"] .admin-sub code { background: rgba(255,255,255,.06); color: #93c5fd; }

/* Dark mode: Admin Panel */
[data-theme="dark"] .admin-section-head { color: var(--ink); }
[data-theme="dark"] .admin-section-head svg { color: var(--ink3); }
[data-theme="dark"] .admin-sub { color: var(--ink3); }
[data-theme="dark"] .admin-tabs { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .admin-tab { color: var(--ink3); }
[data-theme="dark"] .admin-tab:hover { background: rgba(255,255,255,.05); color: var(--ink); }
[data-theme="dark"] .admin-tab.on { background: var(--acc); color: #fff; }
[data-theme="dark"] .admin-gw-row { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .admin-gw-row:hover { border-color: var(--border); }
[data-theme="dark"] .admin-gw-name { color: var(--ink); }
[data-theme="dark"] .admin-gw-id { background: rgba(255,255,255,.06); color: var(--ink3); }
[data-theme="dark"] .badge-sk { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.2); }
[data-theme="dark"] .admin-gw-toggle-label { color: var(--ink3); }
[data-theme="dark"] .admin-create-key { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .admin-perm-check { color: var(--ink2); }
[data-theme="dark"] .admin-key-card { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .admin-key-card:hover { border-color: var(--border); }
[data-theme="dark"] .admin-key-name { color: var(--ink); }
[data-theme="dark"] .admin-key-preview code { background: rgba(255,255,255,.06); color: var(--ink3); }
[data-theme="dark"] .admin-perm-tag { background: rgba(96,165,250,.08); border-color: rgba(96,165,250,.15); }
[data-theme="dark"] .admin-key-meta { color: var(--ink3); }
[data-theme="dark"] .admin-new-key-reveal { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.15); }
[data-theme="dark"] .admin-new-key-value code { background: rgba(255,255,255,.06); color: var(--ink); }
[data-theme="dark"] .nk-type-tab { border-color: var(--border); color: var(--ink3); }
[data-theme="dark"] .nk-type-tab:hover { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .nk-type-tab.on { background: var(--acc); color: #fff; border-color: var(--acc); }
[data-theme="dark"] .nk-create-form { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .nk-masked code { background: rgba(74,222,128,.08); }
[data-theme="dark"] .nk-real code { background: rgba(255,255,255,.06); color: var(--ink3); }

/* Stat box indicators — tinted backgrounds */
.stat-box[data-cc-filter="charged"].has-value {
  border-color: rgba(22,163,74,.2);
  background: rgba(22,163,74,.02);
}
.stat-box[data-cc-filter="charged"].has-value .stat-n { color: var(--green); }
.stat-box[data-cc-filter="live"].has-value {
  border-color: rgba(202,138,4,.2);
  background: rgba(202,138,4,.02);
}
.stat-box[data-cc-filter="live"].has-value .stat-n { color: var(--yellow); }
.stat-box[data-cc-filter="dead"].has-value {
  border-color: rgba(220,38,38,.2);
  background: rgba(220,38,38,.02);
}
.stat-box[data-cc-filter="dead"].has-value .stat-n { color: var(--red); }

/* Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: rippleAnim .5s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* Confetti */
#confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 99999;
}

/* Celebration */
.celebration-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(22,163,74,.04), transparent 60%);
  pointer-events: none;
  z-index: 9998;
  animation: celebFlash .4s ease-out forwards;
}
@keyframes celebFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* CC row states — see WOW EFFECTS section for enhanced versions */
.cc-row-dead { border-left: 3px solid var(--red) !important; opacity: .65; }
.cc-row-error { border-left: 3px solid var(--orange) !important; opacity: .6; }

/* Copy done bounce */
.copy-btn.done { animation: copyDone .3s var(--ease-smooth); }

/* Checking bar */
.block.checking { position: relative; overflow: hidden; border-color: var(--border); }
.block.checking::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), var(--acc-lt), var(--acc), transparent);
  background-size: 200% 100%;
  animation: checkingBar 1.5s ease-in-out infinite;
  z-index: 10;
}
@keyframes checkingBar { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ─────────────────────────────────────────────
   CUSTOM SCROLLBARS
───────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-l) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink3); }
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ink3); }

/* Focus-within */
.field:focus-within:has(input, select, textarea) label { color: var(--ink); }

/* ─────────────────────────────────────────────
   Cockroach Easter Egg
───────────────────────────────────────────── */
.roach {
  position: fixed;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  z-index: 8500;
  cursor: pointer;
  transition: none;
  pointer-events: auto;
  transform:
    translate3d(var(--roach-x, 0px), var(--roach-y, 0px), 0)
    rotate(var(--roach-rot, 0deg))
    scaleX(var(--roach-flip, 1));
  transform-origin: 50% 56%;
  will-change: transform, filter;
  filter:
    drop-shadow(0 1px 1.5px rgba(0,0,0,.28))
    drop-shadow(0 0 3px rgba(129,140,248,.08));
  user-select: none;
  -webkit-user-select: none;
}
.roach svg { width: 100%; height: 100%; overflow: visible; }
.roach.crawling .roach-body-core {
  animation: roachBodyFloat 1.15s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
.roach.crawling .leg-a {
  animation: roachLegStepA .32s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
.roach.crawling .leg-b {
  animation: roachLegStepB .32s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
.roach.squashed { animation: roachSquash .35s ease-out forwards; pointer-events: none; cursor: default; }
.roach.thrown { pointer-events: none; transition: none; }
.roach.dragging {
  z-index: 9999;
  cursor: grabbing;
  filter:
    drop-shadow(0 4px 9px rgba(0,0,0,.34))
    drop-shadow(0 0 5px rgba(129,140,248,.14));
}
.roach.zapped {
  filter:
    drop-shadow(0 0 6px rgba(125,211,252,.92))
    drop-shadow(0 0 10px rgba(99,102,241,.32))
    brightness(1.28) saturate(1.18);
}
@keyframes roachBodyFloat {
  from { transform: translateY(-.45px) scaleY(1.015); }
  to   { transform: translateY(.45px) scaleY(.99); }
}
@keyframes roachLegStepA {
  from { transform: rotate(-5deg) translateX(-.35px); }
  to   { transform: rotate(5deg) translateX(.35px); }
}
@keyframes roachLegStepB {
  from { transform: rotate(5deg) translateX(.35px); }
  to   { transform: rotate(-5deg) translateX(-.35px); }
}
@keyframes roachSquash {
  0% {
    transform:
      translate3d(var(--roach-x, 0px), var(--roach-y, 0px), 0)
      rotate(var(--roach-rot, 0deg))
      scaleX(var(--roach-flip, 1))
      scale(1);
    opacity: 1;
  }
  32% {
    transform:
      translate3d(var(--roach-x, 0px), var(--roach-y, 0px), 0)
      rotate(var(--roach-rot, 0deg))
      scaleX(var(--roach-flip, 1))
      scale(1.24, .48);
    opacity: .92;
  }
  100% {
    transform:
      translate3d(var(--roach-x, 0px), var(--roach-y, 0px), 0)
      rotate(var(--roach-rot, 0deg))
      scaleX(var(--roach-flip, 1))
      scale(1.5, .16);
    opacity: 0;
  }
}
@keyframes roachFadeIn {
  from {
    opacity: 0;
    transform:
      translate3d(var(--roach-x, 0px), var(--roach-y, 0px), 0)
      rotate(var(--roach-rot, 0deg))
      scaleX(var(--roach-flip, 1))
      scale(.45);
  }
  to {
    opacity: 1;
    transform:
      translate3d(var(--roach-x, 0px), var(--roach-y, 0px), 0)
      rotate(var(--roach-rot, 0deg))
      scaleX(var(--roach-flip, 1))
      scale(1);
  }
}
.roach-spawn { animation: roachFadeIn .4s ease-out; }
.roach-splat { position: fixed; width: 14px; height: 14px; z-index: 8499; pointer-events: none; opacity: .35; }
.roach-splat svg { width: 100%; height: 100%; }
@keyframes splatFade { 0% { opacity: .35; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
.roach-splat.fading { animation: splatFade 4s ease-out forwards; }
.roach-lightning {
  position: fixed;
  width: 34px;
  height: 42px;
  z-index: 8502;
  pointer-events: none;
  transform: translate(-50%, -82%) rotate(var(--bolt-rot, 0deg));
  transform-origin: 50% 85%;
  animation: roachBoltStrike .56s cubic-bezier(.22,.8,.22,1) forwards;
  filter:
    drop-shadow(0 0 4px rgba(125,211,252,.92))
    drop-shadow(0 0 9px rgba(99,102,241,.5));
}
.roach-lightning svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.roach-lightning .bolt-glow {
  fill: rgba(125,211,252,.26);
  stroke: rgba(125,211,252,.34);
  stroke-width: 8;
  stroke-linejoin: round;
}
.roach-lightning .bolt-core {
  fill: #f8fbff;
  stroke: #7dd3fc;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.roach-lightning .bolt-spark {
  fill: none;
  stroke: #c7d2fe;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .9;
}
@keyframes roachBoltStrike {
  0% { opacity: 0; transform: translate(-50%, -88%) rotate(var(--bolt-rot, 0deg)) scale(.72); }
  12% { opacity: 1; transform: translate(-50%, -82%) rotate(var(--bolt-rot, 0deg)) scale(1.04); }
  28% { opacity: .42; }
  42% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%, -72%) rotate(var(--bolt-rot, 0deg)) scale(.9); }
}

/* Admin sections */
.admin-section-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.admin-section-head svg { color: var(--ink3); }
.admin-sub { font-size: 13px; color: var(--ink3); margin-bottom: 16px; }
.admin-sub code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 11px; font-family: var(--mono); color: #1d4ed8; }

/* Admin Sub-tabs — Segmented control */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  padding: 3px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-l);
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--ink3);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .15s;
  flex: 1;
  justify-content: center;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.on { background: var(--surface); color: var(--acc); font-weight: 600; box-shadow: 0 1px 3px rgba(37,99,235,.1); }
.admin-tab svg { flex-shrink: 0; opacity: .6; }
.admin-tab.on svg { opacity: .9; }

/* Tab panels */
.admin-tab-panel { display: none; }
.admin-tab-panel.on { display: block; animation: adminFadeIn .2s ease; }
@keyframes adminFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Tools sub-tabs (reuse admin pattern) ────── */
.tools-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  padding: 3px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-l);
}
.tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--ink3);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .15s;
  flex: 1;
  justify-content: center;
}
.tools-tab:hover { color: var(--ink); }
.tools-tab.on { background: var(--surface); color: var(--acc); font-weight: 600; box-shadow: 0 1px 3px rgba(37,99,235,.1); }
.tools-tab svg { flex-shrink: 0; opacity: .6; }
.tools-tab.on svg { opacity: .9; }
.tools-tab-panel { display: none; }
.tools-tab-panel.on { display: block; animation: adminFadeIn .2s ease; }

[data-theme="dark"] .tools-tabs { background: var(--bg); border-color: var(--border-l); }
[data-theme="dark"] .tools-tab { color: var(--ink3); }
[data-theme="dark"] .tools-tab:hover { background: rgba(255,255,255,.05); color: var(--ink); }
[data-theme="dark"] .tools-tab.on { background: var(--acc); color: #fff; }

/* ─── SK Checker result cards ────── */
.sk-result-card {
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  transition: border-color .15s;
}
.sk-result-card.sk-live { border-left: 3px solid var(--green); }
.sk-result-card.sk-dead { border-left: 3px solid var(--red); opacity: .75; }
.sk-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sk-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.sk-badge-live { background: var(--green); color: #fff; }
.sk-badge-dead { background: var(--red); color: #fff; }
.sk-badge-expired { background: #f59e0b; color: #fff; }
.sk-key {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink2);
  word-break: break-all;
}
.sk-copy-btn { font-size: 11px !important; padding: 2px 8px !important; }
.btn-xs { min-height: auto; height: auto; }
.sk-result-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sk-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-l);
}
.sk-info-row:last-child { border-bottom: none; }
.sk-info-row span:first-child { color: var(--ink3); font-weight: 500; }
.sk-info-row span:last-child { color: var(--ink); font-family: var(--mono); font-size: 11px; }
.sk-result-error {
  margin-top: 4px;
  font-size: 11px;
  color: var(--red);
  font-family: var(--mono);
}

[data-theme="dark"] .sk-result-card { background: var(--surface); border-color: var(--border-l); }
[data-theme="dark"] .sk-result-card.sk-dead { opacity: .6; }

/* SK Checker textarea */
.sk-check-textarea {
  width: 100%;
  min-height: 100px;
  max-height: 260px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.6;
  outline: none;
  transition: all .25s var(--ease-micro);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.sk-check-textarea:hover { border-color: var(--border); }
.sk-check-textarea:focus { border-color: var(--acc); box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0,0,0,.02); }
.sk-check-textarea::placeholder { color: var(--ink3); opacity: .6; }
[data-theme="dark"] .sk-check-textarea { background: var(--bg); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .sk-check-textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* Gateway Management */
.admin-gateway-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.admin-gw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.admin-gw-row:hover { border-color: var(--border); }
.admin-gw-info { display: flex; align-items: center; gap: 8px; }
.admin-gw-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.admin-gw-id { font-size: 11px; color: var(--ink3); font-family: var(--mono); background: rgba(0,0,0,.03); padding: 2px 6px; border-radius: 4px; }
.admin-gw-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .3px; }
.badge-sk { background: rgba(37,99,235,.06); color: #2563eb; border: 1px solid rgba(37,99,235,.15); }
.admin-gw-controls { display: flex; align-items: center; gap: 14px; }
.admin-gw-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.admin-gw-toggle-label { font-size: 11px; color: var(--ink3); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.admin-gw-toggle input { display: none; }
.admin-gw-toggle .toggle-slider {
  position: relative;
  display: inline-block;
  width: 36px;
  min-width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  transition: background .2s;
  top: auto; left: auto; right: auto; bottom: auto;
  cursor: pointer;
}
.admin-gw-toggle .toggle-slider::before { display: none; }
.admin-gw-toggle .toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.admin-gw-toggle input:checked + .toggle-slider { background: var(--green); }
.admin-gw-toggle input:checked + .toggle-slider::after { transform: translateX(16px); }

/* Admin key cards */
.admin-create-key {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.admin-perms { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-perm-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink2); cursor: pointer; user-select: none; }
.admin-perm-check input { accent-color: var(--ink); }
.admin-keys-list { display: flex; flex-direction: column; gap: 8px; }
.admin-key-card {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.admin-key-card:hover { border-color: var(--border); }
.admin-key-card.revoked { opacity: .5; }
.admin-key-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.admin-key-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.admin-key-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; }
.admin-key-status.active { color: var(--green); background: rgba(22,163,74,.06); border: 1px solid rgba(22,163,74,.15); }
.admin-key-status.inactive { color: var(--red); background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.15); }
.admin-key-preview { margin-bottom: 6px; }
.admin-key-preview code { font-size: 12px; background: var(--bg); padding: 3px 8px; border-radius: 4px; color: var(--ink3); font-family: var(--mono); }
.admin-key-perms { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-perm-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; background: rgba(37,99,235,.06); color: #2563eb; border: 1px solid rgba(37,99,235,.12); }
.admin-key-meta { display: flex; gap: 16px; font-size: 11px; color: var(--ink3); margin-bottom: 10px; }

/* Legacy gateway toggles */
.admin-key-gw-section { margin-bottom: 10px; padding: 10px 12px; background: rgba(0,0,0,.02); border-radius: var(--radius-sm); border: 1px solid var(--border-l); }
.admin-key-gw-label { font-size: 11px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.admin-key-gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin-bottom: 8px; }
.admin-key-gw-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 5px 8px; border-radius: var(--radius-xs); transition: background .15s; }
.admin-key-gw-toggle:hover { background: rgba(0,0,0,.03); }
.admin-key-gw-toggle input { display: none; }
.admin-key-gw-slider {
  position: relative;
  width: 32px;
  height: 18px;
  min-width: 32px;
  background: var(--border);
  border-radius: 9px;
  transition: background .2s;
}
.admin-key-gw-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.admin-key-gw-toggle input:checked + .admin-key-gw-slider { background: var(--green); }
.admin-key-gw-toggle input:checked + .admin-key-gw-slider::after { transform: translateX(14px); }
.admin-key-gw-toggle input:disabled + .admin-key-gw-slider { opacity: .4; cursor: not-allowed; }
.admin-key-gw-name { font-size: 12px; color: var(--ink2); font-weight: 500; white-space: nowrap; }
.admin-key-save-gw { margin-top: 4px; }
.btn-accent { background: #2563eb; color: #fff; border: 1px solid #2563eb; }
.btn-accent:hover { background: #1d4ed8; border-color: #1d4ed8; }
[data-theme="dark"] .admin-key-gw-section { background: rgba(255,255,255,.02); border-color: var(--border-l); }
[data-theme="dark"] .admin-key-gw-toggle:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .admin-key-gw-slider { background: var(--border); }
.admin-key-actions { display: flex; gap: 8px; }
.btn-sm { height: 28px; font-size: 11px; padding: 0 10px; }

/* New key reveal */
.admin-new-key-reveal { padding: 14px 16px; background: rgba(22,163,74,.04); border: 1px solid rgba(22,163,74,.15); border-radius: var(--radius-sm); margin-bottom: 10px; }
.admin-new-key-label { font-size: 12px; font-weight: 600; color: var(--green); margin-bottom: 8px; }
.admin-new-key-value { display: flex; align-items: center; gap: 8px; }
.admin-new-key-value code { font-size: 12px; background: var(--bg); padding: 6px 10px; border-radius: var(--radius-xs); font-family: var(--mono); word-break: break-all; flex: 1; color: var(--ink); }
.admin-copy-key { flex-shrink: 0; }
.btn.loading { pointer-events: none; }
.btn.loading .lbl { opacity: .3; }
.btn.loading .spin { display: block; position: absolute; }

/* ─────────────────────────────────────────────
   Proxy Pool System
───────────────────────────────────────────── */
.proxy-pool-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.proxy-stat { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; background: var(--bg); border: 1px solid var(--border-l); border-radius: var(--radius-sm); }
.proxy-stat-val { font-size: 22px; font-weight: 700; font-family: var(--mono); color: var(--ink); line-height: 1.1; }
.proxy-stat-active { color: #2563eb; }
.proxy-stat-alive { color: var(--green); }
.proxy-stat-dead { color: var(--red); }
.proxy-stat-lbl { font-size: 10px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

.proxy-add-section {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proxy-add-section textarea {
  font-family: var(--mono);
  font-size: 12px;
  resize: vertical;
  min-height: 80px;
  max-height: 220px;
  padding: 10px 12px;
  line-height: 1.6;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s;
}
.proxy-add-section textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.proxy-add-section textarea::placeholder { color: var(--ink3); opacity: .6; }
.proxy-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* Proxy Check Progress */
.pp-progress-wrap {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
}
.pp-progress-bar { width: 100%; height: 6px; background: var(--border-l); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.pp-progress-fill { height: 100%; width: 0%; background: var(--green); border-radius: 3px; transition: width .3s ease; }
.pp-progress-text { font-size: 11px; font-weight: 500; color: var(--ink3); font-family: var(--mono); }
[data-theme="dark"] .pp-progress-wrap { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pp-progress-bar { background: var(--border); }

/* Proxy Label Tabs */
.pp-label-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-label-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border-l);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pp-label-tab:hover { background: var(--bg); color: var(--ink); border-color: var(--border); }
.pp-label-tab.on { background: var(--acc); color: #fff; border-color: var(--acc); }
.pp-label-count { font-size: 10px; font-weight: 600; opacity: .7; }
[data-theme="dark"] .pp-label-tab { border-color: var(--border); }
[data-theme="dark"] .pp-label-tab.on { background: var(--acc); color: #fff; border-color: var(--acc); }

/* Proxy list */
.proxy-pool-list-wrap {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  padding: 6px;
  background: var(--surface);
}
[data-theme="dark"] .proxy-pool-list-wrap { border-color: var(--border); background: var(--bg); }
.proxy-pool-list { display: flex; flex-direction: column; gap: 6px; }
.proxy-pool-empty { text-align: center; padding: 28px 16px; color: var(--ink3); font-size: 13px; border: 1px dashed var(--border-l); border-radius: var(--radius-sm); }

.pp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.pp-row:hover { background: var(--surface); }
.pp-row.pp-inactive { opacity: .5; }
.pp-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border); }
.pp-status-dot.alive { background: var(--green); }
.pp-status-dot.dead { background: var(--red); }
.pp-status-dot.unknown { background: var(--border); }
.pp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-proxy { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; color: var(--ink3); }
.pp-meta span { display: inline-flex; align-items: center; gap: 3px; }
.pp-label-tag { background: rgba(22,163,74,.06); color: var(--green); padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 500; }
.pp-latency { font-family: var(--mono); font-weight: 600; }
.pp-latency.fast { color: var(--green); }
.pp-latency.medium { color: #2563eb; }
.pp-latency.slow { color: var(--red); }

.pp-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pp-ctrl-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-l);
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  transition: all .15s;
}
.pp-ctrl-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--border); }
.pp-ctrl-btn.pp-btn-delete:hover { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.2); color: var(--red); }
.pp-ctrl-btn.pp-btn-toggle.active { background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.2); color: var(--green); }

/* Dark mode: Proxy Pool */
[data-theme="dark"] .proxy-stat { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .proxy-add-section { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .proxy-add-section textarea { background: var(--bg); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .proxy-add-section textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
[data-theme="dark"] .proxy-pool-empty { border-color: var(--border); }
[data-theme="dark"] .pp-row { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pp-row:hover { background: var(--bg); }
[data-theme="dark"] .pp-ctrl-btn { border-color: var(--border); }

/* ─────────────────────────────────────────────
   NOXTER Keys
───────────────────────────────────────────── */
.nk-type-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border-l);
}
.nk-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--ink3);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .15s;
  flex: 1;
  justify-content: center;
}
.nk-type-tab:hover { color: var(--ink); }
.nk-type-tab.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.nk-create-form {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nk-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .nk-create-grid { grid-template-columns: 1fr; } }
.nk-card .nk-key-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.nk-masked, .nk-real { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.nk-label-sm { font-size: 10px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .3px; min-width: 70px; }
.nk-masked code { background: rgba(22,163,74,.06); color: var(--green); padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 11px; word-break: break-all; }
.nk-real code { background: var(--bg); padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 11px; color: var(--ink3); }

/* Mobile responsive: Admin */
@media (max-width: 640px) {
  .admin-tabs {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-gw-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .admin-gw-controls { width: 100%; justify-content: flex-end; }
  .admin-key-actions { flex-wrap: wrap; }
  .proxy-pool-stats { grid-template-columns: repeat(2, 1fr); }
  .pp-row { flex-wrap: wrap; gap: 8px; }
  .pp-info { min-width: calc(100% - 50px); }
  .pp-controls { width: 100%; justify-content: flex-end; }
  .admin-section-head { font-size: 16px; }
  .admin-sub { font-size: 13px; }
  .admin-gw-name { font-size: 14px; }
  .admin-tab {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 10px;
  }
  .setting-card { padding: 16px; }
  .setting-sub { font-size: 13px; }
}

/* ─────────────────────────────────────────────
   WOW EFFECTS — Modern UI Enhancements
───────────────────────────────────────────── */

/* Animated gradient border on checking block */
.block.checking {
  border-image: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #6366f1, #3b82f6) 1;
  border-image-slice: 1;
  animation: borderRotate 3s linear infinite;
}
@keyframes borderRotate {
  0% { border-image-source: linear-gradient(0deg, #3b82f6, #6366f1, #8b5cf6); }
  25% { border-image-source: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6); }
  50% { border-image-source: linear-gradient(180deg, #3b82f6, #6366f1, #8b5cf6); }
  75% { border-image-source: linear-gradient(270deg, #3b82f6, #6366f1, #8b5cf6); }
  100% { border-image-source: linear-gradient(360deg, #3b82f6, #6366f1, #8b5cf6); }
}

/* Wordmark glow on hover */
.wordmark {
  transition: filter .3s ease;
}
.wordmark:hover {
  filter: drop-shadow(0 0 12px rgba(99,102,241,.35));
}
[data-theme="dark"] .wordmark:hover {
  filter: drop-shadow(0 0 14px rgba(139,92,246,.45));
}

/* Button neon glow on hover */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #60a5fa, #818cf8, #a78bfa);
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  transition: opacity .3s ease;
}
.btn-primary:hover::before { opacity: .5; }
[data-theme="dark"] .btn-primary:hover::before { opacity: .4; }

/* Stat box color-tinted glow on hover */
.stat-box[data-cc-filter="charged"]:hover { border-color: rgba(22,163,74,.3); box-shadow: var(--shadow-card-hover), 0 0 20px rgba(22,163,74,.1); }
.stat-box[data-cc-filter="live"]:hover { border-color: rgba(202,138,4,.3); box-shadow: var(--shadow-card-hover), 0 0 20px rgba(202,138,4,.1); }
.stat-box[data-cc-filter="dead"]:hover { border-color: rgba(220,38,38,.3); box-shadow: var(--shadow-card-hover), 0 0 20px rgba(220,38,38,.08); }

/* Enhanced charged row glow animation */
.cc-row-charged {
  border-left: 3px solid var(--green) !important;
  background: rgba(22,163,74,.03);
  animation: chargedGlow .6s var(--ease-out-expo);
}
@keyframes chargedGlow {
  0% { background: rgba(22,163,74,.15); box-shadow: inset 0 0 20px rgba(22,163,74,.1); }
  100% { background: rgba(22,163,74,.03); box-shadow: none; }
}

/* Live row entrance */
.cc-row-live {
  border-left: 3px solid var(--yellow) !important;
  background: rgba(202,138,4,.03);
  animation: liveFlash .4s ease;
}
@keyframes liveFlash {
  0% { background: rgba(202,138,4,.1); }
  100% { background: rgba(202,138,4,.03); }
}

/* Settings card glassmorphism */

/* ─────────────────────────────────────────────
   CC GENERATOR MODAL
───────────────────────────────────────────── */
.ccgen-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s ease;
}
.ccgen-modal.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ccgen-content {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  width: 440px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: modalSlideUp .25s var(--ease-out-expo);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ccgen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-l);
}
.ccgen-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.ccgen-close {
  cursor: pointer;
  color: var(--ink3);
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all .15s ease;
}
.ccgen-close:hover { background: var(--border-l); color: var(--ink); }
.ccgen-body { padding: 20px; }
.ccgen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.ccgen-grid .f-full { grid-column: 1 / -1; }
.ccgen-output-wrap { margin-top: 14px; }
.ccgen-output {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border-l);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--ink2);
  resize: vertical;
  outline: none;
}
.ccgen-output:focus { border-color: var(--acc); box-shadow: var(--focus-ring); }
[data-theme="dark"] .ccgen-content { background: #111114; border-color: rgba(99,102,241,.15); }
[data-theme="dark"] .ccgen-output { background: #0a0a0d; }

/* ─────────────────────────────────────────────
   BLUR MODE
───────────────────────────────────────────── */
.blur-active .cc-cards-input,
.blur-active .cc-cards-input::placeholder,
.blur-active .result-card,
.blur-active .result-bin,
.blur-active .result-msg,
.blur-active .raw-card-line,
.blur-active .sk-input,
.blur-active #cc-filter-body {
  filter: blur(7px);
  user-select: none;
  transition: filter .3s ease;
}
.blur-active .cc-cards-input:hover,
.blur-active .cc-cards-input:focus,
.blur-active .result-row:hover .result-card,
.blur-active .result-row:hover .result-bin,
.blur-active .result-row:hover .result-msg,
.blur-active .sk-input:focus {
  filter: blur(0);
}

/* ─────────────────────────────────────────────
   PER-API SPEED TRACKING
───────────────────────────────────────────── */
.speed-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.speed-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 20px;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.12);
  color: var(--ink2);
  transition: all .2s ease;
}
.speed-pill .speed-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc-lt);
  flex-shrink: 0;
}
.speed-pill.fast .speed-dot { background: var(--green); }
.speed-pill.medium .speed-dot { background: var(--yellow); }
.speed-pill.slow .speed-dot { background: var(--red); }
[data-theme="dark"] .speed-pill { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.15); }
.setting-card {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .25s var(--ease-micro);
}
.setting-card:hover {
  border-color: rgba(59,130,246,.2);
  box-shadow: var(--shadow-sm), 0 0 14px rgba(59,130,246,.04);
  transform: translateY(-1px);
}

/* Proxy pool check progress glow */
.pp-progress-fill {
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6, #6366f1, #3b82f6);
  background-size: 300% 100%;
  animation: progressGlow 3s ease-in-out infinite;
}

/* Enhanced log line entrance */
@keyframes logSlideIn {
  from { opacity: 0; transform: translateX(-8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* Copy button bounce enhanced */
@keyframes copyDone {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(22,163,74,.3); }
  40%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(22,163,74,0); }
  100% { transform: scale(1); box-shadow: none; }
}

/* Toast entrance enhanced */
@keyframes tst-in {
  from { opacity: 0; transform: translateX(24px) scale(.95); filter: blur(3px); }
  to   { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

/* Smooth theme transition for everything */
.block, .stat-box, .acct-card, .setting-card, .setting-card-col,
.sk-input, .field input, .field select, .cc-cards-input,
.shopify-urls-input, .woo-sites-input, .woo-cookies-input,
.btn, .tab, .pill, .badge, .modal, .tst, .item-row, .admin-gw-row,
.admin-key-card, .pp-row, .terminal, .page-loader {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: .3s;
  transition-timing-function: var(--ease-micro);
}

/* Glassmorphism toasts */
.tst {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.tst-ok   { background: rgba(12,25,41,.9); }
.tst-info { background: rgba(12,25,41,.9); }
.tst-err  { background: rgba(28,16,20,.9); }
.tst-warn { background: rgba(28,24,16,.9); }

/* Inputs focus glow */
.sk-input:focus,
.field input:focus,
.field select:focus,
.cc-cards-input:focus,
.shopify-urls-input:focus,
.woo-cookies-input:focus,
.woo-sites-input:focus {
  box-shadow: var(--focus-ring), 0 0 16px rgba(99,102,241,.08);
}

/* Accent link hover glow */
a:hover { text-shadow: 0 0 12px rgba(99,102,241,.15); }
[data-theme="dark"] a:hover { text-shadow: 0 0 12px rgba(139,92,246,.2); }

/* Status pill glow when on */
.status-pill.on {
  box-shadow: 0 0 12px rgba(22,163,74,.15);
}

/* Page enter enhanced stagger */
.page > *:nth-child(1) { animation: fadeInUp .5s .04s var(--ease-out-expo) both; }
.page > *:nth-child(2) { animation: fadeInUp .5s .08s var(--ease-out-expo) both; }
.page > *:nth-child(3) { animation: fadeInUp .5s .12s var(--ease-out-expo) both; }
.page > *:nth-child(4) { animation: fadeInUp .5s .16s var(--ease-out-expo) both; }
.page > *:nth-child(5) { animation: fadeInUp .5s .20s var(--ease-out-expo) both; }
.page > *:nth-child(6) { animation: fadeInUp .5s .24s var(--ease-out-expo) both; }
.page > *:nth-child(7) { animation: fadeInUp .5s .28s var(--ease-out-expo) both; }
.page > *:nth-child(8) { animation: fadeInUp .5s .32s var(--ease-out-expo) both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Counting number pop animation */
.stat-n.counting {
  transition: color .2s ease;
  animation: numberPop .3s var(--ease-bounce);
}
@keyframes numberPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Tab hover glow */
.tab:hover {
  text-shadow: 0 0 10px rgba(99,102,241,.12);
}
.tab.on {
  text-shadow: 0 1px 2px rgba(0,0,0,.15), 0 0 14px rgba(255,255,255,.15);
}
[data-theme="dark"] .tab.on {
  text-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 14px rgba(139,92,246,.2);
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before { animation: none; }
}

/* --------------------------------------------------------------------------
   NOXPROXY-INSPIRED APP SHELL OVERRIDE
   Keeps the existing DOM and JS contracts intact while changing the UI model
   from a simple single-column tool to a dark sidebar workspace.
-------------------------------------------------------------------------- */
:root {
  --bg: #07070c;
  --surface: #111119;
  --surface-2: #161622;
  --ink: #f0f0f8;
  --ink2: #c7c7dd;
  --ink3: #9898b8;
  --muted: #5a5a78;
  --border: #242434;
  --border-l: #1c1c2a;
  --acc: #6366f1;
  --acc-dk: #4f46e5;
  --acc-lt: #818cf8;
  --indigo: #6366f1;
  --violet: #8b5cf6;
  --cyan: #14b8a6;
  --green: #22c55e;
  --yellow: #f59e0b;
  --red: #ef4444;
  --orange: #f97316;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 8px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.5);
  --shadow-xl: 0 14px 38px rgba(0,0,0,.58);
  --shadow-card: 0 1px 3px rgba(0,0,0,.4);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,.45);
  --glow-acc: 0 0 0 1px rgba(99,102,241,.25);
  --glow-green: 0 0 0 1px rgba(34,197,94,.25);
  --glow-red: 0 0 0 1px rgba(239,68,68,.25);
  --focus-ring: 0 0 0 1px var(--acc), 0 0 0 4px rgba(99,102,241,.14);
  --focus-ring-green: 0 0 0 1px var(--green), 0 0 0 4px rgba(34,197,94,.14);
  --focus-ring-red: 0 0 0 1px var(--red), 0 0 0 4px rgba(239,68,68,.14);
  --focus-glow: var(--focus-ring);
  --grad-btn: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  --grad-acc: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  --grad-dark: linear-gradient(180deg, #161622 0%, #0d0d14 100%);
  --grad-aurora: linear-gradient(135deg, #6366f1, #14b8a6);
}

html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
  overflow-x: hidden;
}

body::before,
body::after {
  display: none !important;
}

body,
input,
select,
button,
textarea {
  font-family: var(--sans);
}

code {
  background: #0d0d14;
  color: #c7d2fe;
  border: 1px solid var(--border-l);
}

a {
  color: var(--acc-lt);
}

a:hover {
  color: #c7d2fe;
  text-decoration: none;
  text-shadow: none;
}

.page {
  max-width: none !important;
  width: auto;
  min-height: 100vh;
  margin: 0 0 0 240px !important;
  padding: 24px 28px 64px !important;
  animation: none !important;
  position: relative;
  z-index: 1;
}

.page > * {
  animation: none !important;
}

.panel.on {
  display: block;
  opacity: 1;
  animation: none !important;
}

/* Sidebar navigation */
.tabs {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: 240px;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 84px 8px 14px;
  background: #0d0d14;
  border-right: 1px solid var(--border-l);
  border-bottom: 0;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.tabs::before {
  content: attr(data-brand) "\A" attr(data-tag);
  white-space: pre-line;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 68px;
  padding: 17px 16px 14px 58px;
  border-bottom: 1px solid var(--border-l);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  background:
    linear-gradient(135deg, rgba(99,102,241,.18), rgba(20,184,166,.06)),
    #0d0d14;
}

.tabs::after {
  content: "v2.0.2";
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  background: #141420;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
}

.tabs .tab:first-child::before {
  content: "";
  position: fixed;
  top: 17px;
  left: 16px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--acc), var(--acc-dk));
  box-shadow: 0 0 16px rgba(99,102,241,.35);
  pointer-events: none;
}

.tab,
.tab-caps {
  letter-spacing: 0;
  text-transform: none;
}

.tab {
  flex: 0 0 auto;
  min-height: 38px;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink3);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  transition: background .12s, border-color .12s, color .12s;
}

.tab svg {
  width: 15px;
  height: 15px;
  opacity: .68;
  color: currentColor;
}

.tab:hover {
  background: #141420;
  border-color: var(--border-l);
  color: var(--ink);
  text-shadow: none;
}

.tab.on {
  color: #c7d2fe;
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.25);
  box-shadow: none;
  text-shadow: none;
}

.tab.on svg {
  color: var(--acc-lt);
}

.tab::after,
.tab.on::after {
  display: none !important;
}

/* Sticky workspace topbar */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 56px;
  margin: -24px -28px 20px;
  padding: 12px 20px;
  background: rgba(13,13,20,.94);
  border-bottom: 1px solid var(--border-l);
  border-image: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hdr::after {
  display: none;
}

.hdr-l {
  min-width: 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.wordmark .neon {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
  animation: none;
}

.wordmark span {
  color: var(--ink3);
}

.brand-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--acc);
}

.hdr-sub {
  color: var(--ink3);
  font-size: 12px;
  letter-spacing: 0;
}

.status-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink3);
  border-radius: 999px;
  box-shadow: none;
}

.status-pill.on {
  color: var(--green);
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.22);
}

.pip {
  background: var(--border);
}

.status-pill.on .pip {
  background: var(--green);
}

/* Core surfaces */
.sk-bar,
.block,
.acct-card,
.stat-box,
.setting-card,
.setting-card-col,
.terminal,
.modal,
.details-content,
.ccgen-content,
.admin-key-card,
.admin-gw-row,
.pp-row,
.proxy-stat,
.proxy-add-section,
.nk-create-form,
.proxy-pool-list-wrap,
.admin-create-key,
.raw-ed-wrap,
.raw-message,
.raw-json,
.summary-box,
.cpn-card {
  background: var(--surface);
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sk-bar {
  padding: 12px;
  margin-bottom: 16px;
  gap: 8px;
}

.block {
  padding: 18px;
}

.block:hover,
.setting-card:hover,
.stat-box:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-card-hover);
}

.block.checking,
.block.checking::before {
  animation: none !important;
  border-image: none !important;
}

.block.checking::before {
  display: none;
}

.sec-label {
  color: var(--ink3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 10px;
}

.field-grid {
  gap: 12px;
}

.field label {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}

.field input,
.field select,
.field textarea,
.sk-input,
.cc-cards-input,
.shopify-urls-input,
.woo-sites-input,
.woo-cookies-input,
.ccgen-output,
.proxy-add-section textarea,
.nk-real code,
.raw-json {
  background: #0d0d14;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.sk-input:hover,
.cc-cards-input:hover {
  border-color: var(--border);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.sk-input:focus,
.cc-cards-input:focus,
.shopify-urls-input:focus,
.woo-sites-input:focus,
.woo-cookies-input:focus,
.ccgen-output:focus {
  border-color: var(--acc);
  box-shadow: var(--focus-ring);
}

.field input::placeholder,
.field textarea::placeholder,
.sk-input::placeholder,
.cc-cards-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.select-wrap::after {
  border-top-color: var(--ink3);
}

/* Buttons */
.btn,
.icon-btn,
.gate-sub-btn,
.clean-tab,
.admin-tab,
.nk-type-tab,
.pp-label-tab,
.pool-action,
.pp-ctrl-btn {
  border-radius: var(--radius);
  border-color: var(--border);
  box-shadow: none;
  letter-spacing: 0;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}

.btn {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
  border-bottom-width: 1px;
}

.btn-primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 8px rgba(99,102,241,.3);
}

.btn-primary::before {
  display: none;
}

.btn-primary:hover,
.btn-primary:active {
  background: var(--acc-lt);
  border-color: var(--acc-lt);
  transform: none;
  box-shadow: 0 1px 10px rgba(99,102,241,.32);
}

.btn-primary:disabled,
.btn-primary:disabled:hover {
  background: #312e81;
  border-color: #312e81;
  color: rgba(255,255,255,.62);
}

.btn-ghost,
.icon-btn,
.gate-sub-btn,
.clean-tab,
.admin-tab,
.nk-type-tab,
.pp-label-tab,
.pool-action,
.pp-ctrl-btn {
  background: var(--surface-2);
  color: var(--ink2);
}

.btn-ghost:hover,
.icon-btn:hover,
.gate-sub-btn:hover,
.clean-tab:hover,
.admin-tab:hover,
.nk-type-tab:hover,
.pp-label-tab:hover,
.pool-action:hover,
.pp-ctrl-btn:hover {
  background: #1a1a2a;
  border-color: var(--border);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

.btn-danger,
.btn-warn {
  background: rgba(239,68,68,.12);
  color: #fca5a5;
  border-color: rgba(239,68,68,.26);
}

.btn-danger:hover,
.btn-warn:hover {
  background: rgba(239,68,68,.2);
  color: #fecaca;
  transform: none;
}

.btn:active:not(:disabled) {
  transform: scale(.98);
}

.btn-sq {
  width: 38px;
}

.btn-row {
  gap: 8px;
}

.gate-sub-btn.on,
.clean-tab.on,
.admin-tab.on,
.nk-type-tab.on,
.pp-label-tab.on {
  background: rgba(99,102,241,.14);
  color: #c7d2fe;
  border-color: rgba(99,102,241,.25);
  box-shadow: none;
}

/* Data/status cards */
.acct-grid,
.stats-strip,
.proxy-pool-stats {
  gap: 10px;
}

.acct-card,
.stat-box,
.proxy-stat {
  background: var(--surface);
  text-align: left;
}

.acct-lbl,
.stat-lbl,
.proxy-stat-lbl {
  color: var(--ink3);
  letter-spacing: .06em;
}

.acct-val,
.stat-n,
.proxy-stat-val {
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: 0;
}

.stat-green,
.proxy-stat-alive {
  color: var(--green);
}

.stat-yellow {
  color: var(--yellow);
}

.stat-red,
.proxy-stat-dead {
  color: var(--red);
}

.stat-orange {
  color: var(--orange);
}

.stat-box[data-cc-filter="charged"]:hover,
.stat-box[data-cc-filter="live"]:hover,
.stat-box[data-cc-filter="dead"]:hover,
.stat-box[data-cc-filter="error"]:hover {
  box-shadow: var(--shadow-card-hover);
}

.progress-bar,
.pp-progress-bar,
.password-meter {
  background: #0d0d14;
  border: 1px solid var(--border-l);
}

.progress-fill,
.pp-progress-fill,
.loader-progress-bar {
  background: var(--acc);
  animation: none;
}

.terminal {
  background: #09090f;
  border-color: var(--border-l);
}

.terminal::after {
  display: none;
}

.term-head,
.details-header,
.ccgen-header,
.card-head {
  background: transparent;
  border-bottom: 1px solid var(--border-l);
}

.term-dot {
  opacity: .75;
}

.log-line,
.item-row,
.admin-key-card,
.pp-row,
.admin-gw-row {
  background: var(--surface);
  border-color: var(--border-l);
}

.log-line:hover,
.item-row:hover,
.pp-row:hover,
.admin-gw-row:hover {
  background: var(--surface-2);
}

/* Modals and overlays */
.modal-bg,
.details-modal,
.ccgen-modal {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal,
.details-content,
.ccgen-content {
  background: var(--surface);
  border-color: var(--border);
}

.modal-title,
.details-title,
.ccgen-title,
.admin-section-head,
.setting-title,
.card-title {
  color: var(--ink);
  letter-spacing: 0;
}

.modal-body,
.admin-sub,
.setting-sub,
.details-body,
.raw-empty,
.result-ed-note,
.text-fade,
.mini-k,
.detail-k,
.quick-k,
.ed-k {
  color: var(--ink3);
}

/* Toasts */
#toasts {
  top: 16px;
  right: 16px;
}

.tst {
  background: rgba(17,17,25,.94);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.tst-ok {
  border-left-color: var(--green);
}

.tst-err {
  border-left-color: var(--red);
  color: #fca5a5;
}

.tst-warn {
  border-left-color: var(--yellow);
  color: #fde68a;
}

.tst-info {
  border-left-color: var(--acc);
}

/* Tables and lists */
.mini-table,
.detail-table,
.quick-table,
.ed-table,
table {
  background: transparent;
}

th,
td,
.detail-k,
.detail-v,
.quick-k,
.quick-v,
.ed-k,
.ed-v {
  border-color: var(--border-l);
}

.detail-v,
.quick-v,
.ed-v,
.mini-v {
  color: var(--ink2);
}

.badge,
.pill,
.speed-pill,
.pp-label-tag,
.admin-gw-badge {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.18);
  color: #c7d2fe;
  border-radius: 999px;
}

.pill.green,
.badge.green,
.pp-label-tag {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.22);
  color: #86efac;
}

.pill.yellow,
.badge.yellow {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.22);
  color: #fde68a;
}

.pill.red,
.badge.red {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.22);
  color: #fca5a5;
}

.site-footer {
  color: var(--muted);
  border-top: 1px solid var(--border-l);
  margin-top: 24px;
  padding-top: 18px;
}

/* Loader */
.page-loader {
  background: var(--bg);
}

.loader-aurora {
  color: var(--ink);
}

.loader-ring {
  border-color: rgba(99,102,241,.22);
}

.loader-brand .neon {
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  background: none;
}

.loader-tagline,
.loader-sub {
  color: var(--ink3);
}

.loader-progress {
  background: #0d0d14;
  border: 1px solid var(--border);
}

/* Responsive shell */
@media (max-width: 1023px) {
  .page {
    margin-left: 0 !important;
    padding: 14px 12px 84px !important;
  }

  .hdr {
    margin: -14px -12px 14px;
    padding: 11px 12px;
  }

  .tabs {
    inset: auto 0 0 0;
    width: auto;
    height: 64px;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border-right: 0;
    border-top: 1px solid var(--border-l);
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .tabs::before,
  .tabs::after,
  .tabs .tab:first-child::before {
    display: none;
  }

  .tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    padding: 5px 4px;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
  }

  .tab svg {
    width: 18px;
    height: 18px;
  }

  #toasts {
    top: auto;
    bottom: 74px;
    left: 8px;
    right: 8px;
  }

  .tst {
    max-width: none;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 13px;
  }

  .hdr {
    gap: 8px;
  }

  .wordmark {
    font-size: 16px;
  }

  .hdr-sub {
    font-size: 11px;
  }

  .sk-bar {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) minmax(0,1fr);
  }

  .sk-input {
    grid-column: 1 / -1;
  }

  #skshow {
    grid-column: 1;
  }

  #skconn {
    grid-column: 2;
  }

  #skclear {
    grid-column: 3;
  }

  #skconn,
  #skclear {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .field-grid,
  .field-grid-2,
  .inbuilt-grid,
  .woo-grid,
  .nk-create-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-strip,
  .acct-grid,
  .proxy-pool-stats {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .cc-label-row {
    flex-wrap: wrap;
  }

  .cc-label-note {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hdr {
    margin-left: -10px;
    margin-right: -10px;
  }

  .tabs {
    height: 62px;
  }

  .tab {
    flex-basis: 0;
    font-size: 9.5px;
  }

  .stats-strip,
  .acct-grid,
  .proxy-pool-stats {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   NOXPROXY POLISH PASS
   Darker shell, clearer accent hierarchy, and richer status colors.
-------------------------------------------------------------------------- */
:root {
  --bg: #05050a;
  --surface: #101018;
  --surface-2: #171724;
  --surface-3: #1c1c2b;
  --input-bg: #0b0b12;
  --border-l: #202033;
  --border: #2d2d43;
  --ink: #f4f4fb;
  --ink2: #d1d1e8;
  --ink3: #9b9bbb;
  --muted: #606080;
  --acc: #6467f2;
  --acc-dk: #4c4fe5;
  --acc-lt: #8b93ff;
  --cyan: #22d3c5;
  --green: #28d978;
  --yellow: #f7b731;
  --red: #ff5b63;
  --orange: #ff8a3d;
  --shadow-card: 0 1px 0 rgba(255,255,255,.025) inset, 0 10px 28px rgba(0,0,0,.22);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,.035) inset, 0 16px 42px rgba(0,0,0,.32);
  --focus-ring: 0 0 0 1px rgba(139,147,255,.72), 0 0 0 4px rgba(100,103,242,.16);
}

body {
  background:
    linear-gradient(180deg, rgba(100,103,242,.035) 0%, rgba(5,5,10,0) 260px),
    var(--bg);
}

.page {
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0) 180px);
}

.tabs {
  background:
    linear-gradient(180deg, #111827 0%, #0d0d14 42%, #090910 100%);
  border-right-color: #23233a;
}

.tabs::before {
  background:
    linear-gradient(135deg, rgba(100,103,242,.22), rgba(34,211,197,.07)),
    #10101a;
  border-bottom-color: #24243a;
}

.tabs::after {
  background: linear-gradient(180deg, #171724, #11111a);
  border-color: #2a2a42;
  color: #7bf3ae;
}

.tabs .tab:first-child::before {
  background:
    linear-gradient(135deg, rgba(139,147,255,.95), rgba(76,79,229,.95));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 24px rgba(100,103,242,.28);
}

.tab {
  color: #a7a7c6;
}

.tab:hover {
  background: rgba(255,255,255,.045);
  border-color: #282841;
  color: var(--ink);
}

.tab.on {
  background:
    linear-gradient(90deg, rgba(100,103,242,.24), rgba(100,103,242,.11));
  border-color: rgba(139,147,255,.35);
  color: #eef0ff;
}

.tab.on::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 0 4px 4px 0;
  background: var(--acc-lt);
  position: absolute;
  left: -1px;
}

.hdr {
  background:
    linear-gradient(180deg, rgba(16,16,26,.98), rgba(12,12,19,.96));
  border-bottom-color: #24243a;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.wordmark {
  font-size: 19px;
}

.wordmark .neon {
  color: #fff;
}

.wordmark span:last-child {
  color: #f4f4fb;
}

.brand-icon {
  background: linear-gradient(135deg, #1f2a5a, #0e7490);
  box-shadow: 0 0 0 1px rgba(139,147,255,.18);
}

.status-pill {
  background: #141420;
  border-color: #292940;
}

.status-pill.on {
  background: rgba(40,217,120,.1);
  border-color: rgba(40,217,120,.32);
  color: #9af7bd;
}

.sk-bar,
.block,
.acct-card,
.stat-box,
.setting-card,
.setting-card-col,
.terminal,
.modal,
.details-content,
.ccgen-content,
.admin-key-card,
.admin-gw-row,
.pp-row,
.proxy-stat,
.proxy-add-section,
.nk-create-form,
.proxy-pool-list-wrap,
.admin-create-key {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    var(--surface);
  border-color: var(--border-l);
}

.block,
.setting-card,
.setting-card-col {
  border-radius: 10px;
}

.block {
  position: relative;
}

.block::before,
.terminal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,147,255,.22), transparent);
  pointer-events: none;
}

.block:hover,
.setting-card:hover,
.stat-box:hover,
.admin-key-card:hover,
.pp-row:hover,
.admin-gw-row:hover {
  border-color: #343450;
  box-shadow: var(--shadow-card-hover);
}

.sec-label {
  color: #c7d2fe;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sec-label::before {
  content: "";
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--acc-lt), var(--cyan));
}

.field label,
.acct-lbl,
.stat-lbl,
.proxy-stat-lbl,
.admin-gw-toggle-label,
.admin-key-gw-label {
  color: #b9bbdd;
}

.field input,
.field select,
.field textarea,
.sk-input,
.cc-cards-input,
.shopify-urls-input,
.woo-sites-input,
.woo-cookies-input,
.ccgen-output,
.proxy-add-section textarea {
  background: var(--input-bg);
  border-color: #28283d;
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.sk-input:focus,
.cc-cards-input:focus,
.shopify-urls-input:focus,
.woo-sites-input:focus,
.woo-cookies-input:focus,
.ccgen-output:focus {
  background: #0f0f18;
}

.sk-input {
  font-size: 14px;
  color: #c7d2fe;
}

.btn-primary,
.btn-accent {
  background: linear-gradient(180deg, #787bff 0%, #5b5ef0 100%);
  border-color: #777bff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 10px 22px rgba(100,103,242,.28);
}

.btn-primary:hover,
.btn-accent:hover {
  background: linear-gradient(180deg, #8b93ff 0%, #6467f2 100%);
  border-color: #8b93ff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 14px 28px rgba(100,103,242,.34);
}

.btn-ghost,
.icon-btn,
.gate-sub-btn,
.clean-tab,
.admin-tab,
.nk-type-tab,
.pp-label-tab,
.pool-action,
.pp-ctrl-btn {
  background: linear-gradient(180deg, #1a1a28, #141420);
  border-color: #2a2a42;
  color: #d0d2ee;
}

.btn-ghost:hover,
.icon-btn:hover,
.gate-sub-btn:hover,
.clean-tab:hover,
.admin-tab:hover,
.nk-type-tab:hover,
.pp-label-tab:hover,
.pool-action:hover,
.pp-ctrl-btn:hover {
  background: #202033;
  border-color: #393957;
}

.gate-sub-btn.on,
.clean-tab.on,
.admin-tab.on,
.nk-type-tab.on,
.pp-label-tab.on {
  background: linear-gradient(180deg, rgba(100,103,242,.32), rgba(100,103,242,.18));
  border-color: rgba(139,147,255,.42);
  color: #fff;
}

.btn-danger,
.btn-warn {
  background: linear-gradient(180deg, rgba(255,91,99,.18), rgba(255,91,99,.1));
  border-color: rgba(255,91,99,.35);
  color: #ffb8bd;
}

.btn-danger:hover,
.btn-warn:hover {
  background: rgba(255,91,99,.22);
  border-color: rgba(255,91,99,.52);
}

.stats-strip {
  grid-template-columns: 1.05fr .95fr .95fr .55fr;
}

.stat-box {
  min-height: 82px;
  position: relative;
  overflow: hidden;
}

.stat-box::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .68;
  pointer-events: none;
}

.stat-box[data-cc-filter="charged"]::before {
  background: linear-gradient(135deg, rgba(40,217,120,.12), transparent 58%);
}

.stat-box[data-cc-filter="live"]::before {
  background: linear-gradient(135deg, rgba(247,183,49,.13), transparent 58%);
}

.stat-box[data-cc-filter="dead"]::before {
  background: linear-gradient(135deg, rgba(255,91,99,.12), transparent 58%);
}

.stat-box[data-cc-filter="error"]::before {
  background: linear-gradient(135deg, rgba(255,138,61,.13), transparent 58%);
}

.stat-n {
  font-size: 25px;
  line-height: 1;
}

.stat-lbl {
  font-size: 10.5px;
}

.stat-green {
  color: #31ef86;
}

.stat-yellow {
  color: #ffc247;
}

.stat-red {
  color: #ff6971;
}

.stat-orange {
  color: #ff9955;
}

.acct-card {
  min-height: 74px;
}

.terminal,
.result-block {
  background: #08080e;
  border-color: #232338;
}

.result-head,
.term-head {
  background: #11111a;
}

.result-row,
.log-line,
.item-row {
  background: #101018;
  border-color: #222238;
}

.result-row:hover,
.log-line:hover,
.item-row:hover {
  background: #171724;
}

.result-row.cc-row-charged,
.cc-row-charged {
  background: linear-gradient(90deg, rgba(40,217,120,.1), rgba(16,16,24,.96));
  border-left-color: var(--green) !important;
}

.cc-row-live {
  background: linear-gradient(90deg, rgba(247,183,49,.1), rgba(16,16,24,.96));
  border-left-color: var(--yellow) !important;
}

.raw-message,
.raw-ed-wrap,
.raw-json,
.admin-key-gw-section {
  background: #0b0b12;
  border-color: #25253a;
}

.setting-notice,
.speed-pill {
  background: rgba(100,103,242,.1);
  border-color: rgba(139,147,255,.22);
  color: #cfd4ff;
}

.badge,
.pill,
.admin-gw-badge,
.admin-perm-tag,
.speed-pill {
  border-radius: 999px;
}

.toggle-slider,
.admin-key-gw-slider {
  background: #2a2a40;
}

.admin-gw-toggle input:checked + .toggle-slider,
.admin-key-gw-toggle input:checked + .admin-key-gw-slider {
  background: linear-gradient(180deg, #32de82, #1fb766);
}

.modal,
.details-content,
.ccgen-content {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    #111119;
  border-color: #32324c;
}

.tst {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    rgba(17,17,25,.96);
  border-color: #303048;
}

.site-footer {
  border-top-color: #222238;
}

@media (max-width: 1023px) {
  .tabs {
    background: rgba(13,13,20,.98);
    box-shadow: 0 -12px 30px rgba(0,0,0,.34);
  }

  .tab.on::before {
    display: none !important;
  }

  .tab {
    color: #b3b5d4;
  }

  .tab.on {
    background: rgba(100,103,242,.22);
    color: #fff;
  }
}

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

  .block {
    padding: 14px;
  }

  .stat-box {
    min-height: 74px;
  }
}

@media (max-width: 420px) {
  .tab {
    font-size: 9px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .tab svg {
    width: 17px;
    height: 17px;
  }
}

/* --------------------------------------------------------------------------
   NOXTER GRAPHITE BRAND PASS
   A restrained product identity: graphite shell, mint signature, steel text,
   amber/coral status. This intentionally avoids generic blue-purple AI UI.
-------------------------------------------------------------------------- */
:root {
  --bg: #060806;
  --surface: #101410;
  --surface-2: #171c18;
  --surface-3: #1d241f;
  --input-bg: #0b0f0c;
  --border-l: #222b25;
  --border: #314038;
  --ink: #f2f7f1;
  --ink2: #c9d5cb;
  --ink3: #9eaa9f;
  --muted: #657268;
  --acc: #4bd88f;
  --acc-dk: #22a567;
  --acc-lt: #82f2b7;
  --cyan: #87b5d6;
  --green: #48df91;
  --yellow: #d8a84f;
  --red: #ef626c;
  --orange: #dc8447;
  --focus-ring: 0 0 0 1px rgba(75,216,143,.76), 0 0 0 4px rgba(75,216,143,.13);
  --shadow-card: 0 1px 0 rgba(255,255,255,.025) inset, 0 12px 26px rgba(0,0,0,.24);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 40px rgba(0,0,0,.34);
}

body {
  background:
    linear-gradient(180deg, rgba(75,216,143,.035) 0%, rgba(6,8,6,0) 220px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 96px),
    var(--bg);
}

.page {
  background: linear-gradient(180deg, rgba(242,247,241,.012), rgba(242,247,241,0) 160px);
}

.tabs {
  background:
    linear-gradient(180deg, #101711 0%, #0b100c 46%, #070a08 100%);
  border-right-color: #253029;
}

.tabs::before {
  background:
    linear-gradient(180deg, rgba(242,247,241,.035), transparent),
    #101711;
  border-bottom-color: #26312a;
  color: #eef6ee;
}

.tabs::after {
  background: #121812;
  border-color: #2a362e;
  color: var(--acc-lt);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

.tabs .tab:first-child::before {
  content: "N";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  color: #061108;
  background: #4bd88f;
  border-radius: 8px 3px 8px 3px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 10px 24px rgba(75,216,143,.2);
}

.tab {
  color: #a8b5aa;
}

.tab:hover {
  background: #151c16;
  border-color: #2a362e;
  color: #edf6ee;
}

.tab.on {
  background: #172318;
  border-color: rgba(75,216,143,.38);
  color: #eaffef;
}

.tab.on svg {
  color: var(--acc);
}

.tab.on::before {
  background: var(--acc);
}

.hdr {
  background: rgba(8,12,9,.94);
  border-bottom-color: #253029;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.wordmark .neon {
  color: #f4fff5;
}

.wordmark span {
  color: #839287;
}

.wordmark span:last-child {
  color: #f2f7f1;
}

.brand-icon {
  background: #0b120d;
  border: 1px solid #2d3c33;
  box-shadow: none;
}

.hdr-sub,
.site-footer,
.text-fade {
  color: #78867b;
}

.status-pill {
  background: #111811;
  border-color: #28352d;
}

.status-pill.on {
  background: rgba(75,216,143,.11);
  border-color: rgba(75,216,143,.34);
  color: #a8f4c5;
}

.sk-bar,
.block,
.acct-card,
.stat-box,
.setting-card,
.setting-card-col,
.terminal,
.modal,
.details-content,
.ccgen-content,
.admin-key-card,
.admin-gw-row,
.pp-row,
.proxy-stat,
.proxy-add-section,
.nk-create-form,
.proxy-pool-list-wrap,
.admin-create-key {
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
    var(--surface);
  border-color: #242d27;
}

.block::before,
.terminal::before {
  background: linear-gradient(90deg, transparent, rgba(75,216,143,.2), transparent);
}

.block:hover,
.setting-card:hover,
.stat-box:hover,
.admin-key-card:hover,
.pp-row:hover,
.admin-gw-row:hover {
  border-color: #36463c;
}

.sec-label {
  color: #c7ead4;
}

.sec-label::before {
  background: var(--acc);
  box-shadow: 0 0 0 1px rgba(75,216,143,.25);
}

.field label,
.acct-lbl,
.stat-lbl,
.proxy-stat-lbl,
.admin-gw-toggle-label,
.admin-key-gw-label {
  color: #aebcaf;
}

.field input,
.field select,
.field textarea,
.sk-input,
.cc-cards-input,
.shopify-urls-input,
.woo-sites-input,
.woo-cookies-input,
.ccgen-output,
.proxy-add-section textarea {
  background: var(--input-bg);
  border-color: #29342d;
  color: #edf6ee;
}

.field input::placeholder,
.field textarea::placeholder,
.sk-input::placeholder,
.cc-cards-input::placeholder {
  color: #647268;
}

.sk-input,
.cc-cards-input,
.result-row .result-card,
.raw-card,
.detail-v,
.quick-v,
.ed-v {
  color: #a8c7e4;
}

.btn-primary,
.btn-accent {
  background: #4bd88f;
  border-color: #4bd88f;
  color: #051108;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 12px 24px rgba(75,216,143,.18);
}

.btn-primary:hover,
.btn-accent:hover {
  background: #65e8a5;
  border-color: #82f2b7;
  color: #041008;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 15px 30px rgba(75,216,143,.24);
}

.btn-ghost,
.icon-btn,
.gate-sub-btn,
.clean-tab,
.admin-tab,
.nk-type-tab,
.pp-label-tab,
.pool-action,
.pp-ctrl-btn {
  background: #151b16;
  border-color: #2a362e;
  color: #c7d3c9;
}

.btn-ghost:hover,
.icon-btn:hover,
.gate-sub-btn:hover,
.clean-tab:hover,
.admin-tab:hover,
.nk-type-tab:hover,
.pp-label-tab:hover,
.pool-action:hover,
.pp-ctrl-btn:hover {
  background: #1b241d;
  border-color: #3b4d42;
  color: #eff8ef;
}

.gate-sub-btn.on,
.clean-tab.on,
.admin-tab.on,
.nk-type-tab.on,
.pp-label-tab.on {
  background: #1f3223;
  border-color: rgba(75,216,143,.4);
  color: #f3fff4;
}

.btn-danger,
.btn-warn {
  background: rgba(239,98,108,.12);
  border-color: rgba(239,98,108,.34);
  color: #ffb9bf;
}

.stat-box[data-cc-filter="charged"] {
  border-color: rgba(75,216,143,.18);
}

.stat-box[data-cc-filter="charged"]::before {
  background: linear-gradient(135deg, rgba(75,216,143,.14), transparent 58%);
}

.stat-box[data-cc-filter="live"] {
  border-color: rgba(216,168,79,.18);
}

.stat-box[data-cc-filter="live"]::before {
  background: linear-gradient(135deg, rgba(216,168,79,.14), transparent 58%);
}

.stat-box[data-cc-filter="dead"] {
  border-color: rgba(239,98,108,.18);
}

.stat-box[data-cc-filter="dead"]::before {
  background: linear-gradient(135deg, rgba(239,98,108,.13), transparent 58%);
}

.stat-box[data-cc-filter="error"] {
  border-color: rgba(220,132,71,.18);
}

.stat-box[data-cc-filter="error"]::before {
  background: linear-gradient(135deg, rgba(220,132,71,.13), transparent 58%);
}

.stat-green {
  color: #62f0a7;
}

.stat-yellow {
  color: #e8ba61;
}

.stat-red {
  color: #ff737d;
}

.stat-orange {
  color: #eca062;
}

.terminal,
.result-block {
  background: #070a08;
  border-color: #242d27;
}

.result-head,
.term-head {
  background: #101711;
}

.result-row,
.log-line,
.item-row {
  background: #0f140f;
  border-color: #232c26;
}

.result-row:hover,
.log-line:hover,
.item-row:hover {
  background: #151c16;
}

.setting-notice,
.speed-pill,
.badge,
.pill,
.admin-gw-badge,
.admin-perm-tag {
  background: rgba(75,216,143,.09);
  border-color: rgba(75,216,143,.22);
  color: #c7ead4;
}

.pill.yellow,
.badge.yellow {
  background: rgba(216,168,79,.1);
  border-color: rgba(216,168,79,.26);
  color: #efc979;
}

.pill.red,
.badge.red {
  background: rgba(239,98,108,.1);
  border-color: rgba(239,98,108,.26);
  color: #ffadb4;
}

.admin-gw-toggle input:checked + .toggle-slider,
.admin-key-gw-toggle input:checked + .admin-key-gw-slider {
  background: #4bd88f;
}

.modal,
.details-content,
.ccgen-content,
.tst {
  background: #101410;
  border-color: #35443a;
}

.loader-progress,
.progress-bar,
.pp-progress-bar,
.password-meter {
  background: #0b0f0c;
  border-color: #242d27;
}

.progress-fill,
.pp-progress-fill,
.loader-progress-bar {
  background: #4bd88f;
}

@media (max-width: 1023px) {
  .tabs {
    background: rgba(10,15,11,.98);
    border-top-color: #27332b;
  }

  .tab.on {
    background: rgba(75,216,143,.16);
    border-color: rgba(75,216,143,.34);
  }
}

/* --------------------------------------------------------------------------
   NOXPROXY TONE ALIGNMENT PASS
   Final palette normalization. This pass intentionally overrides the previous
   graphite/mint experiment so the whole app sits in one NoxProxy-compatible
   dark indigo system without extra decorative noise.
-------------------------------------------------------------------------- */
:root {
  --bg: #07070c;
  --surface: #111119;
  --surface-2: #161622;
  --surface-3: #1a1a2a;
  --input-bg: #0d0d14;
  --border-l: #1c1c2a;
  --border: #242434;
  --border-strong: #2e2e42;
  --ink: #f0f0f8;
  --ink2: #c7c7dd;
  --ink3: #9898b8;
  --muted: #5a5a78;
  --acc: #6366f1;
  --acc-dk: #4f46e5;
  --acc-lt: #818cf8;
  --cyan: #14b8a6;
  --green: #22c55e;
  --yellow: #f59e0b;
  --red: #ef4444;
  --orange: #f97316;
  --focus-ring: 0 0 0 1px rgba(129,140,248,.72), 0 0 0 4px rgba(99,102,241,.16);
  --shadow-card: 0 1px 0 rgba(255,255,255,.025) inset, 0 10px 28px rgba(0,0,0,.26);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,.035) inset, 0 16px 38px rgba(0,0,0,.36);
}

html,
body {
  background: var(--bg);
}

body {
  background:
    linear-gradient(180deg, rgba(99,102,241,.025) 0%, rgba(7,7,12,0) 220px),
    var(--bg);
}

.page {
  background: none;
}

.tabs {
  background: #0d0d14;
  border-right-color: var(--border-l);
}

.tabs::before {
  background: #0d0d14;
  border-bottom-color: var(--border-l);
  color: var(--ink);
}

.tabs::after {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--acc-lt);
  box-shadow: none;
}

.tabs .tab:first-child::before {
  content: "N";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-dk));
  border-radius: 9px;
  box-shadow: 0 0 16px rgba(99,102,241,.35);
}

.tab {
  color: var(--ink3);
}

.tab:hover {
  background: #141420;
  border-color: var(--border-l);
  color: var(--ink);
}

.tab.on {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.25);
  color: #c7d2fe;
}

.tab.on svg {
  color: var(--acc-lt);
}

.tab.on::before {
  background: var(--acc);
}

.hdr {
  background: rgba(13,13,20,.96);
  border-bottom-color: var(--border-l);
  box-shadow: none;
}

.wordmark .neon,
.wordmark span:last-child {
  color: var(--ink);
}

.wordmark span {
  color: var(--ink3);
}

.brand-icon {
  background: #0d0d14;
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(99,102,241,.12);
}

.hdr-sub,
.site-footer,
.text-fade {
  color: var(--ink3);
}

.status-pill {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink3);
}

.status-pill.on {
  background: rgba(34,197,94,.09);
  border-color: rgba(34,197,94,.28);
  color: #86efac;
}

.sk-bar,
.block,
.acct-card,
.stat-box,
.setting-card,
.setting-card-col,
.terminal,
.modal,
.details-content,
.ccgen-content,
.admin-key-card,
.admin-gw-row,
.pp-row,
.proxy-stat,
.proxy-add-section,
.nk-create-form,
.proxy-pool-list-wrap,
.admin-create-key {
  background: var(--surface);
  border-color: var(--border-l);
  box-shadow: var(--shadow-card);
}

.block::before,
.terminal::before {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.18), transparent);
}

.block:hover,
.setting-card:hover,
.stat-box:hover,
.admin-key-card:hover,
.pp-row:hover,
.admin-gw-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
}

.sec-label {
  color: #c7d2fe;
}

.sec-label::before {
  background: var(--acc);
  box-shadow: none;
}

.field label,
.acct-lbl,
.stat-lbl,
.proxy-stat-lbl,
.admin-gw-toggle-label,
.admin-key-gw-label {
  color: var(--ink3);
}

.field input,
.field select,
.field textarea,
.sk-input,
.cc-cards-input,
.shopify-urls-input,
.woo-sites-input,
.woo-cookies-input,
.ccgen-output,
.proxy-add-section textarea {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--ink);
}

.field input::placeholder,
.field textarea::placeholder,
.sk-input::placeholder,
.cc-cards-input::placeholder {
  color: var(--muted);
}

.sk-input,
.cc-cards-input,
.result-row .result-card,
.raw-card,
.detail-v,
.quick-v,
.ed-v {
  color: #a5b4fc;
}

.btn-primary,
.btn-accent {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  box-shadow: 0 1px 8px rgba(99,102,241,.3);
}

.btn-primary:hover,
.btn-accent:hover {
  background: var(--acc-lt);
  border-color: var(--acc-lt);
  color: #fff;
  box-shadow: 0 1px 10px rgba(99,102,241,.34);
}

.btn-ghost,
.icon-btn,
.gate-sub-btn,
.clean-tab,
.admin-tab,
.nk-type-tab,
.pp-label-tab,
.pool-action,
.pp-ctrl-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink2);
}

.btn-ghost:hover,
.icon-btn:hover,
.gate-sub-btn:hover,
.clean-tab:hover,
.admin-tab:hover,
.nk-type-tab:hover,
.pp-label-tab:hover,
.pool-action:hover,
.pp-ctrl-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--ink);
}

.gate-sub-btn.on,
.clean-tab.on,
.admin-tab.on,
.nk-type-tab.on,
.pp-label-tab.on {
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.34);
  color: #e0e7ff;
}

.btn-danger,
.btn-warn {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.28);
  color: #fca5a5;
}

.stat-box[data-cc-filter="charged"],
.stat-box[data-cc-filter="live"],
.stat-box[data-cc-filter="dead"],
.stat-box[data-cc-filter="error"] {
  border-color: var(--border-l);
}

.stat-box[data-cc-filter="charged"]::before {
  background: linear-gradient(135deg, rgba(34,197,94,.12), transparent 58%);
}

.stat-box[data-cc-filter="live"]::before {
  background: linear-gradient(135deg, rgba(245,158,11,.12), transparent 58%);
}

.stat-box[data-cc-filter="dead"]::before {
  background: linear-gradient(135deg, rgba(239,68,68,.11), transparent 58%);
}

.stat-box[data-cc-filter="error"]::before {
  background: linear-gradient(135deg, rgba(249,115,22,.12), transparent 58%);
}

.stat-green {
  color: var(--green);
}

.stat-yellow {
  color: var(--yellow);
}

.stat-red {
  color: var(--red);
}

.stat-orange {
  color: var(--orange);
}

.terminal,
.result-block {
  background: #0a0a0f;
  border-color: var(--border-l);
}

.result-head,
.term-head {
  background: var(--surface);
}

.result-row,
.log-line,
.item-row {
  background: var(--surface);
  border-color: var(--border-l);
}

.result-row:hover,
.log-line:hover,
.item-row:hover {
  background: var(--surface-2);
}

.setting-notice,
.speed-pill,
.badge,
.pill,
.admin-gw-badge,
.admin-perm-tag {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.2);
  color: #c7d2fe;
}

.pill.green,
.badge.green,
.pp-label-tag {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.22);
  color: #86efac;
}

.pill.yellow,
.badge.yellow {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.24);
  color: #fde68a;
}

.pill.red,
.badge.red {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.24);
  color: #fca5a5;
}

.admin-gw-toggle input:checked + .toggle-slider,
.admin-key-gw-toggle input:checked + .admin-key-gw-slider {
  background: var(--green);
}

.modal,
.details-content,
.ccgen-content,
.tst {
  background: var(--surface);
  border-color: var(--border-strong);
}

.loader-progress,
.progress-bar,
.pp-progress-bar,
.password-meter {
  background: var(--input-bg);
  border-color: var(--border-l);
}

.progress-fill,
.pp-progress-fill,
.loader-progress-bar {
  background: var(--acc);
}

@media (max-width: 1023px) {
  .tabs {
    background: rgba(13,13,20,.98);
    border-top-color: var(--border-l);
  }

  .tab.on {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.32);
  }
}

/* --------------------------------------------------------------------------
   NOXPROXY LAYOUT REFINEMENT PASS
   Fixes the visible mismatch from the screenshot: less oversized sidebar
   selection and a consistent app-shell content rhythm.
-------------------------------------------------------------------------- */
:root {
  --shell-w: 240px;
  --content-max: 1080px;
  --topbar-h: 70px;
}

.page {
  margin-left: var(--shell-w) !important;
  padding: 20px 28px 34px !important;
  min-height: 100vh;
}

.hdr {
  min-height: var(--topbar-h);
  margin: -20px -28px 20px;
  padding: 0 28px;
  display: flex;
  align-items: center;
}

.hdr-l,
.hdr .status-pill {
  flex-shrink: 0;
}

.wordmark {
  font-size: 19px;
  line-height: 1.2;
}

.hdr-sub {
  margin-top: 2px;
}

.sk-bar,
.panel,
.site-footer {
  width: 100%;
  max-width: var(--content-max);
}

.sk-bar {
  min-height: 70px;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 8px;
  align-items: center;
}

.sk-input {
  height: 44px;
}

.sk-bar .btn {
  height: 44px;
}

.panel {
  margin-top: 0;
}

.block {
  border-radius: 8px;
  padding: 18px;
}

.setting-block {
  padding: 18px;
}

.sec-label {
  height: 18px;
  margin: 0 0 12px;
  font-size: 11px;
}

.tabs {
  width: var(--shell-w);
  padding: 84px 8px 14px;
}

.tabs::before {
  min-height: 70px;
  padding-top: 17px;
}

.tabs .tab:first-child::before {
  top: 18px;
}

.tabs .tab {
  position: relative;
  min-height: 38px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 7px;
  border-width: 1px;
  font-size: 13.5px;
}

.tabs .tab.on {
  background: #181827;
  border-color: rgba(129,140,248,.34);
  color: #e0e7ff;
  box-shadow: none;
}

.tabs .tab.on::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  width: 3px;
  height: 18px;
  border-radius: 0 4px 4px 0;
  background: var(--acc-lt);
}

.tabs .tab:hover {
  background: #151520;
  border-color: #2a2a3e;
}

.tabs::after {
  padding: 9px 12px;
  border-radius: 7px;
}

#pn-admin {
  max-width: var(--content-max);
}

.admin-tabs,
.tools-tabs,
.nk-type-tabs,
.pp-label-tabs {
  max-width: var(--content-max);
}

.site-footer {
  margin-top: 24px;
  padding-top: 16px;
}

@media (min-width: 1280px) {
  .page {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 1023px) {
  :root {
    --shell-w: 0px;
    --content-max: none;
    --topbar-h: 64px;
  }

  .page {
    margin-left: 0 !important;
    padding: 14px 12px 84px !important;
  }

  .hdr {
    margin: -14px -12px 14px;
    padding: 0 12px;
  }

  .tabs {
    width: auto;
    padding: 6px;
  }

  .tabs .tab {
    margin: 0;
    border-radius: 7px;
  }

  .tabs .tab.on::before {
    display: none;
  }

}

@media (max-width: 520px) {
  .wordmark {
    font-size: 18px;
  }

  .sk-bar {
    min-height: auto;
  }

}

/* --------------------------------------------------------------------------
   MOBILE HEADER / NAV LOCK
   Keeps desktop sidebar chrome out of the mobile header and restores a
   compact topbar rhythm after the later sidebar overrides.
-------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hdr {
    min-height: 78px;
    padding: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
  }

  .hdr-l {
    min-width: 0;
  }

  .wordmark {
    white-space: nowrap;
  }

  .hdr-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status-pill {
    align-self: center;
    flex: 0 0 auto;
  }

  .tabs::before,
  .tabs::after,
  .tabs .tab:first-child::before {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .hdr {
    min-height: 80px;
  }

  .wordmark {
    font-size: 17px;
  }

  .hdr-sub {
    max-width: 230px;
  }
}

@media (max-width: 520px) {
  .tabs {
    gap: 2px;
    padding: 5px 4px;
  }

  .tabs .tab {
    min-width: 0;
    height: 52px;
    padding: 6px 1px !important;
    gap: 4px;
    font-size: 11px;
    line-height: 1;
  }

  .tabs .tab svg {
    width: 15px;
    height: 15px;
  }

  .tabs .tab.on {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

@media (max-width: 380px) {
  .tabs .tab {
    font-size: 10px;
  }
}

/* --------------------------------------------------------------------------
   ENDER DASHBOARD THEME PASS
   Final visual pass matching the provided dashboard references: a quiet
   rounded sidebar, high-contrast dashboard header, and a locked dark palette.
-------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --dash-bg: #0b0b0d;
  --dash-sidebar: #1a1a1d;
  --dash-surface: #1b1b1f;
  --dash-surface-2: #242428;
  --dash-surface-3: #2b2b30;
  --dash-input: #101013;
  --dash-text: #f7f7f8;
  --dash-text-2: #e4e4e7;
  --dash-muted: #a1a1aa;
  --dash-faint: #71717a;
  --dash-border: #34343a;
  --dash-border-soft: #2a2a30;
  --dash-active: #2a2a2f;
  --dash-purple: #8b1cf6;
  --dash-purple-2: #a855f7;
  --dash-blue: #60a5fa;
  --dash-green: #00e083;
  --dash-amber: #fbbf24;
  --dash-rose: #fb3a6b;
  --dash-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 34px rgba(0,0,0,.28);
  --dash-shadow-soft: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 24px rgba(0,0,0,.18);
  --shell-w: 250px;
  --content-max: 1024px;
  --topbar-h: 130px;

  --bg: var(--dash-bg);
  --surface: var(--dash-surface);
  --surface-2: var(--dash-surface-2);
  --surface-3: var(--dash-surface-3);
  --input-bg: var(--dash-input);
  --border-l: var(--dash-border-soft);
  --border: var(--dash-border);
  --border-strong: #c8c8d0;
  --ink: var(--dash-text);
  --ink2: var(--dash-text-2);
  --ink3: var(--dash-muted);
  --muted: var(--dash-faint);
  --acc: var(--dash-purple);
  --acc-dk: #7116d6;
  --acc-lt: var(--dash-purple-2);
  --green: var(--dash-green);
  --yellow: var(--dash-amber);
  --red: var(--dash-rose);
  --orange: #f97316;
  --shadow-card: var(--dash-shadow-soft);
  --shadow-card-hover: var(--dash-shadow);
  --focus-ring: 0 0 0 1px rgba(124,29,242,.64), 0 0 0 4px rgba(124,29,242,.13);
}

[data-theme="dark"] {
  color-scheme: dark;
  --dash-bg: #0b0b0d;
  --dash-sidebar: #1a1a1d;
  --dash-surface: #1b1b1f;
  --dash-surface-2: #242428;
  --dash-surface-3: #2b2b30;
  --dash-input: #101013;
  --dash-text: #f7f7f8;
  --dash-text-2: #e4e4e7;
  --dash-muted: #a1a1aa;
  --dash-faint: #71717a;
  --dash-border: #34343a;
  --dash-border-soft: #2a2a30;
  --dash-active: #2a2a2f;
  --dash-purple: #8b1cf6;
  --dash-purple-2: #a855f7;
  --dash-blue: #60a5fa;
  --dash-green: #00e083;
  --dash-amber: #fbbf24;
  --dash-rose: #fb3a6b;
  --dash-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 34px rgba(0,0,0,.28);
  --dash-shadow-soft: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 24px rgba(0,0,0,.18);
  --bg: var(--dash-bg);
  --surface: var(--dash-surface);
  --surface-2: var(--dash-surface-2);
  --surface-3: var(--dash-surface-3);
  --input-bg: var(--dash-input);
  --border-l: var(--dash-border-soft);
  --border: var(--dash-border);
  --border-strong: #45454d;
  --ink: var(--dash-text);
  --ink2: var(--dash-text-2);
  --ink3: var(--dash-muted);
  --muted: var(--dash-faint);
  --acc: var(--dash-purple);
  --acc-dk: #7116d6;
  --acc-lt: var(--dash-purple-2);
}

html,
body {
  background: var(--dash-bg) !important;
  color: var(--dash-text);
}

body {
  letter-spacing: 0;
  font-size: 14px;
}

body::before,
body::after {
  display: none !important;
}

a,
a:hover {
  color: var(--dash-purple);
  text-decoration: none;
  text-shadow: none;
}

code {
  background: var(--dash-surface-2);
  border: 1px solid var(--dash-border-soft);
  color: var(--dash-text-2);
}

.page {
  max-width: none !important;
  width: auto;
  min-height: 100vh;
  margin-left: var(--shell-w) !important;
  padding: 18px 42px 36px !important;
  background: var(--dash-bg) !important;
}

.page > * {
  max-width: var(--content-max);
}

/* Sidebar */
.tabs {
  position: fixed;
  inset: 4px auto 4px 4px;
  width: 242px;
  padding: 72px 14px 16px;
  gap: 4px;
  background: var(--dash-sidebar) !important;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  box-shadow: var(--dash-shadow-soft);
}

.tabs::before {
  content: attr(data-brand) "\A" attr(data-tag);
  min-height: 64px;
  padding: 15px 14px 12px 54px;
  border-bottom: 0;
  background: transparent !important;
  color: var(--dash-text);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

.tabs .tab:first-child::before {
  content: "N";
  top: 22px;
  left: 20px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(139,28,246,.9), rgba(9,9,11,.95)),
    #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
}

.tabs::after {
  content: "NOXTER\A v2.0.2";
  white-space: pre-line;
  min-height: 48px;
  margin-top: auto;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--dash-border);
  background: var(--dash-surface);
  color: var(--dash-text);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  box-shadow: none;
}

.tabs .tab {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--dash-text-2);
  font-size: 14px;
  font-weight: 600;
}

.tabs .tab svg {
  width: 15px;
  height: 15px;
  color: currentColor;
}

.tabs .tab:hover,
.tabs .tab.on {
  background: var(--dash-active);
  border-color: transparent;
  color: var(--dash-text);
  box-shadow: none;
}

.tabs .tab.on::before {
  display: none;
}

.tabs .tab:first-child::before {
  display: flex !important;
  position: fixed !important;
  top: 22px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 102;
}

/* Dashboard header */
.hdr {
  position: relative;
  top: auto;
  min-height: 142px;
  margin: 0 0 10px !important;
  padding: 42px 0 18px !important;
  align-items: flex-start;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

.hdr::before {
  content: "▯  Shortcuts  Ctrl + M";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--dash-faint);
  font-size: 12px;
  font-weight: 500;
  word-spacing: 0;
  line-height: 18px;
}

.hdr::after {
  content: "• All systems operational   ◷ Last updated 0 minutes ago";
  display: block !important;
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: var(--dash-green);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  background: transparent;
  filter: none;
  opacity: 1;
}

.hdr-l {
  gap: 8px;
}

.wordmark {
  font-size: 36px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dash-text);
}

.wordmark::before {
  content: none;
}

.wordmark::after {
  content: none;
}

.welcome-prefix,
.wordmark .neon,
.wordmark .wave {
  display: inline;
}

.wordmark .neon {
  color: var(--dash-text) !important;
}

.wordmark span {
  color: var(--dash-text) !important;
  font-weight: 800;
}

.wordmark .wave {
  margin-left: 8px;
  font-size: .86em;
}

.hdr-sub {
  color: var(--dash-muted);
  font-size: 18px;
  line-height: 1.35;
}

.status-pill {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  color: var(--dash-muted);
  box-shadow: none;
}

.status-pill.on {
  background: rgba(0,166,106,.1);
  border-color: rgba(0,166,106,.22);
  color: var(--dash-green);
}

/* Main controls and cards */
.sk-bar,
.block,
.acct-card,
.setting-card,
.setting-card-col,
.terminal,
.result-block,
.modal,
.details-content,
.ccgen-content,
.admin-key-card,
.admin-gw-row,
.admin-create-key,
.nk-create-form,
.proxy-pool-list-wrap,
.proxy-stat,
.proxy-add-section,
.pp-row {
  background: var(--dash-surface) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--dash-shadow-soft) !important;
}

.sk-bar {
  max-width: var(--content-max);
  min-height: 64px;
  padding: 10px;
  margin: 0 0 22px;
}

.block {
  padding: 24px;
}

.block:hover,
.setting-card:hover,
.admin-key-card:hover,
.pp-row:hover,
.admin-gw-row:hover {
  box-shadow: var(--dash-shadow) !important;
  border-color: var(--dash-border) !important;
}

.sec-label {
  margin-bottom: 12px;
  color: var(--dash-text);
  font-size: 13px;
  letter-spacing: .02em;
}

.sec-label::before {
  background: var(--dash-purple);
  box-shadow: none;
}

.field label,
.acct-lbl,
.stat-lbl,
.proxy-stat-lbl,
.admin-gw-toggle-label,
.admin-key-gw-label {
  color: var(--dash-muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea,
.sk-input,
.cc-cards-input,
.shopify-urls-input,
.woo-sites-input,
.woo-cookies-input,
.ccgen-output,
.proxy-add-section textarea,
.setting-card input:not([type="checkbox"]),
.setting-card select {
  background: var(--dash-input) !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.field input::placeholder,
.field textarea::placeholder,
.sk-input::placeholder,
.cc-cards-input::placeholder {
  color: var(--dash-faint);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.sk-input:focus,
.cc-cards-input:focus {
  border-color: rgba(124,29,242,.55) !important;
  box-shadow: var(--focus-ring) !important;
}

.btn-primary,
.btn-accent,
.btn-save-all {
  background: linear-gradient(180deg, var(--dash-purple-2), var(--dash-purple)) !important;
  border-color: var(--dash-purple) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(124,29,242,.24) !important;
}

.btn-primary:hover,
.btn-accent:hover,
.btn-save-all:hover {
  filter: brightness(1.04);
}

.btn-ghost,
.icon-btn,
.copy-btn,
.gate-sub-btn,
.clean-tab,
.admin-tab,
.nk-type-tab,
.pp-label-tab,
.pool-action,
.pp-ctrl-btn,
.item-btn {
  background: var(--dash-surface-2) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text-2) !important;
  box-shadow: none !important;
}

.btn-ghost:hover,
.icon-btn:hover,
.copy-btn:hover,
.gate-sub-btn:hover,
.clean-tab:hover,
.admin-tab:hover,
.nk-type-tab:hover,
.pp-label-tab:hover,
.pool-action:hover,
.pp-ctrl-btn:hover,
.item-btn:hover {
  background: var(--dash-active) !important;
  color: var(--dash-text) !important;
}

.gate-sub-btn.on,
.clean-tab.on,
.admin-tab.on,
.nk-type-tab.on,
.pp-label-tab.on {
  background: var(--dash-active) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
}

/* Pastel dashboard metrics */
.stats-strip {
  gap: 12px;
}

.cc-stats:not(.stats-tight),
.stats-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.stat-box {
  min-height: 86px;
  padding: 17px 18px;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: none !important;
}

.stat-box::before,
.stat-box::after {
  display: none !important;
}

.stat-lbl {
  order: -1;
  margin-bottom: 4px;
  color: var(--dash-muted) !important;
  font-size: 11px;
  font-weight: 700;
}

.stat-lbl svg {
  display: none;
}

.stat-n {
  font-size: 25px;
  line-height: 1.1;
  color: var(--dash-text) !important;
  font-weight: 800;
}

.stat-box[data-cc-filter="charged"] {
  background: linear-gradient(135deg, #eef6ff, #eaf2ff) !important;
  border-color: #d8e6fb !important;
}

.stat-box[data-cc-filter="live"] {
  background: linear-gradient(135deg, #ecfdf5, #e8fbef) !important;
  border-color: #cceedd !important;
}

.stat-box[data-cc-filter="dead"] {
  background: linear-gradient(135deg, #fff8e8, #fff3d7) !important;
  border-color: #f2e3bd !important;
}

.stat-box[data-cc-filter="error"] {
  background: linear-gradient(135deg, #fff0f3, #fae7ec) !important;
  border-color: #f0d0d8 !important;
}

[data-theme="dark"] .stat-box[data-cc-filter="charged"] {
  background: linear-gradient(135deg, #111a32, #15192b) !important;
  border-color: #27365a !important;
}

[data-theme="dark"] .stat-box[data-cc-filter="live"] {
  background: linear-gradient(135deg, #062a1f, #0c241d) !important;
  border-color: #123e31 !important;
}

[data-theme="dark"] .stat-box[data-cc-filter="dead"] {
  background: linear-gradient(135deg, #321b0a, #28180c) !important;
  border-color: #4a2b12 !important;
}

[data-theme="dark"] .stat-box[data-cc-filter="error"] {
  background: linear-gradient(135deg, #320a18, #2a0d17) !important;
  border-color: #4b1d2d !important;
}

.result-head,
.term-head,
.details-header {
  background: var(--dash-surface-2) !important;
  border-color: var(--dash-border) !important;
}

.result-row,
.log-line,
.item-row,
.warn-box,
.setting-notice,
.speed-pill,
.badge,
.pill,
.admin-gw-badge,
.admin-perm-tag {
  background: var(--dash-surface-2) !important;
  border-color: var(--dash-border-soft) !important;
  color: var(--dash-text-2) !important;
}

.site-footer {
  max-width: var(--content-max);
  border-top-color: var(--dash-border);
  color: var(--dash-muted);
}

.page-loader {
  background: var(--dash-bg) !important;
}

@media (min-width: 1280px) {
  .page {
    padding-left: 46px !important;
    padding-right: 46px !important;
  }
}

@media (max-width: 1023px) {
  :root {
    --shell-w: 0px;
    --content-max: none;
    --topbar-h: 112px;
  }

  .page {
    margin-left: 0 !important;
    padding: 14px 12px 84px !important;
  }

  .page > * {
    max-width: none;
  }

  .hdr {
    min-height: 126px;
    margin: 0 0 12px !important;
    padding: 40px 0 26px !important;
  }

  .hdr::before {
    top: 0;
  }

  .hdr::after {
    bottom: 0;
    font-size: 11px;
  }

  .wordmark {
    font-size: 28px;
  }

  .hdr-sub {
    font-size: 14px;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .status-pill {
    height: 34px;
    padding: 0 12px;
  }

  .tabs {
    position: fixed;
    inset: auto 0 0 0;
    width: auto !important;
    height: 72px;
    padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    display: flex !important;
    flex-direction: row;
    gap: 3px;
    border-radius: 10px 10px 0 0;
    border-left: 1px solid var(--dash-border);
    border-right: 1px solid var(--dash-border);
    border-bottom: 0;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px);
  }

  [data-theme="dark"] .tabs {
    background: rgba(26,26,29,.92) !important;
  }

  .tabs::before,
  .tabs::after,
  .tabs .tab:first-child::before {
    display: none !important;
  }

  .tabs .tab {
    flex: 1 1 0;
    height: 58px;
    min-width: 0;
    padding: 6px 2px !important;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
  }

  .tabs .tab svg {
    width: 15px;
    height: 15px;
  }

  .sk-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sk-input {
    order: -1;
    flex: 0 0 100%;
  }

  .cc-stats:not(.stats-tight),
  .stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .block {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .wordmark {
    font-size: 24px;
  }

  .hdr-sub {
    max-width: 100%;
  }

  .status-pill {
    top: 2px;
    right: 0;
  }

  .cc-stats:not(.stats-tight),
  .stats-strip {
    gap: 8px;
  }

  .stat-box {
    min-height: 74px;
    padding: 13px 12px;
  }

  .stat-n {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   USER PROFILE + CLEAN HEADER PASS
   Removes fake dashboard copy and replaces the sidebar footer with a real
   Telegram-backed profile card.
-------------------------------------------------------------------------- */
.hdr {
  min-height: 92px !important;
  padding: 12px 0 18px !important;
}

.hdr::before,
.hdr::after {
  content: none !important;
  display: none !important;
}

.hdr-l {
  justify-content: center;
}

.hdr-sub {
  display: none !important;
}

.tabs {
  padding-bottom: 10px !important;
}

.tabs::after {
  content: none !important;
  display: none !important;
}

.sidebar-profile {
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: var(--dash-surface);
  box-shadow: none;
}

.mobile-auth-card {
  display: none !important;
}

.profile-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--dash-purple-2), var(--dash-purple));
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-main {
  min-width: 0;
}

.profile-name {
  color: var(--dash-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-meta,
.sidebar-version,
.telegram-config-note {
  color: var(--dash-muted);
  font-size: 11px;
  line-height: 1.35;
}

.profile-meta {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-logout {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dash-border);
  border-radius: 7px;
  background: var(--dash-surface-2);
  color: var(--dash-text-2);
  cursor: pointer;
}

.profile-logout:hover {
  background: var(--dash-active);
  color: var(--dash-text);
}

.telegram-login-slot {
  min-height: 30px;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.telegram-login-slot:empty {
  display: none;
}

.telegram-login-slot iframe {
  max-width: 100% !important;
}

.telegram-login-fallback {
  min-height: 28px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--dash-border);
  border-radius: 7px;
  background: var(--dash-surface-2);
  color: var(--dash-text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-login-fallback.is-error {
  color: #fda4af;
  border-color: rgba(244,63,94,.35);
  background: rgba(244,63,94,.08);
}

.telegram-config-note {
  margin-top: 10px;
  padding: 8px 9px;
  border: 1px solid var(--dash-border-soft);
  border-radius: 7px;
  background: var(--dash-surface-2);
}

.sidebar-version {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--dash-border-soft);
  font-family: var(--mono);
}

.admin-users-list {
  display: grid;
  gap: 10px;
}

.admin-user-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: var(--dash-surface);
}

.admin-user-card.revoked {
  border-color: rgba(239,68,68,.24);
  background: linear-gradient(180deg, rgba(239,68,68,.055), var(--dash-surface));
}

.admin-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--dash-purple-2), var(--dash-purple));
}

.admin-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-user-info {
  min-width: 0;
}

.admin-user-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-user-name {
  color: var(--dash-text);
  font-weight: 800;
  line-height: 1.2;
}

.admin-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.admin-user-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--dash-border);
  border-radius: 999px;
  color: var(--dash-muted);
  background: rgba(255,255,255,.035);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.admin-user-badge.active {
  color: #86efac;
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}

.admin-user-badge.banned {
  color: #fca5a5;
  border-color: rgba(239,68,68,.34);
  background: rgba(239,68,68,.12);
}

.admin-user-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-user-metrics span {
  min-width: 112px;
  padding: 8px 10px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: var(--dash-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-user-metrics strong {
  display: block;
  color: var(--dash-text);
  font-size: 16px;
  line-height: 1.1;
  text-transform: none;
}

.admin-user-meta-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
}

.admin-user-meta-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-meta-grid b {
  color: var(--dash-text-2);
  font-weight: 700;
}

.admin-user-meta-grid b.active {
  color: #86efac;
}

.admin-user-meta-grid b.banned {
  color: #fca5a5;
}

.admin-user-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 116px;
}

@media (max-width: 1023px) {
  .hdr {
    min-height: 82px !important;
    padding: 8px 0 10px !important;
  }

  .sidebar-profile {
    display: none !important;
  }

  .mobile-auth-card {
    display: block !important;
    margin: -2px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    background: var(--dash-surface);
    box-shadow: none;
  }

  .mobile-auth-card .telegram-login-slot {
    margin-top: 8px;
  }

  .mobile-auth-card .telegram-config-note {
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  .admin-user-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .admin-user-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
  }

  .admin-user-head,
  .admin-user-metrics {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .admin-user-head {
    flex-direction: column;
  }

  .admin-user-meta-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-controls {
    align-items: stretch;
  }

  .admin-user-field,
  .admin-user-field select,
  .admin-user-field input {
    width: 100%;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   SIDEBAR BALANCE PASS
   Keeps the desktop sidebar visually grounded: the profile/version card sits
   at the bottom without leaving a black shelf under v2.0.2.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .page > .mobile-auth-card {
    display: none !important;
  }

  .tabs {
    inset: 4px auto 0 4px !important;
    min-height: calc(100svh - 4px);
    padding-bottom: 6px !important;
  }

  .sidebar-profile {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   ADMIN VISIBILITY + MOBILE SAFE AREA PASS
   Guests and normal users never see the Admin entry. On phones, the bottom
   nav fills the browser safe area so tall mobile toolbars do not leave a gap.
-------------------------------------------------------------------------- */
.tab.auth-admin-hidden {
  display: none !important;
}

@media (max-width: 1023px) {
  :root {
    --mobile-nav-h: 68px;
    --mobile-nav-bleed: 20px;
  }

  .page {
    padding-bottom: calc(var(--mobile-nav-h) + 20px + env(safe-area-inset-bottom)) !important;
  }

  .tabs {
    inset: auto 0 calc(-1 * var(--mobile-nav-bleed)) 0 !important;
    height: auto !important;
    min-height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    align-items: stretch;
    border-radius: 10px 10px 0 0 !important;
    overflow: visible;
    transform: translateZ(0);
  }

  .tabs .tab {
    height: 54px;
    min-height: 54px;
  }
}

@media (max-width: 520px) {
  :root {
    --mobile-nav-h: 66px;
    --mobile-nav-bleed: 24px;
  }

  .tabs .tab {
    height: 52px;
    min-height: 52px;
  }
}

/* --------------------------------------------------------------------------
   SEGMENTED ACTIVE STATE
   The selected segment reads as a subtle pressed surface, not the same shade
   as its siblings. Applied to checkout methods and Admin panel tabs.
-------------------------------------------------------------------------- */
.gate-sub-btns,
.admin-tabs {
  gap: 2px !important;
  background: #08080a !important;
  border-color: var(--dash-border) !important;
}

.admin-tabs {
  overflow-x: auto;
  scrollbar-width: thin;
}

.gate-sub-btn,
.admin-tab {
  background: #252529 !important;
  border: 1px solid transparent !important;
  color: #d4d4d8 !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease !important;
}

.admin-tab {
  min-width: 118px;
}

.gate-sub-btn:hover,
.admin-tab:hover {
  background: #2d2d33 !important;
  color: #ffffff !important;
}

.gate-sub-btn.on,
.admin-tab.on {
  background: #16161a !important;
  border-color: #363641 !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(0,0,0,.22) !important;
}

.admin-tab.on svg {
  color: var(--dash-purple-2) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Guest Access Lock
-------------------------------------------------------------------------- */
.guest-lock-note {
  margin: -2px 0 14px;
  padding: 11px 14px;
  border: 1px solid rgba(139,92,246,.26);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(139,92,246,.12), rgba(99,102,241,.08));
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.guest-locked .page input:disabled,
body.guest-locked .page textarea:disabled,
body.guest-locked .page select:disabled,
body.guest-locked .page button:disabled:not(.tab) {
  cursor: not-allowed !important;
  opacity: .58;
  filter: saturate(.68);
}

body.guest-locked .page input,
body.guest-locked .page textarea,
body.guest-locked .page select,
body.guest-locked .page button:not(.tab) {
  pointer-events: none;
}

body.guest-locked .sidebar-profile input,
body.guest-locked .sidebar-profile button,
body.guest-locked .mobile-auth-card input,
body.guest-locked .mobile-auth-card button {
  pointer-events: auto;
}

body.guest-locked .btn-primary:disabled,
body.guest-locked .btn-ghost:disabled,
body.guest-locked .icon-btn:disabled,
body.guest-locked .copy-btn:disabled {
  transform: none !important;
  box-shadow: none !important;
}

body.guest-locked .tab.auth-admin-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Billing Admin
-------------------------------------------------------------------------- */
.billing-admin-panel,
.billing-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.billing-section {
  padding: 14px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.billing-section-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-plan-grid,
.billing-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.billing-plan-card,
.billing-cost-card,
.billing-gateway-row {
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: #151519;
}

.billing-plan-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.billing-card-title {
  color: var(--ink);
  font-weight: 900;
}

.billing-grid-3,
.billing-grid-4 {
  display: grid;
  gap: 8px;
}

.billing-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.billing-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.billing-plan-card .billing-grid-4 {
  grid-template-columns: minmax(58px, .9fr) minmax(54px, .82fr) minmax(76px, 1.12fr) minmax(54px, .82fr);
  align-items: end;
  gap: 8px;
}

.billing-plan-card .billing-grid-4 .field {
  min-width: 0;
}

.billing-plan-card .billing-grid-4 .field span {
  display: flex;
  align-items: flex-end;
  min-height: 24px;
  line-height: 1.15;
}

.billing-plan-card .billing-grid-4 input {
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.billing-active-toggle {
  align-self: flex-start;
}

.billing-cost-card {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink2);
  font-weight: 800;
  text-transform: uppercase;
}

.billing-cost-card input {
  width: 92px;
}

.billing-gateway-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.billing-gateway-row {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
}

.billing-gateway-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-plan-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.billing-plan-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  color: var(--ink2);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-user-controls {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.admin-user-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 128px;
}

.admin-user-credit-field {
  min-width: 96px;
}

.admin-user-expiry-field {
  min-width: 178px;
}

.admin-user-field span {
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.admin-user-field select,
.admin-user-field input {
  height: 34px;
  max-width: 160px;
}

.admin-user-expiry-field input {
  max-width: 190px;
}

.admin-user-credit-field input {
  max-width: 100px;
}

@media (max-width: 900px) {
  .billing-plan-grid,
  .billing-cost-grid,
  .billing-grid-3,
  .billing-grid-4,
  .billing-gateway-row {
    grid-template-columns: 1fr;
  }

  .billing-plan-checks {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Pricing page + admin billing polish
-------------------------------------------------------------------------- */
.pricing-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: end;
  padding: 20px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(139,92,246,.16), transparent 42%),
    linear-gradient(180deg, #19191e, #121216);
}

.pricing-eyebrow,
.pricing-section-title {
  color: #a78bfa;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.pricing-hero h2 {
  margin: 8px 0 6px;
  color: var(--dash-text);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0;
}

.pricing-hero p {
  max-width: 620px;
  color: var(--dash-muted);
  font-size: 14px;
  line-height: 1.55;
}

.pricing-hero-meter {
  padding: 14px;
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 9px;
  background: rgba(0,0,0,.22);
}

.pricing-hero-meter span {
  display: block;
  color: var(--dash-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pricing-hero-meter strong {
  display: block;
  margin-top: 6px;
  color: var(--dash-text);
  font-size: 13px;
  line-height: 1.4;
}

.pricing-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pricing-plan-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  padding: 18px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: #151519;
}

.pricing-plan-card.featured {
  border-color: rgba(139,92,246,.42);
  background: linear-gradient(180deg, rgba(139,92,246,.14), #151519 48%);
}

.pricing-plan-card.pricing-plan-basic {
  border-color: rgba(148,163,184,.34);
  background:
    radial-gradient(circle at 82% 14%, rgba(148,163,184,.18), transparent 34%),
    linear-gradient(180deg, rgba(148,163,184,.14), #141418 62%);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.06), 0 14px 28px rgba(15,23,42,.12);
}

.pricing-plan-card.pricing-plan-pro {
  border-color: rgba(34,211,238,.58);
  background:
    radial-gradient(circle at 82% 14%, rgba(34,211,238,.25), transparent 34%),
    linear-gradient(180deg, rgba(8,145,178,.16), #11151a 62%);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.08), 0 0 28px rgba(34,211,238,.12);
}

.pricing-plan-card.pricing-plan-elite {
  border-color: rgba(217,70,239,.62);
  background:
    radial-gradient(circle at 82% 14%, rgba(217,70,239,.28), transparent 34%),
    linear-gradient(180deg, rgba(124,58,237,.22), #15111a 62%);
  box-shadow: inset 0 0 0 1px rgba(217,70,239,.12), 0 0 32px rgba(217,70,239,.15);
}

.pricing-plan-card.pricing-plan-pro .pricing-plan-name,
.pricing-plan-card.pricing-plan-pro .pricing-price {
  color: #67e8f9;
  text-shadow: 0 0 18px rgba(34,211,238,.24);
}

.pricing-plan-card.pricing-plan-elite .pricing-plan-name,
.pricing-plan-card.pricing-plan-elite .pricing-price {
  color: #e879f9;
  text-shadow: 0 0 20px rgba(217,70,239,.28);
}

.pricing-plan-card.pricing-plan-basic .pricing-plan-name,
.pricing-plan-card.pricing-plan-basic .pricing-price {
  color: #cbd5e1;
  text-shadow: 0 0 14px rgba(148,163,184,.14);
}

.pricing-plan-card.pricing-plan-basic .pricing-plan-id {
  color: #94a3b8;
}

.pricing-plan-card.pricing-plan-basic .pricing-credit-pill {
  color: #e2e8f0;
  background: rgba(148,163,184,.13);
  border-color: rgba(148,163,184,.28);
}

.pricing-plan-card.pricing-plan-pro .pricing-credit-pill {
  color: #a5f3fc;
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.28);
}

.pricing-plan-card.pricing-plan-elite .pricing-credit-pill {
  color: #f5d0fe;
  background: rgba(217,70,239,.13);
  border-color: rgba(217,70,239,.3);
}

.pricing-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pricing-plan-name {
  color: var(--dash-text);
  font-size: 17px;
  font-weight: 900;
}

.pricing-plan-id {
  margin-top: 4px;
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.pricing-plan-tag,
.pricing-credit-pill {
  display: inline-flex;
  width: max-content;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.pricing-plan-tag {
  padding: 5px 9px;
  color: #e9d5ff;
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.3);
}

.pricing-price {
  color: var(--dash-text);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.pricing-price span {
  margin-left: 6px;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 800;
}

.pricing-credit-pill {
  padding: 7px 10px;
  color: #86efac;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.22);
}

.pricing-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-benefits li {
  position: relative;
  padding-left: 18px;
  color: var(--dash-text-2);
  font-size: 13px;
  line-height: 1.4;
}

.pricing-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b5cf6;
}

.pricing-access-panel {
  padding: 16px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: #151519;
}

.pricing-gateway-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pricing-gateway-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--dash-border-soft);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
}

.pricing-gateway-item.pricing-gateway-free {
  border-color: rgba(52,211,153,.22);
}

.pricing-gateway-item.pricing-gateway-billed {
  border-color: rgba(251,191,36,.22);
}

.pricing-gateway-item.pricing-gateway-mixed {
  border-color: rgba(167,139,250,.26);
}

.pricing-gateway-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pricing-gateway-title {
  min-width: 0;
}

.pricing-gateway-title span {
  display: block;
  color: var(--dash-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.pricing-gateway-title code {
  display: inline-block;
  max-width: 100%;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.pricing-gateway-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 104px;
  text-align: right;
}

.pricing-gateway-tags b,
.pricing-gateway-tags em {
  line-height: 1.2;
  font-style: normal;
}

.pricing-gateway-tags b {
  color: #fbbf24;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pricing-gateway-tags b.free {
  color: #34d399;
}

.pricing-gateway-tags b.mixed {
  color: #a78bfa;
}

.pricing-gateway-tags b.neutral {
  color: var(--dash-muted);
}

.pricing-gateway-tags em {
  color: var(--dash-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.pricing-gateway-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.pricing-gateway-mini {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}

.pricing-gateway-mini b {
  overflow: hidden;
  color: var(--dash-text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-gateway-mini em {
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-gateway-mini.is-free {
  border-color: rgba(52,211,153,.24);
  background: rgba(52,211,153,.08);
}

.pricing-gateway-mini.is-free em {
  color: #34d399;
}

.pricing-gateway-mini.is-billed {
  border-color: rgba(251,191,36,.26);
  background: rgba(251,191,36,.08);
}

.pricing-gateway-mini.is-billed em {
  color: #fbbf24;
}

.billing-admin-panel {
  gap: 16px;
}

.billing-section {
  padding: 16px;
  border-radius: 10px;
  background: #151519;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.billing-plan-grid {
  gap: 14px;
}

.billing-plan-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #17171c, #111116);
}

.billing-plan-card > * {
  position: relative;
  z-index: 1;
}

.billing-plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .95;
}

.billing-plan-card.billing-plan-basic {
  border-color: rgba(148,163,184,.18);
  background: linear-gradient(180deg, #18191d, #111116);
}

.billing-plan-card.billing-plan-basic::before {
  background:
    radial-gradient(circle at 82% 10%, rgba(148,163,184,.12), transparent 34%),
    linear-gradient(180deg, rgba(148,163,184,.045), transparent 48%);
}

.billing-plan-card.billing-plan-pro {
  border-color: rgba(34,211,238,.46);
  background: linear-gradient(180deg, #111a20, #0d1117 68%);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.08), 0 14px 34px rgba(34,211,238,.08);
}

.billing-plan-card.billing-plan-pro::before {
  background:
    radial-gradient(circle at 82% 10%, rgba(34,211,238,.28), transparent 35%),
    linear-gradient(135deg, rgba(14,165,233,.14), transparent 45%);
}

.billing-plan-card.billing-plan-elite {
  border-color: rgba(217,70,239,.52);
  background: linear-gradient(180deg, #18111f, #111116 68%);
  box-shadow: inset 0 0 0 1px rgba(217,70,239,.1), 0 14px 38px rgba(168,85,247,.13);
}

.billing-plan-card.billing-plan-elite::before {
  background:
    radial-gradient(circle at 82% 10%, rgba(217,70,239,.3), transparent 35%),
    linear-gradient(135deg, rgba(124,58,237,.18), transparent 45%);
}

.billing-card-title {
  display: inline-flex;
  width: max-content;
  padding: 5px 9px;
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(139,92,246,.1);
  font-size: 11px;
  letter-spacing: .4px;
}

.billing-plan-card.billing-plan-basic .billing-card-title {
  border-color: rgba(148,163,184,.22);
  color: #cbd5e1;
  background: rgba(148,163,184,.08);
}

.billing-plan-card.billing-plan-pro .billing-card-title {
  border-color: rgba(34,211,238,.36);
  color: #a5f3fc;
  background: rgba(8,145,178,.16);
  box-shadow: 0 0 18px rgba(34,211,238,.12);
}

.billing-plan-card.billing-plan-elite .billing-card-title {
  border-color: rgba(217,70,239,.4);
  color: #f5d0fe;
  background: rgba(147,51,234,.18);
  box-shadow: 0 0 20px rgba(217,70,239,.16);
}

.billing-section .field span,
.admin-user-field span {
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.billing-section input,
.billing-section textarea,
.billing-section select,
.admin-user-field input,
.admin-user-field select {
  min-height: 38px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: #101014;
  color: var(--dash-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.billing-section textarea {
  min-height: 92px;
  padding: 10px 12px;
  resize: vertical;
  color: var(--dash-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  background: linear-gradient(180deg, #101015, #0d0d12);
  border-color: #2a2a3b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.12);
  scrollbar-width: thin;
  scrollbar-color: #3a3a52 transparent;
}

.billing-section textarea::placeholder {
  color: var(--dash-muted);
  opacity: .75;
}

.billing-section textarea::-webkit-scrollbar {
  width: 6px;
}

.billing-section textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #3a3a52;
}

.billing-section textarea:focus {
  background: linear-gradient(180deg, #12121a, #0f0f15);
}

.billing-section textarea:hover {
  border-color: #37374e;
}

.billing-plan-card textarea {
  min-height: 86px;
  max-height: 160px;
  resize: vertical;
}

.billing-section input:focus,
.billing-section textarea:focus,
.billing-section select:focus,
.admin-user-field input:focus,
.admin-user-field select:focus {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.billing-cost-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.billing-cost-card {
  min-height: 64px;
  border-radius: 10px;
  background: #121217;
}

.billing-cost-card span {
  color: var(--dash-text);
}

.billing-cost-card input {
  width: 76px;
  text-align: center;
}

.billing-gateway-row {
  border-radius: 10px;
  background: #121217;
}

/* Grouped gateway management */
.admin-gateway-list {
  display: grid;
  gap: 12px;
}

.admin-gateway-group {
  padding: 14px 16px;
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139,92,246,.1), transparent 30%),
    linear-gradient(180deg, #17171c, #111116);
}

.admin-gateway-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dash-border-soft);
}

.admin-gateway-group-head h4 {
  margin: 0;
  color: var(--dash-text);
  font-size: 15px;
  font-weight: 900;
}

.admin-gateway-group-head p {
  margin: 4px 0 0;
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-gateway-bulk {
  display: grid;
  grid-template-columns: repeat(4, minmax(66px, auto));
  justify-content: flex-end;
  gap: 6px;
}

.admin-gateway-bulk .btn {
  min-height: 32px;
  padding-inline: 12px;
  border-radius: 8px;
  font-size: 11px;
}

.admin-gateway-actions {
  display: grid;
  gap: 8px;
  padding-top: 12px;
}

.admin-gw-row.admin-gw-action-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .6fr) minmax(210px, auto);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border-color: rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(8,9,13,.72);
  overflow: visible;
}

.admin-gw-row.admin-gw-action-row:hover {
  border-color: rgba(168,85,247,.3);
}

.admin-gw-action-row .admin-gw-info {
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-gw-action-row .admin-gw-name {
  color: #f4f4f5;
  font-weight: 900;
}

.admin-gw-meta {
  min-width: 0;
  color: var(--dash-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-gw-meta b {
  color: #c4b5fd;
}

.admin-gw-action-row .admin-gw-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-width: 0;
}

.admin-gw-action-row .admin-gw-toggle {
  justify-content: space-between;
  min-width: 98px;
  min-height: 30px;
  padding: 4px 6px 4px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.admin-gw-action-row .admin-gw-toggle-label {
  line-height: 1;
  white-space: nowrap;
}

.admin-gw-badge.badge-free {
  color: #86efac;
  border: 1px solid rgba(34,197,94,.28);
  background: rgba(34,197,94,.1);
}

.admin-gw-badge.badge-billed {
  color: #facc15;
  border: 1px solid rgba(250,204,21,.22);
  background: rgba(250,204,21,.09);
}

.gate-sub-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .admin-gw-row.admin-gw-action-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-gw-action-row .admin-gw-controls {
    justify-content: start;
  }

}

@media (max-width: 640px) {
  .admin-gateway-group {
    padding: 12px;
  }

  .admin-gateway-group-head {
    flex-direction: column;
  }

  .admin-gateway-bulk,
  .admin-gw-action-row .admin-gw-controls {
    width: 100%;
    justify-content: stretch;
  }

  .admin-gateway-bulk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-gateway-bulk .btn {
    width: 100%;
  }

  .admin-gw-action-row .admin-gw-controls {
    align-items: stretch;
  }

  .admin-gw-action-row .admin-gw-toggle {
    flex: 1 1 100%;
  }
}

.admin-user-card {
  border-radius: 12px;
  background: linear-gradient(180deg, #17171c, #121216);
}

.admin-user-actions .btn,
.admin-user-controls .btn {
  min-height: 38px;
  border-radius: 8px;
}

.admin-user-controls {
  padding-top: 12px;
  border-top: 1px solid var(--dash-border-soft);
}

@media (max-width: 1023px) {
  .tabs .tab {
    padding-inline: 6px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }

  .tabs .tab svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 900px) {
  .pricing-hero,
  .pricing-plan-list,
  .pricing-gateway-list,
  .billing-cost-grid {
    grid-template-columns: 1fr;
  }

  .pricing-hero h2 {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .pricing-gateway-item {
    gap: 9px;
  }

  .pricing-gateway-head {
    grid-template-columns: 1fr;
  }

  .pricing-gateway-tags {
    align-items: flex-start;
    text-align: left;
  }

  .pricing-gateway-mini-list {
    flex-direction: column;
  }

  .pricing-gateway-mini {
    width: 100%;
    justify-content: space-between;
    border-radius: 8px;
  }
}

/* --------------------------------------------------------------------------
   Profile tab and online users
-------------------------------------------------------------------------- */
.profile-page,
.online-panel {
  margin-bottom: 14px;
}

.log-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
  gap: 14px;
  align-items: start;
}

.log-grid .terminal {
  min-width: 0;
}

.log-grid .term-body {
  min-height: 360px;
  max-height: 520px;
}

.profile-overview-card,
.online-panel {
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #17171c, #121216);
}

.profile-overview-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.profile-page-avatar {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dash-purple-2), var(--dash-purple));
}

.profile-page-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-page-main {
  min-width: 0;
}

.profile-page-name {
  color: var(--dash-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page-meta {
  margin-top: 4px;
  color: var(--dash-muted);
  font-size: 13px;
}

.profile-page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.profile-page-badges span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(139,92,246,.1);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.profile-info-grid div {
  padding: 12px;
  border: 1px solid var(--dash-border);
  border-radius: 9px;
  background: #151519;
}

.profile-info-grid span {
  display: block;
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.profile-info-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--dash-text);
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-panel {
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.log-grid .online-panel {
  margin-bottom: 0;
  max-height: 520px;
}

.online-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.online-sub {
  color: var(--dash-muted);
  font-size: 12px;
  margin-top: 4px;
}

.online-users-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  max-height: 432px;
  min-height: 142px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #343449 transparent;
}

.online-users-list::-webkit-scrollbar {
  width: 6px;
}

.online-users-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #343449;
}

.online-user-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(120px, auto) minmax(140px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--dash-border-soft);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.log-grid .online-user-row {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
}

.log-grid .online-user-plan,
.log-grid .online-user-seen {
  grid-column: 2;
}

.online-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dash-purple-2), var(--dash-purple));
}

.online-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-user-main {
  min-width: 0;
}

.online-user-main strong,
.online-user-main span,
.online-user-plan,
.online-user-seen {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-user-main strong {
  color: var(--dash-text);
  font-size: 13px;
}

.online-user-main span,
.online-user-plan,
.online-user-seen {
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.online-user-plan {
  color: #ddd6fe;
  font-weight: 800;
}

@media (max-width: 760px) {
  .log-grid {
    grid-template-columns: 1fr;
  }

  .log-grid .term-body {
    min-height: 220px;
    max-height: 300px;
  }

  .log-grid .online-panel,
  .online-users-list {
    max-height: none;
  }

  .online-users-list {
    max-height: 280px;
  }

  .profile-overview-card,
  .online-user-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .profile-overview-card #profile-settings-toggle,
  .online-user-plan,
  .online-user-seen {
    grid-column: 1 / -1;
  }

  .profile-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Dashboard summary, redeem cards + profile SK connection
-------------------------------------------------------------------------- */
.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
  align-items: start;
}

.dashboard-online-panel {
  margin-bottom: 0;
  max-height: 460px;
}

.redeem-card,
.redeem-admin-create {
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #17171c, #121216);
}

.redeem-card,
.redeem-admin-create {
  padding: 14px;
}

.dashboard-card-title,
.redeem-card-title {
  color: var(--dash-text);
  font-size: 14px;
  font-weight: 900;
}

.redeem-card-sub {
  margin-top: 4px;
  color: var(--dash-muted);
  font-size: 12px;
}

.dashboard-mini-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dashboard-mini-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--dash-border-soft);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.dashboard-mini-grid span {
  display: block;
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.dashboard-mini-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--dash-text);
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary-bar {
  width: 100%;
  max-width: var(--content-max);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.account-summary-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #17171c, #121216);
}

.account-summary-card span {
  display: block;
  color: var(--dash-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .38px;
  text-transform: uppercase;
}

.account-summary-card strong {
  display: block;
  margin-top: 6px;
  color: var(--dash-text);
  font-size: 19px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary-card-accent {
  background: linear-gradient(180deg, rgba(139,92,246,.16), #121216 72%);
  border-color: rgba(139,92,246,.34);
}

.redeem-card {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr);
  gap: 12px;
  align-items: center;
}

.redeem-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.redeem-form input {
  min-width: 0;
  height: 40px;
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 12px;
}

.redeem-code-list {
  display: grid;
  gap: 9px;
}

.redeem-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #17171c, #121216);
}

.redeem-code-row.revoked {
  border-color: rgba(239,68,68,.24);
  background: linear-gradient(180deg, rgba(239,68,68,.055), #121216);
}

.redeem-code-main {
  min-width: 0;
}

.redeem-code-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.redeem-code-head code {
  color: var(--dash-text);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
}

.redeem-code-meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 10px;
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.redeem-code-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redeem-code-actions {
  display: flex;
  gap: 8px;
}

.sk-setting-card {
  gap: 12px;
}

.sk-setting-card .sk-bar,
.sk-bar-settings {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 10px;
  border-radius: 9px;
  background: #101014;
}

.sk-setting-card #account-info {
  width: 100%;
  margin: 0;
}

.sk-setting-card .acct-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sk-setting-card .acct-card {
  min-height: 68px;
  border-radius: 9px;
}

.status-pill {
  min-width: 116px;
  justify-content: center;
}

@media (max-width: 760px) {
  .dashboard-grid,
  .redeem-card,
  .redeem-code-row {
    grid-template-columns: 1fr;
  }

  .account-summary-bar,
  .sk-setting-card .acct-grid {
    grid-template-columns: 1fr;
  }

  .account-summary-card {
    padding: 12px 14px;
  }

  .redeem-form {
    grid-template-columns: 1fr;
  }

  .redeem-form .btn {
    width: 100%;
  }

  .redeem-code-meta {
    grid-template-columns: 1fr;
  }

  .redeem-code-actions {
    width: 100%;
  }

  .redeem-code-actions .btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Dashboard board polish + admin search/user/redeem balance
-------------------------------------------------------------------------- */
.dashboard-page {
  gap: 18px;
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid #292933;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #191b20, #101115 74%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 22px 55px rgba(0,0,0,.24);
}

.dashboard-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 58%, rgba(139,92,246,.12) 100%);
}

.dashboard-hero-copy,
.dashboard-system-strip {
  position: relative;
  z-index: 1;
}

.dashboard-kicker {
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.dashboard-hero h2 {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 46px;
  line-height: .95;
  letter-spacing: 0;
  font-weight: 900;
}

.dashboard-hero h2 span {
  color: #facc15;
  text-shadow: 0 14px 38px rgba(250,204,21,.16);
}

.dashboard-hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #aeb2bd;
  font-size: 14px;
  font-weight: 600;
}

.dashboard-system-strip {
  min-width: 254px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid #2b2b34;
  border-radius: 10px;
  background: #08090d;
  box-shadow: 0 14px 32px rgba(0,0,0,.32);
  font-family: var(--mono);
}

.dashboard-system-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f4f4f5;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-system-strip i,
.dashboard-board-title i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #00e58b;
  box-shadow: 0 0 18px rgba(0,229,139,.45);
}

.dashboard-system-strip strong {
  color: #facc15;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-stat-card {
  min-height: 118px;
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #15161b, #0f1014);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 36px rgba(0,0,0,.18);
}

.dashboard-stat-card span {
  color: #a6a8b2;
  font-size: 11px;
  letter-spacing: 1px;
}

.dashboard-stat-card strong {
  margin-top: 10px;
  font-size: 26px;
  line-height: 1;
}

.dashboard-stat-card small {
  display: block;
  margin-top: 10px;
  color: #7e8492;
  font-size: 11px;
  font-weight: 800;
}

.daily-claim-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.daily-claim-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
}

.daily-claim-card.claim-basic::before {
  background: radial-gradient(circle at 80% 15%, rgba(148,163,184,.18), transparent 36%);
}

.daily-claim-card.claim-pro {
  border-color: rgba(34,211,238,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 42px rgba(8,145,178,.12);
}

.daily-claim-card.claim-pro::before {
  background: radial-gradient(circle at 82% 18%, rgba(34,211,238,.24), transparent 38%);
}

.daily-claim-card.claim-elite {
  border-color: rgba(250,204,21,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 46px rgba(168,85,247,.16);
}

.daily-claim-card.claim-elite::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(250,204,21,.24), transparent 34%),
    radial-gradient(circle at 16% 100%, rgba(168,85,247,.22), transparent 42%);
}

.daily-claim-card.claim-guest {
  opacity: .78;
}

.daily-claim-card > * {
  position: relative;
  z-index: 1;
}

.daily-claim-btn {
  width: 100%;
  height: 34px;
  margin-top: 12px;
  border-color: rgba(168,85,247,.35);
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.claim-basic .daily-claim-btn {
  border-color: rgba(148,163,184,.34);
  background: linear-gradient(135deg, #4b5563, #27272a);
}

.claim-pro .daily-claim-btn {
  border-color: rgba(34,211,238,.42);
  background: linear-gradient(135deg, #06b6d4, #2563eb);
  box-shadow: 0 10px 24px rgba(34,211,238,.16);
}

.claim-elite .daily-claim-btn {
  border-color: rgba(250,204,21,.42);
  background: linear-gradient(135deg, #facc15, #a855f7 52%, #7c3aed);
  box-shadow: 0 10px 28px rgba(250,204,21,.16);
}

.claim-pro .daily-claim-btn:not(:disabled),
.claim-elite .daily-claim-btn:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow, filter;
  animation: dailyClaimFloat 2.8s ease-in-out infinite;
}

.claim-pro .daily-claim-btn:not(:disabled)::after,
.claim-elite .daily-claim-btn:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: -12px -16px;
  z-index: -1;
  border-radius: 16px;
  opacity: .72;
  pointer-events: none;
  filter: blur(18px);
  animation: dailyClaimAura 2.8s ease-in-out infinite;
}

.claim-pro .daily-claim-btn:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(34,211,238,.24),
    0 12px 28px rgba(34,211,238,.2),
    0 0 34px rgba(37,99,235,.22);
}

.claim-pro .daily-claim-btn:not(:disabled)::after {
  background:
    radial-gradient(circle at 30% 50%, rgba(34,211,238,.58), transparent 46%),
    radial-gradient(circle at 78% 48%, rgba(37,99,235,.44), transparent 52%);
}

.claim-elite .daily-claim-btn:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(168,85,247,.3),
    0 12px 30px rgba(168,85,247,.26),
    0 0 38px rgba(126,34,206,.32);
}

.claim-elite .daily-claim-btn:not(:disabled)::after {
  background:
    radial-gradient(circle at 26% 48%, rgba(168,85,247,.68), transparent 48%),
    radial-gradient(circle at 76% 48%, rgba(217,70,239,.38), transparent 52%);
}

.daily-claim-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.daily-claim-card.claim-burst {
  animation: claimBurst .82s ease both;
}

@keyframes claimBurst {
  0% { transform: translateY(0); filter: brightness(1); }
  35% { transform: translateY(-2px); filter: brightness(1.35); }
  100% { transform: translateY(0); filter: brightness(1); }
}

@keyframes dailyClaimFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1);
  }
  50% {
    transform: translate3d(0, -5px, 0);
    filter: brightness(1.08);
  }
}

@keyframes dailyClaimAura {
  0%, 100% {
    opacity: .44;
    transform: scale(.94);
  }
  50% {
    opacity: .88;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .claim-pro .daily-claim-btn:not(:disabled),
  .claim-elite .daily-claim-btn:not(:disabled),
  .claim-pro .daily-claim-btn:not(:disabled)::after,
  .claim-elite .daily-claim-btn:not(:disabled)::after {
    animation: none;
  }
}

.dashboard-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 14px;
  align-items: start;
}

.dashboard-board-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--dash-text);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.dashboard-online-panel {
  min-height: 238px;
  max-height: 480px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #15161b, #101115);
}

.dashboard-online-panel .online-users-list {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.admin-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}

.admin-search-box {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: #101014;
  color: var(--dash-muted);
}

.admin-search-box input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dash-text);
  font-size: 13px;
  font-weight: 700;
}

.admin-search-box:focus-within {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.admin-users-count {
  flex: 0 0 auto;
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
}

.admin-users-list {
  gap: 12px;
}

.admin-user-card {
  grid-template-columns: 48px minmax(0, 1fr) 116px;
  gap: 14px;
  padding: 16px;
  border-radius: 13px;
  background: linear-gradient(180deg, #17171c, #101115);
}

.admin-user-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}

.admin-user-identity {
  min-width: 0;
}

.admin-user-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 8px;
}

.admin-user-metrics span {
  min-width: 0;
  white-space: nowrap;
}

.admin-user-meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px 14px;
  padding-top: 2px;
}

.admin-user-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dash-border-soft);
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .65fr) minmax(205px, 1fr) auto auto;
  gap: 9px;
  align-items: end;
}

.admin-user-credit-row {
  margin-top: 9px;
  display: grid;
  grid-template-columns: minmax(100px, 140px) auto auto;
  gap: 9px;
  align-items: end;
}

.admin-user-field {
  min-width: 0;
}

.admin-user-field select,
.admin-user-field input,
.admin-user-expiry-field input,
.admin-user-credit-field input {
  width: 100%;
  max-width: none;
}

.admin-user-actions .btn,
.admin-user-controls .btn,
.admin-user-credit-row .btn {
  min-height: 38px;
  white-space: nowrap;
}

.redeem-admin-create {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #15161b, #101115);
}

.redeem-admin-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(118px, .45fr);
  gap: 10px;
}

.redeem-admin-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.redeem-admin-submit span {
  color: var(--dash-muted);
  font-size: 12px;
  font-weight: 700;
}

.redeem-admin-submit .btn {
  min-width: 190px;
}

.redeem-form .btn {
  min-width: 98px;
}

.redeem-code-row {
  grid-template-columns: minmax(0, 1fr) auto;
  border-radius: 12px;
}

body[data-active-tab="dashboard"] .hdr {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}

body[data-active-tab="dashboard"] .hdr .hdr-l,
body[data-active-tab="dashboard"] .hdr .status-pill {
  display: none !important;
}

@media (max-width: 1180px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-user-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .admin-user-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .admin-user-head {
    grid-template-columns: 1fr;
  }

  .admin-user-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-user-controls {
    grid-template-columns: minmax(180px, 1fr) minmax(120px, .6fr) minmax(205px, 1fr);
  }
}

@media (max-width: 760px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 20px 16px;
  }

  .dashboard-hero h2 {
    font-size: 32px;
  }

  .dashboard-system-strip {
    min-width: 0;
    width: 100%;
  }

  .dashboard-stat-grid,
  .dashboard-board-grid,
  .redeem-admin-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stat-card {
    min-height: 96px;
  }

  .admin-users-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-users-count {
    padding-left: 2px;
  }

  .admin-user-meta-grid,
  .admin-user-metrics,
  .admin-user-controls,
  .admin-user-credit-row {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .redeem-admin-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .redeem-admin-submit .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .tabs .tab {
    font-size: 9px !important;
    letter-spacing: 0;
  }

  .tabs .tab svg {
    width: 14px;
    height: 14px;
  }

  .account-summary-card strong {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   Dashboard de-duplication + profile redeem polish
-------------------------------------------------------------------------- */
.hdr {
  display: none !important;
}

.dashboard-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-board-grid {
  grid-template-columns: minmax(260px, .48fr) minmax(0, 1fr);
}

.dashboard-top-panel,
.dashboard-online-panel {
  max-height: 420px;
}

.dashboard-top-panel {
  min-height: 238px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0%, rgba(250,204,21,.12), transparent 26%),
    linear-gradient(180deg, #15161b, #0d0e12);
  box-shadow: inset 1px 0 0 rgba(250,204,21,.14);
}

.dashboard-top-title i {
  background: #facc15;
  box-shadow: 0 0 14px rgba(250,204,21,.45);
}

.top-hits-list {
  display: grid;
  gap: 10px;
  max-height: 318px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.top-hit-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  background: rgba(8,9,13,.58);
}

.top-hit-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #27272f, #111116);
  box-shadow: 0 0 18px rgba(0,0,0,.28);
}

.top-hit-avatar img,
.top-hit-avatar > span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  object-fit: cover;
  color: #f8fafc;
  font-weight: 900;
}

.top-hit-avatar em {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #facc15;
  color: #0b0b0d;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(250,204,21,.28);
}

.top-hit-row:nth-child(2) .top-hit-avatar em {
  background: #bfdbfe;
}

.top-hit-row:nth-child(3) .top-hit-avatar em {
  background: #fb923c;
}

.top-hit-main {
  min-width: 0;
}

.top-hit-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.top-hit-name strong {
  min-width: 0;
  color: var(--dash-text);
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-hit-main small {
  display: block;
  margin-top: 4px;
  color: #7e8490;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.top-hit-score {
  text-align: right;
}

.top-hit-score strong {
  display: block;
  color: #facc15;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 900;
}

.top-hit-score span {
  display: block;
  margin-top: 2px;
  color: #7e8490;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.dashboard-online-panel .online-users-list {
  max-height: 300px;
}

.profile-redeem-card {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  min-height: 104px;
  grid-template-columns: minmax(220px, .78fr) minmax(300px, 1fr);
  padding: 16px;
  border-radius: 12px;
  border-color: rgba(139,92,246,.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(139,92,246,.18), transparent 32%),
    linear-gradient(180deg, #181820, #111116);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.2);
}

.profile-redeem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(250,204,21,.08), transparent 38%);
  opacity: .75;
}

.profile-redeem-card > * {
  position: relative;
  z-index: 1;
}

.redeem-card-kicker {
  margin-bottom: 5px;
  color: #facc15;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.profile-redeem-card .redeem-card-title {
  font-size: 16px;
}

.profile-redeem-card .redeem-card-sub {
  color: #8f96a6;
  font-size: 12px;
  font-weight: 700;
}

.profile-redeem-card .redeem-form {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
}

.redeem-input-wrap {
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid #30303a;
  border-radius: 10px;
  background: #0d0d12;
  color: #8b93a5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.redeem-input-wrap:focus-within {
  border-color: rgba(139,92,246,.62);
  background: #101018;
  box-shadow: 0 0 0 3px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.04);
}

.redeem-input-wrap svg {
  flex: 0 0 auto;
  color: #facc15;
  opacity: .9;
}

.redeem-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--dash-text) !important;
  box-shadow: none !important;
  font-size: 12px;
  letter-spacing: .2px;
}

.profile-redeem-card .btn {
  min-width: 112px;
  height: 46px;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(147,51,234,.28);
}

@media (max-width: 1180px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-stat-grid,
  .dashboard-board-grid,
  .profile-redeem-card,
  .profile-redeem-card .redeem-form {
    grid-template-columns: 1fr;
  }

  .profile-redeem-card {
    padding: 14px;
  }

  .profile-redeem-card .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Compact online roster + sidebar profile trim
-------------------------------------------------------------------------- */
.online-users-list {
  gap: 14px;
  min-height: 0;
  padding: 4px 2px 2px;
}

.online-user-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 6px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.online-user-row:hover {
  background: rgba(255,255,255,.025);
}

.online-user-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #1b1c22;
  color: #f4f4f5;
  font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

.online-user-avatar img {
  border-radius: inherit;
}

.online-user-avatar span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 2px solid #0b0c10;
  border-radius: 999px;
  background: #00e58b;
  box-shadow: 0 0 12px rgba(0,229,139,.5);
}

.online-user-main {
  min-width: 0;
}

.online-user-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.online-user-main strong {
  min-width: 0;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-user-active {
  display: block;
  margin-top: 3px;
  color: #7e8490;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.online-user-tier {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  color: #9ca3af;
  font-family: var(--mono);
  font-size: 8px !important;
  font-weight: 900;
  line-height: 1;
  padding: 3px 5px;
  border: 1px solid rgba(156,163,175,.16);
  border-radius: 999px;
  background: rgba(156,163,175,.07);
  text-transform: uppercase;
}

.online-user-tier i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.online-user-tier.tier-gold {
  color: #facc15;
  background: rgba(250,204,21,.1);
  border-color: rgba(250,204,21,.28);
}

.online-user-tier.tier-diamond {
  color: #22d3ee;
  background: rgba(34,211,238,.1);
  border-color: rgba(34,211,238,.28);
}

.online-user-tier.tier-elite {
  color: #e879f9;
  background: rgba(217,70,239,.14);
  border-color: rgba(217,70,239,.34);
  box-shadow: 0 0 16px rgba(217,70,239,.16);
}

.online-user-tier.tier-pro {
  color: #67e8f9;
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.32);
  box-shadow: 0 0 14px rgba(34,211,238,.14);
}

.online-user-tier.tier-basic {
  color: #a1a1aa;
  background: rgba(148,163,184,.08);
  border-color: rgba(148,163,184,.15);
}

.online-user-tier.tier-free {
  color: #a1a1aa;
}

.plan-text {
  transition: color .18s ease, text-shadow .18s ease;
}

.plan-text-basic {
  color: #a1a1aa !important;
}

.plan-text-pro {
  color: #67e8f9 !important;
  text-shadow: 0 0 18px rgba(34,211,238,.26);
}

.plan-text-elite {
  color: #e879f9 !important;
  text-shadow: 0 0 20px rgba(217,70,239,.3);
}

.plan-text-guest,
.plan-text-free {
  color: var(--dash-text) !important;
}

.profile-page-badges .plan-badge {
  border-color: rgba(148,163,184,.16);
  color: #cbd5e1;
  background: rgba(148,163,184,.08);
}

.profile-page-badges .plan-badge-basic {
  color: #a1a1aa;
  border-color: rgba(148,163,184,.16);
  background: rgba(148,163,184,.07);
}

.profile-page-badges .plan-badge-pro {
  color: #67e8f9;
  border-color: rgba(34,211,238,.32);
  background: rgba(34,211,238,.12);
  box-shadow: 0 0 18px rgba(34,211,238,.13);
}

.profile-page-badges .plan-badge-elite {
  color: #f5d0fe;
  border-color: rgba(217,70,239,.38);
  background: rgba(217,70,239,.14);
  box-shadow: 0 0 20px rgba(217,70,239,.16);
}

.online-user-plan,
.online-user-seen {
  display: none !important;
}

.sidebar-profile .profile-main {
  max-width: 100%;
}

.sidebar-profile .profile-meta {
  max-width: 128px;
}

/* --------------------------------------------------------------------------
   Mobile profile balance
-------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .profile-overview-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
  }

  .profile-page-avatar {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 17px;
  }

  .profile-page-name {
    font-size: 20px;
  }

  .profile-page-meta {
    font-size: 12px;
    line-height: 1.35;
  }

  .profile-page-badges {
    gap: 6px;
    margin-top: 8px;
  }

  .profile-page-badges span {
    height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  .profile-overview-card #profile-settings-toggle {
    grid-column: 1 / -1;
    justify-self: stretch;
    height: 38px;
    margin-top: 2px;
  }

  .profile-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  .profile-overview-card {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 12px;
  }

  .profile-page-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .profile-page-name {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   Admin users compact accordion
-------------------------------------------------------------------------- */
.admin-users-list {
  gap: 9px;
}

.admin-user-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #17181d, #101115);
}

.admin-user-card.revoked {
  background:
    linear-gradient(180deg, rgba(239,68,68,.07), rgba(239,68,68,.02)),
    linear-gradient(180deg, #17181d, #101115);
}

.admin-user-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  min-height: 72px;
  padding: 12px 14px;
}

.admin-user-summary .admin-user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.admin-user-identity,
.admin-user-name-line,
.admin-user-summary-meta {
  min-width: 0;
}

.admin-user-name-line {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-user-summary-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  color: var(--dash-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.3;
}

.admin-user-summary-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-summary-meta b {
  color: var(--dash-text-2);
}

.admin-user-summary .admin-user-badges {
  margin-top: 0;
}

.admin-user-summary .admin-user-metrics {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-user-summary .admin-user-metrics span {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
}

.admin-user-summary .admin-user-metrics strong {
  display: block;
  overflow: hidden;
  color: var(--dash-text);
  font-size: 15px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-summary .admin-user-metrics em {
  display: block;
  margin-top: 3px;
  color: var(--dash-muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.admin-user-summary .admin-user-metrics small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #8b90a0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-expand {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  min-width: 82px;
  padding: 0 12px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: var(--dash-text-2);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.admin-user-expand:hover {
  border-color: rgba(168,85,247,.4);
  background: rgba(168,85,247,.1);
  color: #f5d0fe;
}

.admin-user-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 55% 55%;
  transition: transform .18s ease;
}

.admin-user-card.is-open .admin-user-expand {
  border-color: rgba(168,85,247,.45);
  background: rgba(168,85,247,.12);
  color: #f5d0fe;
}

.admin-user-card.is-open .admin-user-chevron {
  transform: rotate(225deg);
}

.admin-user-details {
  display: none;
  padding: 0 14px 14px;
}

.admin-user-card.is-open .admin-user-details {
  display: block;
}

.admin-user-details .admin-user-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  padding: 11px 0 12px;
  border-top: 1px solid var(--dash-border-soft);
}

.admin-user-details .admin-user-meta-grid span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-details .admin-user-controls {
  grid-template-columns: minmax(170px, 1.15fr) minmax(110px, .65fr) minmax(190px, 1fr) minmax(74px, .35fr) minmax(150px, .8fr);
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.admin-user-details .admin-user-controls .btn,
.admin-user-credit-row .btn {
  width: 100%;
}

.admin-user-credit-row {
  grid-template-columns: minmax(120px, 180px) minmax(130px, 1fr) minmax(130px, 1fr);
}

.admin-user-detail-actions {
  display: grid;
  grid-template-columns: minmax(112px, 128px) minmax(112px, 140px);
  gap: 9px;
  justify-content: end;
  min-width: 0;
  margin-top: 10px;
}

.admin-user-detail-actions .btn {
  width: 100%;
}

@media (max-width: 1320px) {
  .admin-user-summary {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .admin-user-summary .admin-user-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-user-details .admin-user-controls {
    grid-template-columns: minmax(170px, 1fr) minmax(110px, .65fr) minmax(190px, 1fr);
  }

  .admin-user-billing-save {
    grid-column: 1;
  }

  .admin-user-subscribe-refill {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .admin-user-summary {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .admin-user-summary .admin-user-avatar {
    width: 42px;
    height: 42px;
  }

  .admin-user-name-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .admin-user-summary-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .admin-user-summary .admin-user-metrics {
    grid-column: 1 / -1;
  }

  .admin-user-expand {
    min-width: 38px;
    padding: 0 10px;
  }

  .admin-user-expand-label {
    display: none;
  }

  .admin-user-details {
    padding: 0 12px 12px;
  }

  .admin-user-details .admin-user-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-user-details .admin-user-controls,
  .admin-user-credit-row {
    grid-template-columns: 1fr;
  }

  .admin-user-billing-save,
  .admin-user-subscribe-refill {
    grid-column: auto;
  }

  .admin-user-detail-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .admin-user-summary .admin-user-metrics {
    grid-template-columns: 1fr;
  }

  .admin-user-details .admin-user-meta-grid,
  .admin-user-details .admin-user-controls,
  .admin-user-credit-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Profile settings compact layout
-------------------------------------------------------------------------- */
.profile-settings-panel {
  padding: 14px !important;
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139,92,246,.12), transparent 28%),
    linear-gradient(180deg, #15161b, #101115) !important;
}

.profile-settings-panel .setting-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
}

.profile-settings-panel .setting-card,
.profile-settings-panel .setting-card-col {
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(14,15,20,.74) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.profile-settings-panel .setting-card:hover,
.profile-settings-panel .setting-card-col:hover {
  border-color: rgba(168,85,247,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.16);
}

.profile-settings-panel .setting-card-col,
.profile-settings-panel .sk-setting-card {
  grid-column: 1 / -1;
}

.profile-settings-panel .setting-card:not(.setting-card-col) {
  min-height: 70px;
}

.profile-settings-panel .setting-info {
  gap: 10px;
}

.profile-settings-panel .setting-icon {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 9px;
  background: rgba(139,92,246,.1);
  color: #c4b5fd;
}

.profile-settings-panel .setting-title {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 900;
}

.profile-settings-panel .setting-sub {
  max-width: 620px;
  color: #858b99;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.profile-settings-panel .setting-card-head {
  width: 100%;
}

.profile-settings-panel .sk-bar-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px auto auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(7,8,12,.72) !important;
}

.profile-settings-panel .sk-bar-settings .sk-input,
.profile-settings-panel .sk-bar-settings .btn {
  height: 40px;
}

.profile-settings-panel .sk-bar-settings .btn {
  border-radius: 8px;
}

.profile-settings-panel #account-info {
  margin-top: 2px !important;
}

.profile-settings-panel .sk-setting-card .acct-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-settings-panel .sk-setting-card .acct-card {
  min-height: 58px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}

.profile-settings-panel .setting-inline {
  justify-content: flex-end;
}

.profile-settings-panel .input-amount {
  width: 92px;
}

.profile-settings-panel .select-sm {
  min-width: 92px;
}

.profile-settings-panel .proxy-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.profile-settings-panel .setting-card-body {
  gap: 8px;
}

.profile-settings-panel .setting-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr) auto;
  align-items: end;
  gap: 8px;
}

.profile-settings-panel .field {
  min-width: 0;
}

.profile-settings-panel .field input,
.profile-settings-panel .field select,
.profile-settings-panel .setting-card input:not([type="checkbox"]):not([type="radio"]),
.profile-settings-panel .setting-card select {
  height: 40px;
  border-radius: 8px !important;
  background: rgba(7,8,12,.7) !important;
}

.profile-settings-panel .info-tip,
.profile-settings-panel .setting-notice {
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.profile-settings-panel .btn-save-all {
  position: sticky;
  bottom: 10px;
  z-index: 3;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(147,51,234,.24);
}

@media (max-width: 720px) {
  .profile-settings-panel .setting-stack,
  .profile-settings-panel .setting-fields {
    grid-template-columns: 1fr;
  }

  .profile-settings-panel .setting-card-col,
  .profile-settings-panel .sk-setting-card {
    grid-column: auto;
  }

  .profile-settings-panel .setting-inline {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .profile-settings-panel {
    padding: 12px !important;
  }

  .profile-settings-panel .setting-card,
  .profile-settings-panel .setting-card-col {
    padding: 11px;
  }

  .profile-settings-panel .setting-card:not(.setting-card-col) {
    min-height: 0;
  }

  .profile-settings-panel .setting-card {
    align-items: center;
    gap: 10px;
  }

  .profile-settings-panel .proxy-inline,
  .profile-settings-panel .sk-setting-card .acct-grid {
    grid-template-columns: 1fr;
  }

  .profile-settings-panel .sk-bar-settings {
    grid-template-columns: minmax(0, 1fr) minmax(96px, .72fr) minmax(74px, .55fr);
  }

  .profile-settings-panel .sk-bar-settings .sk-input {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-settings-panel .sk-bar-settings .btn {
    min-width: 0;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .profile-settings-panel .proxy-inline .btn,
  .profile-settings-panel .setting-fields .btn {
    width: 100%;
  }
}

/* System checkout links */
.system-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(168,85,247,.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(168,85,247,.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}

.system-link-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.system-link-copy label {
  margin: 0;
  color: var(--dash-text, var(--ink));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.system-link-copy span {
  color: var(--dash-muted, var(--ink3));
  font-size: 12px;
  font-weight: 600;
}

.system-link-toggle {
  flex: 0 0 auto;
}

.system-link-add .field-grid {
  padding: 0;
  margin-bottom: 10px;
}

.system-link-stats .proxy-stat-val {
  color: #c4b5fd;
}

.system-link-list-wrap {
  max-height: 430px;
}

.system-link-row .pp-proxy {
  color: #f5f3ff;
}

.sl-kind-tag {
  color: #c4b5fd;
  border: 1px solid rgba(168,85,247,.22);
  background: rgba(168,85,247,.12);
}

.system-link-row .pp-controls {
  margin-left: auto;
}

@media (max-width: 640px) {
  .system-link-card {
    align-items: stretch;
  }

  .system-link-copy span {
    line-height: 1.35;
  }
}