/* ================= 合约交易（币安 / OKX 风格） ================= */
.ct-page {
  min-height: 100vh;
  background: #0b0e14;
  padding-bottom: 20px;
}

/* ---------- 标的头 ---------- */
.ct-page .hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 11px 14px 8px;
}
.ct-page .hd-l { flex: 1; min-width: 0; }
.ct-page .sym {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffffff;
}
.ct-page .perp {
  font-size: 9.5px;
  color: #8b96a8;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  padding: 0.5px 4px;
  margin-left: 6px;
}
.ct-page .caret {
  font-size: 10px;
  color: #8b96a8;
  margin-left: 4px;
}
.ct-page .nm {
  display: block;
  font-size: 11px;
  color: #8b96a8;
  margin-top: 3px;
}
.ct-page .hd-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ct-page .px {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
}
.ct-page .chg {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

/* ---------- 指标条 ---------- */
.ct-page .metrics {
  display: flex;
  padding: 4px 14px 10px;
}
.ct-page .m {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ct-page .mk {
  font-size: 10px;
  color: #5c6675;
}
.ct-page .mv {
  font-size: 11.5px;
  color: #c8d2e0;
  margin-top: 3px;
}

/* ---------- 开仓面板 ---------- */
.ct-page .panel {
  background: #141a24;
  border: 0.5px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin: 0 10px 9px;
  padding: 12px 12px 11px;
}
.ct-page .p-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ct-page .p-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.ct-page .avail {
  display: flex;
  align-items: center;
}
.ct-page .avail-k {
  font-size: 10.5px;
  color: #5c6675;
  margin-right: 4px;
}
.ct-page .avail-v {
  font-size: 12px;
  font-weight: 600;
  color: #6ea3ff;
}

.ct-page .lev-line {
  display: flex;
  align-items: baseline;
  margin-top: 10px;
}
.ct-page .lev-num {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.ct-page .lev-x {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-left: 2px;
}
.ct-page .lev-note {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.ct-page .note-t {
  font-size: 9.5px;
  color: #5c6675;
  line-height: 1.7;
}

/* 滑块 */
.ct-page .slider-wrap {
  display: flex;
  align-items: center;
  margin-top: 3px;
}
.ct-page .sl {
  flex: 1;
  margin: 0 5px;
}
.ct-page .sl-step {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1c2431;
  color: #c8d2e0;
  font-size: 15px;
  line-height: 25px;
  text-align: center;
  flex: none;
}
.ct-page .sl-step:active { background: #26303f; }

.ct-page .ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.ct-page .tick {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: #8b96a8;
  padding: 4px 0;
  margin: 0 2px;
  border-radius: 5px;
  background: #101620;
  font-feature-settings: "tnum";
}
.ct-page .tick.on {
  background: rgba(76, 141, 255, 0.16);
  color: #6ea3ff;
  font-weight: 600;
}

/* 保证金 */
.ct-page .mar-box { margin-top: 12px; }
.ct-page .mar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ct-page .sub2 { color: #8b96a8; font-size: 12px; }
.ct-page .mar-input {
  display: flex;
  align-items: center;
  width: 190px;
  height: 42px;
  background: #0f141d;
  border: 0.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  padding: 0 9px;
}
.ct-page .cur {
  font-size: 13px;
  color: #8b96a8;
  margin-right: 4px;
}
.ct-page .mar-field {
  flex: 1;
  height: 42px;
  font-size: 15px;
  color: #ffffff;
}
.ct-page .ph { color: #46505f; }
.ct-page .unit {
  font-size: 10px;
  color: #5c6675;
  margin-left: 4px;
}

.ct-page .pcts {
  display: flex;
  margin-top: 7px;
}
.ct-page .pct {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: #8b96a8;
  padding: 6px 0;
  margin: 0 2.5px;
  border-radius: 5px;
  background: #101620;
}
.ct-page .pct:active { background: #1c2431; }

/* 预估 */
.ct-page .est {
  margin-top: 10px;
  padding-top: 4px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.05);
}
.ct-page .e-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4.5px 0;
  font-size: 11.5px;
  color: #c8d2e0;
}
.ct-page .liq-long { color: #ff4d4f; }
.ct-page .liq-short { color: #0fbf7f; }
.ct-page .sep {
  color: #3a4351;
  margin: 0 5px;
  font-size: 11px;
}

/* 开仓按钮 */
.ct-page .acts {
  display: flex;
  margin-top: 9px;
}
.ct-page .act {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ct-page .act + .act { margin-left: 8px; }
.ct-page .act.long { background: linear-gradient(180deg, #f0443e, #d62b26); }
.ct-page .act.short { background: linear-gradient(180deg, #10c983, #0a9d66); }
.ct-page .act:active { opacity: 0.86; }
.ct-page .act-t {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}
.ct-page .act-s {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1px;
  font-feature-settings: "tnum";
}
.ct-page .act.dis { opacity: 0.55; }

/* ---------- 持仓总览 ---------- */
.ct-page .ov {
  display: flex;
  margin: 0 10px 9px;
  padding: 10px 12px;
  background: #101620;
  border: 0.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.ct-page .ov-i {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ct-page .ov-v {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 4px;
}

/* ---------- 分段 ---------- */
.ct-page .segment { margin: 0 10px 8px; }

/* ---------- 持仓卡 ---------- */
.ct-page .pc {
  background: #141a24;
  border: 0.5px solid rgba(255, 255, 255, 0.05);
  border-radius: 11px;
  margin: 0 10px 8px;
  padding: 11px 12px 3px;
}
.ct-page .pc.danger {
  border-color: rgba(255, 77, 79, 0.34);
  background: linear-gradient(180deg, rgba(255, 77, 79, 0.07), #141a24 42%);
}
.ct-page .pc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.ct-page .pc-sym {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.ct-page .side-chip {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  color: #ffffff;
}
.ct-page .side-chip.long { background: #e5352f; }
.ct-page .side-chip.short { background: #0d9c6a; }
.ct-page .side-chip.sm { font-size: 8.5px; padding: 0.5px 4px; }
.ct-page .lev-chip {
  font-size: 9.5px;
  font-weight: 600;
  color: #ffb020;
  background: rgba(255, 176, 32, 0.14);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  font-feature-settings: "tnum";
}
.ct-page .lev-chip.sm { font-size: 8.5px; padding: 0.5px 4px; }
.ct-page .liq-tag {
  font-size: 8.5px;
  color: #ff4d4f;
  border: 0.5px solid rgba(255, 77, 79, 0.4);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
}

.ct-page .pc-pnl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ct-page .pnl-v {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}
.ct-page .pnl-r {
  font-size: 10.5px;
  margin-top: 2px;
  opacity: 0.9;
}

.ct-page .pc-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ct-page .g {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.ct-page .gk {
  font-size: 9.5px;
  color: #5c6675;
}
.ct-page .gv {
  font-size: 11.5px;
  color: #dfe6f0;
  margin-top: 2.5px;
}
.ct-page .liq-v { color: #ff8f8a; }

/* 风险条 */
.ct-page .risk {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.ct-page .risk-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #1c2431;
  overflow: hidden;
  margin-right: 7px;
}
.ct-page .risk-fill {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4c8dff, #ffb020);
}
.ct-page .risk-fill.hot { background: linear-gradient(90deg, #ffb020, #ff4d4f); }
.ct-page .risk-t {
  font-size: 9.5px;
  color: #5c6675;
  font-feature-settings: "tnum";
  flex: none;
}
.ct-page .risk-t.hot-t { color: #ff6b66; }

.ct-page .pc-acts {
  display: flex;
  margin-top: 7px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.05);
  padding: 3px 0;
}
.ct-page .pa {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #c8d2e0;
  padding: 9px 0;
  border-radius: 6px;
  margin-top: 4px;
}
.ct-page .pa + .pa { margin-left: 5px; }
.ct-page .pa.primary {
  background: rgba(76, 141, 255, 0.16);
  color: #6ea3ff;
  font-weight: 600;
}
.ct-page .pa:active { background: rgba(255, 255, 255, 0.05); }

.ct-page .foot-tip {
  text-align: center;
  font-size: 10px;
  color: #46505f;
  padding: 6px 20px 15px;
  line-height: 1.6;
}

/* ---------- 历史 ---------- */
.ct-page .hr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  margin: 0 10px 6px;
  background: #141a24;
  border-radius: 9px;
  border: 0.5px solid rgba(255, 255, 255, 0.04);
}
.ct-page .hr-l { flex: 1; min-width: 0; }
.ct-page .hr-code {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
}
.ct-page .hr-time {
  display: block;
  font-size: 10px;
  color: #5c6675;
  margin-top: 4px;
  font-feature-settings: "tnum";
}
.ct-page .hr-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ct-page .hr-v {
  font-size: 14px;
  font-weight: 700;
}
.ct-page .hr-p {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.9;
}

/* ---------- 空态 ---------- */
.ct-page .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ct-page .empty-t {
  font-size: 13px;
  color: #5c6675;
}
.ct-page .empty-s {
  font-size: 11px;
  color: #3d4653;
  margin-top: 5px;
}

/* ---------- 弹层 ---------- */
.ct-page .mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: flex-end;
}
.ct-page .sheet {
  width: 100%;
  background: #161d28;
  border-radius: 14px 14px 0 0;
  padding: 13px 14px calc(15px + 0px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  animation: up 0.2s ease-out;
}
@keyframes up {
  from { transform: translateY(30px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
.ct-page .sheet-head { margin-bottom: 9px; }
.ct-page .sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}
.ct-page .sheet-close {
  font-size: 15px;
  color: #5c6675;
  padding: 0 5px;
}
.ct-page .sheet-tabs {
  display: flex;
  background: #101620;
  border-radius: 7px;
  padding: 2.5px;
  margin-bottom: 9px;
}
.ct-page .st {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #8b96a8;
  padding: 7px 0;
  border-radius: 5px;
}
.ct-page .st.on {
  background: #1f2836;
  color: #ffffff;
  font-weight: 600;
}
.ct-page .sheet-row { padding: 6px 0; font-size: 12.5px; }
.ct-page .adj-input {
  display: flex;
  align-items: center;
  height: 50px;
  background: #0f141d;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0 11px;
  margin-top: 6px;
}
.ct-page .adj-field {
  flex: 1;
  height: 50px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-left: 3px;
}
.ct-page .chips {
  display: flex;
  margin-top: 7px;
}
.ct-page .chip {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  color: #8b96a8;
  background: #101620;
  border-radius: 6px;
  padding: 7px 0;
  margin: 0 2.5px;
  font-feature-settings: "tnum";
}
.ct-page .chip:active { background: #1c2431; }
.ct-page .sheet-tip {
  font-size: 10px;
  color: #5c6675;
  margin-top: 8px;
  line-height: 1.6;
}
.ct-page .btn-sheet {
  height: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 10px;
}
.ct-page .btn-sheet.pos { background: linear-gradient(180deg, #4c8dff, #2f6fe0); }
.ct-page .btn-sheet.neg { background: linear-gradient(180deg, #ffb020, #e09000); }

.ct-page .sym-list {
  max-height: 310px;
}
.ct-page .sym-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
}
.ct-page .sym-item.on .code { color: #6ea3ff; }
.ct-page .sym-ok {
  color: #4c8dff;
  font-size: 14px;
}