/* ================================================
   DataBoard 手机端 v2 - 页面专属样式 (Pages)
   --------------------------------------------
   依赖：tokens.css + components.css
   包含：数据行卡片 / 持仓交易卡片 / 更新表卡片
   ================================================ */

/* ============== 数据行卡片（10 日明细）============== */
.phone-row-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: all 200ms ease;
  cursor: pointer;
}

.phone-row-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.phone-row-card:active {
  transform: scale(0.99);
}

.phone-row-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px dashed var(--border-secondary);
}

.phone-row-card__head-left {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.phone-row-card__date {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.phone-row-card__tag {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-1);
  color: var(--primary-6);
}

.phone-row-card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-3);
}

.phone-row-card__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.phone-row-card__cell {}

.phone-row-card__label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.phone-row-card__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.phone-row-card__value--up {
  color: var(--color-up);
}

.phone-row-card__value--down {
  color: var(--color-down);
}

/* ============== 策略 3 号：核心指标 ============== */
.phone-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.phone-metric {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.phone-metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--primary-5);
}

.phone-metric--blue::before {
  background: #2563eb;
}

.phone-metric--orange::before {
  background: var(--color-warning);
}

.phone-metric--green::before {
  background: var(--color-down);
}

.phone-metric__label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.phone-metric__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.phone-metric__value--up {
  color: var(--color-up);
}

.phone-metric__value--down {
  color: var(--color-down);
}

.phone-metric__sub {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ============== 持仓 / 交易卡片 ============== */
.phone-pos-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--primary-5);
}

.phone-pos-card--buy {
  border-left-color: var(--color-up);
}

.phone-pos-card--sell {
  border-left-color: var(--color-down);
}

.phone-pos-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--border-secondary);
}

.phone-pos-card__symbol {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.phone-pos-card__code {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.phone-pos-card__name {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.phone-pos-card__direction {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}

.phone-pos-card__direction--buy {
  background: rgba(217, 48, 48, 0.1);
  color: var(--color-up);
}

.phone-pos-card__direction--sell {
  background: rgba(21, 128, 61, 0.1);
  color: var(--color-down);
}

.phone-pos-card__time {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* ============== 更新页：状态条 ============== */
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.phone-status-bar__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-status-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-down);
}

.phone-status-bar__dot--ok {
  background: var(--color-up);
}

.phone-status-bar__dot--warn {
  background: var(--color-warning);
}

.phone-status-bar__value {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============== 更新页：分组标题 ============== */
.phone-section-title {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-2) var(--space-1);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--primary-5);
  border-radius: 2px;
}

/* ============== 更新页：表卡片 ============== */
.phone-upd-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 200ms ease;
}

.phone-upd-card:active {
  transform: scale(0.99);
}

.phone-upd-card--selected {
  border-left: 3px solid var(--primary-5);
}

.phone-upd-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-secondary);
}

.phone-upd-card__checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-primary);
  cursor: pointer;
  position: relative;
  transition: all 150ms ease;
}

.phone-upd-card__checkbox:checked {
  background: var(--primary-5);
  border-color: var(--primary-5);
}

.phone-upd-card__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.phone-upd-card__title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.phone-upd-card__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-upd-card__tb {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.phone-upd-card__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.phone-upd-card__status--auto {
  background: rgba(21, 128, 61, 0.1);
  color: var(--color-down);
}

.phone-upd-card__status--manual {
  background: rgba(239, 106, 76, 0.1);
  color: var(--primary-6);
}

.phone-upd-card__status--off {
  background: var(--neutral-3);
  color: var(--text-tertiary);
}

.phone-upd-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
}

.phone-upd-card__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.phone-upd-card__label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
}

.phone-upd-card__value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-upd-card__value--date {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.phone-upd-card__value--memo {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  white-space: normal;
  line-height: 1.4;
}

.phone-upd-card__ctrl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-secondary);
}

.phone-upd-card__sel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-upd-card__sel select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
}

.phone-upd-card__btn {
  padding: 6px 14px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-6);
  background: var(--primary-1);
  border: 1px solid var(--primary-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.phone-upd-card__btn:active {
  background: var(--primary-3);
  transform: scale(0.96);
}

.phone-upd-card__btn:disabled {
  color: var(--text-disabled);
  background: var(--neutral-3);
  border-color: var(--neutral-3);
  cursor: not-allowed;
}

/* ============== 输出信息条 ============== */
.phone-upd-output {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  color: #d48806;
  line-height: 1.5;
}

.phone-upd-output--ok {
  background: #f6ffed;
  border-color: #b7eb8f;
  color: #389e0d;
}

.phone-upd-output--error {
  background: #fff2f0;
  border-color: #ffccc7;
  color: #cf1322;
}

.phone-upd-output__icon {
  flex-shrink: 0;
  font-size: 16px;
}

/* ============== 我的：渐变头部 ============== */
.phone-profile-head {
  background: linear-gradient(135deg, #ef6a4c 0%, #d94a2d 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 20px 16px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.phone-profile-avatar {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.phone-profile-name {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.phone-profile-role {
  font-size: var(--font-size-xs);
  opacity: 0.85;
  margin-top: 4px;
}

.phone-profile-role .phone-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  margin-right: 8px;
}

/* ============== 提示横幅 ============== */
.phone-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  color: #d48806;
  line-height: 1.5;
}

.phone-banner--error {
  background: #fff2f0;
  border-color: #ffccc7;
  color: #cf1322;
}

/* ================================================
   基金页 v2 — 紧凑卡片菜单 + ETF 图表
   ================================================ */

/* 颈部状态条样式（已废弃，保留供未来扩展） */
.phone-fund-neck {
  display: none;
}

.phone-fund-neck__date {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.phone-fund-neck__icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary);
}

.phone-fund-neck__icon svg {
  width: 12px;
  height: 12px;
}

/* 卡片菜单栏（横向滑动） */
.phone-fund-menu {
  margin: 0 calc(-1 * var(--space-3)) var(--space-3);
  padding: 0 var(--space-3) var(--space-1);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.phone-fund-menu::-webkit-scrollbar {
  display: none;
}

.phone-fund-menu__inner {
  display: flex;
  gap: var(--space-2);
  padding-right: var(--space-3);
}

.phone-fund-menu__card {
  flex: 0 0 auto;
  width: 100px;
  /* 与页面背景 #fcfbf9 融合，减少视觉割裂 */
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  min-height: 56px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
  position: relative;
  overflow: hidden;
}

.phone-fund-menu__card:active {
  transform: scale(0.96);
}

.phone-fund-menu__card--active {
  border-color: var(--primary-5);
  background: var(--bg-secondary);
  box-shadow: 0 0 0 1px var(--primary-5), var(--shadow-sm);
}

.phone-fund-menu__card--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--primary-5);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

/* 头部行：name 居中 */
.phone-fund-menu__head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.phone-fund-menu__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* 数值行：num + pct（对齐 Web kpi-strip__value） */
.phone-fund-menu__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

/* 数值（curv）：深色等宽，对齐 Web kpi-strip__num；14px 避免在 100px 卡片内突兀 */
.phone-fund-menu__curv {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* 分位（qt）：品牌橙 pill，对齐 Web kpi-strip__pct */
.phone-fund-menu__qt {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--primary-5);
  background: var(--primary-1);
  white-space: nowrap;
  line-height: 1.4;
}

/* 进度条轨道 + 填充（barStyle 来自后端 utilities.py） */
.phone-fund-menu__bar-track {
  height: 4px;
  background: rgba(24, 28, 45, .06);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}

.phone-fund-menu__bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms ease, background-color 400ms ease;
  /* 默认品牌橙（对齐 Web 语义；后端 barStyle 可覆盖具体色） */
  background-color: var(--primary-5);
}

/* hint 样式已废弃 */
.phone-fund-menu__hint {
  display: none;
}

/* 卡片菜单滑块指示器（圆点） */
.phone-fund-menu__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-2);
}

.phone-fund-menu__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neutral-5);
  transition: all 200ms ease;
}

.phone-fund-menu__dot--active {
  width: 14px;
  border-radius: var(--radius-full);
  background: var(--primary-5);
}

.phone-card--chart {
  margin-bottom: var(--space-3);
}

.phone-card--chart .phone-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

/* 紧凑图表容器（移动端小屏可读性优化） */
.phone-chart--compact {
  height: 200px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.phone-chart--compact::before {
  content: '';
  position: absolute;
  inset: 0;
  /* v3.x 移除占位符灰色网格背景（之前用 linear-gradient 画 18×18px 网格，Plotly plot_bgcolor 透明导致穿透显示）*/
  background-image: none;
  pointer-events: none;
}

.phone-chart--compact .plot-container {
  font-family: inherit !important;
}

/* ============== 自定义图表图例（移动端优化，置于绘图区上方） ==============
   缘由：plotly 原生图例字号 8-10px 偏小、横向单行易被截断、与 x 轴标签易挤压；
   改为 HTML 渲染后，可控字号（≥12px）、自动换行、点击切换显隐、与图表边缘有 8-12px 留白。 */
.phone-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 2px 10px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--border-secondary);
  min-height: 32px;
}

.phone-chart-legend:empty {
  display: none;
}

.phone-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.phone-chart-legend__item:active {
  background-color: var(--primary-1);
  border-color: var(--primary-3);
}

.phone-chart-legend__item--off {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: var(--text-tertiary);
}

.phone-chart-legend__swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  background-color: var(--primary-5);
}

.phone-chart-legend__swatch--line {
  height: 3px;
  border-radius: 1px;
}

.phone-chart-legend__swatch--dash {
  height: 3px;
  background-color: transparent;
  background-image: linear-gradient(to right, currentColor 0 4px, transparent 4px 6px, currentColor 6px 10px, transparent 10px 12px);
  background-size: 12px 3px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.phone-chart-legend__label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 375px) {
  .phone-chart-legend {
    gap: 4px 8px;
    padding: 6px 0 8px;
  }

  .phone-chart-legend__item {
    padding: 3px 8px;
    font-size: 12px;
  }
}

/* 双列横向柱状图（bars2，8 行 × 2 列）— 更高、隐藏网格 */
.phone-chart--bars2 {
  height: 360px;
  /* 8 行 × ~38px/行 */
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

@media (max-width: 375px) {
  .phone-chart--bars2 {
    height: 320px;
  }
}

@media (max-width: 339px) {
  .phone-chart--bars2 {
    height: 290px;
  }
}

.phone-chart--bars2 .plot-container {
  font-family: inherit !important;
}

/* 图表标题行：单行标题（无日期） */
.phone-chart-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) 0 var(--space-1);
  border-bottom: 1px dashed var(--border-secondary);
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}

.phone-chart-head__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ============ 日期选择器（紧凑移动端样式） ============ */
.phone-chart-head__date {
  display: none;
}

/* 标题右侧日期文本（图表最后更新日期，纯展示） */
.phone-chart-head__date-text {
  flex-shrink: 0;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-normal);
  line-height: 1;
}

/* 日期步进器：前一天/后一天按钮 + 文本显示（彻底避开原生 input[type=date] 兼容问题） */
.phone-date-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 2px 4px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}

.phone-date-stepper__value {
  display: inline-block;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  min-width: 80px;
  text-align: center;
  user-select: none;
}

.phone-date-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 150ms ease;
}

.phone-date-stepper__btn:hover {
  background-color: var(--primary-1);
  color: var(--primary-5);
}

.phone-date-stepper__btn:active {
  background-color: var(--primary-2);
}

.phone-date-stepper__btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  background-color: transparent;
  color: var(--text-tertiary);
}

.phone-date-stepper__btn:disabled:hover {
  background-color: transparent;
  color: var(--text-tertiary);
}

/* 图表底部指标小提示 */
.phone-chart-memo {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-2) 0 0;
  line-height: 1.4;
}

/* 响应式：<=375px（iPhone SE）进一步压缩 */
@media (max-width: 375px) {
  .phone-fund-menu__card {
    width: 104px;
  }

  .phone-chart--compact {
    height: 180px;
  }

  .phone-card__body {
    padding: var(--space-3);
  }

  .phone-card--chart .phone-card__body {
    padding: var(--space-2);
  }
}

/* 响应式：超窄屏 <340px */
@media (max-width: 339px) {
  .phone-fund-menu__card {
    width: 96px;
    padding: 6px 10px;
  }

  .phone-chart--compact {
    height: 160px;
  }
}

/* ================================================
   期指页 v2 — 头部卡片菜单 + 净空单/中信对比 + 5 日明细
   ================================================ */

/* 期指/基金/融资 头部 KPI 卡：统一大尺寸（156px），完全对齐 Web kpi-strip 结构
   head(icon+name) / value(num+pct pill) / progress bar 三段式 */
#future-menu .phone-fund-menu__card,
#fund-menu .phone-fund-menu__card,
#margin-menu .phone-fund-menu__card {
  width: 156px;
  min-height: 76px;
  padding: 8px 10px 6px;
  cursor: default;
}

#future-menu .phone-fund-menu__curv,
#fund-menu .phone-fund-menu__curv,
#margin-menu .phone-fund-menu__curv {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

#future-menu .phone-fund-menu__qt,
#fund-menu .phone-fund-menu__qt,
#margin-menu .phone-fund-menu__qt {
  padding: 2px 7px;
}

/* 头部卡片栏下方的小字说明（融资页 v2.2） */
.phone-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin: var(--space-1) 0 var(--space-3);
  padding: 0 var(--space-4);
}

/* 期指 5 日明细横向卡片容器 */
.phone-recent {
  margin: 0 calc(-1 * var(--space-3)) var(--space-2);
  padding: 0 var(--space-3) var(--space-1);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.phone-recent::-webkit-scrollbar {
  display: none;
}

.phone-recent__inner {
  display: flex;
  gap: var(--space-3);
  padding-right: var(--space-3);
}

/* 横向明细卡片 */
.phone-row-card--scroll {
  flex: 0 0 86%;
  max-width: 360px;
  scroll-snap-align: start;
  /* 横滑卡片与页面背景同色 #fcfbf9（仅作用于横滑变体，不影响竖向 10 日明细行卡） */
  background: var(--bg-secondary);
  margin-bottom: 0;
  padding: var(--space-2) var(--space-3);
  cursor: default;
}

.phone-row-card--scroll:hover {
  box-shadow: var(--shadow-sm);
  transform: none;
}

.phone-row-card--scroll .phone-row-card__grid {
  gap: var(--space-2);
}

/* 窄屏适配 (iPhone SE 375px)：3×3 网格下 6 位数 +/-24,905 仍能放下，
   微调 value 字号 + 网格 gap 提升小屏可读性 */
@media (max-width: 375px) {
  .phone-row-card--scroll .phone-row-card__value {
    font-size: 13px;
  }

  .phone-row-card--scroll .phone-row-card__grid {
    gap: 6px 8px;
  }
}

/* 超窄屏 (Android 360px 及以下)：进一步压缩，避免 5 位以上数字溢出 */
@media (max-width: 339px) {
  .phone-row-card--scroll .phone-row-card__value {
    font-size: 12px;
  }

  .phone-row-card--scroll .phone-row-card__label {
    font-size: 9px;
  }
}

.phone-recent__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-2);
}

/* 行卡内单格日期样式（保留小字等宽） */
.phone-row-card__value--date {
  font-size: var(--font-size-sm);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--text-secondary);
}

/* 内联空状态（用于卡片内） */
.phone-empty--inline {
  padding: var(--space-6) var(--space-3);
}

/* ================================================
   更新页 v2.5 — 表格行→卡片网格 + 水平滑动分组
   ----------------------------------------
   表格 6 列表（数据/表名/更新日期/偏移值/覆盖值/数据来源）
   ↓
   卡片化重构：5 字段（数据值/更新日期/偏移值/覆盖值/数据来源）
   按 group 分 3 组（基础行情/衍生指标/宏观附加）
   水平滑动 + 圆点指示器（每组一个滑动条）
   ================================================ */

/* 状态条：数据库 / 耗时 / 更新时间 */
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.phone-status-bar__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-status-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-down);
}

.phone-status-bar__dot--ok {
  background: var(--color-up);
}

.phone-status-bar__dot--warn {
  background: var(--color-warning);
}

.phone-status-bar__value {
  color: var(--text-primary);
  font-weight: 600;
}

/* 分组标题 */
.phone-section-title {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-2) var(--space-1);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--primary-5);
  border-radius: 2px;
}

/* ============== 卡片网格容器（响应式布局）============== */
.phone-upd-group {
  margin-bottom: var(--space-3);
}

/* 响应式：auto-fill + minmax 自适应列数
   - 移动端（≤414px）：2 列
   - 窄屏（≤339px）：1 列
   - 平板/桌面（≥600px）：3 列
   卡片最小宽度 160px，可放下完整内容（名称+下拉） */
.phone-upd-group__inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

/* 表格行卡 */
.phone-upd-tile-wrap {
  position: relative;
  min-width: 0;
}

.phone-upd-tile {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 150ms ease;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.phone-upd-tile:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-md);
}

/* ============== 更新信息卡片 ============== */
.phone-upd-info-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  /* v2.10 移除：border-left: 3px solid var(--color-info);  左边框已不再使用 */
  margin-bottom: var(--space-3);
}

.phone-upd-info-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--border-secondary);
}

.phone-upd-info-card__icon {
  font-size: 14px;
}

.phone-upd-info-card__title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.phone-upd-info-card__time {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.phone-upd-info-card__body {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.55;
  word-break: break-all;
}

.phone-upd-info-card__badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: var(--primary-1);
  color: var(--primary-6);
  font-weight: var(--font-weight-medium);
  margin-left: 4px;
  vertical-align: middle;
}

/* ============== 卡片元素（head/name/value/meta/source/select）============== */
.phone-upd-tile__head {
  margin-bottom: var(--space-1);
  padding-right: 30px;
  /* 为右上角"更新"按钮留空间 */
}

.phone-upd-tile__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-upd-tile__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
  line-height: 1.2;
}

.phone-upd-tile__label {
  font-size: 9px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}

/* meta 区域：上排（日期）+ 下排（两个下拉菜单：偏移/覆盖）*/
.phone-upd-tile__meta {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px dashed var(--border-secondary);
}

.phone-upd-tile__meta-date {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.phone-upd-tile__meta-date-label {
  font-size: 9px;
  color: var(--text-tertiary);
}

.phone-upd-tile__meta-date-value {
  font-size: 10px;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.phone-upd-tile__selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.phone-upd-tile__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.phone-upd-tile__select-label {
  font-size: 9px;
  color: var(--text-tertiary);
  line-height: 1.2;
}

.phone-upd-tile__select {
  font-size: 10px;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='%23999' d='M0 2l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 14px;
}

.phone-upd-tile__source {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片右上角"更新"按钮：圆形图标按钮 (v2.13) */
.phone-upd-tile__status {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ef6a4c 0%, #f09070 100%);
  color: #fff;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 1px 4px rgba(239, 106, 76, 0.25);
  z-index: 1;
}

.phone-upd-tile__status:hover:not(:disabled):not(.phone-upd-tile__status--error) {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(239, 106, 76, 0.35);
}

.phone-upd-tile__status:hover:not(:disabled):not(.phone-upd-tile__status--error) .phone-upd-tile__status-icon {
  animation: phone-upd-spin 600ms ease-in-out;
}

.phone-upd-tile__status:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(239, 106, 76, 0.3);
}

.phone-upd-tile__status:disabled {
  background: var(--neutral-4);
  color: var(--text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

.phone-upd-tile__status--error {
  background: var(--neutral-4);
  color: var(--text-disabled);
  box-shadow: none;
}

.phone-upd-tile__status--error:hover {
  transform: none;
  box-shadow: none;
}

.phone-upd-tile__status--error:hover .phone-upd-tile__status-icon {
  animation: none;
}

@keyframes phone-upd-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* "处理中"加载态：保留品牌渐变 + 白色旋转图标（与"更新"图标视觉一致，避免 disabled 灰态看不清） */
.phone-upd-tile__status.is-loading {
  background: linear-gradient(135deg, #ef6a4c 0%, #f09070 100%);
  color: #fff;
  cursor: progress;
  box-shadow: 0 1px 4px rgba(239, 106, 76, 0.25);
}

/* 现代风格加载旋转图标（与更新图标同尺寸/同描边风格） */
.phone-spinner {
  animation: phone-spin 0.8s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes phone-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-spinner {
    animation-duration: 2s;
  }
}

/* ============== 输出信息条 ============== */
.phone-upd-output {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  color: #d48806;
  line-height: 1.5;
}

.phone-upd-output--ok {
  background: #f6ffed;
  border-color: #b7eb8f;
  color: #389e0d;
}

.phone-upd-output--error {
  background: #fff2f0;
  border-color: #ffccc7;
  color: #cf1322;
}

.phone-upd-output__icon {
  flex-shrink: 0;
  font-size: 16px;
}

/* 响应式：手机端主要使用 auto-fill + minmax 自动适配
   此处不再需要 flex/max-width 覆写（v2.7 已切换到 grid 布局）*/

/* ================================================
   期权页 v2.3 — 指数按钮组（页面级贴合按钮组）
   ----------------------------------------
   页面结构：页面级工具栏（贴合按钮组）→ 图表卡 1（IV）→ 图表卡 2（PCR）
   交互：单组按钮同时控制 IV + PCR 两张图表
         ofs 固定 -60（与 web 端 main_option.html 默认值一致）
   设计：贴合按钮组（参考日/周/月/年）— 共用外框 + 内部按钮无缝拼接
   ================================================ */

/* 页面级指数按钮工具栏：贴合按钮组，圆角外框 + 内部 padding */
.phone-option-toolbar {
  display: flex;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 2px;
  margin: 0 var(--space-3) 15px;
  overflow: hidden;
}

.phone-option-toolbar .phone-option-codes__btn {
  flex: 1;
  padding: 7px 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.phone-option-toolbar .phone-option-codes__btn:active {
  background: var(--bg-secondary);
}

.phone-option-toolbar .phone-option-codes__btn--active {
  background: var(--primary-5);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 1px 2px rgba(239, 106, 76, 0.20);
}

/* 图表卡片：在 phone-card--chart 基础上让 body 居中堆叠 */
.phone-option-card .phone-card__body {
  padding: var(--space-3);
}

/* 说明文字（IV/PCR 解释，小字灰色） */
.phone-option-memo {
  font-size: var(--font-size-xs);
  line-height: 1.55;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-1) 0;
  border-top: 1px dashed var(--border-secondary);
  margin-top: var(--space-2);
}

/* 响应式：<=375px 进一步压缩按钮 */
@media (max-width: 375px) {
  .phone-option-toolbar .phone-option-codes__btn {
    padding: 6px 4px;
    font-size: 12px;
  }
}

/* ================================================
   策略 3 号 v2 — 6 项核心指标 + 净值走势 + 滑动卡片
   ----------------------------------------
   6 项指标单行展示（与 simAcct3.html 顺序一致）
   净值图沿用 .phone-card--chart + 隐藏轴 + 底部图例
   持仓 / 交易记录：横向 snap 滚动 + 圆点指示器
   ================================================ */

/* 6 项核心指标：3 列 2 行（每行 3 项），紧凑布局 */
.phone-s3-indicators {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.phone-s3-ind {
  /* 与页面背景同色 #fcfbf9，保留发丝边框 + 浅投影维持边界感 */
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.phone-s3-ind::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--primary-5);
}

.phone-s3-ind__label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: 2px;
  white-space: nowrap;
}

.phone-s3-ind__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ============ 横向滑动卡片菜单（带圆点）============ */
.phone-s3-swipe {
  margin: 0 calc(-1 * 12px);
  padding: 0 12px var(--space-1);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.phone-s3-swipe::-webkit-scrollbar {
  display: none;
}

.phone-s3-swipe__inner {
  display: flex;
  gap: var(--space-3);
  padding-right: 12px;
}

.phone-s3-swipe__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-2);
}

.phone-s3-swipe__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neutral-5);
  transition: all 200ms ease;
  cursor: pointer;
}

.phone-s3-swipe__dot--active {
  width: 14px;
  border-radius: var(--radius-full);
  background: var(--primary-5);
}

/* ============ 滑动卡片（持仓 / 买入计划 / 交易记录共用）============ */
.phone-s3-card {
  flex: 0 0 86%;
  max-width: 360px;
  scroll-snap-align: start;
  /* 与页面背景同色 #fcfbf9，保留浅投影维持边界感 */
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  /* [2026-07-04 实验] 暂时去掉左边框色条，测试纯净卡片外观 */
  border-left: 0;
  cursor: default;
  margin-bottom: 0;
}

/* 三种卡片（持仓/买入计划/交易记录）统一样式，仅内容区分 */
.phone-s3-card[data-etype="record"] {
  /* 与基础 card 一致，保留语义标记供 JS 筛选 */
}

.phone-s3-card[data-etype="buy"] {
  /* 统一为与 holding/record 相同的纯净白底卡片，不再用虚线边框/渐变区分 */
}

.phone-s3-card__date--future {
  color: var(--color-up, #e34d3f);
}

.phone-s3-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px dashed var(--border-secondary);
  gap: var(--space-2);
}

.phone-s3-card__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.phone-s3-card__name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  flex: 1;
  min-width: 0;
}

.phone-s3-card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-2);
}

.phone-s3-card__cell {
  min-width: 0;
}

.phone-s3-card__label {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-s3-card__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-s3-card__value.phone-text--up {
  color: var(--color-up);
}

.phone-s3-card__value.phone-text--down {
  color: var(--color-down);
}

.phone-s3-card__plan {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.phone-s3-card__plan-label {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
}

.phone-s3-card__plan-text {
  flex: 1;
  color: var(--text-primary);
  word-break: break-all;
  white-space: normal;
}

/* 响应式：<=375px 卡片占比略调 */
@media (max-width: 375px) {
  .phone-s3-card {
    flex-basis: 92%;
  }

  .phone-s3-indicators {
    grid-template-columns: repeat(3, 1fr);
  }

  .phone-s3-ind__value {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 339px) {
  .phone-s3-card {
    flex-basis: 96%;
  }

  .phone-s3-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}