/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a26;--bg-card:#16161f;
  --border:#2a2a3a;--text-primary:#e8e8f0;--text-secondary:#9090a8;--text-muted:#606078;
  --accent:#d4790a;--accent-light:#f5a623;
  --green:#22c55e;--red:#ef4444;--yellow:#eab308;--blue:#3b82f6;--purple:#a855f7;
  --radius:10px;--radius-sm:6px;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;}

/* Header */
.header{background:linear-gradient(135deg,var(--bg-secondary),var(--bg-primary));border-bottom:1px solid var(--border);padding:1.5rem 2rem;position:relative;}
.header-inner h1{font-size:1.6rem;font-weight:700;letter-spacing:-0.02em;}
.header-inner .accent{color:var(--accent);margin-right:.3rem;}
.header-inner .subtitle{color:var(--text-secondary);font-size:.85rem;margin-top:.2rem;}
.status-bar{position:absolute;right:2rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-muted);}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.5);}
.cache-badge{background:rgba(59,130,246,.15);color:var(--blue);padding:.1rem .4rem;border-radius:4px;font-size:.7rem;font-weight:600;}

/* Tab Bar */
.tab-bar{display:flex;padding:0 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);gap:0;}
.tab-btn{padding:.75rem 1.5rem;background:transparent;color:var(--text-muted);border:none;border-bottom:2px solid transparent;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;}
.tab-btn:hover{color:var(--text-primary);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* Controls */
.controls{display:flex;flex-wrap:wrap;gap:1rem;padding:1.2rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);align-items:flex-end;}
.control-group{display:flex;flex-direction:column;gap:.3rem;}
.control-group label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;}
.controls select,.controls input[type="month"]{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);padding:.5rem .7rem;border-radius:var(--radius-sm);font-size:.85rem;min-width:140px;outline:none;transition:border-color .2s;}
.controls select:focus,.controls input:focus{border-color:var(--accent);}
.btn{padding:.55rem 1.2rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;}
.btn-primary{background:var(--accent);color:#fff;}.btn-primary:hover{background:var(--accent-light);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--accent);}
.btn-secondary:disabled{opacity:.4;cursor:not-allowed;}
.btn-sm{background:transparent;color:var(--text-muted);border:1px solid var(--border);padding:.2rem .5rem;font-size:.85rem;border-radius:4px;cursor:pointer;}

/* Error */
.error-banner{margin:1rem 2rem;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);padding:.8rem 1rem;display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:#fca5a5;}

/* Welcome */
.welcome{display:flex;justify-content:center;padding:4rem 2rem;}
.welcome-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem;max-width:550px;text-align:center;}
.welcome-card h2{font-size:1.3rem;margin-bottom:.8rem;}
.welcome-card p{color:var(--text-secondary);margin-bottom:1.2rem;font-size:.9rem;}
.welcome-card ul{text-align:left;list-style:none;display:inline-block;}
.welcome-card li{padding:.3rem 0;color:var(--text-secondary);font-size:.85rem;}
.welcome-card li::before{content:"▸ ";color:var(--accent);}

/* App */
.app{padding:1.5rem 2rem;}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);}
.card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;}
.card-value{font-size:1.5rem;font-weight:700;margin-top:.3rem;font-variant-numeric:tabular-nums;}

/* Panels */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem;overflow:hidden;}
.panel h2{font-size:1rem;padding:1rem 1.2rem .6rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);}
.panel-hint{padding:.5rem 1.2rem;font-size:.78rem;color:var(--text-muted);font-style:italic;}
.panel-warn{border-color:rgba(234,179,8,.3);}
.panel-warn h2{background:rgba(234,179,8,.05);}

/* Price Status */
.price-status{padding:.5rem 1.2rem;font-size:.78rem;color:var(--text-secondary);display:flex;align-items:center;gap:.5rem;}
.spinner-sm{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Tables */
.table-wrap{overflow-x:auto;}
.scroll-table{max-height:420px;overflow-y:auto;}
.scroll-table::-webkit-scrollbar{width:6px;}
.scroll-table::-webkit-scrollbar-track{background:var(--bg-tertiary);}
.scroll-table::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
table{width:100%;border-collapse:collapse;font-size:.82rem;}
thead th{position:sticky;top:0;background:var(--bg-secondary);padding:.6rem .8rem;text-align:left;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td{padding:.55rem .8rem;border-bottom:1px solid rgba(42,42,58,.5);white-space:nowrap;vertical-align:middle;}
tbody tr:hover{background:rgba(212,121,10,.04);}
tbody tr:last-child td{border-bottom:none;}

/* Badges */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge-in{background:rgba(34,197,94,.15);color:var(--green);}
.badge-out{background:rgba(239,68,68,.15);color:var(--red);}
.badge-self{background:rgba(234,179,8,.15);color:var(--yellow);}
.badge-neutral{background:rgba(144,144,168,.15);color:var(--text-secondary);}
.badge-cat-airdrop{background:rgba(168,85,247,.15);color:var(--purple);}
.badge-cat-reward{background:rgba(59,130,246,.15);color:var(--blue);}
.badge-cat-payment{background:rgba(34,197,94,.15);color:var(--green);}
.badge-cat-other{background:rgba(144,144,168,.15);color:var(--text-secondary);}
.badge-no-market{background:rgba(234,179,8,.15);color:var(--yellow);}
.badge-dex{background:rgba(59,130,246,.15);color:var(--blue);}

.text-green{color:var(--green)}.text-red{color:var(--red)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-yellow{color:var(--yellow)}
.mono{font-family:'SF Mono','Fira Code',monospace;font-size:.75rem;}

/* Search Row */
.search-row{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.2rem;border-bottom:1px solid var(--border);}
.search-row input{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);padding:.4rem .7rem;border-radius:var(--radius-sm);font-size:.82rem;outline:none;}
.search-row input:focus{border-color:var(--accent);}

/* Loading */
.loading-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem;}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
.progress-text{font-size:.82rem;color:var(--text-secondary);}
.progress-bar-bg{width:200px;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;}
.progress-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;}

/* Calculator Grid */
.calc-grid{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;}
.calc-header-row{display:grid;grid-template-columns:100px 100px 140px 1fr;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600;}
.calc-row{display:grid;grid-template-columns:100px 100px 140px 1fr;gap:.5rem;padding:.5rem 0;align-items:center;border-bottom:1px solid rgba(42,42,58,.3);}
.calc-cur{font-size:.85rem;}
.calc-bal{font-size:.82rem;color:var(--text-secondary);}

/* Slider Section */
.slider-section{padding:1rem 1.2rem;border-top:1px solid var(--border);background:var(--bg-secondary);}
.slider-section label{font-size:.9rem;margin-bottom:.5rem;display:block;}
.slider-section input[type="range"]{-webkit-appearance:none;width:100%;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none;margin-top:.3rem;}
.slider-section input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer;}
.slider-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted);margin-top:.3rem;}

/* ZAR Row */
.zar-row{padding:.6rem 1.2rem;display:flex;align-items:center;gap:.8rem;}

/* Result Cards */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem 1.2rem;}
.result-card{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;position:relative;overflow:hidden;}
.result-mid::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--green);}
.result-slip::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow);}
.result-depth::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);}
.rc-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600;margin-bottom:.6rem;}
.rc-row{display:flex;justify-content:space-between;padding:.3rem 0;font-size:.85rem;border-bottom:1px solid rgba(42,42,58,.3);}
.rc-row:last-of-type{border-bottom:none;}
.rc-cur{color:var(--text-secondary);font-size:.75rem;text-transform:uppercase;}
.rc-val{font-weight:700;font-variant-numeric:tabular-nums;}
.rc-note{font-size:.7rem;color:var(--text-muted);font-style:italic;margin-top:.5rem;}

/* Calc Actions */
.calc-actions{padding:.8rem 1.2rem;display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--border);}

/* DEX Progress */
#dex-progress{display:none;}
#dex-progress .spinner-sm{display:inline-block;vertical-align:middle;}

/* Footer */
.footer{text-align:center;padding:1.5rem;color:var(--text-muted);font-size:.75rem;border-top:1px solid var(--border);}

/* Responsive */
@media(max-width:768px){
  .header{padding:1rem;}.controls{padding:1rem;gap:.7rem;}.app{padding:1rem;}
  .tab-bar{padding:0 1rem;}.card-value{font-size:1.2rem;}
  table{font-size:.75rem;}thead th,tbody td{padding:.4rem .5rem;}
  .calc-header-row,.calc-row{grid-template-columns:80px 80px 100px 1fr;gap:.3rem;}
  .results-grid{grid-template-columns:1fr;}
}