:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --line:#eef0f3;
  --text:#1a1d24;
  --text-2:#7a808d;
  --text-3:#aab0bc;
  --green:#16b979;
  --green-bg:rgba(22,185,121,.1);
  --green-bg-strong:rgba(22,185,121,.18);
  --red:#f04a5e;
  --red-bg:rgba(240,74,94,.10);
  --red-bg-strong:rgba(240,74,94,.18);
  --primary:#16b979;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg-soft);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei",Roboto,Helvetica,Arial,sans-serif;font-size:14px;-webkit-tap-highlight-color:transparent;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;}


.app{max-width:520px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;padding-bottom:68px;}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;background:var(--bg);}
.header .symbol{flex:1;min-width:0;font-size:18px;font-weight:600;display:flex;align-items:center;gap:6px;padding:8px 6px;margin:-8px -6px;border-radius:8px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,.06);transition:background .15s;}
.header .symbol:hover{background:var(--bg-soft);}
.header .symbol:active{background:#eef0f3;}
.header .symbol .arrow{color:var(--text-3);font-size:12px;}
.header .actions{display:flex;align-items:center;gap:14px;color:var(--text-2);font-size:18px;}
.header .icon-btn{cursor:pointer;}


.tabs-top{display:flex;padding:0 16px;gap:18px;align-items:center;border-bottom:1px solid var(--line);background:var(--bg);}
.tabs-top .tab{padding:10px 0;font-size:15px;color:var(--text-2);position:relative;cursor:pointer;}
.tabs-top .tab.active{color:var(--text);font-weight:600;}
.tabs-top .tab.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:30px;height:3px;background:var(--green);border-radius:2px;}


.tabs-sub{display:flex;border-radius:8px;overflow:hidden;background:var(--bg-soft);}
.tabs-sub .item{flex:1;text-align:center;padding:9px 0;font-size:14px;color:var(--text-2);cursor:pointer;font-weight:600;}
.tabs-sub .item.buy{color:var(--text-2);}
.tabs-sub .item.sell{color:var(--text-2);}
.tabs-sub .item.active.buy{background:var(--green);color:#fff;}
.tabs-sub .item.active.sell{background:var(--red);color:#fff;}
.tabs-sub.contract .item.active.buy{background:#fff;color:var(--green);box-shadow:inset 0 -2px 0 var(--green);}
.tabs-sub.contract .item.active.sell{background:#fff;color:var(--red);box-shadow:inset 0 -2px 0 var(--red);}


.main{padding:10px 12px 0;}
.row{display:flex;gap:10px;}
.col{flex:1;}


.field{position:relative;background:var(--bg-soft);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;height:48px;}
.field .lbl{font-size:11px;color:var(--text-3);}
.field input{flex:1;border:0;background:transparent;outline:none;text-align:center;font-size:15px;color:var(--text);width:100%;}
.field .btn-step{width:24px;height:24px;line-height:22px;border:1px solid var(--line);border-radius:50%;text-align:center;color:var(--text-2);user-select:none;cursor:pointer;background:#fff;}
.field .suffix{color:var(--text-2);font-size:13px;}

.field-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;}
.field-stack .lbl{font-size:11px;color:var(--text-3);}
.field-stack .val{font-size:15px;color:var(--text);}


.price-row{gap:6px;}
.price-row .field{padding:6px 8px;height:44px;}
.price-row .field-stack{min-width:0;align-items:flex-start;}
.price-row .field-stack .lbl{font-size:10px;line-height:1;white-space:nowrap;}
.price-row .field-stack input{text-align:left;font-size:14px;}
.price-row .btn-step{width:20px;height:20px;line-height:18px;font-size:13px;}

.select{background:var(--bg-soft);border-radius:8px;height:40px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--text);cursor:pointer;}
.select .arrow{color:var(--text-3);font-size:12px;}


.slider-box{padding:6px 6px 2px;}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);border-radius:2px;outline:none;}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--green);cursor:pointer;}
.slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--green);cursor:pointer;}


.btn-primary{display:block;width:100%;height:46px;border:0;border-radius:8px;background:var(--green);color:#fff;font-size:16px;font-weight:600;cursor:pointer;}
.btn-danger{background:var(--red);}
.btn-block-line{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-2);padding:6px 4px;}


.depth{padding:0 0 0 8px;}
.depth-head{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);padding:4px 0;}
.depth-row{position:relative;display:flex;justify-content:space-between;font-size:12.5px;line-height:24px;padding:0 4px;}
.depth-row.ask{color:var(--red);}
.depth-row.bid{color:var(--green);}
.depth-row .bar{position:absolute;top:0;right:0;bottom:0;background:var(--red-bg);z-index:0;border-radius:2px;}
.depth-row.bid .bar{background:var(--green-bg);}
.depth-row span{position:relative;z-index:1;}
.depth-row .qty{color:var(--text-2);}
.depth-mid{font-size:18px;font-weight:600;padding:6px 4px 2px;color:var(--text);}
.depth-sub{font-size:11px;color:var(--text-3);padding:0 4px 6px;}


.tabs-cur{display:flex;gap:18px;padding:14px 16px 6px;border-top:1px solid var(--line);}
.tabs-cur .it{font-size:14px;color:var(--text-2);position:relative;cursor:pointer;}
.tabs-cur .it.active{color:var(--text);font-weight:600;}
.tabs-cur .it.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--green);border-radius:1px;}

.empty{padding:36px 16px;text-align:center;color:var(--text-3);font-size:13px;}
.empty-icon{font-size:42px;margin-bottom:8px;}


.card-list{padding:6px 12px 12px;}
.card{background:var(--bg-soft);border-radius:10px;padding:12px;margin-bottom:8px;font-size:13px;}
.card h4{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between;align-items:center;}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--text-2);}
.card .meta b{color:var(--text);font-weight:500;}
.card .pnl-pos{color:var(--green);}
.card .pnl-neg{color:var(--red);}
.card .actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;}
.card button{height:30px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:var(--text);}
.card button.danger{color:var(--red);border-color:var(--red);}


.kline-collapse{position:fixed;left:0;right:0;bottom:48px;max-width:520px;margin:0 auto;background:#fff;border-top:1px solid var(--line);transition:transform .25s ease;z-index:30;}
.kline-collapse .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer;}
.kline-collapse .bar .arr{transition:transform .25s;}
.kline-collapse.open .bar .arr{transform:rotate(180deg);}
.kline-collapse .panel{height:0;overflow:hidden;transition:height .25s ease;}
.kline-collapse.open .panel{height:340px;}
.kline-tabs{display:flex;gap:14px;padding:8px 14px;font-size:13px;color:var(--text-3);border-bottom:1px solid var(--line);overflow-x:auto;}
.kline-tabs .it{cursor:pointer;flex-shrink:0;}
.kline-tabs .it.active{color:var(--text);font-weight:600;}
#kline-chart{width:100%;height:280px;}


.tabbar{position:fixed;left:0;right:0;bottom:0;height:48px;background:#fff;border-top:1px solid var(--line);display:flex;max-width:520px;margin:0 auto;z-index:40;}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--text-3);}
.tabbar a.active{color:var(--green);}
.tabbar .ic{font-size:18px;margin-bottom:2px;}


.list-tickers{padding:4px 0;}
.tk-row{display:grid;grid-template-columns:2fr 1.4fr 1.2fr;align-items:center;padding:10px 16px;cursor:pointer;}
.tk-row + .tk-row{border-top:1px solid var(--line);}
.tk-row .name{font-size:15px;font-weight:600;}
.tk-row .name small{display:block;color:var(--text-3);font-weight:400;font-size:11px;}
.tk-row .price{text-align:right;font-size:14px;}
.tk-row .pct{text-align:right;}
.pct .pill{display:inline-block;min-width:62px;text-align:center;padding:6px 8px;border-radius:6px;color:#fff;font-size:13px;}
.pct.up .pill{background:var(--green);}
.pct.down .pill{background:var(--red);}


.toast{position:fixed;left:50%;top:30%;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;z-index:200;}
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:none;align-items:center;justify-content:center;}
.modal-mask.show{display:flex;}
.global-loading{position:fixed;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(1px);display:none;align-items:center;justify-content:center;z-index:180;}
.global-loading.show{display:flex;}
.global-loading__box{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.08);padding:10px 14px;border-radius:10px;color:var(--text-2);font-size:13px;}
.global-loading__spinner{width:16px;height:16px;border:2px solid #dce2ea;border-top-color:var(--green);border-radius:50%;animation:hy_spin .8s linear infinite;}
@keyframes hy_spin{to{transform:rotate(360deg);}}
.modal{background:#fff;border-radius:12px;width:88%;max-width:400px;padding:20px;box-shadow:0 6px 32px rgba(0,0,0,.16);}
.modal.modal--liq-explain{max-width:440px;width:92%;max-height:85vh;overflow-y:auto;padding:18px 16px 16px;}
.modal h3{margin:0 0 12px;font-size:16px;}
.modal .row-input{margin-bottom:10px;}
.modal label{font-size:12px;color:var(--text-2);display:block;margin-bottom:4px;}
.modal input,.modal select{width:100%;height:40px;border:1px solid var(--line);border-radius:6px;padding:0 10px;background:#fff;}
.modal .footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.modal .footer button{height:36px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;}
.modal .footer .ok{background:var(--green);color:#fff;border-color:var(--green);}


.login-box{padding:40px 24px;}
.login-box h2{font-size:22px;margin:0 0 24px;}
.login-box .input{height:48px;background:var(--bg-soft);border-radius:8px;padding:0 14px;margin-bottom:12px;display:flex;align-items:center;}
.login-box .input input{flex:1;border:0;outline:none;background:transparent;font-size:15px;}
.login-box .btn-primary{margin-top:12px;}
.login-box .switch{margin-top:14px;text-align:center;color:var(--text-2);font-size:13px;}


.fund-rate-line{display:flex;justify-content:space-between;font-size:11px;color:var(--text-2);padding:6px 4px 0;}
.fund-rate-line .rt{color:var(--red);}
.fund-rate-line .gn{color:var(--green);}


.dual-btn-stack{margin-top:8px;}
.dual-btn-stack .row-info{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);padding:0 4px;margin-bottom:4px;}
.dual-btn-stack .row-info b{color:var(--text);}
.dual-btn-stack .row-info--explain{cursor:pointer;user-select:none;border-radius:6px;margin:0 -4px;padding:6px 4px;-webkit-tap-highlight-color:rgba(22,185,121,.12);}
.dual-btn-stack .row-info--explain:active{background:var(--bg-soft);}
.dual-btn-stack .row-info--explain span:first-child{color:var(--green);text-decoration:underline;text-underline-offset:2px;font-size:12px;}

.liq-explain-body{font-size:13px;color:var(--text);line-height:1.55;}
.liq-explain-body .liq-sec{margin-bottom:14px;}
.liq-explain-body .liq-sec h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--text);}
.liq-explain-body .liq-p{margin:6px 0;font-size:12px;color:var(--text-2);}
.liq-explain-body .liq-p strong{color:var(--text);}
.liq-explain-body .liq-note{margin:8px 0 0;font-size:11px;color:var(--text-3);}
.liq-explain-body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;background:var(--bg-soft);padding:1px 5px;border-radius:4px;color:var(--text);}
.liq-explain-body .liq-warn{margin:0;font-size:12px;color:var(--red);line-height:1.45;}
.liq-explain-body .liq-ul{margin:0;padding-left:18px;font-size:12px;color:var(--text-2);}
.liq-explain-body .liq-ul li{margin:4px 0;}
.liq-explain-body .liq-subttl{margin:10px 0 6px;font-size:12px;font-weight:600;color:var(--text-2);}
.liq-explain-body .liq-subttl:first-child{margin-top:0;}
.liq-explain-body .liq-pre{margin:0 0 4px;padding:10px 12px;background:var(--bg-soft);border-radius:8px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:var(--text);}
.liq-explain-body .liq-pre:last-of-type{margin-bottom:0;}


.tabs-order-sub{display:flex;gap:8px;padding:2px 12px 8px;}
.tabs-order-sub .it{flex:1;text-align:center;background:var(--bg-soft);color:var(--text-2);padding:8px 0;border-radius:8px;font-size:13px;cursor:pointer;user-select:none;}
.tabs-order-sub .it.active{background:var(--green-bg);color:var(--green);font-weight:600;}


.muted{color:var(--text-2);}
.text-right{text-align:right;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}


.cbk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);}
.cbk input{transform:scale(.95);}


.up{color:var(--green)!important;}
.down{color:var(--red)!important;}


hr.line{border:0;border-top:1px solid var(--line);margin:8px 0;}


*::-webkit-scrollbar{width:4px;height:4px;}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px;}

@media (max-width:520px){
  .app{box-shadow:none;}
}


.transfer-tip{background:#fff7e8;border:1px solid #ffe3b8;color:#a36a12;border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.5;margin-bottom:10px;}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.acct-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.acct-title{font-size:15px;font-weight:700;color:var(--text);}
.acct-sub{font-size:11px;color:var(--text-3);margin-top:2px;}
.acct-usdt{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;background:#f6f8fb;font-size:13px;}
.acct-usdt b{font-size:16px;color:var(--text);}
.btn-transfer-main{height:30px;padding:0 12px;border:0;border-radius:16px;background:var(--green);color:#fff;font-size:12px;cursor:pointer;}
.asset-row{margin-top:8px;padding:10px;border-radius:8px;background:var(--bg-soft);}
.asset-row__head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;}
.asset-row__head .coin{color:var(--text);}
.asset-row__head .bal{color:#24324a;}
.asset-row__meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--text-2);font-size:12px;margin-top:6px;}
.asset-row__meta b{color:var(--text);}
.asset-row__action{display:flex;justify-content:flex-end;margin-top:8px;}
.btn-mini-transfer{height:28px;padding:0 10px;border:1px solid #cdeedb;background:#f3fcf7;color:#14955f;border-radius:14px;font-size:12px;cursor:pointer;}
.acct-spot{border-left:4px solid #16b979;}
.acct-contract{border-left:4px solid #3b82f6;}
.acct-insurance{border-left:4px solid #f59e0b;}


.pos-card{background:#fff;border:1px solid #e8edf3;border-radius:14px;box-shadow:0 4px 16px rgba(15,23,42,.04);}
.pos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.pos-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pos-title b{font-size:15px;line-height:1.2;letter-spacing:.2px;}
.pos-pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:4px;font-size:11px;font-weight:700;color:#fff;}
.pos-pill.up{background:var(--green);}
.pos-pill.down{background:var(--red);}
.pos-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed #edf1f6;}
.pos-top .k{font-size:11px;color:var(--text-3);}
.pos-top .v{font-size:28px;font-weight:700;line-height:1.05;letter-spacing:.2px;}
.pos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px dashed #edf0f4;padding-top:10px;}
.pos-grid .it{display:flex;flex-direction:column;gap:2px;}
.pos-grid .k{font-size:10px;color:#98a2b3;line-height:1.2;}
.pos-grid .v{font-size:12px;color:#0f172a;font-weight:600;line-height:1.2;}
.pos-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:8px;border-top:1px dashed #edf0f4;}
.pos-actions button{height:34px;padding:0 14px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;cursor:pointer;color:#334155;font-size:13px;font-weight:600;}
.pos-actions button.danger{color:var(--red);border-color:#f4a5af;background:#fff;}