:root { --bg:#0b0f16; --card:#131a25; --text:#e7eefc; --muted:#93a0b4; --highlight:#f7931a; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
header{padding:16px 20px;border-bottom:1px solid #1f2a3a}
h1{margin:0 0 8px 0;font-size:22px;color:var(--highlight)}
.btc-price{font-size:14px;font-weight:600;color:var(--highlight);padding:8px 12px;background:#1b2740;border:1px solid #2a3a52;border-radius:8px;white-space:nowrap;margin-left:auto}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.controls input#addr{min-width:320px;padding:10px;border-radius:8px;border:1px solid #2a3a52;background:#0e1520;color:var(--text)}
.controls button{padding:10px 14px;border:1px solid #2a3a52;background:#1b2740;color:var(--text);border-radius:8px;cursor:pointer}
.controls .auto{color:var(--muted)}
main{padding:16px 20px}
.proximityBlock{margin-bottom:18px}
.proximityCard{background:linear-gradient(135deg, #1a2332 0%, #131a25 100%);padding:20px;border-radius:12px;border:2px solid #2a3a52;text-align:center}
.proximityLabel{font-size:14px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.proximityValue{font-size:32px;font-weight:bold;color:var(--highlight);margin-bottom:8px}
.proximityDetail{font-size:13px;color:var(--muted)}
.blockInfoSection{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px}
.blockInfoCard{background:var(--card);padding:16px;border-radius:10px;border:1px solid #2a3a52;text-align:center}
.blockInfoLabel{font-size:12px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}
.blockInfoValue{font-size:24px;font-weight:bold;color:var(--text);margin-bottom:6px}
.blockInfoDetail{font-size:12px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:18px}
.card{background:var(--card);padding:12px;border-radius:10px;border:1px solid #1f2a3a}
.card .label{font-size:12px;color:var(--muted);margin-bottom:6px}
.card .value{font-size:18px}
.chartBlock{background:var(--card);padding:12px;border-radius:10px;border:1px solid #1f2a3a;margin-bottom:18px;min-height:250px}
.chartBlock h2{margin-top:0;margin-bottom:12px;font-size:18px}
.chartBlock canvas{max-height:300px}
.tableWrap{overflow:auto;background:var(--card);border-radius:10px;border:1px solid #1f2a3a}
table{width:100%;border-collapse:collapse;color:var(--text)}
th,td{padding:10px;border-bottom:1px solid #1f2a3a;white-space:nowrap}
th{color:var(--muted);text-align:left;font-weight:600}
footer{padding:16px 20px;color:var(--muted);border-top:1px solid #1f2a3a;text-align:center}
.networkContext{margin-bottom:18px}
.networkContext h2{margin-top:0;margin-bottom:12px;font-size:18px}
.networkCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.networkCard{background:var(--card);padding:16px;border-radius:10px;border:1px solid #2a3a52}
.networkLabel{font-size:12px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.networkValue{font-size:24px;font-weight:bold;color:var(--text);margin-bottom:6px}
.networkDetail{font-size:12px;color:var(--muted)}
.networkFees{display:flex;gap:16px;justify-content:space-around}
.feeItem{display:flex;flex-direction:column;align-items:center;gap:6px}
.feeLabel{font-size:11px;color:var(--muted);text-transform:uppercase}
.feeValue{font-size:20px;font-weight:bold;color:var(--highlight)}
.soloOdds{margin-bottom:18px}
.soloOdds h2{margin-top:0;margin-bottom:12px;font-size:18px}
.oddsCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.oddsCard{background:linear-gradient(135deg, #1a2332 0%, #131a25 100%);padding:16px;border-radius:10px;border:2px solid #2a3a52;text-align:center}
.oddsLabel{font-size:12px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.oddsValue{font-size:26px;font-weight:bold;color:var(--highlight);margin-bottom:6px}
.oddsDetail{font-size:11px;color:var(--muted)}
.emptyState{color:var(--muted);text-align:center;padding:40px 20px;font-size:14px;font-style:italic}
.revPanel{margin-bottom:18px}
.revPanel h2{margin-top:0;margin-bottom:12px;font-size:18px}
.revGrid{display:grid;grid-template-columns:320px 1fr;gap:20px;background:var(--card);padding:16px;border-radius:10px;border:1px solid #2a3a52}
.revForm{display:flex;flex-direction:column;gap:12px}
.revForm label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.revForm input,.revForm select{padding:8px;border-radius:6px;border:1px solid #2a3a52;background:#0e1520;color:var(--text);font-size:14px}
.revCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
@media(max-width:768px){
  .revGrid{grid-template-columns:1fr}
  .revCards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .controls input#addr{min-width:100%;width:100%}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .chartBlock{min-height:200px}
  .chartBlock canvas{max-height:220px}
  .proximityValue{font-size:28px}
}
.healthPanel{background:#131a25;border:1px solid #1f2a3a;border-radius:12px;padding:14px;margin-bottom:18px}
.healthPanel h2{margin:0 0 12px 0}
.healthPanel .cards{background:#0e1520;border:1px solid #1f2a3a;border-radius:10px;padding:12px;margin-bottom:10px}
.healthPanel .label{font-size:12px;color:#93a0b4;margin-bottom:6px}
.healthPanel .value{font-size:22px}
.healthPanel .small{font-size:12px;color:#93a0b4;margin-top:6px}
.feeBadges{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #2a3a52;background:#101a29;font-size:13px}
.pill .pillLabel{color:#93a0b4}
.low{border-color:#0f6;color:#0f6}
.med{border-color:#ffbf00;color:#ffbf00}
.high{border-color:#ff3b30;color:#ff3b30}
.summary{margin-top:8px;padding:10px 12px;border:1px dashed #2a3a52;border-radius:10px;color:#d7e3f7;background:#0e1520}
.oddsSelector{background:#0e1520;border:1px solid #1f2a3a;border-radius:10px;padding:12px;margin-bottom:10px}
.oddsSelector label{display:block;font-size:12px;color:#93a0b4;margin-bottom:8px}
.hashrateControls{display:flex;gap:8px;align-items:center}
.hashrateControls select,.hashrateControls input{flex:1;padding:8px 12px;border-radius:6px;border:1px solid #2a3a52;background:#101a29;color:var(--text);font-size:14px}
.hashrateControls input{max-width:200px}
.poolLeaderboard{background:#131a25;border:1px solid #1f2a3a;border-radius:12px;padding:14px;margin-bottom:18px}
.plHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.plHeader h2{margin:0}
.plHeader select{padding:8px 10px;border-radius:8px;border:1px solid #2a3a52;background:#0e1520;color:#e7eefc}
.plGrid{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start}
.plChartWrap{min-height:400px;height:400px;width:100%}
#poolShareChart{color-scheme:dark;filter:none !important;width:100%;height:100%}
.plLegend{background:#0e1520;border:1px solid #1f2a3a;border-radius:10px;padding:10px;max-height:400px;overflow:auto;width:280px}
.legendRow{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1f2a3a;padding:8px 6px}
.legendRow:last-child{border-bottom:none}
.legendName{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid #2a3a52}
@media (max-width:900px){.plGrid{grid-template-columns:1fr}}

/* Skeleton Loaders */
.skeleton{background:linear-gradient(90deg, #1a2332 25%, #1f2a3a 50%, #1a2332 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:18px;margin:6px 0}
.skeleton-title{height:24px;width:60%;margin-bottom:12px}
.skeleton-value{height:32px;margin:8px 0}
.skeleton-chart{height:250px;margin:12px 0}

/* Fade-in Animation */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn 0.3s ease-out forwards}
.hidden{display:none}

/* Theme Toggle */
.theme-toggle{background:#1b2740;border:1px solid #2a3a52;border-radius:8px;padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text)}
.theme-toggle:hover{background:#243050}

/* Light Theme */
body.light-theme{--bg:#f5f7fa;--card:#ffffff;--text:#1a202c;--muted:#64748b;--highlight:#f7931a}
body.light-theme header{border-bottom-color:#e2e8f0}
body.light-theme .controls input#addr{border-color:#cbd5e1;background:#ffffff}
body.light-theme .controls button{border-color:#cbd5e1;background:#f1f5f9}
body.light-theme select{border-color:#cbd5e1 !important;background:#ffffff !important;color:#1a202c !important}
body.light-theme .btc-price{background:#f1f5f9;border-color:#cbd5e1}
body.light-theme .plHeader select{border-color:#cbd5e1;background:#ffffff;color:#1a202c}
body.light-theme .plLegend{background:#ffffff;border-color:#e2e8f0}
body.light-theme .card,body.light-theme .chartBlock,body.light-theme .tableWrap,body.light-theme .networkCard{border-color:#e2e8f0}
body.light-theme th,body.light-theme td{border-bottom-color:#e2e8f0}
body.light-theme .skeleton{background:linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%)}
body.light-theme .proximityCard,body.light-theme .oddsCard{background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border-color:#cbd5e1}
body.light-theme .healthPanel,body.light-theme .poolLeaderboard{background:#ffffff;border-color:#e2e8f0}
body.light-theme .healthPanel .cards,body.light-theme .plLegend,body.light-theme .oddsSelector{background:#f8fafc;border-color:#e2e8f0}
body.light-theme .summary{background:#f8fafc;border-color:#cbd5e1;color:#475569}
body.light-theme .pill{background:#f1f5f9;border-color:#cbd5e1}
body.light-theme .legendRow{border-bottom-color:#e2e8f0}
body.light-theme #poolShareChart{color-scheme:light}

/* Donation Section */
.donateHero{background:linear-gradient(135deg, #1a2332 0%, #131a25 100%);border:2px solid #2a3a52;border-radius:12px;padding:24px;margin:24px 0;text-align:center}
.donateHero h2{margin:0 0 8px 0;font-size:24px;color:var(--highlight)}
.donateHero h2 .muted{color:var(--muted);font-weight:400}
.donateHero p{color:var(--muted);margin:0 0 6px 0}
.donateHero p:last-of-type{margin:0 0 20px 0}
.addrRow{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:12px}
.addrRow code{background:#0e1520;border:1px solid #2a3a52;padding:10px 16px;border-radius:8px;color:var(--text);font-size:15px;font-family:ui-monospace,monospace}
.addrRow .btn{padding:10px 20px;border:1px solid var(--highlight);background:transparent;color:var(--highlight);border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.2s}
.addrRow .btn:hover{background:var(--highlight);color:#0b0f16}
.addrLinks{margin-bottom:20px}
.addrLinks a{color:var(--highlight);text-decoration:none;font-size:14px}
.addrLinks a:hover{text-decoration:underline}
.qrWrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}
.qrWrap #qr{background:#0e1520;padding:12px;border-radius:8px;border:1px solid #2a3a52}
.qrWrap .small{font-size:13px;max-width:280px}
.creditsCard{background:#0e1520;border:1px solid #2a3a52;border-radius:10px;padding:20px;max-width:500px;margin:0 auto;text-align:left}
.creditsCard h3{margin:0 0 12px 0;font-size:16px;color:var(--text)}
.creditsCard ul{margin:0 0 12px 0;padding-left:20px}
.creditsCard li{margin:6px 0;color:var(--text)}
.creditsCard strong{color:var(--highlight)}
.creditsCard .small{margin:0}

/* Light theme overrides for donate section */
body.light-theme .donateHero{background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border-color:#cbd5e1}
body.light-theme .addrRow code,body.light-theme .qrWrap #qr,body.light-theme .creditsCard{background:#ffffff;border-color:#cbd5e1}