/* ============ 客户端样式 ============ */
body { display: flex; flex-direction: column; min-height: 100vh; }

/* 认证 */
.auth-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at top, #1a2338 0%, var(--bg) 70%);
}
.auth-box { width: 380px; padding: 36px; text-align: center; }
.auth-logo { font-size: 44px; }
.auth-box h1 { font-size: 22px; margin: 8px 0 4px; }
.auth-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
.auth-tabs { display: flex; gap: 4px; background: var(--bg-panel); padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; padding: 8px; background: transparent; border: none; border-radius: 8px;
  color: var(--text-dim); cursor: pointer; font-size: 14px; transition: all .15s;
}
.auth-tab.active { background: var(--blue); color: #fff; }
.auth-box .form-row { text-align: left; }

/* 顶栏 */
.topbar {
  display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 62px;
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.topbar-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.logo { font-size: 22px; }
.topnav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav-btn {
  background: transparent; border: none; color: var(--text-dim); padding: 8px 18px;
  border-radius: 8px; cursor: pointer; font-size: 15px; transition: all .15s;
  white-space: nowrap; flex-shrink: 0;
}
.nav-btn:hover { color: var(--text); background: var(--bg-hover); }
.nav-btn.active { color: #fff; background: var(--blue); }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.asset-box { display: flex; flex-direction: column; align-items: flex-end; }
.asset-label { font-size: 11px; color: var(--text-dim); }
.asset-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.asset-pnl { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.user-chip { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--blue);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px;
  border: 2px solid transparent;
}
.avatar.frame-gold { border-color: #f0b429; box-shadow: 0 0 6px rgba(240,180,41,.7); }
.avatar.frame-diamond { border-color: #38bdf8; box-shadow: 0 0 6px rgba(56,189,248,.7); }
.user-name { font-size: 14px; color: var(--text); }

/* 市场时钟 */
.market-clock {
  display: flex; flex-direction: column; align-items: flex-end; font-size: 11px;
  padding-right: 4px;
}
.market-clock .clock-time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.market-clock.open { color: var(--red); }
.market-clock.closed { color: var(--gold); }
.market-clock .clock-status { font-weight: 600; }

/* 主内容 */
.main { padding: 20px 24px; max-width: 1440px; width: 100%; margin: 0 auto; }

/* 行情布局 */
.market-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.market-list-card .card-head { margin-bottom: 8px; }
.market-legend { display: flex; gap: 12px; font-size: 12px; }
.market-legend .up, .market-legend .down { font-weight: 600; }

/* 搜索框 */
.market-toolbar { margin-bottom: 12px; }
.search-box { max-width: 360px; }

/* 板块标签 */
.sector-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sector-tab {
  padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text-dim); cursor: pointer;
  font-size: 13px; transition: all .15s; white-space: nowrap;
}
.sector-tab:hover { color: var(--text); border-color: #3a4763; }
.sector-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 分页 */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; }
.pagination .page-info { color: var(--text-dim); font-size: 13px; }
.pagination .btn:disabled { opacity: .4; cursor: not-allowed; }

/* 股票行可点击 */
.stock-row { cursor: pointer; }

/* 详情卡 */
.detail-card { min-height: 460px; }
.detail-back { margin-bottom: 12px; }
.detail-empty { color: var(--text-mute); text-align: center; padding: 80px 0; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.detail-name { font-size: 20px; font-weight: 700; }
.detail-code { color: var(--text-dim); font-size: 13px; }
.detail-price { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 图表时段切换 */
.chart-period-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.period-tab {
  padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text-dim); cursor: pointer;
  font-size: 12px; transition: all .15s;
}
.period-tab:hover { color: var(--text); }
.period-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

#price-chart { width: 100%; border-radius: 8px; background: var(--bg-panel); margin-bottom: 8px; cursor: crosshair; }

/* 停牌提示 */.suspend-banner {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 12px; padding: 10px 12px;
  border-radius: 8px; font-size: 12px; line-height: 1.7;
  background: rgba(240,180,41,0.10);
  border: 1px solid rgba(240,180,41,0.38);
  color: var(--gold);
}
.suspend-banner .sb-icon { font-size: 15px; line-height: 1.2; }
.suspend-banner b { color: var(--gold); }
.suspend-banner .sb-sub { color: var(--text-dim); }

/* 走势图取点读数 */
.chart-readout {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-panel); color: var(--text-dim); font-size: 12px;
}
.chart-readout .ro-price { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-readout .ro-time { color: var(--text-mute); }
.chart-readout .ro-ohlc { display: flex; gap: 10px; }
.chart-readout .ro-ohlc b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-readout .ro-hint { color: var(--text-mute); margin-left: auto; }

/* 交易表单 */
.trade-form { border-top: 1px solid var(--border); padding-top: 16px; }
.trade-tabs { display: flex; gap: 4px; background: var(--bg-panel); padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.trade-tab {
  flex: 1; padding: 9px; background: transparent; border: none; border-radius: 8px;
  color: var(--text-dim); cursor: pointer; font-size: 14px; transition: all .15s; font-weight: 500;
}
.trade-tab.active.buy { background: var(--red); color: #fff; }
.trade-tab.active.sell { background: var(--green); color: #fff; }
.lev-hint { font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.trade-estimate {
  background: var(--bg-panel); border-radius: 8px; padding: 12px; margin-bottom: 14px;
  font-size: 13px; display: flex; flex-direction: column; gap: 6px;
}
.est-row { display: flex; justify-content: space-between; }
.est-row .k { color: var(--text-dim); }
.est-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 账户统计 */
.account-stats { margin-bottom: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { text-align: center; }
.stat-label { color: var(--text-dim); font-size: 12px; margin-bottom: 8px; }
.stat-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-head .card-title { margin-bottom: 0; }

/* 事件列表 */
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--bg-panel); border-left: 3px solid var(--border); }
.event-item.positive { border-left-color: var(--red); }
.event-item.negative { border-left-color: var(--green); }
.event-icon { font-size: 20px; }
.event-body { flex: 1; }
.event-title { font-weight: 600; }
.event-content { color: var(--text-dim); font-size: 12px; }
.event-time { color: var(--text-mute); font-size: 11px; }

/* 排行前三名 */
.rank-1 { color: var(--gold); font-weight: 700; }
.rank-2 { color: #c0c8d8; font-weight: 700; }
.rank-3 { color: #cd7f32; font-weight: 700; }

/* 响应式 */
@media (max-width: 900px) {
  .market-layout { grid-template-columns: 1fr; }
  .detail-card { position: static; }
  .topbar { gap: 12px; padding: 0 12px; }
  .topnav { overflow-x: auto; }
  .asset-box { display: none; }
  .game-layout { grid-template-columns: 1fr; }
}

/* ============ 猜涨跌游戏 ============ */
.game-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.game-panel { display: flex; flex-direction: column; gap: 16px; }
.game-head { display: flex; align-items: center; justify-content: space-between; }
.game-head .card-title { margin-bottom: 0; }
.game-points-box { display: flex; flex-direction: column; align-items: flex-end; }
.game-points-label { font-size: 11px; color: var(--text-dim); }
.game-points-value { font-size: 18px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.game-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; }

.game-stock-info {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px; border-radius: 8px; background: var(--bg-panel);
}
.game-stock-name { font-size: 16px; font-weight: 600; }
.game-stock-code { color: var(--text-dim); font-size: 12px; }
.game-stock-price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.game-actions { display: flex; gap: 12px; }
.game-btn { flex: 1; padding: 16px; font-size: 16px; font-weight: 700; }
.game-btn:disabled { opacity: .4; cursor: not-allowed; }

.game-result {
  padding: 14px; border-radius: 8px; font-size: 14px; text-align: center; font-weight: 600;
  display: none;
}
.game-result.show { display: block; animation: fadeIn .3s; }
.game-result.win { background: rgba(245,72,63,.12); color: var(--red); border: 1px solid rgba(245,72,63,.3); }
.game-result.lose { background: rgba(38,166,154,.12); color: var(--green); border: 1px solid rgba(38,166,154,.3); }
.game-result.pending { background: rgba(240,180,41,.12); color: var(--gold); border: 1px solid rgba(240,180,41,.3); }

/* 充值 */
.recharge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
/* 4 个金额档位一行铺满，避免第 4 个单独换行 */
.recharge-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) { .recharge-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
.recharge-option {
  padding: 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel);
  text-align: center; cursor: pointer; transition: all .15s;
}
.recharge-option:hover { border-color: var(--blue); }
.recharge-option.active { border-color: var(--blue); background: rgba(59,130,246,.12); }
.recharge-option .amt { font-size: 18px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.recharge-option .note { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.recharge-note { font-size: 12px; color: var(--text-mute); margin-top: 8px; text-align: center; }

/* 充值方式 */
.recharge-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.recharge-method {
  padding: 10px 6px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-panel); text-align: center; cursor: pointer;
  font-size: 13px; transition: all .15s; white-space: nowrap;
}
.recharge-method:hover { border-color: var(--blue); }
.recharge-method.active { border-color: var(--blue); background: rgba(59,130,246,.15); color: #fff; }

/* 充值记录 */
.recharge-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.recharge-history-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.recharge-history-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 12px; color: var(--text-dim);
  border-bottom: 1px dashed var(--border);
}
.recharge-history-row:last-child { border-bottom: none; }

/* ============ 在线充值（外部支付） ============ */
.pay-tabs { display: flex; gap: 4px; background: var(--bg-panel); padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.pay-tab {
  flex: 1; padding: 9px 8px; border: none; border-radius: 8px; background: transparent;
  color: var(--text-dim); font-size: 13px; cursor: pointer; transition: all .15s; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-tab.active { background: var(--blue); color: #fff; }
.pay-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: rgba(232,163,61,.2); color: #e8a33d; font-weight: 600;
}
.pay-desc { font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.6; }
.pay-desc b { color: var(--gold); }
.pay-off {
  padding: 26px 18px; text-align: center; font-size: 13px; line-height: 1.7;
  color: var(--text-dim); background: var(--bg-panel); border-radius: 10px; border: 1px dashed var(--border);
}
.pay-sandbox-tip {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 11.5px; line-height: 1.6;
  background: rgba(232,163,61,.1); color: #d8a55a;
}

/* 支付订单面板 */
.pay-order { padding: 2px 0; }
.pay-order-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 14px 16px; border-radius: 12px; background: var(--bg-panel); margin-bottom: 14px;
}
.pay-order-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.pay-order-amount { font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.pay-order-points { font-size: 17px; font-weight: 700; color: var(--gold); }
.pay-order-points span { font-size: 11px; font-weight: 400; color: var(--text-dim); margin-left: 3px; }
.pay-order-rows { display: flex; flex-direction: column; gap: 1px; }
.pay-order-rows > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.pay-order-rows span { color: var(--text-dim); }
.pay-order-rows b { font-weight: 500; font-family: Consolas, monospace; font-size: 12px; word-break: break-all; text-align: right; }
.pay-order-state {
  margin: 14px 0 4px; padding: 10px; border-radius: 9px; text-align: center;
  font-size: 12.5px; background: rgba(232,163,61,.12); color: #d8a55a;
}
.pay-order-state.dead { background: rgba(226,76,75,.12); color: #e2645f; }
.pay-order-tip { font-size: 11px; color: var(--text-mute); margin-top: 12px; line-height: 1.7; text-align: center; }

/* 支付成功 */
.pay-success { text-align: center; padding: 10px 0 4px; }
.pay-success-icon {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,217,122,.14); color: #3bd97a; font-size: 28px; font-weight: 700;
}
.pay-success-title { font-size: 15px; font-weight: 600; color: #3bd97a; }
.pay-success-amount { font-size: 26px; font-weight: 700; color: var(--gold); margin: 6px 0 16px; }
.pay-success-rows { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.pay-success-rows > div {
  display: flex; justify-content: space-between; padding: 8px 2px;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.pay-success-rows span { color: var(--text-dim); }
.pay-success-rows b { font-weight: 500; font-family: Consolas, monospace; font-size: 12px; }

/* 持仓操作组 */
.op-group { display: flex; gap: 4px; flex-wrap: nowrap; }

/* 交易确认 */
.confirm-stock {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px; border-radius: 10px; background: var(--bg-panel); margin-bottom: 16px;
}
.confirm-name { font-size: 17px; font-weight: 700; }
.confirm-code { color: var(--text-dim); font-size: 12px; }
.confirm-price { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.confirm-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.confirm-row {
  display: flex; justify-content: space-between; padding: 8px 2px;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.confirm-row span:first-child { color: var(--text-dim); }
.confirm-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.confirm-row.total { border-bottom: none; font-size: 15px; }
.confirm-row.total .v { color: var(--gold); }
.confirm-warn {
  padding: 10px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 4px;
  background: rgba(240,180,41,.1); color: var(--gold);
}

/* ============ 风险管控（止盈止损） ============ */
.risk-box { background: var(--bg-panel); border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.risk-head { margin-bottom: 8px; }
.risk-head label { margin-bottom: 0; }
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.risk-grid .form-row { margin-bottom: 0; }

/* ============ 用户下拉菜单 ============ */
.user-menu-wrap { position: relative; }
.user-caret { color: var(--text-dim); font-size: 11px; margin-left: 2px; }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 500; overflow: hidden;
  animation: fadeIn .15s;
}
.dropdown-item {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  cursor: pointer; font-size: 14px; color: var(--text); transition: background .12s;
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item.danger { color: var(--red); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ============ 消息铃铛 ============ */
.msg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; border-radius: 50%; font-size: 10px;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  padding: 0 3px; font-weight: 600; margin-left: auto;
}

/* ============ 持仓操作 ============ */
.card-tip { color: var(--text-mute); font-size: 12px; }
.pos-name-link { cursor: pointer; font-weight: 600; }
.pos-name-link:hover { color: var(--blue); text-decoration: underline; }
.risk-tag { font-size: 11px; color: var(--text-dim); display: block; line-height: 1.5; }
.risk-tag .tp { color: var(--red); }
.risk-tag .sl { color: var(--green); }

/* ============ 其他栏 ============ */
.other-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.other-tab {
  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text-dim); cursor: pointer;
  font-size: 14px; transition: all .15s;
}
.other-tab:hover { color: var(--text); }
.other-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ============ 个人资料 ============ */
.avatar-preview {
  width: 56px; height: 56px; border-radius: 50%; background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; font-weight: 600; margin: 0 auto 12px;
}
.avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.avatar-option {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-card); cursor: pointer; font-size: 20px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.avatar-option:hover { border-color: var(--blue); }
.avatar-option.active { border-color: var(--blue); background: rgba(59,130,246,.15); }

/* ============ 消息中心 ============ */
.msg-list { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; }
.msg-item { display: flex; gap: 12px; padding: 12px; border-radius: 8px; background: var(--bg-panel); border-left: 3px solid var(--border); }
.msg-item.unread { border-left-color: var(--blue); background: var(--bg-card); }
.msg-icon { font-size: 20px; }
.msg-body { flex: 1; }
.msg-title { font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.msg-title .dot { color: var(--blue); font-size: 10px; }
.msg-content { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.msg-time { color: var(--text-mute); font-size: 11px; }

/* 消息详情 */
.msg-preview {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px;
}
.msg-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.msg-detail-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.msg-detail-meta { color: var(--text-mute); font-size: 12px; margin-bottom: 16px; }
.msg-detail-content {
  background: var(--bg-panel); border-radius: 10px; padding: 16px;
  font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  min-height: 100px; margin-bottom: 8px;
}

/* ============ 消息快速查看浮窗 ============ */
#msg-float-root {
  position: fixed; top: 70px; right: 16px; z-index: 3000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.msg-float {
  pointer-events: auto; width: 320px; max-width: 90vw;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--blue); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  padding: 12px 14px; animation: msgFloatIn .25s ease;
}
@keyframes msgFloatIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.msg-float-head { display: flex; justify-content: space-between; align-items: center; }
.msg-float-title { font-weight: 600; font-size: 14px; }
.msg-float-close { cursor: pointer; color: var(--text-mute); font-size: 14px; padding: 2px 6px; }
.msg-float-close:hover { color: var(--red); }
.msg-float-body {
  color: var(--text-dim); font-size: 13px; margin: 8px 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.msg-float-actions { display: flex; justify-content: space-between; align-items: center; }
.msg-float-time { color: var(--text-mute); font-size: 11px; }

/* ============ 商店 ============ */
.shop-wallet {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1c2333, #232c40);
}
.shop-wallet-info { display: flex; flex-direction: column; gap: 4px; }
.shop-wallet-label { font-size: 12px; color: var(--text-dim); }
.shop-wallet-balance { font-size: 28px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-tip { color: var(--text-dim); font-size: 12px; margin-bottom: 16px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.shop-item {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; transition: all .15s;
}
.shop-item:hover { border-color: var(--blue); transform: translateY(-2px); }
.shop-item-icon { font-size: 34px; text-align: center; }
.shop-item-name { font-weight: 700; font-size: 15px; text-align: center; }
.shop-item-desc { color: var(--text-dim); font-size: 12px; line-height: 1.5; min-height: 36px; }
.shop-item-price { color: var(--gold); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.shop-item.owned { opacity: .6; }
.shop-item .type-tag {
  display: inline-block; align-self: center; padding: 1px 8px; border-radius: 10px;
  font-size: 11px; background: rgba(59,130,246,.15); color: var(--blue);
}
/* 品类筛选 */
.shop-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.shop-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text-dim); font-size: 12px; cursor: pointer; transition: all .15s;
}
.shop-cat:hover { color: var(--text); border-color: var(--blue); }
.shop-cat.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.shop-cat .cat-n {
  font-size: 10px; padding: 0 5px; border-radius: 8px;
  background: rgba(255,255,255,.14); font-variant-numeric: tabular-nums;
}
.shop-cat.active .cat-n { background: rgba(255,255,255,.28); }
.type-tag-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.type-tag-row .type-tag { align-self: center; }
.tag-consumable { background: rgba(240,180,41,.16) !important; color: var(--gold) !important; }

/* ============ 银行卡 ============ */
.bank-card-visual {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 14px; padding: 22px; color: #fff; margin-bottom: 18px;
}
.bank-card-visual .bc-label { font-size: 12px; opacity: .85; }
.bank-card-visual .bc-number { font-size: 22px; letter-spacing: 2px; font-weight: 700; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.bank-card-visual .bc-balance { font-size: 14px; opacity: .95; }
.bank-withdraw { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.bank-withdraw .form-row { flex: 1; margin-bottom: 0; }
.bank-tx-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.bank-tx-row { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: var(--bg-panel); font-size: 13px; }
.bank-tx-row .tx-note { color: var(--text-dim); }
.bank-tx-row .tx-in { color: var(--red); font-weight: 600; }
.bank-tx-row .tx-out { color: var(--green); font-weight: 600; }

/* ============ 预购（预购买） ============ */
.gold { color: var(--gold); }
.preorder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.preorder-panel { display: flex; flex-direction: column; gap: 4px; }
.preorder-panel .game-desc { margin-bottom: 12px; }
.preorder-estimate {
  background: var(--bg-panel); border-radius: 8px; padding: 12px; margin-bottom: 14px;
  font-size: 13px; display: flex; flex-direction: column; gap: 6px;
}

/* ============ 消息中心删除 ============ */
.msg-item { position: relative; }
.msg-head-actions { display: flex; gap: 8px; }
.msg-del {
  align-self: center; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer; font-size: 16px;
  color: var(--text-mute); padding: 4px 6px; border-radius: 6px; transition: all .15s;
}
.msg-del:hover { color: var(--red); background: rgba(245,72,63,.1); }

/* ============ 交易模式横幅（预购/正常） ============ */
.trade-mode-banner {
  padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  background: rgba(240,180,41,.1); color: var(--gold); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* ============ 每日签到 ============ */
.checkin-card { margin-bottom: 16px; }
.checkin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkin-title { font-size: 16px; font-weight: 700; }
.checkin-desc { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.checkin-btn { flex-shrink: 0; min-width: 150px; }

@media (max-width: 900px) {
  .preorder-layout { grid-template-columns: 1fr; }
}

/* ============ 大盘指数滚动条 ============ */
.index-ticker {
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(90deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 14px; overflow: hidden; height: 46px;
}
.index-ticker-label {
  flex-shrink: 0; display: flex; align-items: center; padding: 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--gold);
  background: rgba(240,180,41,.1); border-right: 1px solid var(--border);
}
.index-viewport { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; }
.index-viewport::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 36px; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,27,38,0), var(--bg-panel));
}
.index-track { display: flex; width: max-content; animation: index-scroll 60s linear infinite; }
.index-track:hover { animation-play-state: paused; }
.index-group { display: flex; align-items: center; gap: 0; padding-right: 24px; }
.index-item {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0 16px; font-size: 13px; border-right: 1px dashed rgba(42,52,70,.7);
}
.index-item.overall { border-right: 1px solid var(--border); }
.index-item .idx-name { color: var(--text-dim); }
.index-item .idx-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.index-item .idx-change { font-size: 12px; font-variant-numeric: tabular-nums; }
.index-item .idx-code { color: var(--text-mute); font-size: 11px; }
.index-loading { padding: 0 16px; color: var(--text-mute); font-size: 13px; }
@keyframes index-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ 成交记录 · 赚赔率 ============ */
.tag-float {
  display: inline-block; font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 3px;
  background: rgba(139,152,173,.18); color: var(--text-dim); margin-right: 2px; vertical-align: middle;
}

/* ============ 修改密码 ============ */
.pwd-hint { color: var(--text-mute); font-size: 12px; margin-top: 4px; }
.pwd-error { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 8px; }

/* ============ 返回上一步 / 顶栏图标按钮 ============ */
.nav-back {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.nav-back:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--blue); color: var(--blue); }
.nav-back:disabled, .nav-back.dim { opacity: .35; cursor: default; }

.topbar-icon-btn {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.topbar-icon-btn:hover { background: var(--bg-hover); border-color: var(--gold); }

/* ============ 关注（自选股） ============ */
.watch-star { font-size: 17px; color: var(--text-mute); cursor: pointer; transition: all .15s; }
.watch-star:hover { color: var(--gold); transform: scale(1.15); }
.watch-star.on { color: var(--gold); }
td.center, th.center { text-align: center; }
.link { color: var(--blue); cursor: pointer; }
.link:hover { text-decoration: underline; }
.btn-watch-on { color: var(--gold); border-color: var(--gold); background: rgba(240,180,41,.12); }

/* ============ 下线提示弹窗 ============ */
.kicked-modal .kicked-body { color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.kicked-meta {
  background: var(--bg-panel); border-radius: 8px; padding: 10px 12px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.kicked-meta div { display: flex; justify-content: space-between; gap: 12px; }
.kicked-meta span { color: var(--text-mute); }
.kicked-meta b { color: var(--text); font-weight: 600; }
.kicked-tip { color: var(--text-mute); font-size: 12px; }

.confirm-warn.info { background: rgba(59,130,246,.12); color: #9ec3ff; }

@media (max-width: 900px) {
  .nav-back { width: 28px; height: 28px; font-size: 14px; }
}

/* 大盘指数固定区（不滚动） */
.index-overall {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-right: 1px solid var(--border);
  background: rgba(240,180,41,.06);
}
.index-overall .idx-name { color: var(--gold); font-weight: 600; }
.index-overall .idx-value { font-size: 15px; }

/* ============ 顶栏自适应（7 个入口 + 时钟 + 账户） ============ */
.topnav { min-width: 0; scrollbar-width: none; }
.topnav::-webkit-scrollbar { height: 0; }
.nav-btn { padding: 8px 14px; font-size: 14px; }
.topbar-right { flex-shrink: 0; }
.topbar { gap: 14px; }

@media (max-width: 1280px) {
  .market-clock { font-size: 10px; }
  .nav-btn { padding: 8px 11px; }
}
@media (max-width: 1100px) {
  .market-clock { display: none; }
  .nav-btn { padding: 8px 10px; font-size: 13px; }
  .topbar-title span:last-child { display: none; }
}

/* ============ 代码输入行 ============ */
.code-input-row { display: flex; gap: 8px; }
.code-input-row .input { flex: 1; }

/* 模糊搜索候选下拉 */
.suggest-wrap { position: relative; align-items: stretch; }
.suggest-list {
  position: absolute; left: 0; right: 96px; top: calc(100% + 4px); z-index: 60;
  max-height: 240px; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4); padding: 4px;
}
.suggest-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.suggest-item:hover, .suggest-item.active { background: rgba(59,130,246,.18); }
.suggest-item .si-code { font-family: ui-monospace, Consolas, monospace; color: var(--blue); font-weight: 600; }
.suggest-item .si-name { color: var(--text); }
.suggest-item .si-sector { color: var(--text-mute); font-size: 11px; margin-left: auto; }
.suggest-item .si-price { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.suggest-empty { padding: 10px; color: var(--text-mute); font-size: 12px; text-align: center; }

/* ============ 账号不可用统一弹窗（封禁 / 顶号） ============ */
.notice-modal .notice-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.notice-modal .notice-head h3 { margin: 0; font-size: 18px; }
.notice-icon { font-size: 26px; line-height: 1; }
.notice-tag { display: inline-block; margin-top: 4px; font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.notice-tag.danger { background: rgba(245,72,63,.15); color: var(--red); }
.notice-tag.warn { background: rgba(240,180,41,.15); color: var(--gold); }
.notice-meta {
  background: var(--bg-panel); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
}
.notice-meta div { display: flex; justify-content: space-between; gap: 12px; }
.notice-meta span { color: var(--text-mute); }
.notice-meta b { color: var(--text); font-weight: 600; }
.danger-text { color: var(--red) !important; }
.warn-text { color: var(--gold) !important; }
.notice-body { color: var(--text-dim); font-size: 13px; line-height: 1.7; margin: 12px 0 4px; }

/* ============ 个股风险侦测 ============ */
.analysis-body { font-size: 13px; }
.analysis-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.risk-gauge {
  width: 86px; height: 86px; border-radius: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}
.risk-gauge .risk-score { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.risk-gauge .risk-label { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.risk-gauge.low { border-color: rgba(38,166,154,.6); background: rgba(38,166,154,.1); color: var(--green); }
.risk-gauge.mid { border-color: rgba(240,180,41,.5); background: rgba(240,180,41,.08); color: var(--gold); }
.risk-gauge.high { border-color: rgba(245,140,63,.6); background: rgba(245,140,63,.1); color: #f59e42; }
.risk-gauge.extreme { border-color: rgba(245,72,63,.7); background: rgba(245,72,63,.12); color: var(--red); }
.analysis-kv { flex: 1; display: grid; gap: 4px; }
.analysis-kv div { display: flex; justify-content: space-between; font-size: 12px; }
.analysis-kv span { color: var(--text-mute); }
.analysis-kv b { font-variant-numeric: tabular-nums; }
.analysis-signals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.signal { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--bg-panel); }
.signal.good { color: #58c8b8; }
.signal.bad { color: #ff8b84; }
.signal.neutral { color: var(--text-dim); }
.analysis-suggest {
  font-size: 12px; line-height: 1.6; color: var(--text);
  background: rgba(59,130,246,.08); border-left: 3px solid var(--blue);
  padding: 8px 10px; border-radius: 0 6px 6px 0;
}
.analysis-foot { font-size: 11px; color: var(--text-mute); margin-top: 8px; }
.analysis-cta { text-align: center; padding: 8px 4px 4px; }
.analysis-cta .cta-icon { font-size: 26px; }
.analysis-cta .cta-title { font-weight: 700; margin: 6px 0; }
.analysis-cta p { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin-bottom: 12px; }

/* ============ 基金 ============ */
.fund-wallet-side { display: flex; align-items: center; gap: 18px; }
.fund-wallet-stat { text-align: right; }
.fund-wallet-stat span { display: block; font-size: 12px; color: var(--text-dim); }
.fund-wallet-stat b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--gold); }

.fund-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fund-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-card));
  display: flex; flex-direction: column; gap: 10px; transition: border-color .15s;
}
.fund-card:hover { border-color: rgba(240,180,41,.45); }
.fund-card.closed { opacity: .6; }
.fund-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fund-name { font-size: 15px; font-weight: 700; }
.fund-code { font-size: 11px; color: var(--text-mute); margin-top: 3px; }
.fund-rate { font-size: 22px; font-weight: 800; color: var(--gold); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.fund-rate span { display: block; font-size: 10px; font-weight: 400; color: var(--text-mute); margin-top: 4px; }
.fund-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; min-height: 38px; }
.fund-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-mute); }
.fund-progress { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.fund-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f59e42); }
.fund-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.fund-mine { font-size: 12px; color: var(--text-dim); }
.fund-mine b { color: var(--text); }
.fund-buy-meta {
  background: var(--bg-panel); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; margin-bottom: 14px;
}
.fund-buy-meta div { display: flex; justify-content: space-between; gap: 12px; }
.fund-buy-meta span { color: var(--text-mute); }
.fund-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fund-buy-estimate { background: var(--bg-panel); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--text-dim); margin-top: 12px; }
.fund-buy-estimate .est-row { display: flex; justify-content: space-between; padding: 2px 0; }
.fund-buy-estimate .est-row .k { color: var(--text-mute); }
.cell-sub { display: block; font-size: 11px; color: var(--text-mute); }

/* 现金账户中的基金持仓 */
.bank-fund-box { background: var(--bg-panel); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.bank-fund-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.bank-fund-head b { color: var(--gold); }
.bank-fund-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-dim); padding: 3px 0; }
.bank-fund-tip { font-size: 10px; color: var(--text-mute); margin-top: 6px; }

/* 顶栏 8 个入口时允许横向滚动 */
.topnav { overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { height: 0; }

/* ============ 基金页（风险分级 / 审核 / 持仓） ============ */
.fund-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fund-hero-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.fund-hero-stats b { color: var(--text); font-variant-numeric: tabular-nums; }

.fund-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.toolbar-search { flex: 1 1 180px; min-width: 150px; }
.toolbar-select { flex: 0 1 160px; min-width: 130px; }

.fund-title { min-width: 0; }
.fund-risk {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  border: 1px solid transparent; letter-spacing: .02em; white-space: nowrap;
}
.fund-risk.r1 { color: #4ade80; background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.3); }
.fund-risk.r2 { color: #34d399; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }
.fund-risk.r3 { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.3); }
.fund-risk.r4 { color: #fb923c; background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.34); }
.fund-risk.r5 { color: #f87171; background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.34); }

.fund-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ftag { font-size: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.05); color: var(--text-dim); border: 1px solid var(--border); }
.ftag.warn { color: var(--gold); border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.1); }
.ftag.info { color: #93c5fd; border-color: rgba(147,197,253,.3); background: rgba(59,130,246,.12); }
.ftag.ok { color: #4ade80; border-color: rgba(74,222,128,.28); background: rgba(74,222,128,.1); }

.fund-progress { position: relative; height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.fund-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f59e42); }
.fund-progress em { position: absolute; right: 0; top: -16px; font-size: 10px; color: var(--text-mute); font-style: normal; }
.fund-card { cursor: pointer; }
.fund-actions { display: flex; gap: 6px; }

.fund-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fund-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; }
.fund-detail-grid div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 10px; background: var(--bg-panel); border-radius: 8px; }
.fund-detail-grid span { color: var(--text-mute); }
.fund-detail-grid b { color: var(--text); font-weight: 600; text-align: right; }
.fund-sim { background: var(--bg-panel); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.fund-sim-title { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.fund-sim .est-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.fund-sim .est-row .k { color: var(--text-mute); }
.fund-hint { font-size: 11px; color: var(--text-mute); margin-top: 6px; line-height: 1.6; }
.badge-down { background: rgba(38,166,154,.15); color: var(--green); }

@media (max-width: 900px) {
  .fund-grid { grid-template-columns: 1fr; }
  .shop-wallet { flex-wrap: wrap; gap: 12px; }
  .fund-detail-grid { grid-template-columns: 1fr; }
  .toolbar-select { flex: 1 1 45%; }
}

/* ============ 头像框：黄金 / 钻石 / 星空 / 烈焰 ============ */
.avatar { position: relative; }
.avatar-preview { position: relative; }

.avatar.frame-gold, .avatar-preview.frame-gold {
  border-color: #f0b429;
  box-shadow: 0 0 0 2px rgba(240,180,41,.22), 0 0 12px rgba(240,180,41,.8);
}
.avatar.frame-diamond, .avatar-preview.frame-diamond {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56,189,248,.22), 0 0 14px rgba(56,189,248,.9);
  animation: diamondShine 2.4s ease-in-out infinite;
}
.avatar.frame-starry, .avatar-preview.frame-starry {
  border-color: #818cf8;
  background:
    radial-gradient(1.5px 1.5px at 24% 26%, #ffffff, transparent),
    radial-gradient(1px 1px at 68% 20%, #c7d2fe, transparent),
    radial-gradient(1.5px 1.5px at 78% 66%, #ffffff, transparent),
    radial-gradient(1px 1px at 34% 78%, #a5b4fc, transparent),
    radial-gradient(circle at 50% 120%, rgba(99,102,241,.9), transparent 62%),
    linear-gradient(140deg, #0b1026, #1e1b4b 55%, #312e81);
  box-shadow: 0 0 0 2px rgba(129,140,248,.3), 0 0 14px rgba(99,102,241,.9);
  animation: starryGlow 2.8s ease-in-out infinite;
}
.avatar.frame-starry::after, .avatar-preview.frame-starry::after {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px dashed rgba(165,180,252,.6);
  box-shadow: 0 0 8px rgba(129,140,248,.5);
  animation: starrySpin 10s linear infinite;
  pointer-events: none;
}
.avatar.frame-flame, .avatar-preview.frame-flame {
  border-color: #fb923c;
  background:
    radial-gradient(circle at 50% 118%, rgba(249,115,22,.95), rgba(127,29,29,0) 66%),
    linear-gradient(160deg, #7c2d12, #b91c1c 58%, #f97316);
  box-shadow: 0 0 0 2px rgba(251,146,60,.28), 0 0 14px rgba(239,68,68,.85);
  animation: flameFlicker 1.8s ease-in-out infinite;
}
@keyframes starryGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(129,140,248,.25), 0 0 10px rgba(99,102,241,.75); }
  50% { box-shadow: 0 0 0 3px rgba(165,180,252,.42), 0 0 20px rgba(129,140,248,.98); }
}
@keyframes starrySpin { to { transform: rotate(360deg); } }
@keyframes diamondShine {
  0%, 100% { box-shadow: 0 0 0 2px rgba(56,189,248,.2), 0 0 10px rgba(56,189,248,.7); }
  50% { box-shadow: 0 0 0 3px rgba(125,211,252,.4), 0 0 18px rgba(56,189,248,1); }
}
@keyframes flameFlicker {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251,146,60,.2), 0 0 10px rgba(239,68,68,.65); }
  50% { box-shadow: 0 0 0 3px rgba(253,186,116,.45), 0 0 20px rgba(249,115,22,.95); }
}

/* ============ 礼包开包结果 ============ */
.gift-burst { font-size: 46px; text-align: center; animation: giftPop .45s cubic-bezier(.2,.9,.3,1.4); }
.gift-title { text-align: center; margin-bottom: 6px !important; }
.gift-sub { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.gift-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gift-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: rgba(240,180,41,.08); border: 1px solid rgba(240,180,41,.28);
}
.gift-icon { font-size: 20px; }
.gift-name { flex: 1; font-weight: 600; }
.gift-qty { color: var(--gold); font-weight: 700; }
.gift-tip { color: var(--text-mute); font-size: 12px; text-align: center; margin-bottom: 16px; }
@keyframes giftPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============ 关注 / 排行榜补充 ============ */
.card-actions { display: flex; align-items: center; gap: 10px; }
.watch-refreshed { color: #38bdf8; font-size: 11px; margin-left: 4px; }
.watch-time { color: var(--text-dim); font-size: 12px; }
.rank-title { color: var(--gold); font-size: 12px; margin-right: 2px; }
.bot-tag {
  display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 6px;
  background: rgba(56,189,248,.18); color: #38bdf8; margin-left: 4px; vertical-align: 1px;
}

/* ============ 详情页涨跌信息 ============ */
.detail-price-box { text-align: right; }
.detail-daychange { font-size: 12px; margin-top: 2px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.detail-daychange .dc-sep { margin: 0 4px; color: var(--text-mute); }

.watch-name { font-weight: 600; }
.watch-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.watch-actions { white-space: nowrap; }
.watch-actions .btn-sm { padding: 3px 8px; font-size: 12px; }

/* ============ 股市快讯条 ============ */
.news-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin-bottom: 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(56,189,248,.08), rgba(240,180,41,.06));
  border: 1px solid var(--border);
}
.news-bar-label { font-size: 12px; color: #38bdf8; font-weight: 600; white-space: nowrap; }
.news-bar-viewport { flex: 1; overflow: hidden; min-width: 0; }
.news-bar-track { min-height: 20px; }
.news-flash {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  animation: newsIn .35s ease;
}
.news-flash-title { overflow: hidden; text-overflow: ellipsis; }
.news-flash-scope { color: var(--text-mute); font-size: 11px; }
.news-tag { font-size: 10px; padding: 1px 6px; border-radius: 6px; border: 1px solid transparent; }
.news-tag.up { color: var(--red); border-color: rgba(245,72,63,.5); background: rgba(245,72,63,.1); }
.news-tag.down { color: var(--green); border-color: rgba(38,166,154,.5); background: rgba(38,166,154,.1); }
.news-tag.flat { color: var(--text-dim); border-color: var(--border); background: rgba(255,255,255,.03); }
.news-impact { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.news-impact.up { color: var(--red); }
.news-impact.down { color: var(--green); }
.news-live {
  font-size: 10px; color: var(--gold); border: 1px solid rgba(240,180,41,.4);
  padding: 1px 5px; border-radius: 6px; margin-left: 6px; white-space: nowrap;
}
.news-bar-live { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.news-loading { color: var(--text-mute); font-size: 12px; }
.event-clickable { cursor: pointer; }
.event-clickable:hover { filter: brightness(1.08); }
@keyframes newsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ 账户风险徽标 ============ */
.risk-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 600; vertical-align: 1px; white-space: nowrap;
  border: 1px solid transparent; cursor: help;
}
.risk-chip-l0 { color: #26a69a; border-color: rgba(38,166,154,.4); background: rgba(38,166,154,.12); }
.risk-chip-l1 { color: #38bdf8; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.12); }
.risk-chip-l2 { color: #f0b429; border-color: rgba(240,180,41,.45); background: rgba(240,180,41,.12); }
.risk-chip-l3 { color: #f5483f; border-color: rgba(245,72,63,.5); background: rgba(245,72,63,.14); }
.profile-risk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; margin: -4px 0 14px; }
.risk-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.risk-pill-l0 { color: #26a69a; border-color: rgba(38,166,154,.4); }
.risk-pill-l1 { color: #38bdf8; border-color: rgba(56,189,248,.4); }
.risk-pill-l2 { color: #f0b429; border-color: rgba(240,180,41,.45); }
.risk-pill-l3 { color: #f5483f; border-color: rgba(245,72,63,.5); }
.risk-pill-tags { font-size: 11px; color: var(--text-mute); }
.risk-pill-grace { font-size: 11px; color: #f0b429; }
.toast.warn { border-color: rgba(240,180,41,.55); background: rgba(60,45,15,.96); color: #f7d67a; }

/* 头像风险角标：不占布局，L2 金色 / L3 红色脉冲 */
.avatar.risk-dot-l2::before, .avatar.risk-dot-l3::before {
  content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; border: 1.5px solid var(--bg-card); box-shadow: 0 0 6px currentColor;
  pointer-events: none;
}
.avatar.risk-dot-l2::before { background: #f0b429; color: #f0b429; }
.avatar.risk-dot-l3::before { background: #f5483f; color: #f5483f; animation: riskPulse 1.6s ease-in-out infinite; }
@keyframes riskPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .65; } }
.avatar.risk-dot-grace::before {
  content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; border: 1.5px solid var(--bg-card);
  background: #f0b429; color: #f0b429; box-shadow: 0 0 6px currentColor;
  pointer-events: none;
}

/* ============ 价格变动脉冲（短促、幅度很小） ============ */
@keyframes pricePulseUp {
  0%   { background: rgba(245,72,63,.13); box-shadow: inset 0 0 0 1px rgba(245,72,63,.28); }
  100% { background: transparent; box-shadow: inset 0 0 0 1px rgba(245,72,63,0); }
}
@keyframes pricePulseDown {
  0%   { background: rgba(38,166,154,.13); box-shadow: inset 0 0 0 1px rgba(38,166,154,.28); }
  100% { background: transparent; box-shadow: inset 0 0 0 1px rgba(38,166,154,0); }
}
.price-pulse-up { animation: pricePulseUp .55s ease-out; border-radius: 4px; }
.price-pulse-down { animation: pricePulseDown .55s ease-out; border-radius: 4px; }
.dim { color: var(--text-mute); }

/* ============ 定盘预售入口条 ============ */
.presale-strip {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px; margin-bottom: 14px;
  border-radius: 14px; cursor: pointer; border: 1px solid rgba(240,180,41,.35);
  background: linear-gradient(100deg, rgba(240,180,41,.16), rgba(240,180,41,.03) 46%, rgba(56,189,248,.07));
  transition: border-color .15s, transform .15s;
}
.presale-strip:hover { border-color: rgba(240,180,41,.7); transform: translateY(-1px); }
.ps-strip-badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; text-align: center; line-height: 1.15;
  font-size: 11px; font-weight: 700; color: #1b1300;
  background: linear-gradient(145deg, #ffd978, #f0b429);
  box-shadow: 0 0 14px rgba(240,180,41,.35);
}
.ps-strip-main { flex: 1; min-width: 0; }
.ps-strip-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ps-code { color: var(--text-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.ps-pill {
  font-size: 10px; padding: 1px 6px; border-radius: 5px; color: var(--gold);
  border: 1px solid rgba(240,180,41,.45); background: rgba(240,180,41,.1);
}
.ps-strip-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.09); margin: 7px 0 6px; overflow: hidden; }
.ps-strip-fill { height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #f0b429, #f97316); transition: width .5s ease; }
.ps-strip-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-mute); }
.ps-strip-meta b { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ps-strip-cta { flex-shrink: 0; font-size: 12px; color: var(--gold); }
.ps-price-val.up { color: var(--red); }
.ps-price-val.down { color: var(--green); }

.badge-presale {
  background: rgba(240,180,41,.14); color: var(--gold);
  border: 1px solid rgba(240,180,41,.45);
}
.presale-row { background: rgba(240,180,41,.035); }

/* ============ 指数详情 ============ */
.index-detail-card .detail-price { font-size: 26px; letter-spacing: -.2px; }
.idx-open { font-size: 10px; color: var(--text-mute); margin-left: 4px; }
.index-overall { cursor: pointer; }
.index-item { cursor: pointer; }
.ix-breadth { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ix-pill {
  font-size: 11.5px; color: var(--text-mute); padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
}
.ix-pill b { font-variant-numeric: tabular-nums; }
.ix-pill.up b { color: var(--red); }
.ix-pill.down b { color: var(--green); }
.ix-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ix-move-title { font-size: 12px; margin-bottom: 8px; font-weight: 700; }
.ix-move-row {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px;
  border-radius: 7px; cursor: pointer; font-size: 12.5px;
}
.ix-move-row:hover { background: var(--bg-hover); }
.ix-move-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ 定盘预售详情 ============ */
.ps-status-pill {
  font-size: 11px; padding: 3px 9px; border-radius: 6px; color: var(--gold);
  border: 1px solid rgba(240,180,41,.45); background: rgba(240,180,41,.1);
}
.ps-status-pill.listed { color: #26a69a; border-color: rgba(38,166,154,.45); background: rgba(38,166,154,.1); }
.ps-progress-box {
  margin: 14px 0 10px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,.025);
}
.ps-progress-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.ps-progress-head b { color: var(--gold); font-size: 13px; }
.ps-progress { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ps-progress-fill {
  height: 100%; width: 1%; border-radius: 4px;
  background: linear-gradient(90deg, #f0b429, #f97316);
  box-shadow: 0 0 12px rgba(240,180,41,.55); transition: width .5s ease;
}
.ps-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 11.5px; color: var(--text-mute); }
.ps-facts b { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ps-inject-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ps-inject-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ps-inject-head b { font-size: 14px; }
.ps-inject-head span { font-size: 11.5px; color: var(--text-mute); }
.ps-inject-row { display: flex; gap: 10px; }
.ps-inject-row .input { flex: 1; }
.ps-inject-row .btn { flex-shrink: 0; min-width: 116px; }
.ps-quick { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ============ 签到 2.0 ============ */
.checkin-card { padding: 18px 20px; }
.checkin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkin-desc b { color: var(--gold); }
.checkin-btn.done { background: rgba(38,166,154,.14); border-color: rgba(38,166,154,.4); color: #26a69a; }
.checkin-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 16px 0 4px; }
.ck-day {
  border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.02);
  padding: 9px 4px 7px; text-align: center; position: relative; transition: all .15s;
}
.ck-day-top { font-size: 13px; font-weight: 700; color: var(--text-mute); }
.ck-day-reward { font-size: 15px; font-weight: 700; color: var(--text-dim); margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.ck-day-label { font-size: 10px; color: var(--text-mute); }
.ck-day.done { border-color: rgba(38,166,154,.45); background: rgba(38,166,154,.09); }
.ck-day.done .ck-day-top, .ck-day.done .ck-day-reward { color: #26a69a; }
.ck-day.today {
  border-color: rgba(240,180,41,.65); background: rgba(240,180,41,.1);
  box-shadow: 0 0 0 1px rgba(240,180,41,.18), 0 0 16px rgba(240,180,41,.14);
}
.ck-day.today .ck-day-top, .ck-day.today .ck-day-reward { color: var(--gold); }
.ck-day.big .ck-day-reward { font-size: 16px; }
.ck-day.big::after {
  content: ''; position: absolute; top: -1px; right: -1px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.checkin-mile-row { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; }
.checkin-mile-label { flex-shrink: 0; font-size: 11px; color: var(--text-mute); padding-top: 6px; }
.checkin-miles { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.ck-mile {
  min-width: 92px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: rgba(255,255,255,.02); font-size: 11px;
}
.ck-mile-days { font-weight: 700; color: var(--text-dim); font-size: 12px; }
.ck-mile-reward { color: var(--text-mute); margin: 1px 0; }
.ck-mile-state { color: var(--text-mute); font-size: 10px; }
.ck-mile.reached { border-color: rgba(240,180,41,.5); background: rgba(240,180,41,.08); }
.ck-mile.reached .ck-mile-state { color: var(--gold); }
.ck-mile.claimed { border-color: rgba(38,166,154,.4); background: rgba(38,166,154,.07); }
.ck-mile.claimed .ck-mile-state { color: #26a69a; }
.checkin-title-reward {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px;
  border-radius: 12px; border: 1px dashed rgba(240,180,41,.4);
  background: linear-gradient(90deg, rgba(240,180,41,.09), rgba(240,180,41,.02));
}
.checkin-title-reward.owned { border-style: solid; border-color: rgba(38,166,154,.45); background: linear-gradient(90deg, rgba(38,166,154,.09), rgba(38,166,154,.02)); }
.ck-title-icon { font-size: 26px; }
.ck-title-body { flex: 1; min-width: 0; }
.ck-title-name { font-size: 13px; font-weight: 700; }
.ck-owned { font-size: 10px; color: #26a69a; border: 1px solid rgba(38,166,154,.4); border-radius: 5px; padding: 0 5px; margin-left: 4px; }
.ck-title-sub { font-size: 11px; color: var(--text-mute); margin: 2px 0 6px; }
.ck-title-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.ck-title-bar > div { height: 100%; background: linear-gradient(90deg, #f0b429, #f97316); transition: width .5s ease; }
.ck-title-progress { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.title-reward-modal { text-align: center; }
.title-reward-name {
  font-size: 20px; font-weight: 700; color: var(--gold); padding: 14px;
  margin: 4px 0 12px; border-radius: 12px; border: 1px solid rgba(240,180,41,.45);
  background: rgba(240,180,41,.08); letter-spacing: 1px;
}

/* ============ 幸运轮盘 ============ */
.wheel-layout { margin-top: 16px; }
.wheel-card { display: flex; flex-direction: column; }
.wheel-stage { position: relative; width: 272px; height: 272px; margin: 8px auto 14px; }
.wheel-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 18px solid #ffd978; z-index: 4;
  filter: drop-shadow(0 2px 6px rgba(240,180,41,.7));
}
.wheel-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 9px;
  background: conic-gradient(from 0deg, #f0b429, #8b5cf6, #38bdf8, #f0b429);
  box-shadow: 0 0 30px rgba(240,180,41,.18), inset 0 0 20px rgba(0,0,0,.6);
}
.wheel-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  will-change: transform;
  box-shadow: inset 0 0 0 3px rgba(14,17,23,.85);
}
.wheel-label {
  position: absolute; left: 50%; top: 50%; width: 74px; margin: -15px 0 0 -37px;
  text-align: center; color: rgba(255,255,255,.92); font-size: 9.5px;
  line-height: 1.15; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.wheel-label b { display: block; font-size: 15px; font-weight: 400; }
.wheel-label i { font-style: normal; }
.wheel-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #1b1300; letter-spacing: .5px;
  background: radial-gradient(circle at 35% 30%, #ffe7a6, #f0b429 62%, #c98a12);
  box-shadow: 0 0 0 4px rgba(14,17,23,.85), 0 0 18px rgba(240,180,41,.5); z-index: 3;
  pointer-events: none;
}
.wheel-spin-btn { width: 100%; margin-top: 2px; }
.wheel-result {
  margin-top: 12px; min-height: 34px; text-align: center; font-size: 12px; color: var(--text-mute);
  display: flex; flex-direction: column; gap: 2px;
}
.wheel-result.win .wheel-result-main { color: var(--gold); font-weight: 700; font-size: 15px; }
.wheel-result.none .wheel-result-main { color: var(--text-dim); font-weight: 600; }
.wheel-result-sub { font-size: 11px; color: var(--text-mute); }
.wheel-odds { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--text-mute); }
.wheel-odds b { width: 100%; color: var(--text-dim); margin-bottom: 2px; }
.wheel-odds span { border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.wheel-odds-tip { width: 100%; margin-top: 6px; line-height: 1.6; }

@media (max-width: 900px) {
  .checkin-week { grid-template-columns: repeat(4, 1fr); }
  .checkin-mile-row { flex-direction: column; gap: 6px; }
  .ps-inject-row { flex-direction: column; }
  .ix-movers { grid-template-columns: 1fr; }
  .ps-strip-meta { gap: 10px; }
  .wheel-stage { width: 240px; height: 240px; }
}

/* 画布按容器宽度布局：canvas.width 是像素缓冲，不能反过来撑开页面 */
#price-chart, #index-chart, #presale-chart { display: block; width: 100%; }
#price-chart, #index-chart { height: 240px; }
#presale-chart { height: 210px; }

.market-toolbar { display: flex; align-items: center; gap: 10px; }
.market-index-btn { flex-shrink: 0; }


/* 指数 / 预售详情头：窄屏可换行，避免长文案把页面撑宽 */
.index-detail-card .detail-head, .presale-detail-card .detail-head { flex-wrap: wrap; gap: 10px 16px; }
.index-detail-card .detail-head > div, .presale-detail-card .detail-head > div { min-width: 0; }
.index-detail-card .detail-price { font-size: 26px; letter-spacing: -.2px; }
.index-detail-card .detail-code, .presale-detail-card .detail-code { white-space: normal; }

/* 详情头部：价格块不参与压缩，宽度不足时整体换行而不是把数字挤出卡片 */
.detail-price-box { flex-shrink: 0; }
.detail-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.detail-price { white-space: nowrap; }

.index-detail-card .detail-price-box { min-width: 150px; }
.index-detail-card .detail-head > div:first-child { flex: 1 1 260px; }

/* 指数详情：标题与数值上下排列，避免长数字在窄屏被挤出卡片 */
.index-detail-card .detail-head { flex-direction: column; align-items: stretch; gap: 4px; }
.index-detail-card .detail-price-box { text-align: left; min-width: 0; }
.index-detail-card .detail-price { font-size: 32px; }
.index-detail-card .detail-head > div:first-child { flex: 0 0 auto; }

/* 预售详情：头部上下排列，长数字与进度文案不挤出卡片 */
.presale-detail-card .detail-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.presale-detail-card .detail-price-box { text-align: left; }
.ps-progress-head { flex-wrap: wrap; gap: 4px 12px; }
.ps-progress-head { flex-direction: column; align-items: flex-start; gap: 2px; }

/* 栅格 / 表格容器的最小宽度修正：内部表格可横向滚动，但不能把整页撑宽 */
.game-layout, .market-layout, .other-tabs, .shop-grid { min-width: 0; }
.game-layout > .card, .market-layout > .card { min-width: 0; }
.table-wrap { max-width: 100%; }
.checkin-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }