.eyebrow{display:none}
/* 布局：左栏（账户 + 逐笔盈亏 / 理论总净值，人民币与品种等权各一组）、右栏（各策略看板）；
   屏宽 ≤ iPhone 17 Pro Max 440px × 1.05 = 462px 时左右栏顺序叠放
   2026-11-04 左右栏改为等宽（原 4:6 → 5:5），图表高度随栏宽同比缩放以保持原长宽比：左栏 ×1.25（0.5/0.4）、右栏 ×0.8333（0.5/0.6）（JS 的偏差 / 保证金面板高度也读 --left-scale） */
.v2-grid{grid-template-columns:1fr 1fr;--left-scale:1.25;--right-scale:.8333}
.v2-grid .left-column .curve-panel:not(.margin-panel) .chart-wrap{height:calc(315px * var(--left-scale))}
@media(max-width:720px){.v2-grid .left-column .curve-panel:not(.margin-panel) .chart-wrap{height:calc(260px * var(--left-scale))}}
@media(min-width:463px){.v2-grid .right-column{grid-column:auto}}   /* 覆盖 styles.css 中 ≤1100px 右栏跨整行的规则 */
@media(max-width:462px){.v2-grid{grid-template-columns:1fr;--left-scale:1;--right-scale:1}.v2-grid .right-column{grid-column:auto}}
.curve-panel{display:flex;flex-direction:column}
.chart-wrap.small{height:200px}
.mode-pill{padding:4px 8px;border-radius:20px;background:#fff4e0;color:#b7791f;font:10px 'DM Mono',monospace}
.mode-pill.live{background:#e4f7ef;color:#23966f}
.legend .legend-item{cursor:pointer;user-select:none}
.legend .legend-item.off{opacity:.35}
.legend .legend-swatch{display:inline-block;width:16px;height:0;border-top:2px solid;vertical-align:middle;margin-right:4px}
.strategy-box{padding:18px 20px 14px}
.strategy-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.strategy-head h3{margin:0;font-size:14px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.strategy-head h3 i{display:inline-block;width:10px;height:10px;border-radius:3px}
.badge{padding:2px 7px;border-radius:10px;font:9px 'DM Mono',monospace;background:#edf3fb;color:#5790d0}
.badge.shadow{background:#fff4e0;color:#b7791f}
.badge.live{background:#e4f7ef;color:#23966f}
.badge.off{background:#f1f3f6;color:#8995a7}
.strategy-metrics{display:flex;gap:16px;color:var(--muted);font-size:10px}
.strategy-metrics b{display:block;margin-top:3px;color:var(--ink);font:12px 'DM Mono',monospace}
.strategy-chart{position:relative;height:calc(204px * var(--right-scale, 1));margin-top:10px}
.strategy-chart canvas{display:block;width:100%;height:100%}
.strategy-sub{display:flex;justify-content:space-between;margin-top:6px;color:#a0acb9;font:9px 'DM Mono',monospace}
.key-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px;margin-top:12px;max-height:340px;overflow-y:auto;padding-right:2px}
.key-tile{padding:8px 9px;border:1px solid var(--line);border-radius:8px;font-size:10px}
.key-tile.active{border-color:#bcd5f3;background:#fafcff}
.key-tile .key-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.key-tile strong{font-size:11px}
.key-tile .lots{font:10px 'DM Mono',monospace}
.key-tile .lots.long{color:var(--green)}
.key-tile .lots.short{color:var(--red)}
.key-tile .kv{display:flex;justify-content:space-between;margin-top:3px;color:var(--muted);font:9px 'DM Mono',monospace}
.key-tile .kv b{color:#4c5a6b;font-weight:400}

.key-empty{margin:10px 0 2px;color:var(--muted);font-size:10px}
/* 理论总净值曲线时间滑块：与 v1（frontend/index.html 内联样式）一致 */
.curve-range-control{position:relative;margin:8px 2px 0;height:28px;padding-bottom:0}.curve-range-track{position:absolute;left:0;right:0;top:16px;height:4px;border-radius:4px;background:#e6edf5}.curve-range-input{position:absolute;left:0;top:8px;width:100%;height:20px;margin:0;background:transparent;pointer-events:none;appearance:none}.curve-range-input::-webkit-slider-thumb{width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#2075db;box-shadow:0 1px 5px #1e5fa34d;pointer-events:auto;appearance:none;cursor:grab}.curve-range-input::-moz-range-thumb{width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#2075db;box-shadow:0 1px 5px #1e5fa34d;pointer-events:auto;cursor:grab}.curve-range-labels{display:flex;justify-content:space-between;margin-top:-1px;color:#9aa7b7;font:9px 'DM Mono',monospace;line-height:1.1;transform:translateY(-2px)}
.unit-toggle{display:inline-flex;gap:2px;padding:2px;border-radius:7px;background:#f0f3f7}
.unit-toggle button{border:0;padding:4px 9px;border-radius:5px;background:transparent;color:#8995a7;font-size:10px;cursor:pointer}
.unit-toggle button.active{background:#fff;color:#2c4766;box-shadow:0 1px 4px #1c375918}
/* 账户卡片持仓明细：与 v1（frontend/index.html 内联样式）一致 */
.position-list{flex:1;min-height:39px;margin:14px 0 12px;padding:4px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-y:auto}.position-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;font-size:10px}.position-row strong{font-size:11px}.position-row span{color:var(--muted)}.position-row b{font-family:'DM Mono',monospace;font-size:10px;font-weight:400}.position-product{cursor:pointer;border-radius:6px}.position-product:hover{background:#f7f9fb}.position-contracts{padding-left:12px}.position-contract{padding:4px 0}.position-pnl{font-size:9px}.position-empty{margin:18px 0;text-align:center;color:var(--muted);font-size:10px}
/* 持仓明细：固定高度，右侧滚动条查看完整持仓（不随持仓数量撑高账户卡片） */
.account-panel .position-list{flex:none;height:220px;overflow-y:scroll;padding-right:6px}
.account-panel .position-list::-webkit-scrollbar{width:6px}
.account-panel .position-list::-webkit-scrollbar-thumb{background:#cfd8e3;border-radius:3px}
.account-panel .position-list::-webkit-scrollbar-track{background:#f4f7fb;border-radius:3px}
.account-panel .position-list{scrollbar-width:thin;scrollbar-color:#cfd8e3 #f4f7fb}
/* 截面每日目标仓位 */
.target-head{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11px;font-weight:700}
.target-head select{padding:4px 8px;border:1px solid #e0e7ef;border-radius:6px;background:#fff;color:#4c5a6b;font-size:10px;outline:0}
/* 品种 / pair 逐笔盈亏弹窗：弹窗样式与 v1 一致（frontend/index.html 内联样式） */
.instrument-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(16,28,44,.42)}.instrument-modal.hidden{display:none}.instrument-modal-card{position:relative;width:min(760px,100%);padding:26px;background:#fff;border-radius:14px;box-shadow:0 20px 70px rgba(11,28,49,.28)}.instrument-modal-card h3{margin:0;font-size:18px}.instrument-modal-card p{margin:7px 0 0;color:#8995a7;font-size:11px}.instrument-modal-chart{display:block;width:100%;height:440px;margin-top:18px}.instrument-modal-close{position:absolute;top:13px;right:13px;width:28px;height:28px;border:0;border-radius:7px;background:#f0f3f7;color:#607087;font-size:19px;line-height:25px;cursor:pointer}.instrument-modal-chart{height:300px}
.key-modal-head{display:flex;align-items:center;gap:14px}.key-modal-head h3{margin:0;font-size:18px}
.unit-toggle{display:inline-flex;gap:2px;padding:2px;border-radius:7px;background:#f0f3f7}
.unit-toggle button{border:0;padding:4px 9px;border-radius:5px;background:transparent;color:#8995a7;font-size:10px;cursor:pointer}
.unit-toggle button.active{background:#fff;color:#2c4766;box-shadow:0 1px 4px #1c375918}
.key-tile.clickable{cursor:pointer}.key-tile.clickable:hover{border-color:#9cc2ee}
#key-modal .chart-wrap{height:420px;margin-top:14px}

/* ================= 字号与数字（2026-10-30）：正文由 9–10px 提到 10.5–12px；数字统一等宽（刷新不左右抖动、列对齐） ================= */
body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.muted-label,.balance-meta,.strategy-metrics,.position-row,.key-tile,.target-head select,.unit-toggle button,.ghost-button{font-size:11px}
.legend,.account-stats span,.chart-footer,.strategy-sub,.key-tile .kv,.position-pnl,.badge,.curve-range-labels,.app-footer,.chart-tooltip{font-size:10.5px}
.account-stats b,.position-row strong,.key-tile strong,.key-tile .lots,.position-row b{font-size:12px}
.strategy-metrics b{font-size:13px}
.topbar-actions{font-size:11px}
.panel-title h3,.strategy-head h3{font-size:15px}

/* ================= 主题：浅色为默认变量，深色覆盖（html[data-theme=dark]）；画布颜色也取自这些变量 ================= */
:root{--amber:#b7791f;--panel-2:#f7f9fb;--border:#e8edf4;--track:#e6edf5;
  --chart-grid:#edf1f5;--chart-zero:#c8d0d9;--chart-text:#a1acb9;--chart-hl:#b8c4d2;--chart-live-bg:rgba(232,168,64,.05);--chart-live-line:#e0b467}
html[data-theme=dark]{color-scheme:dark;--bg:#070b14;--panel:#0e1524;--panel-2:#131c2e;--ink:#e7edf7;--muted:#7d8ba1;--line:#1c2639;--border:#1a2436;--track:#1e293d;
  --blue:#4c9bff;--red:#ff5d6c;--green:#22d08e;--amber:#f0b45a;--shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 32px rgba(0,0,0,.35);
  --chart-grid:#162033;--chart-zero:#2b3850;--chart-text:#66758c;--chart-hl:#3a4a66;--chart-live-bg:rgba(240,180,90,.045);--chart-live-line:#8a6a35}
html[data-theme=dark] body{background:radial-gradient(1200px 600px at 10% -10%,#0f1a30 0,transparent 60%),radial-gradient(900px 500px at 100% 0,#0c1628 0,transparent 55%),var(--bg);background-attachment:fixed}
html[data-theme=dark] .panel{border-color:var(--border);background:linear-gradient(180deg,#101829 0,var(--panel) 120px)}
html[data-theme=dark] .ghost-button{background:transparent;border-color:#24304a;color:#9aa8bd}
html[data-theme=dark] .ghost-button:hover{border-color:#3a4a66;color:var(--ink)}
html[data-theme=dark] .chart-tooltip{background:rgba(14,21,36,.94);border-color:#24304a;color:#c3cddc;box-shadow:0 8px 24px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
html[data-theme=dark] .legend{color:#8695ab}
html[data-theme=dark] .curve-range-track{background:var(--track)}
html[data-theme=dark] .curve-range-input::-webkit-slider-thumb{border-color:#0e1524;background:var(--blue);box-shadow:0 0 0 3px rgba(76,155,255,.18)}
html[data-theme=dark] .curve-range-input::-moz-range-thumb{border-color:#0e1524;background:var(--blue)}
html[data-theme=dark] .curve-range-labels,html[data-theme=dark] .chart-footer,html[data-theme=dark] .strategy-sub,html[data-theme=dark] .app-footer{color:#66758c}
html[data-theme=dark] .mode-pill{background:rgba(240,180,90,.12);color:var(--amber)}
html[data-theme=dark] .mode-pill.live{background:rgba(34,208,142,.12);color:var(--green)}
html[data-theme=dark] .badge{background:rgba(76,155,255,.12);color:#7fb6ff}
html[data-theme=dark] .badge.shadow{background:rgba(240,180,90,.12);color:var(--amber)}
html[data-theme=dark] .badge.live{background:rgba(34,208,142,.12);color:var(--green)}
html[data-theme=dark] .badge.off{background:#1a2333;color:var(--muted)}
html[data-theme=dark] .key-tile{border-color:var(--line);background:rgba(255,255,255,.012)}
html[data-theme=dark] .key-tile.active{border-color:#24406a;background:rgba(76,155,255,.05)}
html[data-theme=dark] .key-tile.clickable:hover{border-color:#3b6fb0}
html[data-theme=dark] .key-tile .kv b{color:#aeb9ca}
html[data-theme=dark] .position-product:hover{background:var(--panel-2)}
html[data-theme=dark] .account-panel .position-list::-webkit-scrollbar-thumb{background:#26324a}
html[data-theme=dark] .account-panel .position-list::-webkit-scrollbar-track{background:transparent}
html[data-theme=dark] .account-panel .position-list{scrollbar-color:#26324a transparent}
html[data-theme=dark] .target-head select{background:var(--panel-2);border-color:#24304a;color:#c3cddc}
html[data-theme=dark] .unit-toggle{background:#131c2e}
html[data-theme=dark] .unit-toggle button{color:#7d8ba1}
html[data-theme=dark] .unit-toggle button.active{background:#1f2a40;color:var(--ink);box-shadow:none}
html[data-theme=dark] .instrument-modal{background:rgba(3,6,12,.66);backdrop-filter:blur(3px)}
html[data-theme=dark] .instrument-modal-card{background:var(--panel);border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,.6)}
html[data-theme=dark] .instrument-modal-card p{color:var(--muted)}
html[data-theme=dark] .instrument-modal-close{background:#1a2333;color:#9aa8bd}
html[data-theme=dark] .account-head strong{color:#f3f6fb}
html[data-theme=dark] .login-shell{background:radial-gradient(circle at 15% 15%,#10203a 0,transparent 38%),radial-gradient(circle at 90% 80%,#0d1a30 0,transparent 40%),var(--bg)}
html[data-theme=dark] .login-orbit{border-color:#22304a}
html[data-theme=dark] .login-card{background:rgba(16,24,41,.94);border-color:#24304a;box-shadow:0 24px 70px rgba(0,0,0,.55)}
html[data-theme=dark] .login-card h1{color:#f3f6fb}
html[data-theme=dark] .login-subtitle{color:#a9b5c7}
html[data-theme=dark] .login-card label{color:#d5dce8}
html[data-theme=dark] .login-card input{background:#131c2e;border-color:#2c3b58;color:var(--ink)}
html[data-theme=dark] .login-card input::placeholder{color:#6f7f97}
html[data-theme=dark] .login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,155,255,.18)}
html[data-theme=dark] .primary-button{background:var(--blue);color:#fff}
html[data-theme=dark] .primary-button:hover{background:#69abff}
.theme-toggle{min-width:30px}

/* ================= 实时感：数字变化闪烁、数据新鲜度指示灯 ================= */
@keyframes flash-up{0%{background:rgba(34,190,130,.28)}100%{background:transparent}}
@keyframes flash-down{0%{background:rgba(255,93,108,.28)}100%{background:transparent}}
.flash-up,.flash-down{border-radius:4px;animation-duration:1.6s;animation-timing-function:ease-out}
.flash-up{animation-name:flash-up}.flash-down{animation-name:flash-down}
.live-dot{transition:background .3s,box-shadow .3s}
.live-dot.fresh{background:var(--green);box-shadow:0 0 0 4px rgba(34,190,130,.16);animation:pulse 2.4s ease-in-out infinite}
.live-dot.stale{background:var(--amber);box-shadow:0 0 0 4px rgba(240,180,90,.18)}
.live-dot.dead{background:var(--red);box-shadow:0 0 0 4px rgba(255,93,108,.2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,190,130,.18)}50%{box-shadow:0 0 0 7px rgba(34,190,130,.04)}}
#last-updated b{font-weight:500;color:var(--ink)}

/* 实时保证金占用：各品种多头保证金向上、空头向下的柱状图；面板高度 = 账户余额卡片的 1/2（JS 按卡片实际高度设置） */
.margin-panel{padding-bottom:12px;overflow:hidden}
.margin-panel .margin-chart{flex:1;height:auto;min-height:120px}
.margin-title{align-items:center;gap:12px}.margin-title>div:first-child{flex:none}
.margin-summary{flex:1;min-width:0;display:flex;justify-content:flex-end;gap:1.4em;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden}
.margin-summary b{display:block;margin-top:2px;color:var(--ink);font-family:'DM Mono',monospace;font-weight:500;font-size:1.18em}
.margin-summary .long b{color:var(--green)}.margin-summary .short b{color:var(--red)}

/* 逐笔盈亏标题右侧说明：起点 · 段数 一行，分段口径另起一行，右对齐 */
#tc-note-cny,#tc-note-pct{display:block;text-align:right;line-height:1.5}

/* 账户统计（初始本金 / 累计收益 / 风险敞口 / 多头名义 / 空头名义）：宽度不够时自动换行（宽屏 5 列一行，手机 2–3 列），数值不折行 */
.account-stats{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));row-gap:10px}
.account-stats b{white-space:nowrap}


/* ⓘ：悬停显示口径说明（原图下方大段脚注） */
.info{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:6px;border:1px solid var(--chart-zero);border-radius:50%;color:var(--muted);font:600 10px/1 Manrope,sans-serif;font-style:normal;cursor:help;vertical-align:1px}
.info::before{content:'i'}
.info:hover{color:var(--ink);border-color:var(--muted)}
.info[data-tip=""]{display:none}
.info:hover::after{content:attr(data-tip);position:absolute;z-index:30;left:50%;top:22px;transform:translateX(-30%);width:max-content;max-width:min(360px,80vw);padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--panel);box-shadow:0 12px 30px rgba(0,0,0,.25);color:var(--ink);font:400 11px/1.6 Manrope,'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:0;white-space:normal;text-align:left}
html[data-theme=dark] .info:hover::after{background:#131c2e;border-color:#2a3a58}

/* 悬停浮起（只影响边框和阴影，避免整卡位移干扰图表悬停） */
.panel{transition:border-color .2s,box-shadow .2s}
.panel:hover{box-shadow:0 14px 36px rgba(34,59,92,.1)}
html[data-theme=dark] .panel:hover{border-color:#24324c;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 16px 40px rgba(0,0,0,.45)}
button,.legend-item,.key-tile{transition:background .2s,border-color .2s,color .2s,opacity .2s}

/* 策略卡片折叠：点标题行收起图表与品种格子 */
.strategy-head{cursor:pointer}
.strategy-head h3 .caret{display:inline-block;width:10px;color:var(--muted);font-size:10px;transition:transform .2s}
.strategy-box.collapsed .caret{transform:rotate(-90deg)}
.strategy-box.collapsed>:not(.strategy-head){display:none}

/* 骨架占位：首次数据到达前，图表区与数值显示流光占位，不再一排"—" */
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.is-loading .chart-wrap::before,.is-loading .account-head strong,.is-loading #strategy-list::before{content:'';background:linear-gradient(90deg,var(--panel-2) 0,var(--track) 50%,var(--panel-2) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px;color:transparent!important}
.is-loading .chart-wrap::before{position:absolute;inset:6px}
.is-loading .account-head strong{min-width:150px}
.is-loading #strategy-list::before{display:block;height:420px}
.is-loading .chart-tooltip{display:none!important}


/* 右栏（策略卡片内品种格子等）滚动条淡化：细、轨道透明、滑块低对比，悬停时略显 */
.right-column *{scrollbar-width:thin;scrollbar-color:rgba(128,140,160,.18) transparent}
.right-column *:hover{scrollbar-color:rgba(128,140,160,.38) transparent}
.right-column ::-webkit-scrollbar{width:5px;height:5px}
.right-column ::-webkit-scrollbar-track{background:transparent}
.right-column ::-webkit-scrollbar-thumb{background:rgba(128,140,160,.18);border-radius:3px}
.right-column :hover::-webkit-scrollbar-thumb{background:rgba(128,140,160,.38)}

/* 目标 vs 实际持仓：沿用保证金面板的布局（.margin-panel），摘要数字的偏差项用琥珀 / 红色 */
.margin-summary .warn b{color:var(--amber)}.margin-summary .bad b{color:var(--red)}

/* 账户余额 / 浮动盈亏并为一行：标签与数值同行，左右分列 */
.account-panel{padding-top:15px;padding-bottom:13px}
.account-head{align-items:baseline}
.account-head>div{display:flex;align-items:baseline;gap:8px}
.account-head>div[style]{justify-content:flex-end}
.account-head strong{display:inline;margin-top:0;font-size:21px}

/* 偏差 / 保证金面板：汇总改为"标签 数值"同一行，标题行不再被撑高；上内边距收窄；图表区填满剩余高度、可收缩（不再被裁掉底部） */
.margin-panel{padding-top:13px}
.margin-summary>div{display:flex;align-items:baseline;gap:4px}
.margin-summary b{display:inline;margin-top:0}
.margin-panel .margin-chart{min-height:0;margin-top:6px}

/* 初始本金后的 ? 图标：悬停显示来由（沿用 .info 样式，图标字符改为 ?） */
.info.q::before{content:'?'}
.account-stats .info.q{width:13px;height:13px;margin-left:4px;font-size:9px;vertical-align:0}
.account-stats .info.q:hover::after{transform:none;left:-8px}

/* 前端更新提示（自动刷新前 5 秒） */
.update-toast{position:fixed;right:24px;bottom:24px;z-index:50;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--ink);font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.3)}

/* 视觉重点面板（理论总净值曲线 ¥）：强调蓝描边 + 外发光，悬停时保持；html[data-theme] 提高优先级，压过深色主题 .panel / .panel:hover 的边框色 */
html[data-theme] .panel.highlight-panel,html[data-theme] .panel.highlight-panel:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 24px color-mix(in srgb,var(--blue) 30%,transparent),var(--shadow)}
