/* ═══════════════════════════════════════════════════════
   THEME-LIGHT.CSS — Block MINING
   ONLY color/theme overrides — zero layout changes
   Load after style.css
   ═══════════════════════════════════════════════════════ */

/* ── 1. BACKGROUND ── */
html, body {
  background: #F4F7FB !important;
  color: #0F172A !important;
}
.bg1 {
  background:
    radial-gradient(ellipse 680px 480px at 5% -5%,   rgba(39,216,255,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 520px 420px at 98% 105%, rgba(126,235,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 360px 260px at 58% 40%,  rgba(39,216,255,0.05) 0%, transparent 70%),
    linear-gradient(160deg, #F6FAFE 0%, #EDF3FB 40%, #E8F0F9 100%) !important;
}

/* ── 2. MINING SCREEN ── */
#screen-mine { background: transparent !important; }
#mining-bg-canvas { opacity: 0.18 !important; mix-blend-mode: multiply !important; }

#mining-three-container canvas {
  filter:
    drop-shadow(0 0 4px rgba(39,216,255,0.85))
    drop-shadow(0 0 14px rgba(39,216,255,0.40))
    drop-shadow(0 0 32px rgba(39,216,255,0.16))
    brightness(1.06) !important;
}

#screen-mine > div > div:first-child {
  background: rgba(255,255,255,0.84) !important;
  border: 1px solid rgba(39,216,255,0.22) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(39,216,255,0.12), 0 1px 0 rgba(255,255,255,0.95) inset !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

#screen-mine [style*="color:rgba(0,229,255,.45)"] { color: rgba(8,145,178,0.70) !important; }
#screen-mine [style*="color:rgba(8,145,178,.55)"]  { color: rgba(8,145,178,0.75) !important; }
#screen-mine [style*="color:rgba(168,85,247,.45)"] { color: rgba(124,58,237,0.70) !important; }
#screen-mine [style*="color:rgba(255,255,255,.4)"] { color: rgba(15,23,42,0.55) !important; }
#screen-mine [style*="color:rgba(255,255,255,.3)"] { color: rgba(15,23,42,0.45) !important; }
#screen-mine [style*="color:#00e5ff"]              { color: #0891b2 !important; }
#screen-mine [style*="color:#a855f7"]              { color: #7c3aed !important; }
#screen-mine [style*="color:#fbbf24"]              { color: #d97706 !important; }

#screen-mine [style*="background:rgba(0,0,0,.45)"] {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(39,216,255,0.20) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 12px rgba(39,216,255,0.10), 0 1px 0 rgba(255,255,255,0.95) inset !important;
}

#screen-mine [style*="background:rgba(255,255,255,.07)"][style*="border-radius:20px"] {
  background: rgba(39,216,255,0.12) !important;
}
#mining-energy-bar {
  background: linear-gradient(90deg, #27D8FF, #7EEBFF) !important;
  box-shadow: 0 0 8px rgba(39,216,255,0.50) !important;
}
#mining-swap-btn {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(39,216,255,0.28) !important;
  color: #0891b2 !important;
}
#screen-mine [style*="height:1px"][style*="linear-gradient"] {
  background: linear-gradient(90deg, transparent, rgba(39,216,255,0.25), transparent) !important;
}

/* ── 3. SPIN OVERLAY ── */
#spin-overlay {
  background: rgba(230,240,250,0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
#spin-overlay [style*="color:rgba(255,255,255,.35)"],
#spin-overlay [style*="color:rgba(255,255,255,.3)"]  { color: rgba(15,23,42,0.45) !important; }
#spin-overlay [style*="color:#00e5ff"]               { color: #0891b2 !important; }
#spin-result  { background: rgba(220,235,250,0.80) !important; }
#spin-result-card {
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(39,216,255,0.28) !important;
  box-shadow: 0 0 40px rgba(39,216,255,0.18) !important;
}
#spin-result [style*="color:rgba(255,255,255,.2)"] { color: rgba(15,23,42,0.35) !important; }

/* ── 4. SWAP MODAL ── */
#swap-modal { background: rgba(220,235,250,0.80) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
#swap-modal > div { background: rgba(255,255,255,0.97) !important; border: 1px solid rgba(39,216,255,0.22) !important; }
#swap-modal [style*="color:rgba(255,255,255,.35)"],
#swap-modal [style*="color:rgba(255,255,255,.4)"],
#swap-modal [style*="color:rgba(255,255,255,.3)"]  { color: rgba(15,23,42,0.50) !important; }
#swap-modal [style*="color:#00e5ff"]               { color: #0891b2 !important; }
#swap-modal [style*="background:rgba(0,229,255,.06)"] { background: rgba(39,216,255,0.07) !important; }
#swap-modal-input { background: rgba(255,255,255,0.92) !important; border-color: rgba(39,216,255,0.25) !important; color: #0F172A !important; }
#swap-success-overlay { background: rgba(230,240,250,0.92) !important; backdrop-filter: blur(14px) !important; }
#swap-success-overlay [style*="color:rgba(255,255,255,.4)"],
#swap-success-overlay [style*="color:rgba(255,255,255,.2)"] { color: rgba(15,23,42,0.45) !important; }

/* ── 5. BOOST MODAL ── */
#boost-modal { background: rgba(220,235,250,0.80) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
#boost-modal > div { background: rgba(255,255,255,0.97) !important; border: 1px solid rgba(39,216,255,0.20) !important; }
#boost-modal [style*="color:rgba(255,255,255,.4)"],
#boost-modal [style*="color:rgba(255,255,255,.35)"],
#boost-modal [style*="color:rgba(255,255,255,.2)"]  { color: rgba(15,23,42,0.50) !important; }
#boost-modal [style*="color:#fff"][style*="font-size:20px"] { color: #0F172A !important; }

/* ── 6. BLK LEADERBOARD ── */
#blk-leaderboard-modal { background: rgba(220,235,250,0.80) !important; backdrop-filter: blur(14px) !important; }
#blk-leaderboard-modal > div { background: rgba(255,255,255,0.97) !important; border: 1px solid rgba(39,216,255,0.20) !important; }
#blk-lb-list [style*="background:rgba(255,255,255,.04)"] { background: rgba(255,255,255,0.80) !important; border-color: rgba(39,216,255,0.14) !important; }
#blk-lb-list [style*="color:#fff"],
#blk-leaderboard-modal [style*="color:#fff"]       { color: #0F172A !important; }
#blk-lb-list [style*="color:rgba(255,255,255,.3)"],
#blk-leaderboard-modal [style*="color:rgba(255,255,255,.3)"] { color: rgba(15,23,42,0.45) !important; }
#blk-lb-list [style*="color:#00e5ff"]              { color: #0891b2 !important; }

/* ── 7. MINING CALC MODAL ── */
#mining-calc-modal { background: rgba(220,235,250,0.80) !important; backdrop-filter: blur(14px) !important; }
#mining-calc-modal > div { background: rgba(255,255,255,0.97) !important; border: 1px solid rgba(39,216,255,0.20) !important; }
#mining-calc-modal [style*="color:rgba(255,255,255,.4)"],
#mining-calc-modal [style*="color:rgba(255,255,255,.3)"]  { color: rgba(15,23,42,0.50) !important; }
#mining-calc-modal [style*="color:#00e5ff"]               { color: #0891b2 !important; }
#mining-calc-modal [style*="background:rgba(0,229,255,.06)"] { background: rgba(39,216,255,0.07) !important; border-color: rgba(39,216,255,0.16) !important; }
#calc-input { background: rgba(255,255,255,0.92) !important; border-color: rgba(39,216,255,0.25) !important; color: #0F172A !important; }

/* ── 8. LANGUAGE CHEVRON ── */
[style*="stroke:rgba(255,255,255,.4)"] { stroke: rgba(39,216,255,0.55) !important; }
