*{margin:0;padding:0;box-sizing:border-box}
:root{--radius:8px;--gap:12px}

[data-theme="dark"]{
  --bg:#0c1017;--bg2:#141a25;--card:#1a2233;--card2:#1e2a3d;
  --border:#243049;--border2:#2d3d5a;
  --text:#edf0f7;--text2:#a0aec0;--dim:#5a6a85;
  --green:#34d399;--green-soft:rgba(52,211,153,.08);--green-border:rgba(52,211,153,.25);
  --red:#f87171;--red-soft:rgba(248,113,113,.08);--red-border:rgba(248,113,113,.25);
  --blue:#60a5fa;--yellow:#fbbf24;--purple:#a78bfa;--purple-soft:rgba(167,139,250,.1);
  --card-hover:#1f2d44;--input-bg:#111827;
  --shadow:0 2px 8px rgba(0,0,0,.3)
}
[data-theme="light"]{
  --bg:#f5f7fa;--bg2:#ffffff;--card:#ffffff;--card2:#f8fafc;
  --border:#e2e8f0;--border2:#cbd5e1;
  --text:#1a202c;--text2:#4a5568;--dim:#a0aec0;
  --green:#059669;--green-soft:rgba(5,150,105,.06);--green-border:rgba(5,150,105,.2);
  --red:#dc2626;--red-soft:rgba(220,38,38,.06);--red-border:rgba(220,38,38,.2);
  --blue:#2563eb;--yellow:#d97706;--purple:#7c3aed;--purple-soft:rgba(124,58,237,.06);
  --card-hover:#f1f5f9;--input-bg:#f8fafc;
  --shadow:0 2px 8px rgba(0,0,0,.06)
}

body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-size:13px;line-height:1.5;transition:background .25s,color .25s}

/* Header */
header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.header-left h1{font-size:16px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-center{display:flex}
.crypto-switcher{display:flex;background:var(--bg);border-radius:6px;padding:2px;gap:2px}
.crypto-btn{background:none;border:none;color:var(--dim);padding:6px 16px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;transition:all .15s}
.crypto-btn.active{background:var(--card2);color:var(--text);box-shadow:var(--shadow)}
.crypto-btn:hover:not(.active){color:var(--text2)}
.header-right{display:flex;align-items:center;gap:8px}
.spot-badge{font-size:11px;color:var(--yellow);background:var(--bg);padding:4px 10px;border-radius:5px;font-weight:600;font-variant-numeric:tabular-nums}
.auto-update{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--dim)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);color:var(--text2);border-radius:6px;cursor:pointer;font-size:14px;transition:all .15s}
.icon-btn:hover{border-color:var(--text2);color:var(--text);background:var(--card-hover)}

/* Hero Section */

.buy-card{background:var(--green-soft);border:1px solid var(--green-border)}
.sell-card{background:var(--red-soft);border:1px solid var(--red-border)}
.hero-label{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:8px;letter-spacing:.3px}
.hero-price{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.1}
.buy-card .hero-price{color:var(--green)}
.sell-card .hero-price{color:var(--red)}
.hero-sub{margin-top:6px;font-size:11px;color:var(--dim)}
.hero-exchange{background:var(--card);padding:2px 8px;border-radius:4px;font-weight:600;color:var(--text2);font-size:11px}
.hero-unit{margin-left:4px}
.hero-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px;gap:8px}
.hero-spread-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.hero-spread-value{font-size:18px;font-weight:700;color:var(--yellow);font-variant-numeric:tabular-nums}
.arb-trigger{display:flex;align-items:center;gap:6px;background:var(--purple-soft);border:1px solid var(--purple);color:var(--purple);padding:6px 14px;border-radius:20px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;transition:all .2s;white-space:nowrap}
.arb-trigger:hover{background:var(--purple);color:#fff}
.arb-trigger.active{background:var(--purple);color:#fff}
.arb-count{background:var(--green);color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;font-weight:700;min-width:18px;text-align:center}
.arb-count.zero{background:var(--dim)}

/* Exchange Comparison Cards */
.exchange-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap);padding:var(--gap) 20px}
.ex-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;transition:all .2s}
.ex-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.ex-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ex-name-badge{font-weight:700;font-size:13px}
.ex-status{width:6px;height:6px;border-radius:50%;background:var(--green)}
.ex-prices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.ex-price-box{text-align:center;padding:6px;border-radius:5px}
.ex-price-box.buy{background:var(--green-soft)}
.ex-price-box.sell{background:var(--red-soft)}
.ex-price-label{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px}
.ex-price-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ex-price-box.buy .ex-price-val{color:var(--green)}
.ex-price-box.sell .ex-price-val{color:var(--red)}
.ex-spread{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--dim);padding-top:6px;border-top:1px solid var(--border)}
.ex-spread-bar{flex:1;height:3px;background:var(--bg);border-radius:2px;margin:0 8px;overflow:hidden}
.ex-spread-fill{height:100%;border-radius:2px}
.ex-prem{font-size:10px;font-weight:600}

/* Arb Dropdown */
.arb-dropdown{background:var(--card);border-bottom:1px solid var(--border);overflow:hidden;transition:max-height .3s ease}
.arb-dropdown.collapsed{max-height:0;border-bottom:none}
.arb-dropdown:not(.collapsed){max-height:80vh;overflow-y:auto}
.arb-dropdown-bar{display:flex;align-items:center;padding:8px 20px;border-bottom:1px solid var(--border)}
.arb-tabs{display:flex;gap:4px}
.arb-tab{background:none;border:1px solid var(--border);color:var(--dim);padding:5px 14px;border-radius:20px;cursor:pointer;font-size:11px;font-family:inherit;font-weight:500;transition:all .15s}
.arb-tab.active{border-color:var(--purple);color:var(--purple);background:var(--purple-soft)}
.arb-content{padding:12px 20px}
.arb-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:12px;align-items:center}
.arb-card.live{border-left:3px solid var(--green)}
.arb-card.closed{border-left:3px solid var(--dim);opacity:.6}
.arb-route{font-size:12px;font-weight:600}
.arb-route .arb-arrow{color:var(--dim);margin:0 4px}
.arb-route .arb-exchange{padding:2px 6px;border-radius:3px;font-size:10px}
.arb-prices{font-size:11px;color:var(--text2)}
.arb-prices div{margin-bottom:2px}
.arb-prices .label{color:var(--dim);font-size:10px;display:inline-block;width:50px}
.arb-volume-cell{font-size:11px;color:var(--text2)}
.arb-volume-row{margin-bottom:3px}
.arb-volume-row .label{color:var(--dim);font-size:10px;display:inline-block;width:55px}
.arb-max-profit{color:var(--green);font-weight:700;font-size:13px}
.arb-profit-cell{text-align:center}
.arb-profit-big{font-size:22px;font-weight:800;color:var(--green)}
.arb-spark{display:flex;align-items:flex-end;gap:1px;height:20px;margin-top:4px;justify-content:center}
.arb-spark-bar{width:3px;background:var(--green);border-radius:1px;min-height:1px}
.arb-timing{font-size:11px;color:var(--text2);text-align:right}
.arb-timing div{margin-bottom:2px}
.arb-timing .arb-duration-val{font-size:14px;font-weight:700;color:var(--text)}
.arb-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;letter-spacing:.5px}
.arb-status.live{background:var(--green-soft);color:var(--green)}
.arb-status.closed{background:var(--bg);color:var(--dim)}
.arb-empty{text-align:center;padding:24px;color:var(--dim);font-size:12px}

/* Filter */
.filter-toggle{padding:8px 20px;background:var(--bg2);border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);font-weight:600;user-select:none}
.filter-toggle:hover{color:var(--text)}
.filter-active-count{font-size:10px;color:var(--dim)}














/* Orderbook */
main{padding:0 20px 20px}
.orderbook{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.orderbook-side{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.ob-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:700;font-size:12px}
.buy-bg{background:var(--green-soft);color:var(--green);border-bottom:2px solid var(--green-border)}
.sell-bg{background:var(--red-soft);color:var(--red);border-bottom:2px solid var(--red-border)}
.ob-count{font-weight:400;font-size:11px;opacity:.7}
.ob-subtitle{font-size:10px;padding:4px 14px;color:var(--dim);background:var(--card2)}
.sell-sub{color:var(--dim)}
.table-scroll{overflow-x:auto;overflow-y:auto;max-height:60vh}
table{width:100%;border-collapse:collapse;font-size:11px}
thead{background:var(--bg);position:sticky;top:0;z-index:1}
th{padding:8px 8px;text-align:left;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:700;border-bottom:1px solid var(--border)}
td{padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
tr{transition:background .1s}
tr:hover{background:var(--card-hover)}
.rank{font-weight:700;font-size:12px;color:var(--dim)}
.rank-1{color:var(--yellow)}
.rank-2{color:var(--text2)}
.rank-3{color:#cd8032}
.exchange-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600}
.exchange-Bybit{background:rgba(247,166,0,.1);color:#f7a600}
.exchange-Binance{background:rgba(243,186,47,.1);color:#f3ba2f}
.exchange-OKX{background:rgba(160,174,192,.1);color:var(--text)}
.exchange-HTX{background:rgba(35,84,230,.1);color:#5b8def}
.price-cell{font-weight:700;font-variant-numeric:tabular-nums}
.premium-positive{color:var(--red);font-size:10px}
.premium-negative{color:var(--green);font-size:10px}
.completion-bar{width:40px;height:4px;background:var(--bg);border-radius:2px;display:inline-block;vertical-align:middle;margin-right:4px;overflow:hidden}
.completion-fill{height:100%;border-radius:2px}
.completion-high .completion-fill{background:var(--green)}
.completion-mid .completion-fill{background:var(--yellow)}
.completion-low .completion-fill{background:var(--red)}
.payment-tag{display:inline-block;background:var(--bg);padding:2px 6px;border-radius:10px;font-size:9px;margin:1px;color:var(--dim);border:1px solid var(--border)}
.payment-active{border-color:var(--green);color:var(--green)}
.online-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px}
.online-dot.on{background:var(--green)}
.online-dot.off{background:var(--red)}
.loading{text-align:center;padding:30px;color:var(--dim)}

footer{text-align:center;padding:14px;color:var(--dim);font-size:10px;border-top:1px solid var(--border)}




/* Filter Bar */
.filter-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:14px 20px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:10px}
.filter-row:last-child{margin-bottom:0}
.filter-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.filter-group label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.filter-chips{display:flex;gap:4px;flex-wrap:wrap;min-height:28px}
.filter-chip{padding:5px 12px;border-radius:14px;font-size:11px;border:1px solid var(--border);background:var(--input-bg);color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1.2}
.filter-chip.active{border-color:var(--green);color:var(--green);background:var(--green-soft);font-weight:600}
.filter-chip:hover{border-color:var(--text2);color:var(--text)}
.filter-input{background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font-size:12px;width:130px;font-family:inherit}
.filter-input:focus{outline:none;border-color:var(--blue)}
.filter-select{background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:6px;font-size:12px;font-family:inherit}
.filter-reset-btn{padding:6px 16px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--dim);cursor:pointer;font-size:11px;font-family:inherit;font-weight:600}
.filter-reset-btn:hover{border-color:var(--red);color:var(--red)}

/* Arb header button */







/* === Mobile Responsive === */
@media(max-width:1024px){
  .orderbook{grid-template-columns:1fr}
  .hero-divider{flex-direction:row;padding:12px 0}
}
@media(max-width:768px){
  header{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .header-left h1{font-size:14px}
  .header-center{order:3;width:100%;justify-content:center}
  .header-right{gap:4px}
  .header-right .icon-btn{width:30px;height:30px;font-size:11px}
  .arb-header-btn{padding:4px 10px;font-size:10px}

  .arb-header-btn .arb-count{min-width:16px;height:16px;font-size:9px}
  .spot-badge{font-size:9px;padding:3px 6px}
  .auto-update{font-size:9px;gap:3px;padding:3px 6px}
  .crypto-btn{padding:5px 14px;font-size:11px}
  .hero-label{font-size:10px}
  .exchange-compare{grid-template-columns:1fr 1fr}
  .ex-card{padding:10px}
  .ex-price-val{font-size:13px}
  .filter-bar{padding:10px 12px}
  .filter-row{gap:8px}
  .filter-chip{padding:4px 10px;font-size:10px}
  .filter-input{width:100px;font-size:11px;padding:5px 8px}
  .filter-select{font-size:11px;padding:5px 6px}
  .ob-section{min-width:0}
  .ob-header{padding:10px 12px;font-size:13px}
  .ob-table th,.ob-table td{padding:6px 5px;font-size:10px}
  .ob-table .rank{width:18px;height:18px;font-size:8px}
  .exchange-badge{font-size:9px;padding:2px 5px}
  .payment-tag{font-size:8px;padding:1px 5px}
  .arb-dropdown:not(.collapsed){max-height:60vh}
  .arb-card{grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .arb-profit-big{font-size:16px}
}
@media(max-width:480px){
  header{padding:8px 10px}
  .header-left h1{font-size:13px}
  .header-right{flex-wrap:wrap}
  .hero-divider{padding:8px 0}
  .exchange-compare{grid-template-columns:1fr;gap:8px;padding:0 10px}
  .filter-bar{padding:8px 10px}
  .filter-group{width:100%}
  .filter-chips{gap:3px}
  .filter-chip{padding:4px 8px;font-size:9px}
  .filter-input{width:100%}
  .orderbook{padding:0}
  .ob-section{border-radius:0}
  .ob-table th:nth-child(6),.ob-table td:nth-child(6){display:none}
  .ob-table th:nth-child(4),.ob-table td:nth-child(4){display:none}
  .arb-card{grid-template-columns:1fr;font-size:10px}
  .arb-route,.arb-prices,.arb-volume-cell,.arb-profit-cell,.arb-timing{padding:4px 0}
}

@media(max-width:768px){
  .arb-dropdown:not(.collapsed){max-height:70vh;position:fixed;top:auto;bottom:0;left:0;right:0;z-index:200;border-radius:12px 12px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
  .arb-dropdown-bar{padding:6px 14px;position:sticky;top:0;background:var(--card);z-index:1}
  .arb-card{padding:8px;font-size:10px}
  .arb-close-mobile{display:block;text-align:center;padding:8px;color:var(--dim);font-size:11px;cursor:pointer;border-top:1px solid var(--border)}
  .arb-close-mobile:hover{color:var(--text)}
}
@media(min-width:769px){
  .arb-close-mobile{display:none}
}

@media(max-width:768px){
  .filter-bar{padding:8px 12px}
  .filter-row{gap:6px;margin-bottom:6px;flex-wrap:nowrap;overflow-x:auto}
  .filter-row:first-child{flex-wrap:wrap}
  .filter-group{min-width:0;gap:2px}
  .filter-group label{font-size:8px;margin-bottom:0}
  .filter-chips{max-height:60px;overflow-y:auto;gap:3px}
  .filter-chip{padding:3px 8px;font-size:9px}
  .filter-input{width:80px;padding:4px 6px;font-size:10px}
  .filter-select{padding:4px 4px;font-size:10px}
  .filter-reset-btn{padding:4px 10px;font-size:9px}
  .hero-price{font-size:18px}
  .hero-label{font-size:9px}
  .hero-sub{font-size:10px}
  .hero-divider{padding:6px 0}
  .hero-spread-label{font-size:9px}
  .hero-spread-value{font-size:14px}
}

/* Hero volume bar */
.hero-volume-bar{grid-column:1/-1;display:flex;gap:12px;justify-content:center}
.hero-vol-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 20px;background:var(--card);border:1px solid var(--border);border-radius:8px;flex:1;max-width:220px}
.hero-vol-label{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.hero-vol-val{font-size:16px;font-weight:800;color:var(--text)}
.buy-vol .hero-vol-val{color:var(--green)}
.sell-vol .hero-vol-val{color:var(--red)}
@media(max-width:768px){
  .hero-volume-bar{gap:6px}
  .hero-vol-item{padding:6px 10px;max-width:none}
  .hero-vol-val{font-size:13px}
  .hero-vol-label{font-size:8px}
}

/* Volume threshold control */
.hero-volume-section{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px}
.vol-threshold-ctrl{display:flex;align-items:center;gap:10px}
.vol-threshold-label{font-size:11px;color:var(--text2)}
.vol-threshold-label strong{color:var(--text);font-size:14px}
.vol-adj-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.vol-adj-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.vol-adj-btn:active{transform:scale(.95)}
@media(max-width:768px){
  .vol-threshold-ctrl{gap:6px}
  .vol-threshold-label{font-size:10px}
  .vol-threshold-label strong{font-size:12px}
  .vol-adj-btn{width:24px;height:24px;font-size:14px}
}

/* Arb alert bar */
.arb-alert-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:linear-gradient(90deg,rgba(52,211,153,.12),rgba(167,139,250,.12));border-bottom:1px solid var(--green-border);cursor:pointer;transition:all .15s;user-select:none}
.arb-alert-bar:hover{background:linear-gradient(90deg,rgba(52,211,153,.2),rgba(167,139,250,.2))}
.arb-alert-icon{font-size:14px}
.arb-alert-text{font-size:12px;font-weight:600;color:var(--text2)}
.arb-alert-count{font-size:18px;font-weight:800;color:var(--green);min-width:24px;text-align:center}
.arb-alert-label{font-size:12px;color:var(--text2)}
.arb-alert-arrow{font-size:10px;color:var(--dim);transition:transform .2s}
.arb-alert-bar.open .arb-alert-arrow{transform:rotate(180deg)}
@media(max-width:768px){
  .arb-alert-bar{padding:8px 14px;gap:6px}
  .arb-alert-text{font-size:11px}
  .arb-alert-count{font-size:16px}
  .arb-alert-label{font-size:11px}
}


/* Hero - clean layout */
.hero{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;gap:0;padding:20px;background:var(--bg2);align-items:center}
.hero-card{padding:20px;text-align:center}
.hero-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px}
.hero-volume-section{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.hero-volume-bar{display:flex;gap:12px;justify-content:center}
.hero-vol-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 20px;background:var(--card);border:1px solid var(--border);border-radius:8px}
.hero-vol-label{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.hero-vol-val{font-size:16px;font-weight:800;color:var(--text)}
.buy-vol .hero-vol-val{color:var(--green)}
.sell-vol .hero-vol-val{color:var(--red)}
@media(max-width:768px){
  .hero{grid-template-columns:1fr auto 1fr;padding:12px}
  .hero-divider{padding:0 10px}
  .hero-volume-bar{gap:6px}
  .hero-vol-item{padding:6px 12px}
  .hero-vol-val{font-size:13px}
}
@media(max-width:480px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-divider{flex-direction:row;padding:8px 0}
  .hero-volume-bar{flex-direction:column;gap:6px;width:100%}
  .hero-vol-item{flex-direction:row;justify-content:space-between;padding:8px 14px}
}