/* ============================================================
   pepev2.css — Pepe Miner · BZ-Blue Theme
   Covers: home, dashboard, nav, footer, firewall, inventory,
           ptc, referrals, wheel, withdraw
   ============================================================ */

/* ── 1. CSS Custom Properties ───────────────────────────────── */
:root {
  /* 1. The BZ Foundation */
  --bz-blue:          #00cfff;
  --bz-blue-dark:     #0077a8;
  --bz-blue-dim:      rgba(0, 207, 255, 0.12);
  --bz-amber:         #f59e0b;
  --bz-amber-dark:    #b45309;
  --bz-amber-dim:     rgba(245, 158, 11, 0.12);
  --bz-surface:       #0a0e14;
  --bz-card:          #0f1520;
  --bz-border:        rgba(0, 207, 255, 0.15);
  --bz-border-active: rgba(0, 207, 255, 0.4);
  --bz-text:          #e2e8f0;
  --bz-muted:         #64748b;
  --bz-glow-blue:     0 0 24px rgba(0, 207, 255, .25), 0 4px 12px rgba(0, 0, 0, .5);
  --bz-glow-blue-lg:  0 0 48px rgba(0, 207, 255, .2), 0 8px 32px rgba(0, 0, 0, .6);

  /* 2. Bridge Variables — maps all legacy green/swamp names to BZ-Blue */
  --green-neon:    var(--bz-blue);
  --green-mid:     var(--bz-blue-dark);
  --green-dark:    var(--bz-blue-dark);
  --green-deep:    #062233;
  --swamp-900:     var(--bz-surface);
  --swamp-700:     #0f172a;
  --swamp-600:     #111827;
  --swamp-400:     var(--bz-card);
  --swamp-300:     #1e2d3d;

  /* 3. Functional Aliases */
  --text-primary:   var(--bz-text);
  --text-secondary: #94a3b8;
  --text-muted:     var(--bz-muted);
  --n-900:          var(--bz-surface);

  --card-bg:        var(--bz-card);
  --card-bg-hover:  #161e2b;
  --input-bg:       rgba(10, 14, 20, 0.9);
  --modal-bg:       rgba(15, 21, 32, 0.98);

  --border-color:   var(--bz-border);
  --border-active:  var(--bz-border-active);
  --border-gold:    var(--bz-amber-dim);

  --glow-green:     var(--bz-glow-blue);
  --glow-green-lg:  var(--bz-glow-blue-lg);
  --glow-blue:      var(--bz-glow-blue);
  --glow-gold:      0 0 18px rgba(245, 158, 11, 0.4);

  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.5);

  /* 4. Accent colours */
  --gold-bright:    #f59e0b;
  --gold-dark:      #b45309;
  --blue-bright:    #00cfff;
  --blue-dark:      #0077a8;
  --accent-danger:  #ff4444;
  --accent-warning: #ff9900;
  --accent-info:    #00cfff;
  --gold-dim:       #8a6800;

  /* 5. Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-tech:    'JetBrains Mono', monospace;
  --font-mono:    'JetBrains Mono', monospace;
  --font-body:    'Inter', sans-serif;
  --font-pixel:   var(--font-tech);

  /* 6. Layout */
  --navbar-h:   64px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;

  /* 7. Bootstrap token overrides */
  --bs-secondary-color:      var(--bz-muted)    !important;
  --bs-secondary-color-rgb:  100, 116, 139      !important;
  --bs-body-color:           var(--bz-text)     !important;
  --bs-body-color-rgb:       226, 232, 240      !important;
  --bs-emphasis-color:       var(--bz-text)     !important;
  --bs-link-color:           var(--bz-blue-dark)!important;
  --bs-link-hover-color:     var(--bz-blue)     !important;
  --bs-card-color:           var(--bz-text);
  --bs-card-bg:              transparent;
  --bs-body-bg:              var(--bz-surface);
  --bs-light-rgb:            10, 14, 20;

  /* 8. Misc tokens used in components */
  --bg-tertiary:        var(--bz-card);
  --border-color-light: rgba(0, 207, 255, 0.08);
  --transition-base:    .2s ease;
}

/* ── 2. Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:      var(--font-body);
  font-size:        15px;
  line-height:      1.65;
  color:            var(--bz-text);
  background-color: var(--bz-surface);
  min-height:       100vh;
  overflow-x:       hidden;
}

/* BZ-Blue grid background */
body::before {
  content:        '';
  position:       fixed;
  inset:          0;
  background:
    radial-gradient(ellipse at 15% 40%, rgba(0, 207, 255, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(0, 119, 168, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(0, 100, 160, 0.04) 0%, transparent 60%),
    repeating-linear-gradient(0deg,   transparent, transparent 39px, rgba(0, 207, 255, 0.015) 40px),
    repeating-linear-gradient(90deg,  transparent, transparent 39px, rgba(0, 207, 255, 0.015) 40px);
  pointer-events: none;
  z-index:        0;
}

a { color: var(--bz-blue-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--bz-blue); }

img { max-width: 100%; display: block; }

/* ── 3. Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--swamp-700); }
::-webkit-scrollbar-thumb { background: var(--bz-blue-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bz-blue); }
* { scrollbar-width: thin; scrollbar-color: var(--bz-blue-dark) var(--swamp-700); }

/* ── 4. Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  color:          var(--bz-blue);
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(16px, 2.5vw, 26px); }
h2 { font-size: clamp(14px, 2vw,  22px); }
h3 { font-size: clamp(13px, 1.8vw, 18px); }
h4 { font-size: clamp(12px, 1.5vw, 15px); }
h5, h6 { font-size: 13px; }

p { color: var(--text-secondary); margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }

strong { color: var(--text-primary); }

/* ── 5. Navbar ─────────────────────────────────────────────── */
.navbar {
  position:         sticky;
  top:              0;
  z-index:          1030;
  background:       rgba(10, 14, 20, 0.92);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:    1px solid var(--bz-border);
  box-shadow:       0 2px 20px rgba(0, 0, 0, 0.6);
  height:           var(--navbar-h);
  flex-direction:   row !important;
  flex-wrap:        nowrap !important;
  padding:          0 !important;
}

.navbar .container,
.navbar .container-fluid {
  height:          100%;
  display:         flex;
  align-items:     center;
  padding-left:    var(--bs-gutter-x, 0.75rem);
  padding-right:   var(--bs-gutter-x, 0.75rem);
}

.navbar-inner {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  height:          100%;
  gap:             1rem;
}

/* Brand */
.navbar-brand {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-brand-icon {
  border-radius: var(--radius-sm);
  overflow:      hidden;
  flex-shrink:   0;
  box-shadow:    0 0 10px rgba(0, 207, 255, 0.25);
}
.navbar-brand-name {
  font-family:  var(--font-tech);
  font-size:    11px;
  color:        var(--bz-blue);
  display:      block;
  line-height:  1.3;
  text-shadow:  0 0 12px rgba(0, 207, 255, 0.5);
  letter-spacing: 1px;
}
.navbar-brand-sub {
  font-size:    9px;
  color:        var(--text-muted);
  font-family:  var(--font-mono);
  display:      block;
  letter-spacing: .5px;
}

/* Nav links */
.navbar-nav {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}
.nav-item { display: flex; }

.nav-link {
  font-family:   var(--font-tech);
  font-size:     9px;
  color:         var(--text-secondary);
  padding:       .5rem .75rem;
  border-radius: var(--radius-sm);
  border:        1px solid transparent;
  transition:    all .2s;
  white-space:   nowrap;
  display:       flex;
  align-items:   center;
  gap:           .4rem;
  letter-spacing:.5px;
  text-decoration: none;
  cursor:        pointer;
}
.nav-link:hover,
.nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color:            var(--bz-blue) !important;
  border-color:     var(--bz-border);
  background:       rgba(0, 207, 255, 0.07);
  box-shadow:       var(--bz-glow-blue);
  text-decoration:  none;
}
.nav-link.active,
.navbar-nav .nav-link.active {
  color:        var(--bz-blue) !important;
  border-color: var(--bz-border-active);
  background:   rgba(0, 207, 255, 0.12);
}
.navbar-nav .nav-link {
  color: var(--text-secondary) !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bz-blue) !important;
}
.nav-link i { font-size: 10px; }

/* Logout button as nav-link */
.nav-logout {
  background:  none;
  border:      1px solid transparent;
  font-family: var(--font-tech);
  font-size:   9px;
  color:       var(--text-muted);
  cursor:      pointer;
  transition:  all .2s;
  padding:     .5rem .75rem;
  border-radius: var(--radius-sm);
  display:     flex;
  align-items: center;
  gap:         .4rem;
  letter-spacing: .5px;
}
.nav-logout:hover {
  color:       var(--accent-danger);
  border-color:rgba(255,68,68,.3);
  background:  rgba(255,68,68,.07);
}

/* Mobile toggler */
.navbar-toggler {
  display:       none;
  background:    rgba(0, 207, 255, 0.08);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-sm);
  color:         var(--bz-blue);
  padding:       .4rem .6rem;
  font-size:     14px;
  cursor:        pointer;
  transition:    all .2s;
  align-items:   center;
  justify-content: center;
}
.navbar-toggler:hover { background: rgba(0, 207, 255, 0.18); box-shadow: var(--bz-glow-blue); }

/* Desktop: always visible */
@media (min-width: 992px) {
  .navbar-toggler  { display: none !important; }
  .navbar-collapse {
    display:         flex !important;
    flex:            1;
    justify-content: flex-end;
    align-items:     center;
    position:        static !important;
    background:      none !important;
    border:          none !important;
    padding:         0 !important;
    backdrop-filter: none !important;
    height:          100%;
  }
  .navbar-nav {
    flex-direction: row !important;
    align-items:    center;
    gap:            .25rem;
  }
  .nav-link  { width: auto !important; }
  .nav-logout{ width: auto !important; }
}

/* Mobile: toggled */
@media (max-width: 991px) {
  .navbar-toggler  { display: flex; }
  .navbar-collapse {
    display:      none;
    position:     absolute;
    top:          var(--navbar-h);
    left:         0; right: 0;
    background:   rgba(10, 14, 20, 0.97);
    border-bottom:1px solid var(--bz-border);
    padding:      1rem;
    backdrop-filter: blur(12px);
    z-index:      999;
    height:       auto !important;
  }
  .navbar-collapse.show { display: block; }
  .navbar-nav { flex-direction: column !important; gap: .25rem; width: 100%; }
  .nav-link   { justify-content: flex-start; padding: .6rem 1rem; width: 100%; }
  .nav-logout { width: 100%; }
}

/* ── 6. Cards ──────────────────────────────────────────────── */
.card {
  background:   var(--bz-card);
  border:       1px solid var(--bz-border);
  border-radius:var(--radius-lg);
  box-shadow:   var(--shadow-card);
  backdrop-filter: blur(10px);
  transition:   transform .2s, box-shadow .2s, border-color .2s;
  position:     relative;
  overflow:     hidden;
}
.card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--bz-blue-dark), transparent);
  opacity:    .7;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(0, 207, 255, 0.30);
  box-shadow:   0 8px 32px rgba(0,0,0,.6), var(--bz-glow-blue);
}

.card-body { padding: 1.5rem; }

.card-title-bar {
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  font-family:   var(--font-tech);
  font-size:     10px;
  color:         var(--bz-blue);
  margin-bottom: 1.25rem;
  letter-spacing:.5px;
}
.card-title-bar i { color: var(--gold-bright); font-size: 13px; }

/* ── 7. Buttons ────────────────────────────────────────────── */
.btn {
  font-family:   var(--font-tech);
  font-size:     9px;
  letter-spacing:.5px;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       .65rem 1.25rem;
  cursor:        pointer;
  transition:    all .18s;
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  white-space:   nowrap;
  text-decoration: none;
  line-height:   1.4;
  min-width:     300px;
  justify-content:center;
}
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-primary {
  background:   linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  color:        var(--n-900);
  box-shadow:   0 3px 14px rgba(0, 207, 255, 0.35);
}
.btn-primary:hover:not(:disabled) {
  background:  linear-gradient(135deg, var(--bz-blue), #33daff);
  box-shadow:  0 5px 22px rgba(0, 207, 255, 0.45);
  transform:   translateY(-2px);
  color:       var(--n-900);
  text-decoration: none;
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-gold {
  background:  linear-gradient(135deg, var(--gold-dark), var(--gold-bright));
  color:       var(--n-900);
  box-shadow:  0 3px 14px rgba(245, 158, 11, 0.30);
}
.btn-gold:hover:not(:disabled) {
  background:  linear-gradient(135deg, var(--gold-bright), #fbbf24);
  box-shadow:  0 5px 22px rgba(245, 158, 11, 0.50);
  transform:   translateY(-2px);
  color:       var(--n-900);
}

.btn-info {
  background:  linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  color:       var(--n-900);
  box-shadow:  0 3px 14px rgba(0, 207, 255, 0.28);
}
.btn-info:hover:not(:disabled) {
  box-shadow:  0 5px 22px rgba(0, 207, 255, 0.45);
  transform:   translateY(-2px);
  color:       var(--n-900);
}

.btn-danger {
  background:  linear-gradient(135deg, #770000, var(--accent-danger));
  color:       #fff;
  box-shadow:  0 3px 14px rgba(255,68,68,.28);
}
.btn-danger:hover:not(:disabled) { box-shadow: 0 5px 22px rgba(255,68,68,.45); transform: translateY(-2px); }

.btn-success {
  background:  linear-gradient(135deg, #00375c, var(--bz-blue-dark));
  color:       #fff;
  box-shadow:  0 3px 14px rgba(0, 119, 168, 0.28);
}
.btn-success:hover:not(:disabled) {
  box-shadow:  0 5px 22px rgba(0, 207, 255, 0.45);
  transform:   translateY(-2px);
  color:       #fff;
}

.btn-outline {
  background:    transparent;
  border:        1px solid var(--bz-border);
  color:         var(--text-secondary);
}
.btn-outline:hover:not(:disabled) { border-color: var(--bz-blue); color: var(--bz-blue); background: rgba(0, 207, 255, 0.06); }

.btn-sm  { font-size: 8px;  padding: .4rem .8rem; }
.btn-lg  { font-size: 10px; padding: .85rem 1.75rem; }

.btn .fa-spinner { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* btn-link used for logout form submit */
.btn-link {
  background:  none;
  padding:     0;
  color:       inherit;
  font-size:   inherit;
  font-family: inherit;
  letter-spacing: inherit;
  box-shadow:  none;
  border:      none;
}
.d-inline { display: inline; }

/* ── 8. Form Controls ──────────────────────────────────────── */
.form-label {
  font-family: var(--font-tech);
  font-size:   8px;
  color:       var(--text-muted);
  letter-spacing:.5px;
  margin-bottom:.4rem;
  display:     block;
}
.form-control,
.form-select {
  background:   var(--input-bg);
  border:       1px solid var(--bz-border);
  border-radius:var(--radius-sm);
  color:        var(--text-primary);
  font-family:  var(--font-body);
  font-size:    14px;
  padding:      .6rem .9rem;
  transition:   border-color .2s, box-shadow .2s;
  width:        100%;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus,
.form-select:focus {
  outline:      none;
  border-color: var(--bz-blue-dark);
  box-shadow:   0 0 0 3px rgba(0, 207, 255, 0.12);
  background:   rgba(10, 14, 20, 0.95);
  color:        var(--text-primary);
}
.form-select option { background: var(--swamp-600); color: var(--text-primary); }

/* ── 9. Alerts ─────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  border:        1px solid;
  padding:       .85rem 1.1rem;
  font-size:     13px;
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  backdrop-filter: blur(6px);
  margin-bottom: 1rem;
}
.alert i { flex-shrink: 0; margin-top: .15rem; }

.alert-success { background: rgba(0, 119, 168, 0.12); border-color: rgba(0, 207, 255, 0.35); color: var(--bz-blue); }
.alert-danger  { background: rgba(255,68,68,.10);     border-color: rgba(255,68,68,.35);      color: #ff8888; }
.alert-warning { background: rgba(255,153,0,.10);     border-color: rgba(255,153,0,.35);      color: #ffcc66; }
.alert-info    { background: rgba(0,207,255,.10);     border-color: rgba(0,207,255,.35);      color: var(--bz-blue); }

.alert-dismissible {
  padding-right: 2.5rem;
  position:      relative;
}
.alert .btn-close {
  position:    absolute;
  top:         .65rem;
  right:       .7rem;
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       inherit;
  opacity:     .6;
  font-size:   14px;
  line-height: 1;
  padding:     0;
  font-family: var(--font-body);
}
.alert .btn-close::before { content: '✕'; }
.alert .btn-close:hover   { opacity: 1; }

/* ── 10. Badges ────────────────────────────────────────────── */
.badge-custom {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  font-family:   var(--font-tech);
  font-size:     8px;
  padding:       .3rem .55rem;
  border-radius: 20px;
  border:        1px solid;
  letter-spacing:.3px;
  white-space:   nowrap;
}
.badge-reward  { background: rgba(245, 158, 11, 0.12); border-color: var(--bz-amber-dim); color: var(--gold-bright); }
.badge-time    { background: var(--bz-blue-dim);        border-color: var(--bz-border);    color: var(--text-muted); }
.badge-platform{ background: rgba(0,207,255,.10);       border-color: rgba(0,207,255,.25);  color: var(--bz-blue); }

.badge-rarity-common    { background:rgba(156,163,175,.12); border-color:rgba(156,163,175,.3); color:#9ca3af; }
.badge-rarity-uncommon  { background:rgba(16,185,129,.12);  border-color:rgba(16,185,129,.3);  color:#10b981; }
.badge-rarity-rare      { background:rgba(59,130,246,.12);  border-color:rgba(59,130,246,.3);  color:#3b82f6; }
.badge-rarity-epic      { background:rgba(168,85,247,.12);  border-color:rgba(168,85,247,.3);  color:#a855f7; }
.badge-rarity-legendary { background:rgba(245,158,11,.12);  border-color:rgba(245,158,11,.3);  color:#f59e0b; }

/* ── 11. Section Headers ───────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 2rem; }
.section-header h3 { font-size: clamp(13px, 1.8vw, 18px); margin-bottom: .5rem; }
.section-header p  { font-size: 13px; color: var(--text-muted); margin: .5rem 0 0; }
.section-divider {
  width:      60px;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--bz-blue-dark), transparent);
  margin:     .5rem auto;
  border-radius: 1px;
}

/* ── 12. Stats Cards ───────────────────────────────────────── */
.stats-card { text-align: center; padding: .5rem; }

.stats-icon {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     18px;
  flex-shrink:   0;
}
.stats-icon.users   { background: linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue)); color: var(--n-900); box-shadow: 0 0 14px rgba(0, 207, 255, 0.25); }
.stats-icon.ads     { background: linear-gradient(135deg, #002244, var(--bz-blue-dark));         color: var(--bz-blue);  box-shadow: 0 0 14px rgba(0, 207, 255, 0.25); }
.stats-icon.rewards { background: linear-gradient(135deg, #3a2200, var(--gold-dark));            color: var(--gold-bright); box-shadow: 0 0 14px rgba(245, 158, 11, 0.25); }
.stats-icon.mining  { background: linear-gradient(135deg, #062233, var(--bz-blue-dark));         color: var(--bz-blue);  box-shadow: 0 0 14px rgba(0, 207, 255, 0.20); }

.stats-value {
  font-family: var(--font-tech);
  font-size:   clamp(14px, 2.5vw, 24px);
  color:       var(--gold-bright);
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.40);
  margin:      .4rem 0 .2rem;
  line-height: 1.2;
}
.stats-label {
  font-size:     11px;
  color:         var(--text-muted);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ── 13. Feature Cards ─────────────────────────────────────── */
.feature-card {
  background:    var(--bz-card);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-md);
  padding:       1.5rem 1.25rem;
  text-align:    center;
  transition:    all .25s;
  height:        100%;
}
.feature-card:hover { border-color: var(--bz-border-active); transform: translateY(-4px); box-shadow: var(--bz-glow-blue-lg); }
.feature-icon-wrapper {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto .9rem;
  box-shadow:    0 4px 16px rgba(0,0,0,.4);
}
.feature-card h6 { font-family: var(--font-tech); font-size: 9px; color: var(--bz-blue); margin-bottom: .5rem; }
.feature-card p  { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ── 14. Hero / Home ───────────────────────────────────────── */
.hero-section { padding-top: 1.5rem; }

.mining-hero-section {
  border-radius: var(--radius-xl);
  overflow:      hidden;
  position:      relative;
  margin-bottom: 3rem;
  border:        1px solid var(--bz-border);
  background:    var(--bz-card);
}
.mining-background {
  position:      absolute;
  inset:         0;
  overflow:      hidden;
  z-index:       0;
  pointer-events:none;
}
.mining-grid {
  position: absolute;
  inset:    0;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 39px, rgba(0, 207, 255, 0.03) 40px),
    repeating-linear-gradient(90deg,  transparent, transparent 39px, rgba(0, 207, 255, 0.03) 40px);
}
.mining-particles {
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 100, 160, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 119, 168, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(0, 80, 130, 0.08)  0%, transparent 45%);
}
.hero-content {
  position:   relative;
  z-index:    1;
  text-align: center;
  padding:    4rem 2rem 3rem;
}
.hero-title {
  font-family:   var(--font-display);
  font-size:     clamp(18px, 3vw, 30px);
  font-weight:   700;
  color:         var(--bz-blue);
  text-shadow:   0 0 24px rgba(0, 207, 255, 0.5);
  margin-bottom: .75rem;
  line-height:   1.3;
  letter-spacing: -0.02em;
}
.hero-subtitle {
  font-size:  15px;
  color:      var(--text-secondary);
  max-width:  520px;
  margin:     0 auto;
  line-height:1.75;
}
.pepe-mascot {
  width:     120px;
  height:    120px;
  margin:    0 auto 1.5rem;
  display:   block;
  filter:    drop-shadow(0 0 22px rgba(0, 207, 255, 0.45));
  animation: pepeBounce 2.5s ease-in-out infinite;
}
@keyframes pepeBounce {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

/* ── 15. Modal (Bootstrap override) ───────────────────────── */
.modal-content {
  background:    var(--modal-bg);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-lg);
  box-shadow:    0 0 60px rgba(0,0,0,.8), var(--bz-glow-blue-lg);
  color:         var(--text-primary);
}
.modal-header {
  border-bottom: 1px solid var(--bz-border);
  padding:       1.1rem 1.5rem;
}
.modal-title {
  font-family: var(--font-tech);
  font-size:   11px;
  color:       var(--bz-blue);
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.modal-body    { padding: 1.5rem; }
.modal-footer  { border-top: 1px solid var(--bz-border); padding: 1rem 1.5rem; }

.btn-close {
  background:  none;
  border:      none;
  color:       var(--text-muted);
  font-size:   16px;
  cursor:      pointer;
  opacity:     .7;
  line-height: 1;
  padding:     .2rem;
  font-family: var(--font-body);
}
.btn-close::before { content: '✕'; }
.btn-close:hover   { opacity: 1; color: var(--bz-blue); }

/* FaucetPay info card */
.faucetpay-info-card {
  display:       flex;
  align-items:   center;
  gap:           .9rem;
  background:    rgba(0,207,255,.06);
  border:        1px solid rgba(0,207,255,.22);
  border-radius: var(--radius-md);
  padding:       .9rem 1rem;
  margin-bottom: 1rem;
}
.faucetpay-icon {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--n-900);
  font-size:     16px;
  flex-shrink:   0;
}
.faucetpay-content { flex: 1; min-width: 0; }
.faucetpay-title {
  font-family:  var(--font-tech);
  font-size:    8px;
  color:        var(--bz-blue);
  margin-bottom:.3rem;
  display:      flex;
  align-items:  center;
  gap:          .4rem;
}
.faucetpay-description { font-size: 11px; color: var(--text-muted); margin: 0; }
.faucetpay-signup-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  font-family:   var(--font-tech);
  font-size:     8px;
  padding:       .45rem .8rem;
  background:    linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  color:         var(--n-900);
  border-radius: var(--radius-sm);
  text-decoration:none;
  white-space:   nowrap;
  transition:    all .2s;
  flex-shrink:   0;
}
.faucetpay-signup-btn:hover { transform: translateY(-1px); box-shadow: var(--bz-glow-blue); color: var(--n-900); }

.cf-turnstile { display: flex; justify-content: center; margin: 1rem 0; }

/* ── 16. Earnings / Payout Feed ────────────────────────────── */
.earnings-item {
  display:       flex;
  align-items:   center;
  gap:           .9rem;
  padding:       .85rem 0 .85rem .75rem;
  border-bottom: 1px solid rgba(0, 207, 255, 0.07);
  border-left:   3px solid var(--bz-border);
  transition:    border-color .2s;
}
.earnings-item:last-child { border-bottom: none; }
.earnings-item:hover      { border-left-color: var(--bz-blue-dark); }

.user-avatar {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--swamp-400), var(--swamp-300));
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--text-muted);
  font-size:     14px;
  flex-shrink:   0;
  border:        1px solid var(--bz-border);
}

/* ── 17. Empty State ───────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon { font-size: 3.5rem; color: var(--text-muted); margin-bottom: 1rem; display: block; opacity: .5; }
.empty-state h3,
.empty-state h5 { color: var(--text-secondary); font-size: 14px; margin-bottom: .5rem; }
.empty-state p  { font-size: 13px; color: var(--text-muted); }

/* ── 18. Dashboard ─────────────────────────────────────────── */


/* ── 19. PTC / Ad Tasks ────────────────────────────────────── */
/* Firewall badge */
.firewall-badge {
  position:      fixed;
  top:           calc(var(--navbar-h) + .75rem);
  right:         1rem;
  z-index:       900;
  background:    rgba(255,153,0,.12);
  border:        1px solid rgba(255,153,0,.40);
  border-radius: var(--radius-md);
  padding:       .75rem 1rem;
  backdrop-filter: blur(10px);
  animation:     firewallPulse 2s ease-in-out infinite;
}
@keyframes firewallPulse {
  0%,100% { box-shadow: 0 0 10px rgba(255,153,0,.25); }
  50%      { box-shadow: 0 0 22px rgba(255,153,0,.50); }
}
.firewall-badge-icon {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    linear-gradient(135deg, #3a1f00, var(--accent-warning));
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--n-900);
  font-size:     16px;
}
.firewall-badge-label { font-size: 9px;  color: var(--text-muted); }
.firewall-badge-value { font-family: var(--font-tech); font-size: 18px; color: var(--accent-warning); line-height: 1; }
.firewall-badge-text  { font-size: 9px;  color: var(--text-muted); }

/* Platform tabs */
.platform-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.platform-tab {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       .55rem 1rem;
  background:    rgba(10, 14, 20, 0.6);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    all .2s;
  font-size:     12px;
  color:         var(--text-secondary);
  user-select:   none;
}
.platform-tab:hover  { border-color: rgba(0, 207, 255, 0.35); color: var(--text-primary); }
.platform-tab.active { background: rgba(0, 207, 255, 0.10); border-color: var(--bz-border-active); color: var(--bz-blue); box-shadow: var(--bz-glow-blue); }
.tab-icon  { font-size: 14px; }
.tab-name  { font-family: var(--font-tech); font-size: 8px; }
.tab-count { font-size: 10px; color: var(--text-muted); }

/* Campaign cards */
.campaign-card { height: 100%; transition: transform .2s, border-color .2s, box-shadow .2s; }
.campaign-card:hover { transform: translateY(-3px); border-color: rgba(0, 207, 255, 0.35); }

.campaign-title { font-family: var(--font-tech); font-size: 9px; color: var(--text-primary); line-height: 1.5; }
.campaign-meta  { display: flex; flex-wrap: wrap; gap: .4rem; font-size: 10px; color: var(--text-muted); }
.meta-reward    { font-family: var(--font-mono); color: var(--gold-bright); font-size: 10px; }

.platform-label { font-family: var(--font-tech); font-size: 8px; padding: .2rem .5rem; border-radius: 20px; border: 1px solid; }
.platform-label.offerwall  { background: rgba(0,207,255,.10); border-color: rgba(0,207,255,.25); color: var(--bz-blue); }
.platform-label.bitcotasks { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); color: var(--gold-bright); }

.btn-view-ad-sm {
  font-family:   var(--font-tech);
  font-size:     8px;
  padding:       .45rem .8rem;
  background:    linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  color:         var(--n-900);
  border:        none;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    all .18s;
  display:       inline-flex;
  align-items:   center;
  gap:           .35rem;
  align-self:    flex-start;
  margin-top:    auto;
}
.btn-view-ad-sm:hover { background: linear-gradient(135deg, var(--bz-blue), #33daff); box-shadow: var(--bz-glow-blue); transform: translateY(-1px); }

/* PTC Modal */
.ptc-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; }
.ptc-modal.active { display: flex; }
.ptc-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); }
.ptc-modal-content {
  position:      relative;
  z-index:       1;
  background:    var(--modal-bg);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-lg);
  width:         min(520px, 95vw);
  max-height:    90vh;
  overflow:      hidden;
  box-shadow:    0 0 60px rgba(0,0,0,.8), var(--bz-glow-blue-lg);
  animation:     modalPop .25s ease;
}
@keyframes modalPop { from { transform: scale(.88); opacity:0; } to { transform: scale(1); opacity:1; } }
.ptc-modal-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       1rem 1.25rem;
  border-bottom: 1px solid var(--bz-border);
}
.ptc-modal-title { font-family: var(--font-tech); font-size: 10px; color: var(--bz-blue); display: flex; align-items: center; gap: .5rem; }
.ptc-modal-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: .2rem; line-height: 1; transition: color .2s; }
.ptc-modal-close:hover { color: var(--bz-blue); }
.ptc-modal-body { padding: 1.25rem; }

.ptc-ad-container {
  position:      relative;
  width:         100%;
  height:        200px;
  background:    rgba(10, 14, 20, 0.7);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin: 1rem 0;
}
.ptc-go-button {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%,-50%);
  font-family:   var(--font-tech);
  font-size:     11px;
  padding:       .75rem 1.5rem;
  background:    linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  color:         var(--n-900);
  border:        none;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    all .2s;
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  animation:     goButtonPulse 1.5s ease-in-out infinite;
}
@keyframes goButtonPulse {
  0%,100% { box-shadow: 0 0 12px rgba(0, 207, 255, 0.4); }
  50%      { box-shadow: 0 0 28px rgba(0, 207, 255, 0.7); }
}
.ptc-go-button:hover { background: linear-gradient(135deg, var(--bz-blue), #33daff); transform: translate(-50%,-50%) scale(1.06); }

.ptc-reward-info {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  font-size:     13px;
  color:         var(--text-secondary);
  padding:       .6rem .9rem;
  background:    rgba(0, 207, 255, 0.05);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-sm);
}
.ptc-reward-info strong { font-family: var(--font-mono); color: var(--gold-bright); }

/* ── 20. Firewall / Verify ─────────────────────────────────── */
.verify-container { width: 100%; max-width: 520px; margin: auto; }
.verify-card {
  background:    var(--bz-card);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-xl);
  padding:       2.5rem 2rem;
  box-shadow:    var(--shadow-card);
  backdrop-filter: blur(12px);
  text-align:    center;
}
.verify-icon {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     28px;
  color:         var(--n-900);
  margin:        0 auto 1.25rem;
  animation:     shieldPulse 2s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%,100% { box-shadow: 0 0 18px rgba(0, 207, 255, 0.25); }
  50%      { box-shadow: 0 0 35px rgba(0, 207, 255, 0.50); }
}
.verify-title  { font-family: var(--font-tech); font-size: 13px; color: var(--bz-blue); margin-bottom: .65rem; }
.verify-desc   { font-size: 13px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.5rem; }

.block-msg .block-icon {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  background:    linear-gradient(135deg, #3a0000, var(--accent-danger));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     28px;
  color:         #fff;
  margin:        0 auto 1.25rem;
  box-shadow:    0 0 24px rgba(255,68,68,.35);
}

.steps {
  text-align:    left;
  background:    rgba(10, 14, 20, 0.5);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-md);
  padding:       1rem 1.1rem;
  margin:        1rem 0 1.5rem;
  display:       flex;
  flex-direction:column;
  gap:           .6rem;
}
.step { display: flex; align-items: flex-start; gap: .75rem; font-size: 13px; color: var(--text-secondary); }
.step-num {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--bz-blue-dark), var(--bz-blue));
  color:         var(--n-900);
  font-family:   var(--font-tech);
  font-size:     8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  border:        1px solid var(--bz-border);
}

.btn-get-key  { width: 100%; margin-bottom: 1rem; font-size: 10px; padding: .75rem 1rem; }
.btn-verify   { width: 100%; font-size: 10px; padding: .75rem 1rem; }
.btn-back {
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  margin-top:    1.25rem;
  font-family:   var(--font-tech);
  font-size:     8px;
  color:         var(--text-muted);
  background:    none;
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-sm);
  padding:       .5rem 1rem;
  cursor:        pointer;
  transition:    all .2s;
  text-decoration:none;
}
.btn-back:hover { color: var(--bz-blue); border-color: var(--bz-border-active); }

.timer { display: none; margin-top: 1.25rem; background: rgba(10, 14, 20, 0.7); border: 1px solid var(--bz-border); border-radius: var(--radius-md); padding: .75rem 1rem; }
.timer-label { font-size: 10px; color: var(--text-muted); margin-bottom: .25rem; }
.timer-value { font-family: var(--font-tech); font-size: 22px; color: var(--gold-bright); text-shadow: 0 0 12px rgba(245, 158, 11, 0.45); }

/* ── 21. Inventory ─────────────────────────────────────────── */
.rarity-card-common:hover    { border-color: rgba(156,163,175,.40) !important; }
.rarity-card-uncommon:hover  { border-color: rgba(16,185,129,.40)  !important; }
.rarity-card-rare:hover      { border-color: rgba(59,130,246,.40)  !important; }
.rarity-card-epic:hover      { border-color: rgba(168,85,247,.40)  !important; }
.rarity-card-legendary:hover { border-color: rgba(245,158,11,.40)  !important; box-shadow: 0 0 24px rgba(245,158,11,.20) !important; }

/* ── 22. Progress Bars ─────────────────────────────────────── */
.progress-bar-wrap {
  width:         100%;
  height:        10px;
  background:    rgba(10, 14, 20, 0.8);
  border-radius: 5px;
  border:        1px solid rgba(0, 207, 255, 0.15);
  overflow:      hidden;
}
.progress-bar-fill {
  height:        100%;
  border-radius: 5px;
  background:    linear-gradient(90deg, var(--bz-blue-dark), var(--bz-blue));
  transition:    width .6s ease;
  position:      relative;
}
.progress-bar-fill::after {
  content:    '';
  position:   absolute;
  top: 1px; left: 8px; right: 8px; bottom: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: 4px;
}
.progress-bar-fill.gold   { background: linear-gradient(90deg, var(--gold-dark),  var(--gold-bright)); }
.progress-bar-fill.blue   { background: linear-gradient(90deg, var(--bz-blue-dark), var(--bz-blue)); }
.progress-bar-fill.danger { background: linear-gradient(90deg, #770000, var(--accent-danger)); }

/* ── 23. Toast Notifications ───────────────────────────────── */
.toast-container {
  position:      fixed;
  bottom:        1.5rem;
  right:         1.25rem;
  z-index:       9999;
  display:       flex;
  flex-direction:column;
  gap:           .5rem;
  align-items:   flex-end;
  pointer-events:none;
}
.toast-item {
  background:    rgba(10, 14, 20, 0.97);
  border:        1px solid var(--bz-border-active);
  border-radius: var(--radius-md);
  padding:       .75rem 1.1rem;
  font-family:   var(--font-tech);
  font-size:     8px;
  color:         var(--bz-blue);
  box-shadow:    var(--bz-glow-blue);
  max-width:     260px;
  line-height:   1.6;
  pointer-events:all;
  animation:     toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
.toast-item.toast-error   { border-color: rgba(255,68,68,.55);  color: #ff8888;              box-shadow: 0 0 14px rgba(255,68,68,.30); }
.toast-item.toast-warning { border-color: rgba(255,153,0,.55);  color: var(--accent-warning); box-shadow: 0 0 14px rgba(255,153,0,.25); }
.toast-item.toast-gold    { border-color: var(--bz-amber-dim);  color: var(--gold-bright);    box-shadow: var(--glow-gold); }

@keyframes toastIn  { from { transform: translateX(60px); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes toastOut { to   { transform: translateX(60px); opacity:0; } }

/* ── 24. Footer ────────────────────────────────────────────── */
.footer-dark {
  position:   relative;
  margin-top: 4rem;
  background: rgba(10, 14, 20, 0.96);
  border-top: 1px solid var(--bz-border);
  overflow:   hidden;
}
.footer-grid {
  position:      absolute;
  inset:         0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 39px, rgba(0, 207, 255, 0.015) 40px),
    repeating-linear-gradient(90deg,  transparent, transparent 39px, rgba(0, 207, 255, 0.015) 40px);
}
.footer-brand       { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.footer-logo        { width: 38px; height: 38px; border-radius: var(--radius-sm); box-shadow: 0 0 10px rgba(0, 207, 255, 0.2); }
.footer-brand-name  { font-family: var(--font-tech); font-size: 12px; color: var(--bz-blue); text-shadow: 0 0 12px rgba(0, 207, 255, 0.4); letter-spacing: 1px; }
.footer-tagline     { font-size: 13px; color: var(--text-muted); margin-bottom: .75rem; display: flex; align-items: center; gap: .4rem; }
.footer-tagline i   { color: var(--gold-bright); }

.stat-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .35rem;
  font-family:   var(--font-tech);
  font-size:     8px;
  padding:       .3rem .6rem;
  background:    var(--bz-blue-dim);
  border:        1px solid var(--bz-border);
  border-radius: 20px;
  color:         var(--text-secondary);
  margin-right:  .4rem;
  margin-bottom: .4rem;
}
.stat-badge i { color: var(--bz-blue); font-size: 9px; }

.footer-title { font-family: var(--font-tech); font-size: 9px; color: var(--bz-blue); letter-spacing: .5px; margin-bottom: .75rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li    { margin-bottom: .4rem; }
.footer-links a     { font-size: 13px; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: .45rem; transition: color .2s; }
.footer-links a i   { font-size: 11px; width: 14px; color: var(--bz-blue-dark); transition: color .2s; }
.footer-links a:hover   { color: var(--bz-blue); }
.footer-links a:hover i { color: var(--bz-blue); }

.footer-social  { display: flex; gap: .6rem; flex-wrap: wrap; }
.social-link {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    var(--bz-blue-dim);
  border:        1px solid var(--bz-border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--text-muted);
  font-size:     16px;
  text-decoration:none;
  transition:    all .2s;
}
.social-link:hover { background: rgba(0, 207, 255, 0.15); border-color: var(--bz-border-active); color: var(--bz-blue); box-shadow: var(--bz-glow-blue); transform: translateY(-2px); }

.footer-bottom     { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(0, 207, 255, 0.08); }
.footer-copyright,
.footer-powered    { font-family: var(--font-tech); font-size: 8px; color: var(--text-muted); margin: 0; letter-spacing: .3px; }
.powered-link      { color: var(--bz-blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; transition: color .2s; }
.powered-link:hover{ color: var(--bz-blue); }

/* ── 25. Shared Animations ─────────────────────────────────── */
@keyframes fadeIn    { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 10px rgba(0, 207, 255, 0.25); } 50% { box-shadow:0 0 25px rgba(0, 207, 255, 0.55); } }
@keyframes goldPulse { 0%,100% { box-shadow:0 0 10px rgba(245, 158, 11, 0.25); } 50% { box-shadow:0 0 25px rgba(245, 158, 11, 0.55); } }

.animate-fade-in        { animation: fadeIn .35s ease both; }
.animate-pulse-green    { animation: pulseGlow 2s ease-in-out infinite; }
.animate-pulse-gold     { animation: goldPulse 2s ease-in-out infinite; }

/* ── 26. Utility & Bootstrap Overrides ─────────────────────── */

/* Direct override — Bootstrap uses !important on .text-muted */
.text-muted,
.text-muted *,
small.text-muted,
p.text-muted,
div.text-muted,
span.text-muted {
  color: var(--bz-muted) !important;
}

/* Slightly brighter muted for small labels inside dark cards */
.card .text-muted,
.card small.text-muted,
.card p.text-muted {
  color: var(--text-secondary) !important;
}

.text-success { color: var(--bz-blue)       !important; }
.text-danger  { color: var(--accent-danger)  !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-info    { color: var(--bz-blue)        !important; }
.bg-success   { background-color: rgba(0, 207, 255, 0.12) !important; }
.bg-danger    { background-color: rgba(255,68,68,.15)     !important; }
.bg-warning   { background-color: rgba(255,153,0,.15)     !important; }

.hide-mobile  { display: block; }
.hide-desktop { display: none; }
@media (max-width: 575px) {
  .hide-mobile  { display: none !important; }
  .hide-desktop { display: block !important; }
}

/* Prevent Bootstrap's .collapsing transition from hiding nav on desktop */
@media (min-width: 992px) {
  .navbar-collapse.collapsing {
    display:    flex !important;
    height:     auto !important;
    overflow:   visible !important;
    transition: none !important;
  }
}

/* Fix Bootstrap Modal fade */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.modal.fade .modal-dialog { transition: transform .2s ease-out; transform: translateY(-20px); }
.modal.show .modal-dialog { transform: none; }

/* Fix Bootstrap modal z-index stack */
.modal            { z-index: 1055 !important; }
.modal-backdrop   { z-index: 1050 !important; }
.modal-dialog     { position: relative; z-index: 1; pointer-events: auto; }
.modal-content    { pointer-events: auto; }

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px);
}
.modal-backdrop.show { opacity: 1 !important; }

/* ============================================================
   SECTION 27 — COMPONENTS
   ============================================================ */

/* ── C1. Stats Cards (dashboard) ───────────────────────────── */
.compact-stat-card {
  border-radius: var(--radius-md);
  padding:       1rem 1.25rem;
  box-shadow:    var(--shadow-card);
  border:        1px solid rgba(0, 207, 255, 0.12);
  transition:    transform .2s, box-shadow .2s;
  position:      relative;
  overflow:      hidden;
}
.compact-stat-card::before {
  content:    '';
  position:   absolute;
  top:0; left:0; right:0;
  height:     2px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent);
}
.compact-stat-card:hover { transform: translateY(-2px); box-shadow: var(--glow-gold); }

.stat-content  { flex: 1; min-width: 0; }
.stat-label    { font-size: 11px; opacity: .75; margin-bottom: .25rem; letter-spacing: .3px; }
.stat-value    { font-family: var(--font-tech); font-size: clamp(13px, 2vw, 18px); font-weight: 700; line-height: 1.2; margin-bottom: .2rem; }
.stat-subtext  { font-size: 10px; opacity: .65; letter-spacing: .5px; }
.stat-icon-wrapper { font-size: 1.5rem; opacity: .35; flex-shrink: 0; }

/* ── C2. Changelog ─────────────────────────────────────────── */
.changelog-item {
  padding:       .85rem 0;
  border-bottom: 1px solid var(--bz-border);
}
.changelog-item:last-child { border-bottom: none; }

.changelog-icon-wrapper {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--swamp-400), var(--swamp-300));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .8rem;
  color:         var(--gold-bright);
  border:        1px solid var(--bz-amber-dim);
  flex-shrink:   0;
}

/* Bootstrap badge overrides */
.badge.bg-success   { background: rgba(0, 207, 255, 0.15)  !important; color: var(--bz-blue)      !important; border: 1px solid rgba(0, 207, 255, 0.3); }
.badge.bg-warning   { background: rgba(255,153,0,.25)      !important; color: #ffcc66              !important; border: 1px solid rgba(255,153,0,.4); }
.badge.bg-info      { background: rgba(0,207,255,.20)      !important; color: var(--bz-blue)       !important; border: 1px solid rgba(0,207,255,.35); }
.badge.bg-danger    { background: rgba(255,68,68,.20)      !important; color: #ff8888              !important; border: 1px solid rgba(255,68,68,.35); }
.badge.bg-secondary { background: rgba(100,116,139,.25)    !important; color: var(--text-secondary) !important; border: 1px solid rgba(100,116,139,.35); }
.badge { font-family: var(--font-tech); font-size: 8px; letter-spacing: .3px; padding: .3rem .55rem; border-radius: var(--radius-sm); }

/* ── C3. Check-in Card ─────────────────────────────────────── */
.checkin-stat-box {
  background:    rgba(245, 158, 11, 0.07);
  border:        1px solid var(--bz-amber-dim);
  border-radius: var(--radius-sm);
  padding:       .5rem .4rem;
  text-align:    center;
}
.checkin-stat-value {
  font-family: var(--font-tech);
  font-size:   clamp(11px, 2vw, 16px);
  color:       var(--gold-bright);
  line-height: 1.2;
}
.checkin-stat-label {
  font-size:     9px;
  color:         var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-top:    .2rem;
}

/* Progress bar inside checkin card */
.checkin-card .progress,
.card .progress {
  background:    rgba(10, 14, 20, 0.8);
  border-radius: 4px;
  border:        1px solid rgba(0, 207, 255, 0.12);
  overflow:      hidden;
}
.card .progress-bar.bg-success  { background: linear-gradient(90deg, var(--bz-blue-dark), var(--bz-blue)) !important; }
.card .progress-bar.bg-warning  { background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright)) !important; }
.card .progress-bar.bg-info     { background: linear-gradient(90deg, var(--bz-blue-dark), var(--bz-blue)) !important; }

/* ── C4. Check-in Modals ───────────────────────────────────── */
#checkinSuccessModal,
#checkinErrorModal {
  position:   fixed;
  inset:      0;
  z-index:    2000;
  display:    flex !important;
  align-items:center;
  justify-content: center;
  padding:    1rem;
}
#checkinSuccessModal .modal-content,
#checkinErrorModal   .modal-content {
  max-width: 420px;
  width:     100%;
  animation: modalPop .25s ease;
}

/* ── C5. Mining Card ───────────────────────────────────────── */
.mining-rate-display {
  font-family: var(--font-mono);
  font-size:   1rem;
  color:       var(--gold-bright);
  display:     inline-flex;
  align-items: center;
  gap:         .4rem;
}
.mining-rate-display i { color: var(--bz-blue); }

.mining-status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  font-family:   var(--font-tech);
  font-size:     8px;
  padding:       .35rem .75rem;
  border-radius: 20px;
  border:        1px solid;
  letter-spacing:.3px;
}
.mining-status-badge.active {
  background:   var(--bz-blue-dim);
  border-color: var(--bz-border-active);
  color:        var(--bz-blue);
  animation:    pulseGlow 2s ease-in-out infinite;
}
.mining-status-badge.offline {
  background:   rgba(100,100,100,.12);
  border-color: rgba(100,100,100,.25);
  color:        var(--text-muted);
}

.mining-progress-box {
  background:    rgba(10, 14, 20, 0.6);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-md);
  padding:       1rem;
}

/* btn-outline-warning */
.btn-outline-warning {
  background:    transparent;
  border:        1px solid rgba(255,153,0,.45);
  color:         var(--accent-warning);
  font-family:   var(--font-tech);
  font-size:     8px;
  padding:       .4rem .8rem;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    all .2s;
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
}
.btn-outline-warning:hover { background: rgba(255,153,0,.12); border-color: var(--accent-warning); }

/* ── C6. Referral Section ──────────────────────────────────── */
#referrals .section-header { text-align: left; }
#referrals .section-header h3 { text-align: left; }
#referrals .section-divider   { margin: .5rem 0; }

/* Input group (referral link) */
.input-group {
  display:   flex;
  gap:       0;
  width:     100%;
}
.input-group .form-control {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right:  none;
  flex:          1;
}
.input-group .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex-shrink:   0;
}

/* ── C7. Wheel Canvas ──────────────────────────────────────── */
.wheel-pointer {
  width:         0;
  height:        0;
  border-left:   12px solid transparent;
  border-right:  12px solid transparent;
  border-top:    20px solid var(--gold-bright);
  margin:        0 auto;
  filter:        drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
  position:      relative;
  z-index:       2;
}

#wheelCanvas {
  border-radius: 50% !important;
  box-shadow:    0 0 40px rgba(0, 207, 255, 0.20), 0 0 80px rgba(0,0,0,.5);
  border:        3px solid var(--bz-border-active) !important;
  cursor:        pointer;
}

.wheel-spin-button {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--gold-dark), var(--gold-bright));
  color:         var(--n-900);
  border:        3px solid rgba(255,255,255,.25);
  font-size:     1.3rem;
  cursor:        pointer;
  transition:    all .2s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 0 20px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(0,0,0,.4);
  animation:     goldPulse 2s ease-in-out infinite;
  z-index:       10;
}
.wheel-spin-button:hover:not(:disabled) {
  transform:  translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 32px rgba(245, 158, 11, 0.65), 0 4px 16px rgba(0,0,0,.5);
}
.wheel-spin-button:disabled {
  opacity:   .5;
  cursor:    not-allowed;
  animation: none;
}

/* ── C8. Wheel Status & Ticket Card ────────────────────────── */
.wheel-status-alert { margin-top: .75rem; }

.ticket-count-box {
  background:    rgba(10, 14, 20, 0.6);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-sm);
  padding:       .9rem 1rem;
  display:       flex;
  align-items:   center;
  gap:           .85rem;
}

/* ── C9. Inventory Items Grid ──────────────────────────────── */
.expiry-pulse {
  animation: expiryBlink 1.5s ease-in-out infinite;
}
@keyframes expiryBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}

.activate-btn {
  font-family:   var(--font-tech) !important;
  font-size:     8px !important;
  letter-spacing:.3px;
}

/* btn-warning */
.btn-warning {
  background:  linear-gradient(135deg, var(--gold-dark), var(--gold-bright));
  color:       var(--n-900);
  border:      none;
  font-family: var(--font-tech);
  font-size:   9px;
  padding:     .65rem 1.25rem;
  border-radius: var(--radius-sm);
  cursor:      pointer;
  transition:  all .18s;
  display:     inline-flex;
  align-items: center;
  gap:         .45rem;
  letter-spacing: .5px;
}
.btn-warning:hover:not(:disabled) {
  background:  linear-gradient(135deg, var(--gold-bright), #fbbf24);
  box-shadow:  var(--glow-gold);
  transform:   translateY(-2px);
  color:       var(--n-900);
}
.btn-warning.btn-sm { font-size: 8px; padding: .4rem .8rem; }

.btn-secondary {
  background:    rgba(15, 21, 32, 0.8);
  border:        1px solid var(--bz-border);
  color:         var(--text-secondary);
  font-family:   var(--font-tech);
  font-size:     9px;
  padding:       .65rem 1.25rem;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    all .18s;
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  letter-spacing:.5px;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--bz-border-active); color: var(--bz-blue); background: var(--bz-blue-dim); }
.btn-secondary:disabled              { opacity: .45; cursor: not-allowed; }
.btn-secondary.btn-sm { font-size: 8px; padding: .4rem .8rem; }

/* ── C10. Active Boost Card — SVG circle timer ─────────────── */
.boost-circle-track {
  fill:         none;
  stroke:       rgba(0, 207, 255, 0.12);
  stroke-width: 6;
}
.boost-circle-bar {
  fill:             none;
  stroke:           var(--bz-blue);
  stroke-width:     6;
  stroke-linecap:   round;
  transition:       stroke-dashoffset .6s ease;
  filter:           drop-shadow(0 0 6px rgba(0, 207, 255, 0.6));
}

/* ── C11. Reward Items (available-items-card) ──────────────── */
.reward-item {
  display:       flex;
  align-items:   center;
  gap:           .65rem;
  padding:       .55rem 0 .55rem .6rem;
  border-bottom: 1px solid var(--bz-border);
  border-left:   3px solid transparent;
  transition:    border-color .2s;
}
.reward-item:last-child { border-bottom: none; }
.reward-item:hover      { border-left-color: var(--bz-blue-dark); }

.reward-icon {
  width:         30px;
  height:        30px;
  border-radius: 4px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .8rem;
  color:         #fff;
  flex-shrink:   0;
}

/* ── C12. Win Result Modal ─────────────────────────────────── */
.confetti-canvas {
  position:      fixed;
  inset:         0;
  z-index:       2998;
  pointer-events:none;
  width:         100vw;
  height:        100vh;
}

.win-modal-overlay {
  position:      fixed;
  inset:         0;
  z-index:       2999;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
  padding:       1rem;
}
.win-modal-content {
  background:    var(--modal-bg);
  border:        1px solid var(--bz-amber-dim);
  border-radius: var(--radius-xl);
  padding:       2rem 1.75rem;
  width:         min(420px, 95vw);
  text-align:    center;
  position:      relative;
  overflow:      hidden;
  box-shadow:    0 0 60px rgba(0,0,0,.8), var(--glow-gold);
  animation:     modalPop .3s ease;
}

/* ── C13. Withdrawal Card ──────────────────────────────────── */
.withdrawal-progress-wrap {
  background:    rgba(10, 14, 20, 0.5);
  border:        1px solid var(--bz-border);
  border-radius: var(--radius-md);
  padding:       1.1rem;
}

/* ── C14. Inline style variable resolution ──────────────────── */
[style*="color:var(--text-muted)"],
[style*="color: var(--text-muted)"] {
  color: var(--bz-muted) !important;
}
[style*="color:var(--text-secondary)"],
[style*="color: var(--text-secondary)"] {
  color: var(--text-secondary) !important;
}

/* small tags inside cards */
.card small,
.card-body small {
  color: var(--text-secondary);
  font-size: 0.82em;
}

/* Compact stat card readability */
.compact-stat-card .stat-label,
.compact-stat-card .stat-subtext { opacity: .78; color: inherit; }

/* Changelog history items */
.changelog-item small,
.changelog-item .text-muted { color: var(--text-secondary) !important; }

/* Check-in card labels */
.checkin-stat-label { color: var(--text-muted) !important; }

/* Wheel ticket card inner label */
.ticket-count-box > div:last-child { color: var(--text-muted); }

/* Available-items-card probability + description text */
.reward-item > div:last-child,
.reward-item [style*="color:var(--text-muted)"] { color: var(--text-secondary) !important; }

/* Withdrawal card tip list */
.withdrawal-progress-wrap small,
.card ul li span { color: var(--text-secondary); }

/* Mining card offline state */
.mining-progress-box small,
#faucet .text-muted { color: var(--text-secondary) !important; }

/* Daily boost limit card */
.card [style*="color:var(--text-muted)"] { color: var(--text-secondary) !important; }

/* ── C15. Inventory no-boost dashed card ───────────────────── */
.card.dashed-border,
div[style*="border: 2px dashed"] {
  background: rgba(10, 14, 20, 0.6) !important;
}

/* ── C16. Scrollable inner lists (available-items-card) ─────── */
.reward-scroll {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── C17. Stats row in ptc (input-group) ────────────────────── */
.col-sm-6 .card .d-flex.align-items-center { flex-wrap: nowrap; }