/* ===== dash 样式 = demo（Main/dash/demo/资产分析-个人IBKR资产仪表盘.html）全套 + 登录页/顶栏按钮/页脚新增 ===== */

/* ===== Seed Tokens ===== */
:root {
  --seed-bg: #F6F7F9;
  --seed-fg: #1A1D23;
  --seed-primary: #2563EB;
  --seed-accent: #0EA5E9;
  --seed-surface: #FFFFFF;
  --seed-radius: 12px;

  /* Derived tokens */
  --bg: var(--seed-bg);
  --fg: var(--seed-fg);
  --primary: var(--seed-primary);
  --accent: var(--seed-accent);
  --surface: var(--seed-surface);
  --radius: var(--seed-radius);
  --radius-sm: calc(var(--seed-radius) * 0.5);
  --radius-lg: calc(var(--seed-radius) * 1.5);

  --muted: color-mix(in srgb, var(--seed-fg) 55%, transparent);
  --border: color-mix(in srgb, var(--seed-fg) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--seed-fg) 16%, transparent);

  --up: #16A34A;
  --up-bg: color-mix(in srgb, #16A34A 8%, var(--seed-surface));
  --down: #DC2626;
  --down-bg: color-mix(in srgb, #DC2626 8%, var(--seed-surface));

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --spacing: 8px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  min-height: 100vh;
}

/* ===== Layout ===== */
.app { max-width: 1440px; margin: 0 auto; padding: calc(var(--spacing)*3) calc(var(--spacing)*4); }

/* ===== Header ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--spacing)*2);
  margin-bottom: calc(var(--spacing)*4);
  flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: baseline; gap: calc(var(--spacing)*1.5); }
.topbar-left h1 {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg);
}
.topbar-left .subtitle { font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
.topbar-right { display: flex; align-items: center; gap: calc(var(--spacing)*2); }
.date-label { font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.02em; }

/* 顶栏幽灵按钮（日志查看/退出登录） */
.ghost-button {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--muted);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.ghost-button:hover { border-color: var(--primary); color: var(--primary); }

/* Currency Switcher */
.currency-switcher { position: relative; }
.currency-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.currency-btn:hover { border-color: var(--primary); }
.currency-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.currency-btn svg { width: 14px; height: 14px; stroke: var(--muted); }
.currency-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  min-width: 160px; z-index: 100; display: none; overflow: hidden;
}
.currency-dropdown.open { display: block; }
.currency-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; font-size: 0.8125rem; cursor: pointer;
  transition: background 0.12s;
}
.currency-option:hover { background: color-mix(in srgb, var(--seed-primary) 6%, var(--seed-surface)); }
.currency-option.active { color: var(--primary); font-weight: 600; }
.currency-option .flag { font-size: 1rem; }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: calc(var(--spacing)*3);
}

/* ===== Section Titles ===== */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: calc(var(--spacing)*2.5);
  flex-wrap: wrap; gap: var(--spacing);
}
.section-title {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
}

/* ===== Overview Grid ===== */
.overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: calc(var(--spacing)*2);
  margin-bottom: calc(var(--spacing)*4);
}
.total-card { display: flex; flex-direction: column; justify-content: space-between; }
.total-card .label { font-size: 0.8125rem; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; margin-bottom: var(--spacing); }
.total-card .amount { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.total-card .change-row { display: flex; align-items: center; gap: 8px; margin-top: calc(var(--spacing)*1.5); flex-wrap: wrap; }
.change-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.75rem; font-weight: 600; padding: 2px 8px;
  border-radius: 100px; font-variant-numeric: tabular-nums;
}
.change-badge.up { background: var(--up-bg); color: var(--up); }
.change-badge.down { background: var(--down-bg); color: var(--down); }
.change-badge svg { width: 10px; height: 10px; }
.change-label { font-size: 0.75rem; color: var(--muted); }

.asset-card { display: flex; flex-direction: column; gap: calc(var(--spacing)*1.5); }
.asset-card .card-top { display: flex; align-items: center; justify-content: space-between; }
.asset-card .asset-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.asset-card .asset-icon.cash { background: color-mix(in srgb, var(--seed-primary) 10%, var(--seed-surface)); }
.asset-card .asset-icon.stocks { background: color-mix(in srgb, var(--seed-accent) 12%, var(--seed-surface)); }
.asset-card .asset-icon.options { background: color-mix(in srgb, #F59E0B 12%, var(--seed-surface)); }
.asset-card .asset-icon svg { width: 16px; height: 16px; }
.asset-card .pct { font-size: 0.6875rem; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--seed-fg) 5%, var(--seed-surface)); padding: 2px 8px; border-radius: 100px; letter-spacing: 0.02em; }
.asset-card .asset-name { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.asset-card .asset-amount { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.asset-card .asset-change { font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.asset-card .asset-change.up { color: var(--up); }
.asset-card .asset-change.down { color: var(--down); }

/* Allocation bar */
.allocation-bar { margin-top: calc(var(--spacing)*2); }
.allocation-track {
  height: 6px; border-radius: 3px; overflow: hidden;
  display: flex; background: var(--border);
}
.allocation-track .seg-cash { background: var(--primary); }
.allocation-track .seg-stocks { background: var(--accent); }
.allocation-track .seg-options { background: #F59E0B; }
.allocation-legend {
  display: flex; gap: calc(var(--spacing)*2); margin-top: var(--spacing);
}
.allocation-legend span { display: flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--muted); }
.allocation-legend em { font-style: normal; }
.allocation-legend .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ===== Trend Section ===== */
.trend-section { margin-bottom: calc(var(--spacing)*4); }
.trend-controls { display: flex; align-items: center; gap: calc(var(--spacing)*1.5); flex-wrap: wrap; }
.seg-control {
  display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
}
.seg-btn {
  padding: 6px 14px; font-size: 0.75rem; font-weight: 500;
  color: var(--muted); cursor: pointer; border: none; background: none;
  transition: color 0.15s, background 0.15s; letter-spacing: 0.02em;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--fg); }
.seg-btn.active { background: var(--primary); color: #fff; }
.seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ===== Toggle Switch (出入金开关) ===== */
.toggle-switch {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  user-select: none; white-space: nowrap;
}
.toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: relative; display: inline-block; width: 36px; height: 20px;
  background: var(--border-strong); border-radius: 10px;
  transition: background 0.2s;
}
.toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--surface); border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::after { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle-label { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.toggle-switch input:checked ~ .toggle-label { color: var(--fg); }

.trend-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--spacing)*2); margin-top: calc(var(--spacing)*2.5); }
.trend-card { display: flex; flex-direction: column; }
.trend-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--spacing)*1.5); flex-wrap: wrap; gap: 6px; }
.trend-card-title { font-size: 0.8125rem; font-weight: 600; color: var(--fg); }
.trend-card-badge { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 100px; }
.trend-card-badge.up { background: var(--up-bg); color: var(--up); }
.trend-card-badge.down { background: var(--down-bg); color: var(--down); }
#badgeDividend { display: contents; }
.dividend-total-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 100px;
}
.dividend-total-badge.up { background: var(--up-bg); color: var(--up); }
.dividend-total-badge.down { background: var(--down-bg); color: var(--down); }
.dividend-total-label { font-weight: 700; }
.dividend-total-amount { font-weight: 600; }
.dividend-total-badge.primary .dividend-total-label { font-weight: 700; }
/* 区间出入金统计徽章（仅区间内有出入金时显示）：入金=盈利样式、出金=亏损样式、净流入 0=中性灰无背景 */
.flow-badge { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.flow-badge.up { background: var(--up-bg); color: var(--up); }
.flow-badge.down { background: var(--down-bg); color: var(--down); }
.flow-badge.flat { background: transparent; color: var(--muted); }
#badgeFlows { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
#badgeFlows:empty { display: none; } /* 区间无出入金时不占位 */

/* 收益率走势：区间统计徽标（2026-10-17 用户要求：与总资产走势完全同款）

   总资产走势的写法是：`<span id="badgeFlows">` 里面装多个独立 `.flow-badge` pill，
   彼此有空隙（gap:4px），**容器本身没有背景色**。
   收益率这里必须一模一样，不要给容器上背景——否则外层一大块浅绿背景
   把里面的红/绿小 pill 包住，看着“连成一片”，与总资产那行风格不一致。

   顺序（跟总资产走势一致）：开关 → 收益率 → 买入 → 卖出 → 佣金 → 页签 */
.ret-badge {
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.ret-badge.up { background: var(--up-bg); color: var(--up); }
.ret-badge.down { background: var(--down-bg); color: var(--down); }
/* 容器：纯布局，无背景、无内边距，与 #badgeFlows 同构 */
#badgeReturn { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
#badgeReturn:empty { display: none; }
.trend-chart-wrap { position: relative; }
.trend-chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.8125rem; }

/* ===== Calendar Section ===== */
.calendar-section { margin-bottom: calc(var(--spacing)*4); }
.calendar-body { margin-top: calc(var(--spacing)*2.5); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: 0.6875rem; color: var(--muted); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
/* 窄屏隐藏周末后的 5 列布局（仅周一~周五，由 JS 在 ≤480px 时加 .no-weekend） */
.cal-weekdays.no-weekend, .cal-grid.no-weekend { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cal-cell {
  aspect-ratio: 1; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums; position: relative;
  border: 1px solid transparent; transition: border-color 0.12s;
  padding: 4px 2px;
  min-width: 0; overflow: hidden;   /* 长金额不撑破格子（grid 1fr 隐式 min-width:auto 陷阱） */
}
.cal-cell:hover { border-color: var(--border-strong); }
.cal-cell .day-num { position: absolute; top: 3px; left: 5px; font-size: 0.75rem; font-weight: 500; color: var(--muted); line-height: 1; }
.cal-cell .pnl { font-size: 0.6875rem; font-weight: 600; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-cell .pnl.up { color: var(--up); }
.cal-cell .pnl.down { color: var(--down); }
.cal-cell .pnl.flat { color: var(--muted); }
.cal-cell .pct { font-size: 0.5625rem; font-weight: 500; text-align: center; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.cal-cell .pct.up { color: var(--up); }
.cal-cell .pct.down { color: var(--down); }
.cal-cell.up-bg { background: var(--up-bg); }
.cal-cell.down-bg { background: var(--down-bg); }
.cal-cell.empty { background: none; }
.cal-cell.weekend { background: color-mix(in srgb, var(--seed-fg) 4%, var(--seed-surface)); }
.cal-cell.weekend .day-num { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.cal-cell.today { border-color: var(--primary); }
.cal-cell.today .day-num { color: var(--primary); font-weight: 700; }

/* 收益角标（日格子/月卡/年卡通用，右上角；pointer-events:none 不挡格子 hover/点击 tooltip）
   .cal-best = 🥇🥈🥉 前三名奖牌；.cal-warn = ⚠️ 末位亏损警示（仅候选卡片 ≥4 且末位收益 <0 时出现） */
.cal-best, .cal-warn { position: absolute; top: 2px; right: 4px; font-size: 0.875rem; line-height: 1; pointer-events: none; z-index: 1; }
.cal-warn { font-size: 0.8125rem; opacity: 0.9; }
.year-month .cal-best, .year-month .cal-warn { top: 5px; right: 7px; font-size: 1rem; }
.year-month .cal-warn { font-size: 0.9375rem; }

/* Month & year views: card grid */
.year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--spacing)*1.5); }
.year-month {
  position: relative;   /* 🥇🥈🥉 奖牌角标定位锚点 */
  padding: calc(var(--spacing)*2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-align: center;
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.year-month:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.year-month .month-name { font-size: 0.75rem; color: var(--muted); font-weight: 500; margin-bottom: 8px; letter-spacing: 0.02em; }
.year-month .month-pnl { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.year-month .month-pnl.up { color: var(--up); }
.year-month .month-pnl.down { color: var(--down); }
.year-month .month-pct { font-size: 0.6875rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.year-month .month-pct.up { color: var(--up); }
.year-month .month-pct.down { color: var(--down); }
.year-month.empty { opacity: 0.5; }
.year-month.up-bg { background: var(--up-bg); border-color: color-mix(in srgb, var(--up) 22%, var(--border)); }
.year-month.down-bg { background: var(--down-bg); border-color: color-mix(in srgb, var(--down) 22%, var(--border)); }

/* Calendar legend & summary */
.cal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--spacing)*2); flex-wrap: wrap; gap: var(--spacing); }
.cal-legend { display: flex; align-items: center; gap: calc(var(--spacing)*1.5); }
.cal-legend span { display: flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--muted); }
.cal-legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.cal-legend .swatch.loss { background: var(--down-bg); border: 1px solid color-mix(in srgb, var(--down) 30%, transparent); }
.cal-legend .swatch.gain { background: var(--up-bg); border: 1px solid color-mix(in srgb, var(--up) 30%, transparent); }
.cal-summary { font-size: 0.8125rem; color: var(--muted); }
.cal-summary strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Month select & period summary */
.month-select {
  padding: 6px 12px; font-size: 0.75rem; font-weight: 500;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer; letter-spacing: 0.02em;
  transition: border-color 0.15s;
}
.month-select:hover { border-color: var(--primary); }
.month-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 收入图表头部期间切换（更紧凑） */
.income-period-sel { padding: 3px 8px; font-size: 0.7rem; }

/* 收益日历日格子：悬停 tooltip（总资产/股票/期权）+ 点击跳转 */
.cal-cell[data-d8] { cursor: pointer; }
.cal-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--fg); color: var(--surface); opacity: 0.95;
  border-radius: 6px; padding: 8px 10px; font-size: 0.7rem; line-height: 1.55;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); min-width: 170px;
}
.cal-tip .t-date { font-weight: 600; margin-bottom: 2px; }
.cal-tip .t-row { display: flex; justify-content: space-between; gap: 14px; }
.cal-tip .t-total { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); margin-top: 4px; padding-top: 4px; }
/* tooltip 内跳转链接（钉住模式下可点）：做成小胶囊按钮形态，手机上好点 */
.cal-tip .t-link {
  display: block; margin-top: 6px; padding: 3px 8px;
  color: #93C5FD; font-size: 0.68rem; font-weight: 600; text-decoration: none;
  background: color-mix(in srgb, var(--seed-primary) 35%, transparent);
  border-radius: 4px; text-align: center;
}
#cashCard { cursor: help; }
.amount-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.75rem; color: var(--muted); user-select: none;
}
.amount-toggle input { display: none; }
.toggle-track {
  width: 32px; height: 18px; border-radius: 9px;
  background: var(--border-strong); position: relative;
  transition: background 0.2s;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}
.amount-toggle input:checked + .toggle-track { background: var(--primary); }
.amount-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); }
.toggle-label { letter-spacing: 0.02em; font-weight: 500; }
.cal-period-summary {
  display: flex; align-items: baseline; gap: calc(var(--spacing)*2);
  padding: calc(var(--spacing)*1.5) calc(var(--spacing)*2);
  background: color-mix(in srgb, var(--seed-fg) 3%, var(--seed-surface));
  border-radius: var(--radius-sm);
  margin-bottom: calc(var(--spacing)*2);
  font-size: 0.8125rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cal-period-summary .period-val { font-weight: 600; color: var(--fg); }
.cal-period-summary .period-val.up { color: var(--up); }
.cal-period-summary .period-val.down { color: var(--down); }

/* ===== 交易记录（2026-10-17 新增，同日改版为二级弹窗 + 表格）===== */

/* 走势卡片头部的入口按钮：与开关/分段控件同一行时高度要对齐（30px）
   ⚠️ 不能只写 padding：.ghost-button 的 padding 是 7px 14px，而这里改成 5px 12px 后
   仍有 45px 高（行高 + 边框），比页签的 30px 高一截，把整个抬头撑高。
   定高 26px + line-height:1 才能跟页签严格对齐。 */
.trade-open-btn {
  padding: 0 10px; height: 26px; font-size: 0.75rem;
  border-radius: var(--radius-sm); line-height: 1;
}

/* ----- 弹窗骨架：遮罩 + 面板 ----- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--spacing)*3);
  background: color-mix(in srgb, var(--seed-fg) 45%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.16s ease;
}
.modal-overlay.open { opacity: 1; }
/* hidden 属性要能压过 display:flex，否则无法真正关闭 */
.modal-overlay[hidden] { display: none; }

.modal-panel {
  display: flex; flex-direction: column;
  width: min(1080px, 100%); max-height: min(86vh, 900px);
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(6px) scale(0.995); transition: transform 0.16s ease;
}
.modal-overlay.open .modal-panel { transform: none; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--spacing)*2);
  padding: calc(var(--spacing)*2) calc(var(--spacing)*2.5);
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.modal-close:hover { color: var(--fg); border-color: var(--primary); }
.modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.modal-toolbar {
  display: flex; align-items: center; gap: calc(var(--spacing)*1);
  flex-wrap: wrap; row-gap: 6px;
  padding: calc(var(--spacing)*1.5) calc(var(--spacing)*2.5);
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.modal-summary { margin: 0 0 0 auto; }

/* ----- 交易记录：代码搜索框（2026-10-17） ----- */
.trade-search { position: relative; display: inline-flex; align-items: center; }
.trade-search-input {
  width: 160px; padding: 6px 26px 6px 10px;
  font-size: 0.75rem; font-family: inherit;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color 0.15s, width 0.15s;
}
.trade-search-input::placeholder { color: var(--muted); }
.trade-search-input:hover { border-color: var(--primary); }
.trade-search-input:focus {
  outline: none; border-color: var(--primary); width: 200px;
}
.trade-search-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 去掉 Chrome 原生 search 清除叉（自绘一个，位置更可控） */
.trade-search-input::-webkit-search-cancel-button { appearance: none; }
.trade-search-clear {
  position: absolute; right: 6px; display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--border-strong); color: var(--surface);
  font-size: 0.7rem; line-height: 1; cursor: pointer;
}
.trade-search-clear:hover { background: var(--muted); }
/* 搜索命中高亮：淡黄底、不改变字重，避免把列宽顶开 */
.tr-table mark.tr-hl {
  background: #fde68a; color: #78350f;
  padding: 0 1px; border-radius: 2px;
}
/* 深色主题下淡黄太刺眼，换成低饱和茶色底 */
[data-theme="dark"] .tr-table mark.tr-hl { background: #78350f; color: #fde68a; }

.modal-body { overflow: auto; padding: 0 calc(var(--spacing)*2.5) calc(var(--spacing)*2); }

/* ----- 明细表格：固定表头 + 日期分组跨行 ----- */
.tr-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
  /* 固定列宽策略：不用 auto。auto 会把大量宽度分给日期列（它只有两行短文字），
     却把最长的代码列挤窄，导致列宽与内容量不成比例、看着不齐。 */
  table-layout: fixed;
  /* 最小宽度：fixed + 百分比在窄容器里会把日期/时间挤到放不下
     （实测 640px 时 14 个单元格内容溢出）。定住总宽，宁可横滚不裁字。 */
  min-width: 860px;
}
/* 各列宽度（合计 100%）：日期放日期+徽标+笔数，代码列给足（期权名最长）；
   数量/单价/金额/佣金/税是右侧数值列，按最大位数留够。 */
.tr-table .col-date { width: 17%; }
.tr-table .col-time { width: 10%; }   /* 要装「03:52:15 次日」 */
.tr-table .col-side { width: 8%; }
.tr-table .col-name { width: 22%; }
.tr-table .col-qty { width: 12%; }
.tr-table .col-px { width: 10%; }
.tr-table .col-amt { width: 12%; }
.tr-table .col-fee { width: 9%; }

.tr-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 7px 8px; text-align: left; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 600; color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}
.tr-table thead th.num { text-align: right; }
/* 日期列左边与表格外沿对齐（只给日期格子较窄内边距）。
   ⚠️ 不能写 td:first-child：日期列 rowspan 后，同一天后续行的 :first-child
   会变成方向列，那些行标签会整体左移 4px、和当日首行错开（2026-10-17 已踩）。 */
.tr-table thead th:first-child,
.tr-table tbody td.tr-date-cell { padding-left: 4px; }

.tr-table tbody td {
  padding: 5px 8px; border-bottom: 1px solid var(--border);
  vertical-align: top; white-space: nowrap;
}
.tr-table tbody tr:last-child td { border-bottom: none; }
.tr-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* 数值列右对齐，方便上下比大小（全站金额右对齐风格） */
.tr-table .num { text-align: right; }
.tr-table .col-name { font-weight: 600; }
.tr-table .col-px { color: var(--muted); }

/* 方向标签：沿用 B/S/T 圈圈的配色（买入红/卖出绿，与绿涨红跌相反——用户拍板） */
.tr-side-tag {
  display: inline-block; min-width: 30px; text-align: center;
  padding: 1px 6px; border-radius: 3px;
  font-size: 0.6875rem; font-weight: 700; color: #fff;
}
.tr-side-tag.buy { background: var(--down); }
.tr-side-tag.sell { background: var(--up); }

/* 金额着色：全站统一规则——正数绿、负数红（由 JS 设内联色） */
.tr-table .col-amt, .tr-table .col-fee { font-weight: 600; }

/* 首列日期块：日期 + B/S/T 徽标 + 笔数，跨该日所有行 */
.tr-date-cell { border-left: 2px solid var(--border); }
.tr-date-wrap { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.tr-date-main { display: flex; align-items: center; gap: 5px; }
.tr-date-main .td-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  font-size: 0.5625rem; font-weight: 700; color: #fff;
}
.tr-date-main .td-tag.buy { background: var(--down); }
.tr-date-main .td-tag.sell { background: var(--up); }
.tr-date-main .td-tag.mixed { background: #8B5CF6; }
.tr-date-text { font-weight: 600; white-space: nowrap; }
.tr-date-cnt { font-size: 0.625rem; color: var(--muted); }

/* 分批成交合并行：标出原始笔数，不隐短（均价是加权所得） */
.tr-fills {
  display: inline-block; margin-left: 5px; padding: 0 4px;
  border-radius: 3px; background: var(--border);
  font-size: 0.5625rem; font-weight: 500; color: var(--muted);
  white-space: nowrap;
}

/* 时间已换北京时间，跨到次日时标一下：
   日期列用的是 IBKR 美东报告日（对账需要），不跟着跨，所以要明示，
   否则「10月5日 03:51 次日」看着像矛盾。 */
.tr-nextday {
  display: inline-block; margin-left: 4px; padding: 0 3px;
  border-radius: 2px; background: var(--border);
  font-size: 0.5rem; font-weight: 500; color: var(--muted);
  white-space: nowrap; vertical-align: 1px;
}

/* 弹窗内空状态 */
.modal-body .chart-empty { padding: calc(var(--spacing)*4) 0; text-align: center; color: var(--muted); font-size: 0.8125rem; }

/* 窄屏：弹窗铺满、表格允许横向滚动而不撑破页面 */
@media (max-width: 760px) {
  .modal-overlay { padding: 0; }
  .modal-panel { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .modal-toolbar { padding: calc(var(--spacing)*1.5); }
  .modal-body { padding: 0 calc(var(--spacing)*1.5) calc(var(--spacing)*2); }
  .modal-summary { margin-left: 0; }
  /* 窄屏不再改 .tr-table 的 min-width：基础规则已定 860px，
     这里再写更小值会让 fixed + 百分比把列挤到放不下（日期/时间会裁字）。
     窄屏就是要横向滚动，而不是压缩列宽。 */
}

/* ===== 页脚（数据源说明 + FIFO 提示） ===== */
.app-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing);
  padding: calc(var(--spacing)*2) 0 calc(var(--spacing)*4);
  font-size: 0.75rem; color: var(--muted);
}

/* ===== 登录页 ===== */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--spacing)*3);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: calc(var(--spacing)*5) calc(var(--spacing)*4);
  text-align: center;
}
.login-icon {
  width: 72px; height: 72px; margin: 0 auto calc(var(--spacing)*2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--seed-primary) 8%, var(--seed-surface));
  color: var(--primary);
}
.login-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.login-subtitle { font-size: 0.8125rem; color: var(--muted); margin: 6px 0 calc(var(--spacing)*3); }
.login-form { display: flex; flex-direction: column; gap: calc(var(--spacing)*1.5); }
.login-input-wrap input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seed-primary) 15%, transparent); }
.login-btn {
  padding: 10px 14px; border: none; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em;
  cursor: pointer; transition: filter 0.15s;
}
.login-btn:hover { filter: brightness(1.08); }
.login-error { font-size: 0.75rem; color: var(--down); font-weight: 500; }
.login-card.has-error { animation: login-shake 0.3s; }
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .trend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app { padding: calc(var(--spacing)*2) calc(var(--spacing)*2); }
  .overview-grid { grid-template-columns: 1fr; }
  .year-grid { grid-template-columns: repeat(3, 1fr); }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar-right { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  /* 走势图头部：徽标+区间按钮组允许换行，避免 7 按钮组把标题挤出屏幕 */
  .trend-card-header > div { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  /* 顶栏右侧整组换行 */
  .topbar-right { row-gap: var(--spacing); }
}
@media (max-width: 480px) {
  .app { padding: calc(var(--spacing)*2) calc(var(--spacing)*1.5); }
  .total-card .amount { font-size: 1.5rem; }
  .trend-controls { width: 100%; }
  .seg-control { width: 100%; }
  .seg-btn { flex: 1; text-align: center; padding: 8px 2px; font-size: 0.7rem; }
  /* 收益日历：7 列在 390px 下每格仅 ~48px，压缩字号与间距防止溢出 */
  .cal-weekdays, .cal-grid { gap: 2px; }
  .cal-cell { aspect-ratio: 1.2; padding: 2px 1px; }
  .cal-cell .day-num { top: 2px; left: 3px; font-size: 0.625rem; }   /* 隐藏周末后格子变宽，日数字随桌面版调大 */
  .cal-cell .pnl { font-size: 0.625rem; letter-spacing: -0.02em; }
  .cal-cell .pct { font-size: 0.5313rem; }
  .cal-best, .cal-warn { top: 2px; right: 3px; font-size: 0.75rem; }   /* 窄屏角标（奖牌/警示） */
  .cal-period-summary { flex-wrap: wrap; row-gap: 4px; }
  .year-grid { grid-template-columns: repeat(2, 1fr); }
  .section-header { flex-direction: column; align-items: flex-start; }
}