/* ====== Spot Trade 页面局部样式（st- 前缀） ====== */
.st-right-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;      /* 防止内容撑破 */
}

/* 盘口、实时成交面板本身占满右侧高度 */
.st-ob-wrap,
.st-trades-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;         /* 让内部列表可以滚动 */
}

    .st-page-wrap{
      padding:16px 0 32px;
    }

    .st-layout{
      display:grid;
      /* 左 250，中间更宽，右侧较窄 */
      grid-template-columns:250px minmax(0,2.6fr) 250px;
      grid-gap:10px;
      min-height:640px;
    }

    .st-panel{
      background:#0b1220;
      border-radius:8px;
      box-shadow:0 6px 18px rgba(0,0,0,0.5);
      box-sizing:border-box;
    }

    .st-panel-header{
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,0.06);
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:12px;
      color:#9ca3af;
    }

    .st-panel-header-right{
      justify-content:flex-start;
    }

    .st-panel-title{
      font-size:13px;
      font-weight:500;
      color:#e5e7eb;
      display:flex;
      align-items:center;
      gap:6px;
    }

    /* ===== 左侧：市场列表 ===== */
    .st-market-panel{
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .st-market-tabs{
      display:flex;
      gap:4px;
      font-size:12px;
    }

    .st-market-tab{
      padding:4px 8px;
      border-radius:999px;
      cursor:pointer;
      color:#9ca3af;
      background:transparent;
      border:1px solid transparent;
    }

    .st-market-tab.active{
      background:#111827;
      color:#fbbf24;
      border-color:rgba(248,250,252,0.12);
    }

    .st-market-search{
      margin:8px 12px;
      margin-top:4px;
    }

    .st-market-search input{
      width:100%;
      border-radius:4px;
      border:1px solid #1f2937;
      background:#020617;
      color:#e5e7eb;
      padding:5px 8px;
      font-size:12px;
      box-sizing:border-box;
    }

    .st-market-search input:focus{
      outline:none;
      border-color:#fbbf24;
    }

    .st-market-head-row{
      display:grid;
      grid-template-columns:0.4fr 1.4fr 1fr 0.8fr;
      padding:4px 12px;
      font-size:11px;
      color:#6b7280;
      border-bottom:1px solid rgba(255,255,255,0.03);
    }

    .st-market-list{
      flex:1;
      overflow-y:auto;
      padding:2px 0 4px;
      max-height:calc(100vh - 220px);
    }

    .st-market-item{
      display:grid;
      grid-template-columns:0.4fr 1.4fr 1fr 0.8fr;
      padding:5px 12px;
      font-size:12px;
      color:#e5e7eb;
      cursor:pointer;
      align-items:center;
    }

    .st-market-item:hover{
      background:#020617;
    }

    .st-market-item.active{
      background:#111827;
    }

    .st-m-symbol{
      display:flex;
      flex-direction:column;
    }

    .st-m-symbol span:first-child{
      font-weight:500;
      font-size:12px;
    }

    .st-m-symbol span:last-child{
      font-size:16px;
      color:#d7ddeb;
    }

    .st-m-price{
      text-align:right;
      font-variant-numeric:tabular-nums;
    }

    .st-m-change{
      text-align:right;
      font-variant-numeric:tabular-nums;
    }

    .st-up{color:#16a34a;}
    .st-down{color:#f97373;}

    .st-fav-cell{
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .st-fav-icon{
      font-size:15px;
      color:#4b5563;
      cursor:pointer;
    }

    .st-fav-icon.on{
      color:#fbbf24;
    }

    /* ===== 中间：K线 + 底部交易 ===== */
    .st-center-panel{
      display:flex;
      flex-direction:column;
    }

    .st-symbol-title{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:13px;
    }

    .st-symbol-main{
      font-size:16px;
      font-weight:600;
      color:#e5e7eb;
    }

    .st-symbol-price{
      font-size:18px;
      font-weight:600;
      color:#16a34a;
    }

    .st-symbol-sub{
      font-size:12px;
      color:#6b7280;
    }

    .st-top-info{
      display:flex;
      align-items:center;
      gap:14px;
      font-size:11px;
      color:#9ca3af;
    }

    .st-top-info span strong{
      color:#e5e7eb;
      margin-left:4px;
    }

    .st-chart-wrap{
      flex:1;
      min-height:320px;
      padding:6px 8px 8px;
      box-sizing:border-box;
    }

    .st-chart-toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:11px;
      color:#9ca3af;
      margin-bottom:4px;
    }

    .st-timeframe-tabs span{
      margin-right:6px;
      padding:2px 6px;
      border-radius:999px;
      cursor:pointer;
    }

    .st-timeframe-tabs span.active{
      background:#111827;
      color:#fbbf24;
    }

    .st-chart-area{
      height:380px;
      background:#020617;
      border-radius:4px;
      position:relative;
      overflow:hidden;
    }

    .st-chart-placeholder{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      color:#6b7280;
      border:1px dashed rgba(148,163,184,0.35);
    }

    /* 中间底部：交易 tabs + 买卖表单 */
    .st-trade-tabs-bar{
      border-top:1px solid rgba(31,41,55,0.9);
      border-bottom:1px solid rgba(31,41,55,0.9);
      font-size:12px;
      display:flex;
      justify-content:space-between;
      padding:0 10px;
    }

    .st-trade-main-tabs,
    .st-trade-sub-tabs{
      display:flex;
      align-items:center;
    }

    .st-trade-main-tabs span,
    .st-trade-sub-tabs span{
      padding:6px 10px;
      cursor:pointer;
      color:#9ca3af;
    }

    .st-trade-main-tabs span.active,
    .st-trade-sub-tabs span.active{
      color:#fbbf24;
    }

    .st-trade-panel{
      padding:8px 8px 10px;
      box-sizing:border-box;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      font-size:12px;
    }

    .st-trade-box{
      background:#020617;
      border-radius:4px;
      padding:10px 10px 12px;
      box-sizing:border-box;
    }

    .st-trade-title{
      font-size:12px;
      margin-bottom:8px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .st-trade-title span:first-child{
      font-weight:500;
    }

    .st-trade-balance{
      font-size:11px;
      color:#6b7280;
    }

    .st-trade-balance strong{
      color:#e5e7eb;
      margin-left:4px;
    }

    .st-form-row{
      margin-bottom:8px;
    }

    .st-form-label{
      font-size:11px;
      color:#9ca3af;
      margin-bottom:2px;
    }

    .st-input{
      width:100%;
      border-radius:4px;
      border:1px solid #1f2937;
      background:#020617;
      color:#e5e7eb;
      padding:6px 8px;
      font-size:12px;
      box-sizing:border-box;
    }

    .st-input:focus{
      outline:none;
      border-color:#10b981;
    }

    .st-input-inline{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .st-input-unit{
      font-size:11px;
      color:#6b7280;
      white-space:nowrap;
    }

    .st-slider-row{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .st-slider-row input[type="range"]{
      flex:1;
    }

    .st-slider-percent{
      font-size:11px;
      color:#9ca3af;
      min-width:40px;
      text-align:right;
    }

    .st-trade-btn{
      margin-top:6px;
      width:100%;
      padding:7px 8px;
      border-radius:4px;
      border:none;
      font-size:13px;
      cursor:pointer;
      font-weight:600;
      color:#fff;
    }

    .st-trade-btn-buy{background:#16a34a;}
    .st-trade-btn-buy:hover{background:#15803d;}
    .st-trade-btn-sell{background:#f97373;}
    .st-trade-btn-sell:hover{background:#ef4444;}

    .st-login-tip-center{
      grid-column:1/3;
      margin-top:4px;
      text-align:center;
    }

    .st-login-btn{
      display:inline-block;
      padding:8px 40px;
      border-radius:4px;
      background:#10b981;
      color:#fff;
      font-size:13px;
      text-decoration:none;
    }

    .st-login-btn:hover{
      background:#0f9b75;
      color:#fff;
    }

    /* ===== 右侧：盘口 + 实时成交 ===== */
    .st-right-panel{
      display:flex;
      flex-direction:column;
    }

    .st-ob-tabs{
      display:flex;
      font-size:12px;
      gap:16px;
    }

    .st-ob-tab{
      padding:4px 0;
      cursor:pointer;
      color:#9ca3af;
      position:relative;
    }

    .st-ob-tab.active{
      color:#fbbf24;
    }

    .st-ob-tab.active::after{
      content:'';
      position:absolute;
      left:0;
      right:0;
      bottom:-6px;
      height:2px;
      background:#fbbf24;
      border-radius:999px;
    }

    .st-ob-wrap,
    .st-trades-wrap{
      font-size:11px;
    }
.st-ob-wrap{
  padding:4px 8px 6px;
  box-sizing:border-box;
}

.st-ob-head-row,
.st-trades-head{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  color:#6b7280;
  padding:0 2px 2px;
}

/* 列表高度由 flex 控制，不再写死 max-height */
.st-ob-list,
.st-trades-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  font-size:11px;
  padding:2px 0 4px;
}

.st-ob-row{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  padding:1px 2px;
  align-items:center;
}

.st-trade-row{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  padding:1px 2px;
  align-items:center;
}

/* 数字对齐：等宽数字 + 右对齐 */
.st-ob-row span,
.st-trade-row span{
  font-variant-numeric:tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
}

.st-ob-row span:nth-child(1),
.st-trade-row span:nth-child(1){text-align:left;}

.st-ob-row span:nth-child(2),
.st-ob-row span:nth-child(3),
.st-trade-row span:nth-child(2),
.st-trade-row span:nth-child(3){
  text-align:left;
}


    .st-ob-last-row{
      margin-top:2px;
      border-top:1px solid rgba(31,41,55,0.9);
      padding-top:4px;
      display:flex;
      justify-content:space-between;
      font-size:11px;
      color:#9ca3af;
    }

    .st-trades-wrap{
      border-top:1px solid rgba(31,41,55,0.9);
      padding:6px 8px 8px;
      box-sizing:border-box;
      flex:1;
    }

    .st-trades-list{
      max-height:620px;
      overflow-y:auto;
    }

    .st-trade-row{
      display:grid;
      grid-template-columns:1.3fr 1fr 1fr;
      padding:1px 2px;
      align-items:center;
      font-variant-numeric:tabular-nums;
    }

    .st-trade-row span:nth-child(1){text-align:left;}
    .st-trade-row span:nth-child(2),
    .st-trade-row span:nth-child(3){text-align:left;}

    .st-empty-tip{
      text-align:center;
      padding:16px 0;
      color:#6b7280;
      font-size:11px;
    }

    /* ===== 底部：当前委托 / 委托历史 / 资产 / 交易机器人 ===== */
    .st-bottom-wrap{
      margin-top:14px;
    }

    .st-bottom-panel{
      padding:10px 16px 18px;
    }

    .st-bottom-main-tabs{
      display:flex;
      gap:24px;
      font-size:14px;
      border-bottom:1px solid #111827;
    }

    .st-bottom-main-tab{
      padding:10px 0;
      cursor:pointer;
      position:relative;
      color:#9ca3af;
    }

    .st-bottom-main-tab.active{
      color:#f9fafb;
    }

    .st-bottom-main-tab.active::after{
      content:'';
      position:absolute;
      left:0;
      right:0;
      bottom:-1px;
      height:2px;
      background:#fbbf24;
      border-radius:999px;
    }

    .st-bottom-sub-tabs{
      display:flex;
      gap:16px;
      font-size:12px;
      margin-top:8px;
    }

    .st-bottom-sub-tab{
      padding:4px 0;
      cursor:pointer;
      color:#9ca3af;
      position:relative;
    }

    .st-bottom-sub-tab.active{
      color:#fbbf24;
    }

    .st-bottom-table-wrap{
      margin-top:10px;
      overflow-x:auto;
    }

    .st-bottom-table{
      width:100%;
      border-collapse:collapse;
      font-size:12px;
      min-width:880px;
    }

    .st-bottom-table thead th{
      text-align:left;
      padding:6px 4px;
      font-weight:400;
      color:#6b7280;
    }

    .st-bottom-table tbody td{
      padding:10px 4px;
      border-top:1px solid rgba(31,41,55,0.9);
      color:#9ca3af;
    }

    .st-bottom-login-tip{
      text-align:center;
      padding:32px 0;
      color:#6b7280;
      font-size:13px;
    }

    .st-bottom-login-tip a{
      color:#3b82f6;
      text-decoration:none;
      margin:0 3px;
    }

    .st-bottom-login-tip a:hover{
      text-decoration:underline;
    }

    @media (max-width:1280px){
      .st-layout{
        grid-template-columns:220px minmax(0,2.6fr) 230px;
      }
    }



    /* ===== 列表滚动条美化（左侧市场 + 盘口 + 实时成交） ===== */
.st-market-list,
.st-ob-list,
.st-trades-list{
  scrollbar-width:thin;
  scrollbar-color:#4b5563 transparent;
}

.st-market-list::-webkit-scrollbar,
.st-ob-list::-webkit-scrollbar,
.st-trades-list::-webkit-scrollbar{
  width:4px;
}

.st-market-list::-webkit-scrollbar-track,
.st-ob-list::-webkit-scrollbar-track,
.st-trades-list::-webkit-scrollbar-track{
  background:#020617;
}

.st-market-list::-webkit-scrollbar-thumb,
.st-ob-list::-webkit-scrollbar-thumb,
.st-trades-list::-webkit-scrollbar-thumb{
  background:#4b5563;
  border-radius:4px;
}

.st-market-list::-webkit-scrollbar-thumb:hover,
.st-ob-list::-webkit-scrollbar-thumb:hover,
.st-trades-list::-webkit-scrollbar-thumb:hover{
  background:#6b7280;
}