/* ============ DSJ 设计系统 v2 · 交易所级(dsj2.css,最后加载) ============ */

/* ---- 顶部行情带(两端通用,含 Telegram) ---- */
#dsjTicker{display:flex;align-items:center;gap:22px;padding:9px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:12.5px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
#dsjTicker::-webkit-scrollbar{display:none}
#dsjTicker .tk{display:inline-flex;gap:7px;align-items:baseline;flex:none}
#dsjTicker .tk .c{color:var(--muted);font-weight:700}
#dsjTicker .tk .p{font-weight:700;color:var(--text);font-style:normal}
#dsjTicker .tk .p.gold{color:var(--gold-2)}
#dsjTicker .chg{font-size:11px;font-weight:700}
#dsjTicker .chg.up{color:var(--green)}#dsjTicker .chg.dn{color:var(--red)}
#dsjTicker .pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px;background:rgba(46,189,133,.1);color:var(--green)}
#dsjTicker .pill .d{width:6px;height:6px;border-radius:99px;background:var(--green);box-shadow:0 0 7px var(--green)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- 英雄横幅 hero2(两端) ---- */
.hero2{background:linear-gradient(120deg,#171408 0%,var(--card) 46%);border:1px solid rgba(232,184,75,.32);border-radius:var(--radius);padding:19px 18px;margin-bottom:12px}
.hero2 .h2tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--green);background:rgba(46,189,133,.1);padding:4px 11px;border-radius:99px;margin-bottom:10px}
.hero2 .h2tag .d{width:7px;height:7px;border-radius:99px;background:var(--green);box-shadow:0 0 8px var(--green);flex:none}
.hero2 h1{font-size:20px;font-weight:900;line-height:1.3;letter-spacing:.01em}
.hero2 .h2sub{color:var(--muted);font-size:12px;margin-top:5px}
.h2stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}
.h2s{background:rgba(10,13,19,.55);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.h2s .k{font-size:10px;color:var(--faint);letter-spacing:.1em}
.h2s .v{font-size:18px;font-weight:800;margin-top:2px;color:var(--text)}
.h2s .v.up{color:var(--green)}.h2s .v.gold{color:var(--gold-2)}
.h2s .s{font-size:10.5px;color:var(--faint);margin-top:2px}
.h2cta{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.h2cta .btn{width:auto;flex:none;padding:11px 22px}
.h2cta .h2main{background:linear-gradient(135deg,#F0CE6E,#D9A93E);color:#241a02;font-weight:800}
.h2cta .ghost2{background:none;border:1px solid var(--line);color:var(--text);font-weight:700}
@media(max-width:919px){.h2stats .h2s:nth-child(5){display:none}}

/* 产品瓦片 logo */
.tile .ico-img{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block}

/* ---- 桌面:v3 侧栏导航 ---- */
@media(min-width:920px){
  body.desk .tabbar{display:none}
  body.desk #deskSide{gap:16px;padding:20px 12px 14px}
  body.desk .desk-brand img{width:38px;height:38px;border-radius:10px}
  body.desk .desk-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
  body.desk .desk-nav::-webkit-scrollbar{display:none}
  body.desk .nv-grp{font-size:9.5px;color:var(--faint);letter-spacing:.15em;padding:13px 10px 5px;text-transform:uppercase}
  body.desk .nv{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--muted);font-weight:600;font-size:13.5px;cursor:pointer}
  body.desk .nv:hover{background:rgba(255,255,255,.04);color:var(--text)}
  body.desk .nv.on{background:rgba(232,184,75,.1);color:var(--gold-2)}
  body.desk .nv svg{width:17px;height:17px;flex:none}
  body.desk .nv .nv-img{width:19px;height:19px;border-radius:5px;flex:none;object-fit:cover}
  body.desk .nv .nv-b{margin-left:auto;font-style:normal;font-size:9px;padding:2px 7px;border-radius:99px;font-weight:700}
  body.desk .nv .nv-b.up{background:rgba(46,189,133,.12);color:var(--green)}
  body.desk #dsjTicker{padding:9px 26px;gap:26px}

  /* 首页:左内容 + 右栏 */
  body.desk #page-home.active{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:0 20px;align-items:start}
  body.desk #page-home.active>*{grid-column:1;min-width:0}
  body.desk #page-home.active>#deskRail{grid-column:2;grid-row:1 / span 99}
  body.desk .hero2{padding:24px 24px 20px}
  body.desk .hero2 h1{font-size:22px}
  body.desk .h2stats{grid-template-columns:repeat(5,1fr)}
  body.desk #deskRail{display:flex;flex-direction:column;gap:12px}
  body.desk #deskRail .promo-mq,body.desk #deskRail .dsjpoly-mq,body.desk #deskRail .live-banner{margin:0}
  body.desk .rc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px}
  body.desk .rh{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;margin-bottom:9px}
  body.desk .rh .d{width:6px;height:6px;border-radius:99px;background:var(--green);box-shadow:0 0 7px var(--green)}
  body.desk .feed .fi{display:flex;gap:9px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
  body.desk .feed .fi:last-of-type{border-bottom:none}
  body.desk .feed .sl{color:var(--green);font-weight:700;flex:none}
  body.desk .feed .ss{color:var(--red);font-weight:700;flex:none}
  body.desk .feed .fr{margin-left:auto;color:var(--muted);font-size:11px}
  body.desk .feed .chips{display:flex;flex-wrap:wrap;gap:5px;padding-top:9px}
  body.desk .feed .chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--line)}
  body.desk .feed .chip.cl{color:var(--green)}body.desk .feed .chip.cs{color:var(--red)}
  body.desk .rl{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
  body.desk .rl:last-of-type{border-bottom:none}
  body.desk .rl b{font-weight:600}
  body.desk .rl span{color:var(--faint)}
  body.desk .rl .up{color:var(--green);font-weight:700}
  body.desk .rl:hover b{color:var(--gold-2)}

  /* 首页三组瓦片:三列 */
  body.desk #page-home .grid{grid-template-columns:repeat(3,1fr);gap:12px}

  /* ---- 合约页:一体化终端框(perp2 v2) ---- */
  body.desk #page-perp.active{display:block;max-width:1560px}
  body.desk #page-perp .pp-off{display:none!important}
  body.desk #ppTerm{display:grid;grid-template-columns:262px minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  body.desk #ppHead{grid-column:1/-1;display:flex;align-items:center;gap:26px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--card)}
  body.desk #ppBook{grid-column:1;grid-row:2 / span 2;border-right:1px solid var(--line);padding:11px 12px;font-size:11.5px;overflow-y:auto;max-height:760px}
  body.desk #ppMain{grid-column:2;grid-row:2;min-width:0;padding:8px 10px 0}
  body.desk #ppSide{grid-column:3;grid-row:2 / span 2;border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:11px}
  body.desk #ppBott{grid-column:2;grid-row:3;border-top:1px solid var(--line);padding:11px 14px;min-height:150px}

  /* 表头 */
  body.desk .pph-coin{position:relative}
  body.desk .pph-coin .perp-coinrow{display:flex;align-items:center;gap:9px}
  body.desk .pph-coin #perpCoinBtn{display:inline-flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line-strong,rgba(255,255,255,.14));color:var(--text)!important;border-radius:10px;padding:9px 14px;font-size:16px;font-weight:800;cursor:pointer;line-height:1}
  body.desk .pph-coin #perpCoinBtn *{color:var(--text)}
  body.desk .pph-coin .perp-coin-arrow{font-size:11px;color:var(--muted)}
  body.desk .pph-coin .perp-powered{font-size:10px;color:var(--faint)}
  body.desk .pph-coin .perp-mkt-list{position:absolute;top:calc(100% + 9px);left:0;z-index:70;width:300px;max-height:430px;overflow-y:auto;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.55);display:none}
  body.desk .pph-coin .perp-mkt-list.on{display:block}
  body.desk .pph-px .perp-pxrow{display:flex;align-items:baseline;gap:10px}
  body.desk .pph-px #perpPx{font-size:23px;font-weight:900;font-variant-numeric:tabular-nums}
  body.desk .pph-stats{display:flex;gap:24px;margin-left:auto}
  body.desk .pph-s .k{font-size:10px;color:var(--faint)}
  body.desk .pph-s .v{font-size:12.5px;font-weight:700;margin-top:2px}
  body.desk .pph-s .v.up{color:var(--green)}body.desk .pph-s .v.dn{color:var(--red)}

  /* 盘口/成交 */
  body.desk .ppb-t{font-size:12px;font-weight:800;margin-bottom:6px}
  body.desk .ppl-th{display:flex;justify-content:space-between;gap:6px;color:var(--faint);font-size:10px;padding:2px 2px 5px}
  body.desk .ob-r{position:relative;display:flex;justify-content:space-between;gap:6px;padding:2.5px 2px;font-variant-numeric:tabular-nums}
  body.desk .ob-d{position:absolute;right:0;top:0;bottom:0;opacity:.11;border-radius:3px}
  body.desk .ob-d.up{background:var(--green)}body.desk .ob-d.dn{background:var(--red)}
  body.desk .ob-p{position:relative;font-weight:700}
  body.desk .ob-p.up{color:var(--green)}body.desk .ob-p.dn{color:var(--red)}
  body.desk .ob-s{position:relative;color:var(--muted)}
  body.desk #ppMid{text-align:center;font-size:15.5px;font-weight:900;color:var(--gold-2);padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
  body.desk .tr-r{display:flex;justify-content:space-between;gap:6px;padding:2.5px 2px;font-variant-numeric:tabular-nums}
  body.desk .tr-r .up{color:var(--green);font-weight:700}body.desk .tr-r .dn{color:var(--red);font-weight:700}
  body.desk .tr-r .tr-t{color:var(--faint);font-size:10.5px}

  /* 图表区 */
  body.desk #ppIvs{display:flex;align-items:center;gap:4px;padding:2px 4px 8px}
  body.desk #ppIvs button{background:none;border:none;color:var(--muted);font-size:12px;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer}
  body.desk #ppIvs button:hover{color:var(--text);background:rgba(255,255,255,.05)}
  body.desk #ppIvs button.on{color:var(--gold-2);background:rgba(232,184,75,.12)}
  body.desk #ppLegend{margin-left:14px;font-size:11px;color:var(--muted)}
  body.desk #ppLegend b{font-weight:700;color:var(--text);margin-right:2px}
  body.desk #ppLegend b.up{color:var(--green)}body.desk #ppLegend b.dn{color:var(--red)}
  body.desk #ppChart2{height:470px}
  body.desk #ppTv{height:508px}
  body.desk #ppMain .pp-hidden{display:none!important}
  body.desk .tradesub{display:none!important}

  /* 右柱下单 */
  body.desk #ppSide .perp-side{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  body.desk #ppSide .perp-side button{flex:1;background:none;border:none;color:var(--muted);font-weight:800;font-size:13.5px;padding:11px 0;cursor:pointer}
  body.desk #ppSide .perp-side button[data-side="long"].on{background:rgba(46,189,133,.16);color:var(--green)}
  body.desk #ppSide .perp-side button[data-side="short"].on{background:rgba(246,70,93,.16);color:var(--red)}
  body.desk #ppSide .perp-lev,body.desk #ppSide .perp-size{margin:0}
  body.desk #ppSide .perp-submit{width:100%;padding:13px 0;font-size:14.5px;font-weight:800;border:none;border-radius:10px;cursor:pointer}
  body.desk #ppSide .perp-submit.long{background:var(--green);color:#03130b}
  body.desk #ppSide .perp-submit.short{background:var(--red);color:#fff}
  body.desk #ppPcts{display:flex;gap:6px;margin-top:8px}
  body.desk #ppPcts button{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:5px 0;font-size:11px;font-weight:700;cursor:pointer}
  body.desk #ppPcts button:hover{color:var(--gold-2);border-color:rgba(232,184,75,.4)}
  body.desk .pps-hr{border-top:1px solid var(--line);margin:2px 0}
  body.desk #ppSide .perp-acct{display:flex;gap:10px}
  body.desk #ppSide .perp-acct .stat{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;text-align:center}
  body.desk #ppSide .perp-acct .v{font-size:14px;font-weight:800}
  body.desk #ppSide .perp-acct .k{font-size:10px;color:var(--faint);margin-top:2px}
  body.desk #ppSide #perpAuth,body.desk #ppSide #perpDeposit,body.desk #ppSide #perpFee{font-size:11px;line-height:1.6;color:var(--muted)}
  body.desk .pps-ref{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:none!important;border:1px solid var(--line)!important;border-radius:10px;padding:10px 12px!important;cursor:pointer}
  body.desk .pps-ref:hover{border-color:rgba(232,184,75,.4)!important}

  /* 底部持仓 */
  body.desk #ppBott .ppb-t{margin-bottom:8px}
  body.desk #ppBott .perp-empty{padding:24px 0;text-align:center}

  /* 信息条 */
  body.desk #ppBar{display:flex;align-items:center;gap:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px}
  body.desk #ppbL{position:relative}
  body.desk #ppbL .perp-coinrow{display:flex;align-items:center;gap:10px}
  body.desk #ppbL #perpCoinBtn{background:var(--card2);border:1px solid var(--line-strong,rgba(255,255,255,.12));color:var(--text);border-radius:10px;padding:9px 14px;font-size:15px;font-weight:800;cursor:pointer}
  body.desk #ppbL .perp-powered{font-size:10px;color:var(--faint)}
  body.desk #ppbL .perp-mkt-list{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:300px;max-height:420px;overflow-y:auto;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.5);display:none}
  body.desk #ppbL .perp-mkt-list.on{display:block}
  body.desk #ppbPx .perp-pxrow{display:flex;align-items:baseline;gap:10px}
  body.desk #ppbPx #perpPx{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
  body.desk .ppb-stats{display:flex;gap:22px;margin-left:auto}
  body.desk .ppb-s .k{font-size:10px;color:var(--faint)}
  body.desk .ppb-s .v{font-size:12.5px;font-weight:700;margin-top:2px}
  body.desk .ppb-s .v.up{color:var(--green)}body.desk .ppb-s .v.dn{color:var(--red)}

  /* 盘口 + 成交 */
  body.desk #ppLeft{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 10px;font-size:11.5px}
  body.desk .ppl-h{font-size:12px;font-weight:800;margin-bottom:7px}
  body.desk .ppl-th,body.desk .tr-r{display:flex;justify-content:space-between;gap:6px}
  body.desk .ppl-th{color:var(--faint);font-size:10px;padding:2px 2px 5px}
  body.desk .ob-r{position:relative;display:flex;justify-content:space-between;gap:6px;padding:2.5px 2px;font-variant-numeric:tabular-nums}
  body.desk .ob-d{position:absolute;right:0;top:0;bottom:0;opacity:.1;border-radius:3px}
  body.desk .ob-d.up{background:var(--green)}body.desk .ob-d.dn{background:var(--red)}
  body.desk .ob-p{position:relative;font-weight:700}
  body.desk .ob-p.up{color:var(--green)}body.desk .ob-p.dn{color:var(--red)}
  body.desk .ob-s{position:relative;color:var(--muted)}
  body.desk .ppl-mid{text-align:center;font-size:15px;font-weight:900;color:var(--gold-2);padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
  body.desk .tr-r{padding:2.5px 2px;font-variant-numeric:tabular-nums}
  body.desk .tr-r .up{color:var(--green);font-weight:700}body.desk .tr-r .dn{color:var(--red);font-weight:700}
  body.desk .tr-r .tr-t{color:var(--faint);font-size:10.5px}

  /* 下单柱 */
  body.desk #page-perp .perp-side button{font-weight:800}
  body.desk #page-perp .perp-side button.on[data-side="long"],body.desk #page-perp .perp-side button[data-side="long"].on{background:rgba(46,189,133,.16);color:var(--green)}
  body.desk #page-perp .perp-side button.on[data-side="short"],body.desk #page-perp .perp-side button[data-side="short"].on{background:rgba(246,70,93,.16);color:var(--red)}
  body.desk #page-perp .perp-submit.long{background:var(--green);color:#03130b}
  body.desk #page-perp .perp-submit.short{background:var(--red);color:#fff}
  body.desk #ppPcts{display:flex;gap:6px;margin-top:8px}
  body.desk #ppPcts button{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:5px 0;font-size:11px;font-weight:700;cursor:pointer}
  body.desk #ppPcts button:hover{color:var(--gold-2);border-color:rgba(232,184,75,.4)}
}

/* ---- 手机端:底部导航精修(新语言) ---- */
@media(max-width:919px){
  .tabbar{background:rgba(12,15,22,.97);border-top:1px solid var(--line)}
  .tab.on .tico{color:var(--gold-2)}
  #dsjTicker{position:relative}
}

/* ---- 侧栏一键收起(nav-min:图标模式,交易区扩大) ---- */
@media (min-width: 920px) {
  body.desk #deskNavTog{position:absolute;top:22px;right:8px;z-index:5;width:24px;height:24px;border-radius:7px;
    background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:0}
  body.desk #deskNavTog:hover{color:var(--gold-2);border-color:rgba(232,184,75,.4)}
  body.desk #deskSide{position:sticky}
  body.desk .desk-brand{padding-right:30px}

  body.desk.nav-min #app{grid-template-columns:64px minmax(0,1fr)}
  body.desk.nav-min #deskSide{padding:56px 8px 14px}
  body.desk.nav-min #deskNavTog{top:20px;right:50%;transform:translateX(50%)}
  body.desk.nav-min .desk-brand{flex-direction:column;justify-content:center;padding:0;gap:0}
  body.desk.nav-min .desk-brand div{display:none}
  body.desk.nav-min .desk-brand img{width:34px;height:34px}
  body.desk.nav-min .nv-grp{display:none}
  body.desk.nav-min .nv span,body.desk.nav-min .nv .nv-b{display:none}
  body.desk.nav-min .nv{justify-content:center;padding:12px 0}
  body.desk.nav-min .desk-foot{display:none}
  body.desk.nav-min #page-perp.active{max-width:1800px}
  body.desk.nav-min .page{max-width:1320px}
}