*{box-sizing:border-box;}
/* ─── layout ─── */
.sp-outer{background:#0b0e17;min-height:calc(100vh - 56px);}
.sp-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px);min-height:600px;background:#0b0e17;max-width:1520px;width:100%;margin:0 auto;border-left:1px solid #1e2535;border-right:1px solid #1e2535;}
.sp-body{display:flex;flex:1;overflow:hidden;gap:1px;background:#1a1f2e;}
/* ─── ticker ─── */
.sp-ticker{display:flex;align-items:center;gap:20px;padding:0 16px;height:52px;background:#0d0f14;border-bottom:1px solid #1e2535;flex-shrink:0;overflow-x:auto;}
.tk-sym{font-size:16px;font-weight:800;color:#fff;}
.tk-price{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;}
.tk-lbl{font-size:10px;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;}
.tk-val{font-size:12px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;}
.tk-divider{width:1px;height:28px;background:#1e2535;flex-shrink:0;}
/* ─── order book ─── */
.sp-ob{display:flex;flex-direction:column;width:260px;flex-shrink:0;background:#0d0f14;overflow:hidden;}
.ob-icon-btn{background:transparent;border:1px solid #2a3347;border-radius:3px;color:#6b7280;cursor:pointer;padding:2px 5px;font-size:11px;line-height:1;transition:color .15s,border-color .15s;}
.ob-icon-btn:hover,.ob-icon-btn.active{color:#fff;border-color:#4b5563;}
.ob-hdr-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 8px;font-size:10px;color:#6b7280;font-weight:600;}
.ob-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:2px 8px;font-size:10px;font-variant-numeric:tabular-nums;cursor:pointer;position:relative;}
.ob-row:hover{background:rgba(255,255,255,.04);}
.ob-row span{position:relative;z-index:1;}
.ob-bar{position:absolute;top:0;bottom:0;right:0;z-index:0;}
.ob-ask{color:#f6465d;} .ob-ask .ob-bar{background:rgba(246,70,93,.1);}
.ob-bid{color:#0ecb81;} .ob-bid .ob-bar{background:rgba(14,203,129,.1);}
.ob-mid-row{padding:8px;border-top:1px solid #1e2535;border-bottom:1px solid #1e2535;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;}
.ob-mid-price{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;}
.ob-mid-usd{font-size:11px;color:#6b7280;}
/* ─── center ─── */
.sp-center{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;background:#131722;}
/* ─── tf bar ─── */
.sp-tf{display:flex;align-items:center;padding:4px 8px;border-bottom:1px solid #1e2535;background:#0d0f14;flex-shrink:0;gap:2px;overflow-x:auto;}
.tf-btn{padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;color:#6b7280;cursor:pointer;white-space:nowrap;background:transparent;border:none;transition:color .15s,background .15s;}
.tf-btn:hover{color:#fff;background:rgba(255,255,255,.05);}
.tf-btn.active{color:#1890ff;background:rgba(24,144,255,.1);}
.tf-sep{width:1px;height:16px;background:#2a3347;margin:0 4px;flex-shrink:0;}
.tf-txt-btn{padding:3px 6px;border-radius:4px;font-size:11px;color:#6b7280;cursor:pointer;background:transparent;border:none;transition:color .15s;}
.tf-txt-btn:hover{color:#fff;}
.tf-mode-btn{padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;color:#6b7280;cursor:pointer;border:1px solid #2a3347;background:transparent;}
.tf-mode-btn.active{color:#fff;background:#1e2535;border-color:#2a3347;}
/* ─── chart ─── */
.sp-chart{flex:1;min-height:0;position:relative;}
.sp-chart #tv-container{width:100%;height:100%;}
/* ─── order form ─── */
.sp-form{flex-shrink:0;background:#0d0f14;border-top:1px solid #1e2535;}
.form-tabs{display:flex;border-bottom:1px solid #1e2535;padding:0 12px;}
.form-tab{padding:8px 16px;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;white-space:nowrap;transition:color .15s;}
.form-tab.active{color:#fff;border-bottom-color:#f0b90b;}
.form-sides{display:flex;gap:12px;padding:10px 12px;}
.form-side{flex:1;min-width:0;}
.form-avail{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#6b7280;margin-bottom:8px;}
.form-avail a{color:#1890ff;font-size:10px;font-weight:600;text-decoration:none;}
.form-inp{display:flex;align-items:center;border:1px solid #2a3347;border-radius:4px;background:#131722;margin-bottom:5px;transition:border-color .15s;}
.form-inp:focus-within{border-color:#1890ff;}
.form-inp-lbl{padding:0 8px;font-size:11px;color:#6b7280;white-space:nowrap;flex-shrink:0;}
.form-inp-val{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:12px;padding:7px 4px;text-align:right;}
.form-inp-val::placeholder{color:#3a4459;}
.form-inp-unit{padding:0 8px;font-size:11px;color:#6b7280;white-space:nowrap;flex-shrink:0;}
/* pct slider */
.pct-row{display:flex;align-items:center;position:relative;margin:5px 0 7px;height:20px;}
.pct-line{position:absolute;left:5px;right:5px;top:50%;height:2px;background:#2a3347;transform:translateY(-50%);}
.pct-fill{position:absolute;left:5px;top:50%;height:2px;transform:translateY(-50%);transition:width .15s;width:0;}
.pct-fill-buy{background:#0ecb81;} .pct-fill-sell{background:#f6465d;}
.pct-dot-w{flex:1;display:flex;justify-content:center;position:relative;z-index:1;}
.pct-dot{width:10px;height:10px;border-radius:50%;background:#2a3347;border:2px solid #2a3347;cursor:pointer;display:block;transition:background .15s,border-color .15s;}
.pct-dot:hover{border-color:#1890ff;}
.pct-dot.on-buy{background:#0ecb81;border-color:#0ecb81;}
.pct-dot.on-sell{background:#f6465d;border-color:#f6465d;}
/* submit */
.form-btn{width:100%;padding:9px;border-radius:4px;font-size:13px;font-weight:700;color:#fff;border:none;cursor:pointer;margin-top:2px;}
.form-btn-buy{background:#0ecb81;} .form-btn-buy:hover{opacity:.88;}
.form-btn-sell{background:#f6465d;} .form-btn-sell:hover{opacity:.88;}
.form-btn-login{background:#1890ff;text-align:center;display:block;text-decoration:none;padding:9px;border-radius:4px;font-size:13px;font-weight:700;color:#fff;}
.form-err{color:#f6465d;font-size:10px;padding:2px 0;display:none;}
/* ─── bottom orders ─── */
.sp-bot{flex-shrink:0;border-top:1px solid #1e2535;background:#0d0f14;display:flex;flex-direction:column;height:200px;}
.bot-tabs{display:flex;align-items:center;border-bottom:1px solid #1e2535;padding:0 8px;flex-shrink:0;}
.bot-tab{padding:6px 10px;font-size:11px;font-weight:600;color:#6b7280;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;white-space:nowrap;transition:color .15s;}
.bot-tab.active{color:#fff;border-bottom-color:#1890ff;}
.bot-filters{display:flex;align-items:center;gap:6px;padding:4px 8px;flex-shrink:0;border-bottom:1px solid #1e2535;}
.bot-flt-btn{padding:2px 8px;font-size:10px;font-weight:600;color:#6b7280;border:1px solid #2a3347;border-radius:3px;cursor:pointer;background:transparent;}
.bot-flt-btn.active{color:#fff;background:#1e2535;}
.bot-allpairs{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:10px;color:#6b7280;cursor:pointer;}
.bot-allpairs input[type=checkbox]{accent-color:#1890ff;}
.bot-cancel{font-size:10px;color:#f6465d;cursor:pointer;background:none;border:none;padding:0 4px;}
.bot-scroll{flex:1;overflow-y:auto;}
.bot-tbl{width:100%;font-size:10px;border-collapse:collapse;}
.bot-tbl thead th{padding:4px 8px;color:#6b7280;font-weight:600;text-align:left;background:#0a0c12;position:sticky;top:0;}
.bot-tbl tbody td{padding:4px 8px;color:#9ca3af;border-bottom:1px solid rgba(255,255,255,.02);}
.bot-tbl tbody tr:hover td{background:rgba(255,255,255,.02);}
/* ─── right panel ─── */
.sp-right{width:220px;flex-shrink:0;background:#0d0f14;display:flex;flex-direction:column;overflow:hidden;}
.rp-search{padding:7px 8px;border-bottom:1px solid #1e2535;flex-shrink:0;}
.rp-search input{width:100%;padding:5px 8px;background:#131722;border:1px solid #1e2535;border-radius:4px;color:#fff;font-size:11px;outline:none;}
.rp-search input:focus{border-color:#1890ff;}
.rp-search input::placeholder{color:#4b5563;}
.rp-tabs{display:flex;align-items:center;padding:3px 8px;border-bottom:1px solid #1e2535;flex-shrink:0;gap:4px;}
.rp-star{padding:3px 6px;font-size:13px;color:#6b7280;cursor:pointer;background:none;border:none;}
.rp-star.on{color:#f0b90b;}
.rp-tab{padding:3px 8px;font-size:11px;font-weight:600;color:#6b7280;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;transition:color .15s;}
.rp-tab.active{color:#fff;border-bottom-color:#1890ff;}
.rp-coin-list{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;}
.rp-coin-tbl{width:100%;font-size:11px;border-collapse:collapse;}
.rp-coin-tbl thead th{padding:4px 6px;color:#6b7280;font-weight:600;font-size:10px;background:#0a0c12;position:sticky;top:0;border-bottom:1px solid #1e2535;}
.rp-coin-row:hover td{background:rgba(255,255,255,.03);cursor:pointer;}
.rp-coin-row.coin-on td{background:rgba(24,144,255,.06);}
.rp-coin-tbl td{padding:5px 6px;}
.rp-star-cell{color:#4b5563;font-size:12px;}
/* market trades */
.sp-trades{border-top:1px solid #1e2535;flex-shrink:0;display:flex;flex-direction:column;height:200px;}
.trades-hdr{padding:6px 8px;font-size:11px;font-weight:700;color:#e5e7eb;border-bottom:1px solid #1e2535;flex-shrink:0;}
.trades-sub{display:grid;grid-template-columns:1fr 1fr 1fr;padding:3px 8px;font-size:10px;color:#6b7280;font-weight:600;flex-shrink:0;}
.trades-body{flex:1;overflow-y:auto;}
.trade-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:2px 8px;font-size:10px;font-variant-numeric:tabular-nums;}
/* helpers */
.clr-buy{color:#0ecb81;} .clr-sell{color:#f6465d;}
.hidden{display:none!important;}
.custom-scroll::-webkit-scrollbar{width:4px;height:4px;}
.custom-scroll::-webkit-scrollbar-track{background:transparent;}
.custom-scroll::-webkit-scrollbar-thumb{background:#2a3347;border-radius:2px;}
/* ─── coin brief popup ─── */
.b-icon-brief{cursor:pointer;position:relative;user-select:none;}
#coin-brief-popup{position:fixed;z-index:9990;background:#161b27;border:1px solid #2a3347;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.7);width:520px;display:none;}
#coin-brief-popup .cbp-head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid #1e2535;font-size:12px;color:#9ca3af;font-weight:600;}
#coin-brief-popup .cbp-body{padding:12px 14px;}
#coin-brief-popup .cbp-logo{width:48px;height:48px;border-radius:50%;object-fit:contain;flex-shrink:0;background:#1e2535;padding:4px;}
#coin-brief-popup .cbp-top{display:flex;align-items:flex-start;gap:12px;}
#coin-brief-popup .cbp-meta{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;flex:1;}
#coin-brief-popup .cbp-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:8px;}
#coin-brief-popup .cbp-row .lbl{color:#6b7280;white-space:nowrap;}
#coin-brief-popup .cbp-row .val{color:#e5e7eb;font-weight:600;text-align:right;}
#coin-brief-popup .cbp-row a{color:#1890ff;text-decoration:none;font-weight:600;}
#coin-brief-popup .cbp-row a:hover{text-decoration:underline;}
#coin-brief-popup .cbp-desc{margin-top:10px;font-size:11px;color:#9ca3af;line-height:1.65;border-top:1px solid #1e2535;padding-top:10px;}