/* ============================================================
   DESIGN TOKENS — shared across reseller / admin / customer
   Imported BEFORE the panel-specific CSS so variable overrides
   cascade into the existing rules. Restrained, system-font-first,
   one functional accent, sharp corners, low-contrast structure.
   ============================================================ */

/* ----- Palette + scale ----- */
:root,
.reseller-theme {
  /* Background scale: near-black at the base, stepping up to surface and elevated */
  --bg-0: #0a0a0c;     /* page */
  --bg-1: #101013;     /* card / surface */
  --bg-2: #16171b;     /* elevated / row hover */
  --bg-3: #1c1d22;     /* control hover */

  /* Text scale: off-white at the top, three muted steps below */
  --text-primary:   #e7e7ea;
  --text-secondary: #9a9aa3;
  --text-dim:       #5e5e66;
  --text-faint:     #3a3a40;

  /* Border: 1px hairlines, one strong variant for separators/focus */
  --border:        rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.12);

  /* Accent: one single functional indigo used only for primary actions + active */
  --accent:        #7E6BFF;
  --accent-hover:  #9683FF;
  --accent-text:   #ffffff;
  --accent-soft:   rgba(126,107,255,.10);
  --accent-edge:   rgba(126,107,255,.30);

  /* Status colors: flat chips, never glowing */
  --ok:        #34c08a;
  --ok-soft:   rgba(52,192,138,.10);
  --ok-edge:   rgba(52,192,138,.22);

  --warn:      #d99155;
  --warn-soft: rgba(217,145,85,.10);
  --warn-edge: rgba(217,145,85,.22);

  --err:       #e25c5c;
  --err-soft:  rgba(226,92,92,.10);
  --err-edge:  rgba(226,92,92,.22);

  /* Type stack: system-first, Inter as a graceful upgrade (already loaded by panels) */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  /* Radius — sharp. 6px is the workhorse, 4px for chips, never above 8px */
  --r-chip: 2px;
  --r-control: 4px;
  --r-card: 6px;
  --r-modal: 8px;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Motion — exactly one principle */
  --t-fast: 120ms ease-out;
  --t-base: 160ms ease-out;

  /* Bridge tokens — overrides for legacy variables already used in the codebase */
  --bg:         var(--bg-0);
  --bg-deep:    var(--bg-0);
  --bg-surface: var(--bg-1);
  --bg-alt:     var(--bg-0);
  --bg-card:    var(--bg-1);
  --bg-elevated:var(--bg-2);
  --bg-hover:   var(--bg-2);
  --bg-active:  var(--bg-3);

  --text:           var(--text-primary);
  --text-muted:     var(--text-dim);

  --border-light:   var(--border);
  --border-hover:   var(--border-strong);

  --primary:        var(--accent);
  --primary-light:  var(--accent-hover);
  --primary-hover:  var(--accent-hover);
  --primary-dim:    var(--accent-soft);
  --primary-border: var(--accent-edge);
  --primary-glow:   var(--accent-soft);
  --primary-extra-light: var(--accent-hover);
  --primary-ultra-light: var(--accent-hover);

  --success:       var(--ok);
  --success-light: var(--ok);
  --success-dim:   var(--ok-soft);
  --success-border:var(--ok-edge);

  --danger:        var(--err);
  --danger-light:  var(--err);
  --danger-dim:    var(--err-soft);
  --danger-border: var(--err-edge);

  --warn-light:    var(--warn);
  --warn-dim:      var(--warn-soft);
  --warn-border:   var(--warn-edge);

  --radius:    var(--r-card);
  --radius-sm: var(--r-control);
  --radius-lg: var(--r-card);
  --radius-xl: var(--r-modal);

  --font:         var(--font-sans);
  --font-display: var(--font-sans);
  --mono:         var(--font-mono);

  --shadow:    none;
  --shadow-lg: none;

  --ease:      ease-out;
  --transition: var(--t-base);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html, body {
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
body { font-size: 13.5px; line-height: 1.5; letter-spacing: -0.005em; }

/* Numerals: tabular for any table cell, balance, stat value, key meta */
table, .stat-value, .balance, .dep-amount, .dep-amount-section,
.kd-val, .key-meta, .rrs-tbl, .lic-key, td, th, .pi-online, .gs-online,
.review-big-number, .product-review-score, .live-stat-mini-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Mono columns get cv02 (slashed zero) — small craft cue */
.mono, code, .key-value, .key-card-key, .offset-card-value, .lic-key,
.dep-addr, .dep-memo, td.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.005em;
}

/* ============================================================
   GLOBAL FLATTENING — kill AI-slop visuals codebase-wide
   These selectors target the existing classes; we override
   shadows, gradients, blurs, glows, scale hovers.
   ============================================================ */

/* No shadows anywhere by default */
.reseller-theme .stat-box,
.reseller-theme .key-card,
.reseller-theme .chart-wrap,
.reseller-theme .create-form,
.reseller-theme .modal,
.reseller-theme .toast,
.reseller-theme .auth-box,
.reseller-theme .dep-card,
.reseller-theme .rrs-panel,
.reseller-theme .bl-card,
.reseller-theme .dep-modal,
.reseller-theme .stat-box:hover,
.reseller-theme .key-card:hover,
.reseller-theme .bl-card:hover,
.reseller-theme .dep-hist-item:hover,
.reseller-theme .key-card .key-value:hover,
.auth-box, .auth-box:hover,
.gs-card, .gs-card:hover, .gs-card.active,
.pi-card, .pi-card:hover,
.key-card, .key-card:hover, .key-card::before,
.guide-card,
.guide-product-btn, .guide-product-btn:hover, .guide-product-btn.active,
.btn-activate, .btn-activate:hover,
.btn-download:hover,
.btn-features, .btn-features:hover,
.live-stats-section,
.online-badge,
.review-summary-card,
.tips-card,
.changelog-modal,
.features-window,
.dep-qr-img,
.dep-qr-img:hover,
.dep-pending-wrap,
.hwid-ann,
.product-card .card-actions .btn,
.btn-radar-action, .btn-radar-reset {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Kill the topbar rainbow gradient line */
.topbar::before,
.reseller-theme .topbar::before {
  background: var(--border) !important;
  height: 1px !important;
  opacity: 1 !important;
}

/* Disable card transform-on-hover (scale/translate) */
.reseller-theme .stat-box:hover,
.reseller-theme .key-card:hover,
.reseller-theme .dep-qr-img:hover,
.gs-card:hover,
.pi-card:hover,
.key-card:hover,
.btn-activate:hover,
.btn-download:hover,
.btn-features:hover,
.guide-product-btn:hover,
.star-rating .star:hover,
.product-review-btn:hover {
  transform: none !important;
}

/* Kill backdrop-filter blur on overlays/badges */
.reseller-theme .modal-overlay,
.reseller-theme .toast,
.dep-modal-overlay,
.online-badge,
.btn-features,
.btn-download,
.key-status-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide decorative particle canvas — kept in DOM for compat, just invisible */
.reseller-theme .app > canvas,
.app > canvas,
canvas#appParticles {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kill the hwid announcement gradient + glow line */
.hwid-ann {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: var(--r-card) !important;
}
.hwid-ann::before { display: none !important; }

/* Remove gradient text/buttons */
.brand-icon {
  background: var(--accent) !important;
  box-shadow: none !important;
}
.btn-activate {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}
.btn-activate:hover { background: var(--accent-hover) !important; }
.btn-features:hover {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}
.guide-product-btn.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-edge) !important;
  color: var(--text-primary) !important;
}
.review-cat-bar-fill {
  background: var(--accent) !important;
}
.cl-entry.cl-latest {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-edge) !important;
  border-radius: var(--r-control) !important;
}

/* Kill gradient on key-card top stripe */
.key-card::before { background: var(--border) !important; opacity: 1 !important; }

/* Kill gradient backgrounds on key cards */
.key-card,
.guide-card,
.guide-product-btn {
  background: var(--bg-1) !important;
}

/* ============================================================
   TABS — reseller panel's .tab class is now used as the sidebar
   nav item class (see reseller.css .nav-item.tab). Customer portal
   still uses .nav-tabs / .nav-tab pills. We only target .nav-tabs
   here; the reseller .tab is fully styled by reseller.css.
   ============================================================ */

/* Customer portal nav-tabs (pill) -> same flat-underline treatment */
.nav-tabs {
  gap: 0 !important;
  padding: 0 var(--s-5) !important;
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
}
.nav-tab {
  padding: 12px 14px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid transparent !important;
  margin-bottom: -1px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  background: transparent !important;
  transition: color var(--t-fast) !important;
}
.nav-tab:hover {
  color: var(--text-secondary) !important;
  background: transparent !important;
}
.nav-tab.active {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--accent) !important;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar,
.reseller-theme .topbar {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 52px !important;
  padding: 0 var(--s-6) !important;
}
.topbar .brand,
.reseller-theme .topbar .brand {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
}
.topbar .balance,
.reseller-theme .balance {
  background: var(--bg-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
.topbar .user,
.reseller-theme .topbar .user {
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}
.topbar .btn-logout,
.reseller-theme .btn-logout {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  color: var(--text-dim) !important;
  font-size: 12px !important;
  padding: 5px 11px !important;
}
.topbar .btn-logout:hover,
.reseller-theme .btn-logout:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  background: var(--bg-2) !important;
}

/* ============================================================
   HEADINGS
   ============================================================ */
.sec-title,
.reseller-theme .sec-title,
.section-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
}
.sec-sub,
.reseller-theme .sec-sub,
.summary {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  margin-bottom: var(--s-5) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

h1 { font-size: 24px !important; font-weight: 600 !important; }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.reseller-theme .stat-box {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  padding: 14px 16px !important;
  text-align: left !important;
}
.reseller-theme .stat-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.reseller-theme .stat-value {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}
.reseller-theme .stat-box:hover {
  border-color: var(--border-strong) !important;
}

.reseller-theme .chart-wrap,
.reseller-theme .create-form,
.reseller-theme .rrs-panel,
.reseller-theme .key-card,
.reseller-theme .key-result,
.reseller-theme .dep-card,
.reseller-theme .dep-hist-item,
.reseller-theme .bl-card,
.reseller-theme .webhook-banner {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
}
.reseller-theme .key-card-header,
.reseller-theme .key-card-actions {
  background: transparent !important;
}
.reseller-theme .key-card::before { display: none !important; }
.reseller-theme .key-card-header { border-bottom: 1px solid var(--border) !important; }
.reseller-theme .key-card-actions { border-top: 1px solid var(--border) !important; }
.reseller-theme .key-card-key {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.reseller-theme .key-card-key:hover {
  color: var(--accent-hover) !important;
}
.reseller-theme .kd-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-faint) !important;
  text-transform: uppercase !important;
}
.reseller-theme .kd-val {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* Range pills become flat segmented buttons */
.reseller-theme .range-pill {
  border-radius: var(--r-control) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: 4px 10px !important;
}
.reseller-theme .range-pill:hover {
  color: var(--text-primary) !important;
  background: var(--bg-2) !important;
}
.reseller-theme .range-pill.active {
  background: var(--bg-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}

/* ============================================================
   BUTTONS — three tiers, flat, sharp
   ============================================================ */
.btn,
.reseller-theme .abtn,
.abtn {
  border-radius: var(--r-control) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  height: auto !important;
  padding: 6px 11px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast) !important;
}
.btn:hover,
.reseller-theme .abtn:hover,
.abtn:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  background: var(--bg-2) !important;
}

.btn-primary,
.reseller-theme .btn-create,
.reseller-theme .btn-primary,
.auth-box .btn-primary {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-control) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.reseller-theme .btn-create:hover,
.reseller-theme .btn-primary:hover,
.auth-box .btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: none !important;
}
.btn-primary:disabled,
.reseller-theme .btn-create:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.btn-ghost { background: transparent !important; border: 1px solid var(--border) !important; }
.btn-ghost:hover { background: var(--bg-2) !important; border-color: var(--border-strong) !important; }

/* Status-tinted secondary buttons stay tinted but lose glow */
.abtn-green, .reseller-theme .abtn-green,
.btn-success {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border-color: var(--ok-edge) !important;
}
.abtn-danger, .reseller-theme .abtn-danger,
.btn-danger {
  background: var(--err-soft) !important;
  color: var(--err) !important;
  border-color: var(--err-edge) !important;
}
.abtn-warn, .reseller-theme .abtn-warn,
.btn-warn {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border-color: var(--warn-edge) !important;
}

/* Copy-all key button */
.reseller-theme .btn-copy-all {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  color: var(--text-secondary) !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
}
.reseller-theme .btn-copy-all:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   FORMS — inputs flatten, focus is a 1px border + 1px outline offset
   ============================================================ */
input, select, textarea,
.form-input,
.reseller-theme .create-form input,
.reseller-theme .create-form select,
.reseller-theme .modal input,
.reseller-theme .modal select,
.reseller-theme .cd-selected,
.reseller-theme .search-input-wrap,
.auth-box input,
.login-input,
.toolbar .search-box input,
.toolbar select,
.product-selector select {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  transition: border-color var(--t-fast), outline-color var(--t-fast) !important;
  outline: 1px solid transparent !important;
  outline-offset: 0 !important;
}
input:focus, select:focus, textarea:focus,
.form-input:focus,
.reseller-theme .create-form input:focus,
.reseller-theme .create-form select:focus,
.reseller-theme .modal input:focus,
.reseller-theme .modal select:focus,
.auth-box input:focus,
.login-input:focus,
.toolbar .search-box input:focus,
.toolbar select:focus,
.product-selector select:focus,
.reseller-theme .custom-dropdown.open .cd-selected,
.reseller-theme .search-input-wrap:focus-within {
  border-color: var(--accent) !important;
  outline-color: var(--accent-soft) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-faint) !important;
}
.form-group label,
.auth-box label,
.create-form label,
.reseller-theme .create-form label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

/* Price display: flat, one accent line on the left */
.reseller-theme .create-form .price-display {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: var(--r-control) !important;
}
.reseller-theme .create-form .price-display .amount {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Key-type chooser */
.reseller-theme .key-type-option {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
}
.reseller-theme .key-type-option:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-2) !important;
}
.reseller-theme .key-type-option.active {
  border-color: var(--accent-edge) !important;
  background: var(--accent-soft) !important;
}
.reseller-theme .kt-dot {
  box-shadow: none !important;
  background: var(--accent) !important;
}

/* ============================================================
   TABLES — proper alignment, row hover only, no zebra stripes
   ============================================================ */
.table-wrap {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
}
thead { background: transparent !important; }
th {
  padding: 9px 14px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--border) !important;
}
td {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}
tbody tr:hover {
  background: var(--bg-2) !important;
}
/* Numeric columns: right-align via .num class plus catch any explicit pattern */
td.num, th.num,
td[data-numeric], th[data-numeric] {
  text-align: right !important;
}
/* Soften the "side-stripe" row indicators to be 2px */
tbody tr.success, tbody tr.active   { border-left: 2px solid var(--ok) !important; }
tbody tr.fail,    tbody tr.expired  { border-left: 2px solid var(--err) !important; }
tbody tr.paused                      { border-left: 2px solid var(--warn) !important; }

/* ============================================================
   BADGES — flat chips, 2px corners
   ============================================================ */
.badge,
.reseller-theme .badge,
.key-status-badge,
.gblock-status,
.pi-status,
.gs-status,
.online-badge,
.dep-status,
.sev-badge,
.tier-badge {
  border-radius: var(--r-chip) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  background-image: none !important;
}
.badge-success, .badge-green, .key-status-badge.status-ok,
.gblock-status.status-working, .pi-status.status-working {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border: 1px solid var(--ok-edge) !important;
}
.badge-danger, .badge-red, .key-status-badge.status-fail {
  background: var(--err-soft) !important;
  color: var(--err) !important;
  border: 1px solid var(--err-edge) !important;
}
.badge-warn, .badge-warning, .key-status-badge.status-review,
.gblock-status.status-updating, .pi-status.status-updating {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border: 1px solid var(--warn-edge) !important;
}
.badge-info, .badge-purple, .badge-test {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border: 1px solid var(--accent-edge) !important;
}
.badge-muted, .key-status-badge.status-pending {
  background: var(--bg-2) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
}
.gblock-status.status-maintenance, .pi-status.status-maintenance {
  background: var(--bg-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

/* Online badge: tiny green dot, no pulse, no glow */
.online-badge::before {
  box-shadow: none !important;
  animation: none !important;
}

/* ============================================================
   MODALS — single border, dim backdrop, no shadow stack
   ============================================================ */
.modal-overlay,
.reseller-theme .modal-overlay,
.dep-modal-overlay {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
}
.modal,
.reseller-theme .modal,
.dep-modal,
.features-window,
.changelog-modal,
.reviews-modal {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-modal) !important;
  box-shadow: none !important;
}
.modal .modal-header,
.reseller-theme .modal .modal-header,
.dep-modal-header,
.features-window-header,
.reviews-modal-header,
.changelog-modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 18px !important;
}
.modal .modal-header h2,
.reseller-theme .modal .modal-header h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
   AUTH SCREENS
   ============================================================ */
.auth-box,
.login-box {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-modal) !important;
  box-shadow: none !important;
}
.auth-icon,
.reseller-theme .auth-icon {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border: 1px solid var(--accent-edge) !important;
  border-radius: var(--r-control) !important;
}
.auth-logo,
.reseller-theme .auth-logo {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}
.auth-sub,
.reseller-theme .auth-sub {
  color: var(--text-dim) !important;
  font-size: 13px !important;
}

/* ============================================================
   TOAST — flat, single border accent
   ============================================================ */
.reseller-theme .toast,
.toast {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-card) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.reseller-theme .toast-success { border-left: 2px solid var(--ok) !important; color: var(--text-primary) !important; }
.reseller-theme .toast-error   { border-left: 2px solid var(--err) !important; color: var(--text-primary) !important; }

/* ============================================================
   CUSTOMER PORTAL — product / game cards
   ============================================================ */
.gs-card,
.pi-card,
.live-stats-section,
.review-summary-card,
.tips-card,
.guide-card,
.changelog-modal,
.features-window,
.reviews-modal,
.tip-item,
.dep-pending-wrap {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
}
.gs-card:hover,
.pi-card:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-2) !important;
}
.gs-card.active {
  border-color: var(--accent-edge) !important;
  background: var(--bg-2) !important;
}
.gs-card.active::before {
  background: var(--accent) !important;
  height: 1px !important;
}
.gs-name, .pi-name, .gblock-name {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
}
.gs-card.active .gs-name,
.gblock.open .gblock-name {
  color: var(--text-primary) !important;
}
.gs-icon, .gblock-icon, .pi-icon {
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
}

/* Online counts — green text, no pulse */
.gs-online,
.gblock-online,
.pi-online {
  color: var(--ok) !important;
  font-weight: 600 !important;
}

/* PI buttons — three flat tiers */
.pi-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--r-control) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 7px 13px !important;
  box-shadow: none !important;
}
.pi-btn:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
.pi-btn-activate {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
}
.pi-btn-activate:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text) !important;
}
.pi-btn-download {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border-color: var(--ok-edge) !important;
}
.pi-btn-download:hover {
  background: var(--ok-soft) !important;
  border-color: var(--ok) !important;
  color: var(--ok) !important;
}
.pi-btn-radar {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
.pi-btn-radar:hover { background: var(--bg-2) !important; color: var(--text-primary) !important; }

/* Keys page card */
.keys-list .key-card {
  background: var(--bg-1) !important;
  border-radius: var(--r-card) !important;
  padding: 16px 18px !important;
}
.keys-list .key-card .key-info .product-name {
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}
.keys-list .key-card .key-info .key-value {
  background: var(--bg-0) !important;
  border-radius: var(--r-control) !important;
  border: 1px solid var(--border) !important;
}

.time-badge {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border: 1px solid var(--ok-edge) !important;
  border-radius: var(--r-control) !important;
  font-weight: 600 !important;
}
.time-badge.expired {
  background: var(--err-soft) !important;
  color: var(--err) !important;
  border-color: var(--err-edge) !important;
}

/* Step numbers in guide */
.step-number {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--r-control) !important;
  font-weight: 600 !important;
}

/* Tip icons */
.tip-icon {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
}

/* Guide product buttons */
.guide-product-btn {
  border-radius: var(--r-control) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}
.guide-product-btn:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
.guide-product-btn.active {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

/* Star color desaturated */
.product-review-stars .s,
.review-big-stars .s,
.star-rating .star.full,
.star-rating .star.half {
  color: var(--warn) !important;
  text-shadow: none !important;
}

/* Live stats — minimal sparkline panel */
.live-stat-mini {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
}
.live-stats-dot { animation: none !important; box-shadow: none !important; background: var(--ok) !important; }

/* ============================================================
   ADMIN — sidebar and content
   ============================================================ */
.sidebar {
  background: var(--bg-1) !important;
  border-right: 1px solid var(--border) !important;
}
.sidebar-brand {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 16px !important;
}
.brand-title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
}
.brand-sub {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--text-faint) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.brand-icon {
  background: var(--accent) !important;
  border-radius: var(--r-control) !important;
  color: var(--accent-text) !important;
}
.product-selector select {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  color: var(--text-primary) !important;
}
.product-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-faint) !important;
}
.nav-section {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  color: var(--text-faint) !important;
  padding: 18px 12px 6px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
.nav-item {
  border-radius: var(--r-control) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  padding: 8px 10px !important;
  border-left: 2px solid transparent !important;
  transition: color var(--t-fast), background var(--t-fast) !important;
}
.nav-item:hover {
  background: var(--bg-2) !important;
  color: var(--text-primary) !important;
}
.nav-item.active {
  background: var(--bg-2) !important;
  color: var(--text-primary) !important;
  border-left: 2px solid var(--accent) !important;
  padding-left: 8px !important;
  font-weight: 600 !important;
}
.nav-item svg { opacity: 0.55 !important; }
.nav-item.active svg { opacity: 1 !important; color: var(--text-primary) !important; }
.sidebar-footer {
  border-top: 1px solid var(--border) !important;
  color: var(--text-faint) !important;
  font-size: 11px !important;
}
.content {
  background: var(--bg-0) !important;
}

/* Toolbar inputs already covered by global input rules — adjust spacing */
.toolbar .search-box svg { color: var(--text-faint) !important; }

/* Admin offset cards: flat */
.offset-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
}
.offset-card:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}
.offset-card-name {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
}
.offset-card-value {
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.offset-group-title {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.offset-group-count {
  background: var(--bg-2) !important;
  color: var(--text-dim) !important;
  border-radius: var(--r-chip) !important;
  font-weight: 500 !important;
}

/* License result */
.lic-result {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
}
.lic-result .lic-key {
  color: var(--text-primary) !important;
}
.lic-result .lic-key:hover {
  color: var(--accent-hover) !important;
}

/* Reseller product list (admin) */
.rsl-product-list {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
}
.rsl-product-list label:hover {
  background: var(--bg-2) !important;
}

/* Severity badges in blacklist */
.sev-critical { background: var(--err-soft) !important; color: var(--err) !important; border-color: var(--err-edge) !important; }
.sev-high     { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn-edge) !important; }
.sev-medium   { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn-edge) !important; }
.sev-low      { background: var(--bg-2) !important; color: var(--text-dim) !important; border-color: var(--border) !important; }

/* ============================================================
   FILTER TABS — same flat-underline mini variant
   ============================================================ */
.reseller-theme .filter-tab {
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 11px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  color: var(--text-dim) !important;
  margin-bottom: -1px;
}
.reseller-theme .filter-tab:hover {
  background: transparent !important;
  color: var(--text-secondary) !important;
}
.reseller-theme .filter-tab.active {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--accent) !important;
}
.reseller-theme .filter-tabs {
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   DEPOSIT — flatten currency block
   ============================================================ */
.dep-card { border-radius: var(--r-card) !important; }
.dep-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}
.dep-amount {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.dep-addr {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  color: var(--text-primary) !important;
}
.dep-addr:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-2) !important;
}
.dep-memo {
  background: var(--warn-soft) !important;
  border: 1px solid var(--warn-edge) !important;
  border-radius: var(--r-control) !important;
  color: var(--warn) !important;
}
.dep-timer {
  background: var(--ok-soft) !important;
  border: 1px solid var(--ok-edge) !important;
  border-radius: var(--r-control) !important;
  color: var(--ok) !important;
}
.dep-timer-expired {
  background: var(--warn-soft) !important;
  border-color: var(--warn-edge) !important;
  color: var(--warn) !important;
}
.dep-hist-item {
  border-radius: var(--r-control) !important;
}
.dep-status-confirmed { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-edge) !important; }
.dep-status-pending   { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn-edge) !important; }
.dep-status-expired,
.dep-status-cancelled { background: var(--bg-2) !important; color: var(--text-dim) !important; border-color: var(--border) !important; }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.reseller-theme .empty-state,
.reseller-theme .empty,
.empty-state, .empty {
  color: var(--text-dim) !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 40px 16px !important;
}

/* ============================================================
   MAIN — reseller .main is owned by reseller.css now (sidebar
   layout, full-width). Keep admin .main-content spacing here.
   ============================================================ */
.main-content { padding: 22px 24px !important; }

/* ============================================================
   SIDEBAR BASELINE GRID (admin micro-detail)
   Vertical accent bar on active nav item already there; this
   makes spacing consistent at 32px line height.
   ============================================================ */
.nav .nav-item { line-height: 18px !important; }

/* ============================================================
   PARTICLES + ANIMATIONS we explicitly want off
   ============================================================ */
@keyframes pulseGlow      { 0%,100% { opacity: 1; } 50% { opacity: 1; } }
@keyframes livePulse      { 0%,100% { opacity: 1; } 50% { opacity: 1; } }
@keyframes pulse-text     { 0%,100% { opacity: 1; } }
@keyframes radar-pulse    { 0%,100% { opacity: 1; } }
@keyframes indigoPulse    { 0%,100% { opacity: 1; } }
/* reseller .nav-item.tab-blink subtle dot is owned by reseller.css */

/* ============================================================
   CUSTOMER — “why us” banner + tier badges + price chips
   ============================================================ */
.why-us-banner {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
}
.why-us-card,
.why-us-icon {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  color: var(--text-secondary) !important;
}
.why-us-icon { color: var(--accent-hover) !important; }
.why-us-card:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
}

.tier-badge {
  border-radius: var(--r-chip) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.tier-private {
  background: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border: 1px solid var(--accent-edge) !important;
}
.tier-full {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border: 1px solid var(--ok-edge) !important;
}
.tier-aim {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border: 1px solid var(--warn-edge) !important;
}
.product-card:hover .tier-private,
.product-card:hover .tier-full,
.product-card:hover .tier-aim {
  box-shadow: none !important;
}

.price-chip {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-control) !important;
  backdrop-filter: none !important;
}
.price-chip:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  transform: none !important;
  box-shadow: none !important;
}
.price-value {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* The customer "key-card" inner shimmer line */
.key-card::before { background: var(--border) !important; opacity: 1 !important; }

/* ============================================================
   FOCUS RING — keyboard users only
   ============================================================ */
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; }