/* EnergyX 布局与组件。颜色全部来自 tokens.css。 */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--tx); font: var(--text-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: var(--pri-tx); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pri-tx); outline-offset: 3px; }
::selection { background: rgba(var(--pri-rgb), .25); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.num { font-variant-numeric: tabular-nums; font-family: var(--font); text-align: right; letter-spacing: 0; }
.muted { color: var(--tx-2); } .dim { color: var(--tx-3); } .up { color: var(--up); } .down { color: var(--down); }
.warn-tx { color: var(--warn); } .ok-tx { color: var(--ok); }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- 毛玻璃背景 ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
[data-skin="glass"] .backdrop { display: block; opacity: .55;
  background:
    radial-gradient(70vw 70vw at -6% -16%, var(--mesh1), transparent 60%),
    radial-gradient(64vw 64vw at 106% -10%, var(--mesh2), transparent 62%),
    radial-gradient(76vw 76vw at 94% 108%, var(--mesh3), transparent 64%),
    radial-gradient(58vw 58vw at 18% 112%, var(--mesh4), transparent 62%),
    radial-gradient(30vw 30vw at 16% 66%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(26vw 26vw at 72% 28%, rgba(167,139,250,.13), transparent 58%),
    var(--mesh-base); }
[data-skin="glass"] .backdrop::before, [data-skin="glass"] .backdrop::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18; }
[data-skin="glass"] .backdrop::before { width: 50vw; height: 50vw; left: -12vw; top: -16vw; background: radial-gradient(circle, var(--mesh1), transparent 65%); }
[data-skin="glass"] .backdrop::after { width: 44vw; height: 44vw; right: -12vw; bottom: -10vw; background: radial-gradient(circle, var(--mesh3), transparent 65%); }
[data-skin="glass"] .backdrop i { position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); }
@keyframes drift1 { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-6vw, -8vh) scale(.92); } }

.glass-surface { background: var(--panel); border: var(--panel-border); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }

/* ---------- 骨架 ---------- */
.shell { position: relative; z-index: 1; min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: var(--sb-w); display: flex; flex-direction: column;
  background: var(--sb-bg); color: var(--sb-tx); transition: width .22s var(--ease); }
[data-skin="glass"] .sidebar { top: var(--seam); left: var(--seam); bottom: var(--seam); width: calc(var(--sb-w) - var(--seam)); border-radius: var(--r);
  border: var(--panel-border); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
/* 品牌区：图标在左，「EnergyX」+ 副标题两行堆在右侧文字块内左对齐。
 * padding-left 固定 20px，使品牌图标的左边缘与下方导航图标严格同线
 *   （导航图标 = .nav 左内边距 10 + .nav-item 左内边距 10 = 20px）。
 * 不用 justify-content:center：整组居中会让图标随侧栏宽度和最长文字漂移。
 * 左对齐到同一条竖线，展开宽度或站名变化时仍保持稳定。 */
.brand { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-20) var(--space-16) var(--space-20) var(--space-20); flex: none; cursor: pointer; border-bottom: 1px solid var(--sb-line); }
.brand-text { line-height: var(--leading-body); min-width: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--grad); display: grid; place-items: center; flex: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); position: relative; overflow: hidden; }
.brand-mark svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.2; fill: none; }
.brand-mark::after { content: none; }
.brand .t1 { font-weight: 600; font-size: var(--text-section); color: var(--sb-tx-hi); letter-spacing: .3px; white-space: nowrap; line-height: var(--leading-body); }
.brand .t2 { font-size: var(--text-caption); color: var(--sb-group); letter-spacing: .5px; white-space: nowrap; margin-top: var(--space-4); }
.nav { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: var(--space-8) var(--space-12) var(--space-12); }
.nav-group { font-size: var(--text-caption); font-weight: 600; color: var(--sb-group); letter-spacing: 1px; padding: var(--space-16) var(--space-12) var(--space-8); white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); margin: var(--space-4) 0; border-radius: 8px; cursor: pointer;
  color: var(--sb-tx); font-size: var(--text-secondary); white-space: nowrap; position: relative; transition: background .15s, color .15s; user-select: none; }
.nav-item:hover { background: var(--sb-hover); color: var(--sb-tx-hi); }
.nav-item.active { color: var(--sb-tx-hi); font-weight: 600; background: rgba(var(--pri-rgb), .16); }
[data-skin="classic"] .nav-item.active { background: color-mix(in srgb, var(--sb-active) 30%, transparent); color: #fff; }
[data-skin="classic"] .nav-item.active::before { content: ""; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sb-active), white 55%); }
[data-skin="glass"] .nav-item.active::before { content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--sb-active); }
.nav-item svg.i { width: 15px; height: 15px; opacity: .9; }
.nav-sec > .nav-item .chev { margin-left: auto; transition: transform .2s; opacity: .6; width: 14px; height: 14px; }
.nav-sec.open > .nav-item .chev { transform: rotate(90deg); }
.nav-sub { display: none; padding: var(--space-4) 0 var(--space-4) var(--space-16); }
.nav-sec.open > .nav-sub { display: block; }
.nav-sub .nav-item { font-size: var(--text-secondary); padding: var(--space-8) var(--space-12); }
/* 二级及更深菜单统一使用纯文字；折叠箭头属于交互指示，继续保留。 */
.nav-sub .nav-item > .i:not(.chev) { display: none; }
.sb-foot { padding: var(--space-12); border-top: 1px solid var(--sb-line); font-size: var(--text-caption); color: var(--sb-group); display: flex; align-items: center; gap: var(--space-8); }
.sb-foot .dot { flex: none; }
.sb-foot #sb-station { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 长承站名与功率完整显示；更长站名保留溢出兜底 */
.sb-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.main { margin-left: var(--sb-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin .22s var(--ease); }
/* 左右内边距跟随 .view 的内容列：桌面取 20px（与 .view 一致），
 * 宽屏时补上内容列被 max-width:var(--view-max) 收窄后让出的那段边距，使顶栏里的操作区与页面内的按钮共用同一条右边线。
 * 顶栏自身仍满宽，底边线不断。 */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: var(--space-12);
  padding: 0 max(20px, calc((100% - var(--view-max)) / 2 + 20px));
  background: var(--top-bg); border-bottom: 1px solid var(--top-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
[data-skin="glass"] .topbar { margin: var(--seam) var(--seam) 0 var(--seam); border-radius: var(--r); border: var(--panel-border); box-shadow: var(--shadow); top: var(--seam); }
.crumb { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-body); color: var(--tx-2); min-width: 0; overflow: hidden; }
.crumb span:not(.sep) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }   /* 窄屏空间不够时省略号收尾，不许逐字换行 */
.crumb b { color: var(--tx); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.crumb .sep { color: var(--tx-3); flex-shrink: 0; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--tx-2); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--hover); color: var(--tx); }
.icon-btn .badge-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); }
/* 顶栏 Ask EnergyX：像一个随时可以开口的输入条（左边是能量核） */
.ai-btn { display: flex; align-items: center; gap: var(--space-8); height: 36px; padding: 0 var(--space-8) 0 var(--space-8); min-width: 230px; border-radius: 999px; cursor: text;
  color: var(--tx-2); font-size: var(--text-secondary); background: var(--panel-3); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 0 rgba(var(--pri-rgb), 0), inset 0 1px 0 rgba(255,255,255,.05); transition: box-shadow .2s, border-color .2s; }
.ai-btn:hover { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(var(--pri-rgb), .08); color: var(--tx); }
.ai-btn .ph { flex: 1; text-align: left; font-weight: 600; color: var(--tx-2); }
kbd { font: var(--text-caption)/1 var(--mono); padding: var(--space-4) var(--space-8); border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--tx-3); white-space: nowrap; }

/* 顶栏电站切换 */
.st-chip { display: flex; align-items: center; gap: var(--space-8); height: 34px; padding: 0 var(--space-12); border-radius: var(--r-sm); border: 1px solid var(--line-2); cursor: pointer;
  background: var(--panel-2); color: var(--tx); font-size: var(--text-secondary); font-weight: 600; max-width: 220px; }
.st-chip[hidden] { display: none; }
.st-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-chip > .i:first-child { color: var(--pri-tx); }
.st-chip .chev { width: 14px; height: 14px; transform: rotate(90deg); color: var(--tx-3); }
.st-chip:hover { border-color: var(--pri); }
.st-opt { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-12); border-radius: var(--r-sm); cursor: pointer; min-width: 260px; }
.st-opt:hover { background: var(--hover); } .st-opt.on { background: var(--pri-soft); }
.st-opt .dim { font-size: var(--text-caption); }
.st-opt .st-ico { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--panel-3); color: var(--pri-tx); flex: none; }

/* 能量核（orb.js 在 .ex-orb 里画画布；画布比元素大，光晕伸出去） */
.ex-orb { display: inline-block; position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.ex-orb:not(.orbfx) { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 40%), var(--grad); }
.ex-orb.xs { width: 18px; height: 18px; } .ex-orb.sm { width: 24px; height: 24px; } .ex-orb.md { width: 36px; height: 36px; }
.ex-orb.lg { width: 50px; height: 50px; } .ex-orb.xl { width: 96px; height: 96px; }
.orb-cv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; display: block; }

/* 右下角悬浮的能量核 */
.tabbar { display: none; }
.ex-fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 58px; height: 58px; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: transform .35s var(--ease), opacity .2s; }
.ex-fab:hover { transform: scale(1.07); } .ex-fab:active { transform: scale(.95); }
.ex-fab .tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; opacity: 0; pointer-events: none;
  padding: var(--space-8) var(--space-12); border-radius: var(--r-sm); background: var(--panel); border: var(--panel-border); box-shadow: var(--shadow-lg); font-size: var(--text-caption); font-weight: 600; color: var(--tx);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: opacity .18s, transform .18s; display: flex; gap: var(--space-8); align-items: center; }
.ex-fab:hover .tip { opacity: 1; transform: translateY(-50%); }
/* 给右下角的悬浮球留出位置，页面最底下的内容能滚到它上面 */
body:has(.ex-fab) .view { padding-bottom: 88px; }
body.ai-open .ex-fab { opacity: 0; pointer-events: none; }

/* 卡片 / KPI / 本页上的 AI 入口 */
.ask-card { margin-left: var(--space-8); display: inline-flex; align-items: center; gap: var(--space-4); height: 24px; padding: 0 var(--space-8); border-radius: 999px; cursor: pointer; flex: none;
  border: 1px solid transparent; background: transparent; color: var(--tx-3); font-size: var(--text-caption); opacity: .55; transition: opacity .15s, color .15s, border-color .15s, background .15s; }
.ask-card .i { width: 14px; height: 14px; }
.ask-card:hover, .ask-card:focus-visible { opacity: 1; color: var(--pri-tx); border-color: rgba(var(--pri-rgb), .35); background: var(--pri-soft); }
.ask-card:hover { border-color: var(--pri) !important; }
.card-h .ask-card:last-child { margin-left: auto; }
.card-h .right + .ask-card, .card-h .right ~ .ask-card { margin-left: var(--space-8); }
.kpi { position: relative; }
/* KPI 的 AI 按钮和卡片图标占同一个位置（右上 38×38）：悬停时图标淡出、AI 按钮淡入，两者不同时出现 */
.kpi-ask { position: absolute; top: 14px; right: 14px; z-index: 1; margin: 0; width: 38px; height: 38px; padding: 0; border-radius: var(--r); justify-content: center;
  opacity: 0; transform: scale(.85); transition: opacity .16s, transform .16s, border-color .15s; }
.kpi-ask .i { width: 18px; height: 18px; }
.kpi .k-ico { transition: opacity .16s, transform .16s; }
.kpi:hover .k-ico { opacity: 0; transform: scale(.85); }
.kpi:hover .kpi-ask, .kpi-ask:focus-visible { opacity: 1; transform: none; color: var(--pri-tx); border-color: rgba(var(--pri-rgb), .45); background: var(--pri-soft); }
.page-title-row { display: flex; align-items: center; gap: var(--space-12); min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.page-title-row > h1, .page-title-row > h2 { min-width: 0; overflow-wrap: anywhere; }
.card-title-row { display: flex; align-items: center; gap: var(--space-8); min-width: 0; max-width: 100%; flex: 0 1 auto; }
.card-title-row > h2, .card-title-row > h3, .card-title-row > h4 { min-width: 0; overflow-wrap: anywhere; }
.card-title-row > .ask-card:last-child { margin-left: 0; width: 24px; padding: 0; justify-content: center; border-radius: 6px; }
.ask-page { display: inline-flex; align-items: center; gap: var(--space-4); flex: none; height: 24px; padding: 0 var(--space-8);
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--tx-3); font: inherit; font-size: var(--text-caption); cursor: pointer; }
.ask-page .i { width: 13px; height: 13px; }
.ask-page:hover, .ask-page:focus-visible { color: var(--pri-tx); background: var(--pri-soft); border-color: var(--line); }
.empty .ask-err { margin-top: var(--space-12); }
.ask-ico { display: inline-flex; vertical-align: -3px; color: var(--pri-tx); } .ask-ico .i { width: 15px; height: 15px; }
.link .i { width: 13px; height: 13px; vertical-align: -2px; margin-right: var(--space-4); }

/* 选中文字浮出的 Ask EnergyX */
.sel-chip { position: fixed; z-index: 95; display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--r); background: var(--panel); border: var(--panel-border);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); animation: pop .14s var(--ease); }
[data-skin="glass"][data-theme="dark"] .sel-chip { background: rgba(14,20,40,.9); }
.sel-chip[hidden] { display: none; }
.sel-chip button { display: flex; align-items: center; gap: var(--space-8); height: 30px; padding: 0 var(--space-12); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--tx-2); cursor: pointer; font-size: var(--text-secondary); white-space: nowrap; }
.sel-chip button:first-child { color: var(--pri-tx); font-weight: 600; }
.sel-chip button:hover { background: var(--hover); color: var(--tx); }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.97); } }

/* 总览：今日简报 */
.card.ai-brief { display: flex; gap: var(--space-20); align-items: flex-start; margin-bottom: var(--gap);
  background: linear-gradient(120deg, rgba(var(--pri-rgb), .10), rgba(var(--acc-rgb), .06) 60%, transparent), var(--panel); border-color: rgba(var(--pri-rgb), .28); }
.card.ai-brief[hidden] { display: none; }
.brief-orb { padding: var(--space-12) var(--space-8) 0 var(--space-8); } .brief-orb .ex-orb { width: 62px; height: 62px; } .brief-main { flex: 1; min-width: 0; }
.brief-main .card-h { margin-bottom: var(--space-4); }
.brief-tx { font-size: var(--text-body); line-height: var(--leading-body); } .brief-tx ul { margin: 0; padding-left: var(--space-20); } .brief-tx p { margin: 0 0 var(--space-4); }
.brief-tx li::marker { color: var(--pri); }
.user-chip { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); border-radius: 999px; cursor: pointer; }
.user-chip:hover { background: var(--hover); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--text-secondary); flex: none; }
.user-chip .nm { font-size: var(--text-secondary); font-weight: 600; }
.user-chip .rl { font-size: var(--text-caption); color: var(--tx-3); line-height: var(--leading-body); }

/* max-width 1560：超宽屏下内容区若不设上限，正文行长会拉到 1700px 以上远超舒适阅读宽度，
 * 且 .hero-rev / .status-row 这类 space-between 布局会把两组内容甩到屏幕两端、中间空出上千像素。
 * width:100% + margin-inline:auto 使其在窄屏下仍占满、宽屏下居中。 */
/* 2026-11-05 改为流式布局：本系统以图表 / 宽表为主（行情曲线、24 列分时表），数据型后台的通行做法是内容随窗口铺满
 * （Grafana、Ant Design Pro 的 fluid 模式），1560 定宽在 1920+ 屏上两侧各空出数百像素。上限放宽到 2560 只防 4K 带鱼屏拉成细长条。 */
:root { --view-max: 2560px; }
.view { flex: 1; width: 100%; max-width: var(--view-max); margin-inline: auto; padding: var(--space-12); min-width: 0; /* 2026-11-13 20→12：左侧导航与内容间留白过宽（用户反馈） */ animation: pagein .35s ease; }
@keyframes pagein { from { opacity: 0; transform: translateY(8px); } }
/* 模块切换动效（html[data-navfx] 由 js/navfx.js 写入）：无 data-navfx 时用上面的 pagein 兜底；其余在这里换掉进场动画 */
html[data-navfx="particles"] .view, html[data-navfx="blocks"] .view, html[data-navfx="none"] .view { animation: none; }
html[data-navfx="zoom"] .view { animation: pfx-zoom .38s cubic-bezier(.22,.75,.25,1); }
/* 只做 opacity + scale：给祖先加 filter 会让子元素的 backdrop-filter 换 backdrop root，毛玻璃会突然不透背景 */
@keyframes pfx-zoom { from { opacity: 0; transform: scale(1.04); } }
#fx-parts { position: fixed; left: 0; top: 0; display: none; pointer-events: none; z-index: 60; }
#fx-shards { position: fixed; overflow: hidden; pointer-events: none; z-index: 60; }
#fx-shards > .fx-shard { position: absolute; margin: 0; box-sizing: border-box; pointer-events: none; will-change: transform, opacity; }
#fx-shards > .fx-plate { border-radius: var(--r-sm); background: var(--panel); }
.fx-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-8); }
.fx-opt { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-8); border-radius: var(--r-sm); cursor: pointer; text-align: center;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--tx); transition: border-color .15s, background .15s; }
.fx-opt:hover { border-color: var(--pri); }
.fx-opt.on { border-color: var(--pri); background: var(--pri-soft); box-shadow: 0 0 0 1px var(--pri) inset; }
.fx-opt .fx-ico { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--panel-3); color: var(--pri-tx); }
.fx-opt b { font-size: var(--text-secondary); } .fx-opt small { font-size: var(--text-caption); color: var(--tx-3); line-height: var(--leading-body); }
[data-skin="glass"] .view { padding: var(--space-20); }
.page-head { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-20); flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: var(--text-page-title); line-height: var(--leading-body); font-weight: 600; letter-spacing: 0; }
.page-head .sub { color: var(--tx-2); font-size: var(--text-body); line-height: var(--leading-body); font-weight: 400; margin-top: var(--space-8); max-width: 80ch; }
.page-head .tools { margin-left: auto; display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }

/* ---------- 卡片 / 栅格 ---------- */
.card { background: var(--panel); border: var(--panel-border); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--space-20) var(--space-20); min-width: 0;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.card + .card { margin-top: var(--gap); }
.grid > .card + .card, .grid > .card { margin-top: 0; }
.card-h { display: flex; align-items: center; gap: var(--space-12); margin: 0 0 var(--space-16); }
.card-h h3 { margin: 0; font-size: var(--text-section); font-weight: 600; }
.card-h .hint { color: var(--tx-2); font-size: var(--text-secondary); line-height: var(--leading-body); }
.card-h .right { margin-left: auto; display: flex; gap: var(--space-8); align-items: center; }
.grid { display: grid; gap: var(--gap); }
.grid > * { min-width: 0; }
.grid + .grid, .grid + .card, .card + .grid { margin-top: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); } .g-2-1 { grid-template-columns: 2fr 1fr; } .g-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1280px) { .g5 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .g2, .g3, .g-2-1, .g-3-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .g3, .g4, .g5 { grid-template-columns: repeat(2, 1fr); } }   /* 手机上 3/4/5 列的 KPI 卡挤在一起，数字会被右上角图标压住，改 2 列 */

/* KPI */
.kpi { position: relative; overflow: hidden; }
.kpi .k-label { font-size: var(--text-body); line-height: var(--leading-body); color: var(--tx-2); display: flex; align-items: center; gap: var(--space-8); padding-right: 48px; }
.kpi .k-val { font-size: var(--text-metric); font-weight: 600; font-family: var(--font); margin-top: var(--space-8); line-height: var(--leading-body); font-variant-numeric: tabular-nums; letter-spacing: 0; padding-right: 0; white-space: nowrap; text-align: left; }
.kpi .k-val small { font-size: var(--text-secondary); font-weight: 400; color: var(--tx-2); margin-left: var(--space-4); }
.kpi .k-foot { font-size: var(--text-secondary); line-height: var(--leading-body); color: var(--tx-2); margin-top: var(--space-8); display: flex; gap: var(--space-12); flex-wrap: wrap; }
.kpi .k-ico { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center; background: var(--pri-soft); color: var(--pri-tx); }
.kpi.accent::before { content: none; }
[data-skin="glass"] .kpi.hero { background: var(--panel); }

/* 运营总览首屏：本月收益大卡 + 核对状态条（2026-11 改版，先看钱再看健康度）
 * 背景不铺满幅高饱和主色：大面积纯 --pri 在亮色传统风下过于刺眼，且亏损金额压在"喜庆"蓝底上语义相反。
 * 改为与其他卡片同底 + 极淡主色晕染；只保留总收益的左侧 3px 主色条，金额本身按红涨绿跌着色。 */
/* 四列网格：大数占第一列（权重 1.5），三个拆分项各占一列均匀铺开。
 * 原先用 flex + space-between，只有"两坨"内容，窗口越宽中间的空洞越大
 * （1990px 窗口下实测空 911px，1440px 下也有 607px），眼睛要横扫才能把总数和它的构成连起来。
 * 网格让三项随宽度等比展开，把空间用掉而不是堆在中间。 */
.hero-rev { display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(108px, 1fr));
  align-items: center; gap: var(--space-16) var(--space-24);
  position: relative; overflow: hidden; padding: var(--space-24) var(--space-24);
  background: linear-gradient(110deg, rgba(var(--pri-rgb), .035), transparent 65%), var(--panel); }
.hero-rev::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pri); }
.hero-rev .hint { color: var(--tx-3); font-size: var(--text-secondary); }
.hero-rev-num { font-size: var(--text-metric); font-family: var(--font); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.5px; margin-top: var(--space-4); color: var(--tx); }
.hero-rev-num.up { color: var(--up); } .hero-rev-num.down { color: var(--down); }
.hero-rev-sub { margin-top: var(--space-8); font-size: var(--text-secondary); font-weight: 600; color: var(--tx-2); }
.hero-rev-break { display: contents; }   /* 取消这层包裹，让三个拆分项直接成为 .hero-rev 的网格列 */
.hero-rev-break > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0;
  border-left: 1px solid var(--line); padding-left: var(--space-20); }
.hero-rev-break .dim { color: var(--tx-2); font-size: var(--text-caption); }
.hero-rev-break b { font-size: var(--text-section); font-variant-numeric: tabular-nums; color: var(--tx); }
.hero-rev-break b.up { color: var(--up); } .hero-rev-break b.down { color: var(--down); }
.status-row { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin: var(--space-12) 0 var(--space-16); }
.status-row .tag { font-size: var(--text-caption); padding: var(--space-4) var(--space-12); }
/* 窄屏：大数独占整行，三个拆分项在下面并排；再窄则两列折行 */
@media (max-width: 820px) {
  .hero-rev { grid-template-columns: repeat(3, 1fr); }
  .hero-rev-main { grid-column: 1 / -1; }
  .hero-rev-break > div:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 460px) {
  .hero-rev { grid-template-columns: 1fr 1fr; }
  .hero-rev-break > div:last-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-12); }
}

/* 卡片里套卡片（如数据资产）：内层更紧凑、间距更小，避免层层留白 */
.card .card { padding: var(--space-12) var(--space-16); box-shadow: none; }
.card .grid { gap: var(--gap); }
[data-skin="glass"] .card .card { background: var(--panel-2); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 标签 / 徽标 */
.tag { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); border-radius: 999px; font-size: var(--text-caption); line-height: var(--leading-body); white-space: nowrap; background: var(--panel-3); color: var(--tx-2); }
.tag.ok { background: var(--down-soft); color: var(--ok); } .tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--up-soft); color: var(--err); } .tag.pri { background: var(--pri-soft); color: var(--pri-tx); }
.tag.up { background: var(--up-soft); color: var(--up); } .tag.down { background: var(--down-soft); color: var(--down); }
.tag.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 36px; padding: 0 var(--space-16); border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--tx); font-size: var(--text-body); line-height: var(--leading-body); font-weight: 400; white-space: nowrap; transition: all .15s; }
.btn:hover { border-color: var(--pri); color: var(--pri-tx); }
.btn.primary { background: var(--pri); border-color: var(--pri); color: var(--tx-inv); }
[data-skin="glass"] .btn.primary { background: var(--pri); border-color: transparent; color: var(--tx-inv); }
.btn.primary:hover { background: var(--brand-hover); filter: none; color: var(--tx-inv); }
.btn.danger { color: var(--err); } .btn.danger:hover { border-color: var(--err); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tx-2); }
.btn.ghost:hover { background: var(--hover); color: var(--tx); }
.btn.sm { height: 32px; padding: 0 var(--space-12); font-size: var(--text-secondary); border-radius: var(--r-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { color: var(--pri-tx); cursor: pointer; } .link:hover { text-decoration: underline; }
.link.danger { color: var(--err); }

/* 表单 */
.input, .select, textarea.input { height: 36px; font-size: var(--text-body); line-height: var(--leading-body); padding: 0 var(--space-12); border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--tx); outline: none; min-width: 0; transition: border .15s, box-shadow .15s; }
textarea.input { height: auto; padding: var(--space-8) var(--space-12); resize: vertical; }
.input:focus, .select:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(var(--pri-rgb), .15); }
.select option { background: var(--panel); color: var(--tx); }
[data-skin="glass"] .select option { background: #111827; }
[data-skin="glass"][data-theme="light"] .select option { background: #fff; }
.field { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-16); }
.field > label { font-size: var(--text-body); color: var(--tx-2); }
.field .help { font-size: var(--text-secondary); color: var(--tx-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-16); }
.form-grid > * { min-width: 0; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }   /* 手机上表单单列，不撑出横向滚动 */
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + span { background: var(--pri); }
.switch input:checked + span::before { transform: translateX(16px); }
.check { display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; font-size: var(--text-body); }
.check input { accent-color: var(--pri); width: 15px; height: 15px; }

/* 分段 / 标签页 */
.seg { display: inline-flex; padding: var(--space-4); border-radius: var(--r-sm); background: var(--panel-3); gap: var(--space-4); }
.seg button { border: 0; background: transparent; padding: 0 var(--space-12); height: 28px; border-radius: var(--r-sm); cursor: pointer; color: var(--tx-2); font-size: var(--text-secondary); white-space: nowrap; }
.seg button.on { background: var(--panel); color: var(--tx); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-skin="glass"] .seg button.on { background: rgba(var(--pri-rgb), .10); color: var(--pri-tx); box-shadow: none; }
.tabs { display: flex; gap: var(--space-24); border-bottom: 1px solid var(--line); margin-bottom: var(--space-16); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: var(--space-12) var(--space-4); cursor: pointer; color: var(--tx-2); font-size: var(--text-body); font-weight: 500; line-height: var(--leading-body); position: relative; flex: none; white-space: nowrap; }
.tabs button.on { color: var(--pri-tx); font-weight: 600; }
.tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--pri); }

/* 时间范围栏（遵循「档位标签与日期框不矛盾」规则） */
.rangebar { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.rangebar .dates { display: flex; align-items: center; gap: var(--space-8); }
.rangebar .dates input { width: 138px; }
.rangebar .steps { display: inline-flex; gap: var(--space-4); }

/* 表格 */
.table-wrap { overflow: auto; border-radius: var(--r-sm); border: 1px solid var(--line); max-height: 560px; }
.table-wrap.tall { max-height: none; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-secondary); line-height: var(--leading-body); }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel-3); color: var(--tx-2); font-weight: 600; text-align: left; padding: var(--space-8) var(--space-12); font-size: var(--text-secondary); white-space: nowrap; border-bottom: 1px solid var(--line); }
[data-skin="glass"] .tbl th { background: var(--panel); backdrop-filter: blur(12px); }
[data-skin="classic"][data-theme="light"] .tbl th { background: #f7f8fa; }
.tbl td { padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td b { font-weight: 600; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl tr.warn-row td { background: var(--warn-soft); }
.tbl tr.click { cursor: pointer; }
.tbl tfoot td { font-weight: 600; background: var(--panel-3); position: sticky; bottom: 0; }
.empty { padding: var(--space-32) var(--space-12); text-align: center; color: var(--tx-3); }
.empty svg { width: 40px; height: 40px; stroke: var(--tx-3); opacity: .6; display: block; margin: 0 auto var(--space-8); }
.pager { display: flex; align-items: center; gap: var(--space-8); justify-content: flex-end; margin-top: var(--space-12); font-size: var(--text-secondary); color: var(--tx-2); }

/* 图表 */
.chart { width: 100%; height: 320px; }
.chart.sm { height: 240px; } .chart.lg { height: 400px; }
/* 图表左上角的小工具条（目前一个「值」：显示 / 隐藏数据点数值） */
.chart-box { position: relative; }
.chart-tools { position: absolute; top: 42px; left: 2px; z-index: 2; display: flex; flex-direction: column; gap: var(--space-4); }
.ct-btn { width: 24px; height: 20px; padding: 0; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--tx-3);
  font-size: var(--text-caption); line-height: var(--leading-body); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ct-btn:hover { color: var(--pri-tx); border-color: var(--pri); }
.ct-btn.on { color: var(--pri-tx); border-color: var(--pri); background: var(--pri-soft); font-weight: 600; }
/* 「值」字始终居中在框内（用户 2026-11-13：智能舱下字号/行高被皮肤放大后溢出框外） */
body .chart-box .chart-tools .ct-btn { box-sizing: border-box; width: 26px; height: 22px; padding: 0; display: inline-grid; place-items: center; font-size: 12px; line-height: 1; letter-spacing: 0; }

/* 图表专属 AI 入口：始终占据标题操作区或独立工具行，不覆盖绘图区。 */
.chart-ai-btn, .ai-drawer {
  --chart-ai-ink: var(--pri-tx); --chart-ai-blue: var(--pri-tx); --chart-ai-edge: var(--line-2);
  --chart-ai-wash: var(--pri-soft); --chart-ai-wash-blue: transparent; --chart-ai-highlight: transparent;
  --chart-ai-shadow: transparent; --chart-ai-hover: var(--pri-soft);
}
:root[data-theme="dark"] body:not(.ex-ai-mode) :is(.chart-ai-btn,.ai-drawer),
body.ex-ai-mode[data-ai-theme="dark"] :is(.chart-ai-btn,.ai-drawer) {
  --chart-ai-ink: var(--pri-tx); --chart-ai-blue: var(--pri-tx); --chart-ai-edge: var(--line-2);
  --chart-ai-wash: var(--pri-soft); --chart-ai-wash-blue: transparent; --chart-ai-highlight: transparent;
  --chart-ai-shadow: transparent; --chart-ai-hover: var(--pri-soft);
}
.chart-ai-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); margin-left: auto; min-width: 0; flex: 0 0 auto; }
.chart-ai-group { min-width: 0; }
.chart-ai-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); width: 100%; min-width: 0; min-height: 28px; margin: 0 0 var(--space-8); flex: none; }
.chart-ai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); flex: none; min-height: 28px; padding: var(--space-4) var(--space-8);
  border: 1px solid var(--chart-ai-edge); border-radius: var(--r-sm); color: var(--chart-ai-ink); font: inherit; font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-body); white-space: nowrap;
  background: linear-gradient(135deg,var(--chart-ai-wash),var(--chart-ai-wash-blue)),var(--panel);
  box-shadow: inset 0 1px var(--chart-ai-highlight),0 2px 7px var(--chart-ai-shadow); cursor: pointer;
  transition: color .16s,border-color .16s,background .16s,box-shadow .16s,transform .16s;
}
.chart-ai-btn .i { width: 13px; height: 13px; flex: none; color: var(--chart-ai-ink); }
/* 动态 Flux 形象当图标：元素占 18px，画布比元素大、光晕自然溢出，不撑高按钮 */
.chart-ai-btn .chart-ai-orb { width: 18px; height: 18px; margin: -3px 0; }
.chart-ai-btn:hover:not(:disabled) { border-color: var(--chart-ai-ink); background: linear-gradient(135deg,var(--chart-ai-hover),var(--chart-ai-wash-blue)),var(--panel); box-shadow: inset 0 1px var(--chart-ai-highlight),0 3px 10px var(--chart-ai-shadow); transform: translateY(-1px); }
.chart-ai-btn:active:not(:disabled) { transform: none; }
.chart-ai-btn:focus-visible { outline: 2px solid var(--chart-ai-ink); outline-offset: 3px; }
.chart-ai-btn:disabled { opacity: .55; cursor: default; }
.chart-ai-btn[aria-busy="true"] .i { animation: spin 1.3s linear infinite; }
@media(max-width:560px) {
  .chart-ai-actions { gap: var(--space-4); flex-wrap: wrap; }
  .chart-ai-toolbar { margin-bottom: var(--space-4); }
  .chart-ai-btn { min-height: 30px; padding: var(--space-8) var(--space-8); border-radius: 8px; font-size: var(--text-caption); }
}
@media(prefers-reduced-motion:reduce) { .chart-ai-btn,.chart-ai-btn .i { animation: none!important; transition: none!important; transform: none!important; } }

/* 说明 / 提示条 */
.note { font-size: var(--text-secondary); color: var(--tx-2); background: var(--panel-3); border-radius: var(--r-sm); padding: var(--space-12) var(--space-12); line-height: var(--leading-body); }
.note b { color: var(--tx); }
.callout { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) var(--space-16); border-radius: var(--r-sm); font-size: var(--text-body); background: var(--pri-soft); color: var(--tx); }
.callout.warn { background: var(--warn-soft); } .callout.err { background: var(--up-soft); } .callout.ok { background: var(--down-soft); }
details.rule { margin-top: var(--space-12); } details.rule summary { cursor: pointer; color: var(--pri-tx); font-size: var(--text-secondary); }

/* 列表项 */
.list { display: flex; flex-direction: column; }
.list .li { display: flex; gap: var(--space-12); align-items: center; padding: var(--space-12) var(--space-4); border-bottom: 1px dashed var(--line); font-size: var(--text-body); }
.list .li:last-child { border-bottom: 0; }
.freshbar { height: 6px; border-radius: 6px; background: var(--panel-3); overflow: hidden; flex: 1; }
.freshbar i { display: block; height: 100%; border-radius: 6px; }

/* ---------- 弹窗 / 抽屉 / 提示 ---------- */
.mask { position: fixed; inset: 0; z-index: 100; background: rgba(5,8,19,.45); display: grid; place-items: center; opacity: 0; transition: opacity .18s; padding: var(--space-20); }
[data-skin="glass"] .mask { backdrop-filter: blur(6px); }
.mask.show { opacity: 1; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--panel); border: var(--panel-border);
  box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.98); transition: transform .2s var(--ease); }
[data-skin="glass"] .modal { background: var(--panel); backdrop-filter: blur(28px) saturate(1.6); }
[data-skin="glass"][data-theme="dark"] .modal { background: rgba(13,19,38,.86); }
[data-skin="glass"][data-theme="light"] .modal { background: rgba(255,255,255,.9); }
.mask.show .modal { transform: none; }
.modal.wide { width: min(860px, 100%); }
.modal-h { display: flex; align-items: center; padding: var(--space-16) var(--space-20); border-bottom: 1px solid var(--line); }
.modal-h h3 { margin: 0; font-size: var(--text-section); }
.modal-h .x { margin-left: auto; }
.modal-b { padding: var(--space-20) var(--space-20); overflow: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: var(--space-8); padding: var(--space-12) var(--space-20); border-top: 1px solid var(--line); }
.drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .26s var(--ease);
  background: var(--panel); border-left: var(--panel-border); box-shadow: var(--shadow-lg); }
[data-skin="classic"] .drawer { background: var(--panel); }
[data-skin="glass"] .drawer { top: 10px; right: 10px; bottom: 10px; border-radius: var(--r-lg); border: var(--panel-border); backdrop-filter: blur(28px) saturate(1.6); }
[data-skin="glass"][data-theme="dark"] .drawer { background: rgba(11,17,35,.80); }
[data-skin="glass"][data-theme="light"] .drawer { background: rgba(255,255,255,.82); }
.drawer.open { transform: none; }
.toast-box { position: fixed; z-index: 200; top: 18px; left: 50%; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-8); align-items: center; pointer-events: none; }
.toast { pointer-events: auto; width: max-content; max-width: 100%; overflow-wrap: anywhere; padding: var(--space-12) var(--space-16); border-radius: var(--r-sm); background: var(--panel); color: var(--tx); border: var(--panel-border); box-shadow: var(--shadow-lg);
  font-size: var(--text-body); display: flex; gap: var(--space-8); align-items: center; animation: toastIn .22s var(--ease); }
[data-skin="glass"] .toast { backdrop-filter: blur(20px); }
[data-skin="glass"][data-theme="dark"] .toast { background: rgba(13,19,38,.9); }
.toast::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; font-size: var(--text-caption); font-weight: 600; flex: none; }
.toast.bad::before { content: "!"; background: var(--err); }
.toast.warn::before { content: "!"; background: var(--warn); }
.toast.info::before { content: "i"; background: var(--info); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
.menu { position: fixed; z-index: 120; min-width: 200px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; padding: var(--space-8); border-radius: var(--r); background: var(--panel); border: var(--panel-border); box-shadow: var(--shadow-lg); }
[data-skin="glass"] .menu { backdrop-filter: blur(24px); }
[data-skin="glass"][data-theme="dark"] .menu { background: rgba(13,19,38,.92); }
[data-skin="glass"][data-theme="light"] .menu { background: rgba(255,255,255,.94); }
.menu .mi { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-12); border-radius: 8px; cursor: pointer; font-size: var(--text-body); color: var(--tx); }
.menu .mi:hover { background: var(--hover); }
.menu .sep { height: 1px; background: var(--line); margin: var(--space-4) var(--space-4); }
.menu .mh { padding: var(--space-8) var(--space-12) var(--space-4); font-size: var(--text-secondary); color: var(--tx-3); }
.menu .mh-row { display: flex; align-items: center; justify-content: space-between; }
.mh-act { display: inline-flex; align-items: center; gap: var(--space-4); border: 0; background: none; padding: var(--space-4) var(--space-8); border-radius: 6px; font-size: var(--text-secondary); color: var(--pri-tx); cursor: pointer; }
.mh-act svg.i { width: 13px; height: 13px; }
.mh-act:hover:not([disabled]) { background: var(--hover); }
.mh-act[disabled] { color: var(--tx-3); opacity: .55; cursor: default; }

/* 外观切换卡 */
.skin-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); padding: var(--space-4); }
.skin-opt { border: 2px solid var(--line); border-radius: var(--r-sm); padding: var(--space-8); cursor: pointer; font-size: var(--text-caption); text-align: center; color: var(--tx-2); }
.skin-opt.on { border-color: var(--pri); color: var(--pri-tx); font-weight: 600; }
.skin-opt .pv { height: 52px; border-radius: 6px; margin-bottom: var(--space-4); display: flex; overflow: hidden; }
.pv-classic { background: #f0f2f5; } .pv-classic::before { content: ""; width: 26%; background: #0f1d33; }
.pv-classic::after { content: ""; flex: 1; margin: var(--space-8); border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.pv-glass { background: radial-gradient(circle at 10% 10%, #3b5bdb 0, transparent 60%), radial-gradient(circle at 90% 90%, #0e7490 0, transparent 60%), #0a1226; }
.pv-glass::before { content: ""; width: 24%; margin: var(--space-4); border-radius: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.pv-glass::after { content: ""; flex: 1; margin: var(--space-4) var(--space-4) var(--space-4) 0; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }

/* 主题色色块 */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding: var(--space-4); }
.swatch { border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4); border-radius: 8px; color: var(--tx-2); font-size: var(--text-caption); }
.swatch:hover { background: var(--hover); }
.swatch i { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .15s; }
.swatch.on i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--pri); transform: scale(1.05); }
.swatch.on { background: var(--pri-soft); }
.swatch.on span { color: var(--pri-tx); font-weight: 600; }
.menu .swatches { width: 300px; }

/* 加载骨架 */
.skel { background: linear-gradient(90deg, var(--panel-3) 25%, var(--hover) 50%, var(--panel-3) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.loading-line { height: 2px; position: fixed; top: 0; left: 0; z-index: 300; background: var(--grad); transition: width .3s, opacity .3s; }

/* 权限树 */
.perm-tree { columns: 2; column-gap: var(--space-24); }
.perm-node { break-inside: avoid; margin-bottom: var(--space-12); }
.perm-node > .check { font-weight: 600; }
.perm-kids { padding: var(--space-4) 0 0 var(--space-24); display: flex; flex-direction: column; gap: var(--space-4); }
.perm-kids .check small { color: var(--tx-3); margin-left: var(--space-4); }

/* ---------- AI 抽屉 ---------- */
.ai-drawer { width: min(var(--ai-w, 560px), 100vw); }
/* 左边缘拖拽条：平时只是一条细缝，悬停 / 拖动时亮出主题色和中间的握把 */
.ai-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; touch-action: none; outline: none; }
.ai-resize::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.ai-resize::after { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 36px; margin-top: calc(-1 * var(--space-20)); border-radius: 3px; background: var(--line-2); opacity: 0; transition: opacity .15s; }
.ai-resize:hover::before, .ai-resize:focus-visible::before, body.ai-resizing .ai-resize::before { background: var(--pri); }
.ai-resize:hover::after, .ai-resize:focus-visible::after, body.ai-resizing .ai-resize::after { opacity: 1; background: var(--pri); }
body.ai-resizing { cursor: ew-resize; user-select: none; }
body.ai-resizing iframe, body.ai-resizing .chart { pointer-events: none; }
.ai-head { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-16); border-bottom: 1px solid var(--line); }
.ai-hello { text-align: center; padding: var(--space-20) var(--space-12) var(--space-8); }
.ai-hello .ex-orb { margin: var(--space-8) auto var(--space-16); }
.ai-hello p > span { display: block; text-wrap: balance; }
.ai-hello-role { margin: calc(-1 * var(--space-4)) 0 var(--space-8); font-size: var(--text-secondary); letter-spacing: .08em; color: var(--tx-2); }
.ai-hello h3 { margin: 0 0 var(--space-8); font-size: var(--text-section); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-hello p { margin: 0; color: var(--tx-2); font-size: var(--text-body); line-height: var(--leading-body); }
.ai-sugg-t { font-size: var(--text-secondary); color: var(--tx-3); margin: var(--space-4) var(--space-4) calc(-1 * var(--space-8)); }
.ai-ava { width: 30px; height: 30px; flex: none; margin-top: var(--space-2); }
.ai-quote { display: flex; align-items: flex-start; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12); margin-bottom: var(--space-8); border-radius: var(--r-sm); font-size: var(--text-secondary); color: var(--tx-2);
  background: var(--pri-soft); border-left: 3px solid var(--pri); }
.ai-quote[hidden] { display: none; } .ai-quote span { flex: 1; line-height: var(--leading-body); } .ai-quote .i { flex: none; color: var(--pri-tx); margin-top: var(--space-4); }
.icon-btn.sm { width: 24px; height: 24px; border-radius: var(--r-sm); }
.ai-act { display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-8); font-size: var(--text-secondary); color: var(--pri-tx); }
.ai-confirm { margin-top: var(--space-12); border: 1px solid rgba(var(--pri-rgb), .4); border-radius: var(--r); padding: var(--space-12) var(--space-12); background: var(--panel-2); }
.ai-confirm .hd { display: flex; align-items: center; gap: var(--space-8); font-weight: 600; margin-bottom: var(--space-8); }
.ai-confirm .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-12); font-size: var(--text-secondary); } .ai-confirm .kv span { color: var(--tx-3); }
.ai-confirm .ft { display: flex; gap: var(--space-8); align-items: center; margin-top: var(--space-12); }
@keyframes orb { 50% { box-shadow: 0 0 34px rgba(var(--pri-rgb), .9); transform: scale(1.06); } }
.ai-head .t { font-weight: 600; } .ai-head .s { font-size: var(--text-secondary); color: var(--tx-3); }
.ai-body { flex: 1; overflow-y: auto; padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); }
.ai-msg { display: flex; gap: var(--space-12); max-width: 100%; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg .bubble { padding: var(--space-12) var(--space-16); border-radius: var(--r); font-size: var(--text-body); line-height: var(--leading-body); max-width: 88%; overflow-x: auto; word-break: break-word; }
.ai-msg.user .bubble { background: var(--pri); color: #fff; border-bottom-right-radius: 4px; }
[data-skin="glass"] .ai-msg.user .bubble { background: var(--grad); }
.ai-msg.bot .bubble { background: var(--panel-3); border-bottom-left-radius: 4px; }
.bubble table { border-collapse: collapse; margin: var(--space-8) 0; font-size: var(--text-secondary); }
.bubble th, .bubble td { border: 1px solid var(--line-2); padding: var(--space-4) var(--space-8); }
.bubble th { background: var(--panel-3); }
.bubble p { margin: var(--space-4) 0; } .bubble ul, .bubble ol { margin: var(--space-4) 0; padding-left: var(--space-20); }
.bubble code { font-family: var(--mono); font-size: var(--text-caption); background: var(--panel-3); padding: var(--space-4) var(--space-4); border-radius: 4px; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 { font-size: var(--text-body); margin: var(--space-8) 0 var(--space-4); }
.ai-tool { font-size: var(--text-secondary); color: var(--tx-3); display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) 0; }
.ai-tool .spin { width: 10px; height: 10px; border: 2px solid var(--pri); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-foot { padding: var(--space-12) var(--space-16); border-top: 1px solid var(--line); }
.ai-ctx { font-size: var(--text-secondary); color: var(--tx-3); margin-bottom: var(--space-8); display: flex; gap: var(--space-8); align-items: center; }
.ai-input { display: flex; gap: var(--space-8); align-items: flex-end; }
.ai-input textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; padding: var(--space-12) var(--space-12); border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel-2); outline: none; }
.ai-input textarea:focus { border-color: var(--pri); }
.ai-sugg { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ai-sugg button { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 999px; padding: var(--space-4) var(--space-12); font-size: var(--text-secondary); cursor: pointer; color: var(--tx-2); }
.ai-sugg button:hover { border-color: var(--pri); color: var(--pri-tx); }

/* 图表会话先交代分析范围，再提供可选问题；与普通 Ask EnergyX 欢迎页隔离。 */
.ai-chart-hello {
  min-width: 0; padding: var(--space-20) var(--space-20) var(--space-16); text-align: left; border: 1px solid var(--chart-ai-edge); border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 100% 0,var(--chart-ai-wash),transparent 74%),linear-gradient(135deg,var(--chart-ai-wash-blue),transparent),var(--panel);
  box-shadow: inset 0 1px var(--chart-ai-highlight),0 4px 14px var(--chart-ai-shadow);
}
.ai-chart-eyebrow { display: flex; align-items: center; gap: var(--space-8); color: var(--chart-ai-ink); font-size: var(--text-caption); font-weight: 600; line-height: var(--leading-body); letter-spacing: .8px; }
.ai-chart-eyebrow .i { width: 14px; height: 14px; flex: none; }
.ai-chart-hello h3[data-ai-chart-title] { margin: var(--space-12) 0 var(--space-8); background: none; color: var(--tx); font-size: var(--text-section); line-height: var(--leading-body); font-weight: 600; letter-spacing: -.2px; overflow-wrap: anywhere; }
.ai-chart-hello .ai-chart-meta { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; color: var(--tx-2); font-size: var(--text-caption); line-height: var(--leading-body); margin: 0 0 var(--space-12); overflow-wrap: anywhere; }
.ai-chart-hello .ai-chart-note { margin: 0; padding-top: var(--space-12); border-top: 1px solid var(--line); color: var(--tx-2); font-size: var(--text-caption); line-height: var(--leading-body); overflow-wrap: anywhere; }
.ai-chart-suggestions.ai-sugg { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-8); margin-top: calc(-1 * var(--space-4)); }
.ai-chart-suggestions button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 44px; width: 100%; min-width: 0; padding: var(--space-12) var(--space-12);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); color: var(--tx); font: inherit; font-size: var(--text-caption); line-height: var(--leading-body); text-align: left; white-space: normal; overflow-wrap: anywhere;
  box-shadow: inset 0 1px var(--chart-ai-highlight); transition: border-color .16s,background .16s,color .16s;
}
.ai-chart-suggestions button::after { content: '↗'; flex: none; font-size: var(--text-body); font-weight: 500; color: var(--chart-ai-blue); }
.ai-chart-suggestions button:hover:not(:disabled) { color: var(--chart-ai-ink); border-color: var(--chart-ai-edge); background: linear-gradient(120deg,var(--chart-ai-wash),transparent),var(--panel-2); }
.ai-chart-suggestions button:focus-visible { outline: 2px solid var(--chart-ai-ink); outline-offset: 3px; }
.ai-chart-suggestions button:disabled { opacity: .55; cursor: default; }
.ai-chart-context { display: grid; grid-template-columns: 17px minmax(0,1fr); align-items: start; gap: var(--space-4) var(--space-8); min-width: 0; flex: none; padding: var(--space-12) var(--space-12); border: 1px solid var(--chart-ai-edge); border-radius: var(--r-sm); background: linear-gradient(120deg,var(--chart-ai-wash),transparent),var(--panel); }
.ai-chart-context>.i { grid-column: 1; grid-row: 1 / 3; width: 16px; height: 16px; margin-top: var(--space-4); color: var(--chart-ai-ink); }
.ai-chart-context strong { grid-column: 2; font-size: var(--text-caption); font-weight: 600; line-height: var(--leading-body); color: var(--tx); overflow-wrap: anywhere; }
.ai-chart-context span { grid-column: 2; font-size: var(--text-caption); line-height: var(--leading-body); color: var(--tx-2); overflow-wrap: anywhere; }
@media(max-width:560px) {
  .ai-chart-hello { padding: var(--space-16); border-radius: var(--r); }
  .ai-chart-hello h3[data-ai-chart-title] { font-size: var(--text-section); }
  .ai-chart-suggestions button { min-height: 46px; padding: var(--space-12) var(--space-12); }
  .ai-chart-context { padding: var(--space-8) var(--space-12); }
}
@media(prefers-reduced-motion:reduce) { .ai-chart-suggestions button { transition: none!important; } }
.ai-threads { border-bottom: 1px solid var(--line); max-height: 200px; overflow: auto; padding: var(--space-8) var(--space-12); }
.ai-threads .th { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-8); border-radius: 8px; cursor: pointer; font-size: var(--text-secondary); }
.ai-threads .th:hover { background: var(--hover); }
.cursor-blink::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--pri); }
@keyframes blink { 50% { opacity: 0; } }


/* ---------- 移动端 ---------- */
.sb-toggle, .sb-scrim { display: none; }
@media (max-width: 900px) {
  .card { padding: var(--space-16); }
  .hero-rev { padding: var(--space-20); }
  .card-h { flex-wrap: wrap; row-gap: var(--space-8); }     /* 窄屏：标题说明长 + 右侧按钮时换行，不把整页撑出横向滚动 */
  .card-h .right { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .page-head .tools { max-width: 100%; }
  .card-h .seg { max-width: 100%; overflow-x: auto; }
  .sidebar { bottom: var(--tabbar-h); transform: translateX(-105%); transition: transform .22s; }
  .sidebar.open { transform: none; }
  .sb-scrim { position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(8,15,28,.35); cursor: pointer; }
  .sidebar.open + .sb-scrim { display: block; }
  .main { margin-left: 0 !important; }
  .sb-toggle { display: grid; }
  .view { padding: var(--space-12); padding-bottom: calc(12px + var(--tabbar-h)); }
  .user-chip .who { display: none; }
  .ai-btn { min-width: 0; padding: 0 var(--space-4); border-radius: 50%; } .ai-btn .ph, .ai-btn kbd { display: none; }
  .st-chip { max-width: 112px; padding: 0 var(--space-8); }
  .ai-resize { display: none; }
  .ex-fab { right: 14px; bottom: calc(var(--tabbar-h) + 10px); }
  .crumb { display: none; }   /* 顶部放不下面包屑，页面自己的大标题已经把页名写清楚了 */
  /* 手机底部 Tab：首页/收益结算/运营监测/交易决策直达或展开抽屉，更多＝原汉堡菜单入口 */
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: var(--tabbar-h);
    background: var(--panel); border-top: var(--panel-border); backdrop-filter: blur(14px); padding-bottom: env(safe-area-inset-bottom); }
  .tb-item { padding: var(--space-4) var(--space-8); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
    border: 0; background: transparent; color: var(--tx-2); font-size: var(--text-caption); cursor: pointer; }
  .tb-item svg { width: 20px; height: 20px; }
  .tb-item.active { color: var(--pri-tx); }
}

/* 两个细则 / 储能档案 */
.month-pick { display: inline-flex; align-items: center; gap: var(--space-8); }
.month-pick .select { min-width: 132px; }
.month-pick .steps { display: inline-flex; gap: var(--space-4); }
.pri-tx { color: var(--pri-tx); }
.tbl tbody tr.hl td { background: var(--pri-soft); }
/* 数据导入 */
.alert { padding: var(--space-12) var(--space-12); border-radius: var(--r-sm); font-size: var(--text-secondary); border: 1px solid var(--line); background: var(--panel-2, var(--hover)); }
.alert.bad { border-color: rgba(var(--err-rgb, 239, 68, 68), .45); background: rgba(var(--err-rgb, 239, 68, 68), .08); color: var(--tx); }
.alert.info { border-color: rgba(var(--pri-rgb), .35); background: var(--pri-soft); }
.kv-line { font-size: var(--text-body); margin: var(--space-4) 0; display: flex; gap: var(--space-12); }
.kv-line .dim { min-width: 32px; }
.input.sm { height: 32px; font-size: var(--text-secondary); padding: 0 var(--space-8); }
.auto-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); font-size: var(--text-secondary); }
.auto-line code { font-size: var(--text-caption); padding: var(--space-4) var(--space-8); border-radius: 5px; background: var(--hover); word-break: break-all; }
#hist { overflow-x: auto; }     /* 导入历史列多，手机上在卡片内横向滚动，不撑宽整页 */
.imp-drop { border: 1.5px dashed var(--line); background: transparent; transition: border-color .15s, background .15s; }
.imp-drop.over { border-color: var(--pri); background: var(--hover); }
.imp-drop-in { display: flex; align-items: flex-start; gap: var(--space-12); font-size: var(--text-body); }
.imp-drop-in > svg { width: 22px; height: 22px; flex: none; color: var(--pri); margin-top: var(--space-4); }
.imp-drop-in .dim { font-size: var(--text-secondary); margin-top: var(--space-4); line-height: var(--leading-body); }
.imp-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.imp-h { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.imp-d { overflow-wrap: anywhere; font-size: var(--text-secondary); color: var(--tx-2); line-height: var(--leading-body); flex: 1; }
.imp-last { font-size: var(--text-caption); }
.imp-extra { display: grid; gap: var(--space-8); }
.imp-act { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-4); }
.imp-act label.btn { cursor: pointer; }
.ov-tbl td, .ov-tbl th { padding: var(--space-4) var(--space-8); font-size: var(--text-secondary); }     /* 字段映射表等紧凑表格复用 */
.ov-tbl tr.grp td { background: var(--hover); }
/* 侧栏收起成图标栏（宽 56）：点底部按钮切换；窄屏（< 1280）默认收起；手机端仍是抽屉 */
html[data-nav="mini"] { --sb-w: 56px; }   /* 收起宽度独立于展开宽度 */
html[data-nav="mini"] .brand { padding: var(--space-16) 0 var(--space-16); align-items: center; justify-content: center; border-bottom: 0; }
html[data-nav="mini"] .brand-text,
html[data-nav="mini"] .nav-item > span, html[data-nav="mini"] .nav-item .chev,
html[data-nav="mini"] .nav-sub, html[data-nav="mini"] .sb-foot #sb-station { display: none !important; }
html[data-nav="mini"] .nav { scrollbar-gutter: auto; padding: var(--space-8) var(--space-8) var(--space-12); }
html[data-nav="mini"] .nav-item { justify-content: center; padding: var(--space-12) 0; }
html[data-nav="mini"] .nav-sec.has-active > .nav-item { background: rgba(var(--pri-rgb), .16); color: var(--sb-tx-hi); }
html[data-nav="mini"] .sb-foot { justify-content: center; padding: var(--space-12) 0; }
.sb-mini-btn { margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--sb-line); background: transparent; color: var(--sb-group); flex: none; }
.sb-mini-btn:hover { color: var(--sb-tx-hi); background: var(--sb-hover); }
.sb-mini-btn .i { width: 14px; height: 14px; }
html[data-nav="mini"] .sb-mini-btn { margin-left: 0; }
html[data-nav="mini"] .sb-foot .dot { display: none; }
.menu.nav-fly .mh { color: var(--tx-3); }
@media (max-width: 900px) { html[data-nav="mini"] { --sb-w: var(--sb-full-w); } }
.recent-imp { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px dashed var(--line); font-size: var(--text-secondary); display: grid; gap: var(--space-4); }
.recent-imp .ri-h { color: var(--tx-3); font-size: var(--text-caption); }
.recent-imp .ri { display: flex; align-items: center; gap: var(--space-8); }

pre.code { margin: 0; padding: var(--space-12) var(--space-16); border-radius: var(--r-sm); background: var(--hover); font-size: var(--text-caption); line-height: var(--leading-body); overflow-x: auto; white-space: pre; }
.pf-sample { display: flex; align-items: center; gap: var(--space-12); margin: var(--space-12) 0 var(--space-8); flex-wrap: wrap; }
.pf textarea.input { height: auto; padding: var(--space-8) var(--space-8); font-size: var(--text-secondary); }

.import-section:not(:empty), .import-section + .card { margin-top: var(--gap); }

/* ---- v2 首页分区标题 / 三联指标 / 分组表头 ---- */
.sec-title { display: flex; align-items: baseline; gap: var(--space-12); margin: var(--space-20) var(--space-4) var(--space-8); }
.sec-title .hint { color: var(--tx-2); font-size: var(--text-secondary); }
.sec-title h2 { font-size: var(--text-section); font-weight: 600; margin: 0; }
.h2-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); padding: var(--space-4) var(--space-4) var(--space-4); }
.h2-tri > div { display: flex; flex-direction: column; gap: var(--space-4); }
.h2-tri b { font-size: var(--text-page-title); font-weight: 600; }
.h2-tri small { font-size: var(--text-caption); font-weight: 400; color: var(--tx-3); }
.tbl thead tr.grp th { font-size: var(--text-secondary); color: var(--tx-2); border-bottom: 1px solid var(--line); text-align: center; }
.tbl thead tr.grp th:not(:empty) { border-left: 1px solid var(--line); }
@media (max-width: 700px) {
  .h2-tri { grid-template-columns: 1fr; }
  .sec-title { flex-wrap: wrap; row-gap: var(--space-4); }
  .sec-title h2, .sec-title > .link { flex-shrink: 0; }
  .sec-title .hint { flex-basis: 100%; order: 2; }
}
.cap-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-8); }
.cap-grid label { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-secondary); color: var(--tx-3); }
.cap-grid .input { width: 100%; padding: var(--space-4) var(--space-8); }
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 首页：将同一业务的指标收在一个面板中，日期就近展示。 */
.home-page { padding-bottom: var(--space-12); }
.home-section + .home-section { margin-top: var(--space-24); }
.home-section-head, .home-section-head > div { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.home-section-head { justify-content: space-between; margin: 0 0 var(--space-12); gap: var(--space-16); }
.home-section-head h2 { font-size: var(--text-section); margin: 0; letter-spacing: .2px; }
.home-section-index { font-size: var(--text-caption); font-weight: 600; color: var(--pri-tx); background: var(--pri-soft); border-radius: 6px; padding: var(--space-4) var(--space-8); }
.home-section-head > .link { font-size: var(--text-secondary); white-space: nowrap; }
.home-label { color: var(--tx-2); font-size: var(--text-body); }
.home-note { color: var(--tx-2); font-size: var(--text-secondary); line-height: var(--leading-body); }
.home-panel, .home-contract { padding: var(--space-20) var(--space-24) 0; overflow: hidden; }
.home-panel-head { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-20); }
.home-panel-head h3 { font-size: var(--text-section); font-weight: 600; margin: 0; }
.home-panel-head > .link { margin-left: auto; font-size: var(--text-secondary); }
.home-title-group { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.home-date { font-size: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; padding: var(--space-4) var(--space-8); border-radius: 5px; background: var(--panel-3); color: var(--tx-2); }
.home-panel-head > .home-date { margin-left: auto; }
.home-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); margin-bottom: var(--space-20); }
.home-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); margin-bottom: var(--space-20); }
.home-metric { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-8); min-width: 0; }
.home-metric strong { color: var(--tx); font-size: var(--text-metric); font-weight: 600; letter-spacing: 0; line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
.home-metric small { margin-left: var(--space-4); font-size: var(--text-secondary); font-weight: 400; letter-spacing: 0; color: var(--tx-3); }
.home-metric .home-note { font-size: var(--text-secondary); }
.home-panel-foot { border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--space-24)); padding: var(--space-12) var(--space-24); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8) var(--space-12); font-size: var(--text-secondary); color: var(--tx-2); background: var(--panel-2); }
.home-contract { margin-top: var(--gap); }
.home-contract > .home-panel-head { margin-bottom: var(--space-4); }
.home-contract-body { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 2fr); }
.home-pnl { padding: var(--space-20) var(--space-24) var(--space-20) 0; }
.home-total strong { font-size: var(--text-metric); letter-spacing: 0; }
.home-pnl-parts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); padding: var(--space-20) 0 var(--space-16); margin-top: var(--space-20); border-top: 1px solid var(--line); }
.home-pnl-parts strong { font-size: var(--text-metric-compact); }
.home-pnl .tag { font-size: var(--text-caption); padding: var(--space-4) var(--space-4); }
.home-pnl > p { margin: var(--space-16) 0 0; }
.home-price { border-left: 1px solid var(--line); padding: var(--space-20) 0 var(--space-16) var(--space-24); min-width: 0; }
.home-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-12); }
.home-chart-head h4 { line-height: var(--leading-body); font-size: var(--text-body); font-weight: 500; margin: 0 0 var(--space-4); }
.home-price .chart { height: 230px; }
.home-chart-note { text-align: right; font-size: var(--text-secondary); }
.home-fm-grid > .card { margin: 0; }
.home-fm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); }
.home-performance { background: linear-gradient(125deg, var(--pri-soft), transparent 65%), var(--panel); }
.home-performance strong { color: var(--pri-tx); }
@media (max-width: 1200px) {
  .home-contract-body { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); }
  .home-three { gap: var(--space-12); }
  .home-fm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .home-settlements { grid-template-columns: 1fr; }
  .home-contract-body { grid-template-columns: 1fr; }
  .home-pnl { padding-right: 0; }
  .home-price { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .home-section-head > div { flex-wrap: wrap; }
  .home-section-head .home-note { display: none; }
  .home-metric strong { font-size: var(--text-metric-compact); }
  .home-metric small { display: block; margin: var(--space-4) 0 0; }
  .home-panel, .home-contract { padding-left: var(--space-16); padding-right: var(--space-16); }
  .home-panel-foot { margin-left: calc(-1 * var(--space-16)); margin-right: calc(-1 * var(--space-16)); padding-left: var(--space-16); padding-right: var(--space-16); }
}

/* 模块管理：保留完整文字，复用原生复选框和键盘焦点。 */
.module-option { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-16); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.module-option:has(input:checked) { border-color: var(--pri); background: var(--pri-soft); }
.module-option input { width: 17px; height: 17px; margin: var(--space-4) 0 0; accent-color: var(--pri); flex: none; }
.module-option span { min-width: 0; } .module-option b { font-size: var(--text-secondary); font-weight: 600; }
.module-option small { display: block; color: var(--tx-3); font-size: var(--text-caption); margin-top: var(--space-4); }
@media (max-width: 560px) { #module-list .grid { grid-template-columns: 1fr; } }

/* 首页顶部使用单行工具栏，让业务卡片紧跟标题。 */
.home-page .home-heading { align-items: center; margin-bottom: var(--space-12); gap: var(--space-12) var(--space-20); }
.home-heading-main { display: flex; align-items: center; gap: var(--space-16); min-width: 0; }
.home-heading .home-station-meta { display: flex; align-items: center; gap: var(--space-12); color: var(--tx-2); font-size: var(--text-caption); }
.home-station-meta > span { color: var(--tx-3); }
.home-heading .tools { margin-left: 0; }
.home-heading h1 { font-size: var(--text-section); }
.home-heading-link { margin-left: auto; font-size: var(--text-caption); white-space: nowrap; }
.home-page .home-section:first-child > .home-section-head { margin-bottom: var(--space-12); }
@media (max-width: 680px) {
  .home-page .home-heading { justify-content: space-between; gap: var(--space-8); }
  .home-heading-main { flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
  .home-heading .home-station-meta { flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
  .home-heading .tools { margin-left: auto; }
}

/* 中长期交易：合约类型、统计窗口、展示粒度分别选择。 */
.mlt-filters { padding: var(--space-16) var(--space-20); margin-bottom: var(--gap); }
.mlt-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-16); }
.mlt-filter-row + .mlt-filter-row { margin-top: var(--space-12); }
.mlt-filter-label { font-size: var(--text-caption); color: var(--tx-2); flex: 0 0 54px; }
.mlt-filter-help { font-size: var(--text-caption); }
.mlt-term-summary .grid { margin-bottom: 0; }
.mlt-term-summary .grid > div { min-width: 0; }
.mlt-term-summary .grid span { font-size: var(--text-caption); }
.mlt-term-summary b { display: block; font-size: var(--text-page-title); margin-top: var(--space-8); font-variant-numeric: tabular-nums; }
.mlt-term-summary small { font-size: var(--text-caption); font-weight: 400; color: var(--tx-3); }
@media (max-width: 680px) {
  .mlt-filters { padding: var(--space-12); }
  .mlt-results > .grid.g4 .k-val { font-size: var(--text-page-title); }
  .mlt-results > .grid.g4 .k-val > span { white-space: nowrap; }
  .mlt-results > .grid.g4 .k-val small { display: block; margin-left: 0; }
  .mlt-filter-row { align-items: flex-start; gap: var(--space-8); }
  .mlt-filter-label { flex-basis: 100%; }
  #mlt-range { min-width: 0; width: 100%; }
  .mlt-term-summary .grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* 模块与图表时间窗口 */
.view { --time-sticky-top: var(--top-h); }
[data-skin="glass"] .view { --time-sticky-top: calc(var(--top-h) + var(--seam)); }
/* 时间栏随页面保留在顶栏下方；只固定模块窗口，图内独立窗口随图滚动。 */
#home-time, #monthly-time, .module-window, .mlt-filters, .page-head:has(.module-time),
.rangebar:has(> #rbhost > .module-time) {
  position: sticky;
  top: var(--time-sticky-top);
  z-index: 15;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .3);
}
.page-head:has(.module-time) { padding: var(--space-12) var(--space-12); border-radius: var(--r); }
.rangebar:has(> #rbhost > .module-time) { padding: 0 var(--space-12); border-radius: var(--r); }
.module-time { padding: var(--space-12) 0; width: 100%; }
.page-head:has(.module-time) { flex-wrap: wrap; }
.page-head:has(.module-time) .tools { flex-wrap: wrap; }
.chart-time { margin: var(--space-8) 0 var(--space-12); padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.chart-time-line { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-8); font-size: var(--text-caption); color: var(--tx-3); }
.chart-time-line label { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; color: var(--pri-tx); white-space: nowrap; }
.chart-time .rangebar { gap: var(--space-8); font-size: var(--text-caption); }
.chart-time .seg button { padding: var(--space-4) var(--space-8); font-size: var(--text-caption); }
.chart-time .dates input { width: 128px; min-width: 0; padding: var(--space-4) var(--space-8); font-size: var(--text-caption); }
.chart-time .steps .btn { padding: var(--space-4) var(--space-8); font-size: var(--text-caption); }
.chart-time[data-loading] [data-window]::after { content: ' · 加载中'; }
.time-error [data-window] { color: var(--up); }
.time-note { margin: var(--space-8) 0 var(--space-12); font-size: var(--text-caption); color: var(--tx-3); }
@media (max-width: 700px) {
  .rangebar .dates { flex-wrap: wrap; }
  .chart-time .seg { flex-wrap: wrap; }
}
/* 产品层级树：各层导航保持单行全文，宽度由最长项与缩进决定。 */
.nav-sub .nav-sub { padding-left: var(--space-12); border-left: 1px solid var(--line); margin-left: var(--space-4); }
.nav-item > span:not(.nav-ico) { white-space: nowrap; line-height: var(--leading-body); flex-shrink: 0; }
#crumb { flex-wrap: wrap; }
/* 用户列表的次要信息与行操作，避免小字和密集分隔点。 */
.user-login-ip { font-size: var(--text-caption); line-height: var(--leading-body); margin-top: var(--space-4); }
.user-row-actions { display: inline-flex; align-items: center; gap: var(--space-16); font-size: var(--text-secondary); line-height: var(--leading-body); }

/* 行情数据说明与指标共用同一阅读层级。 */
.market-provenance { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: var(--space-12) 0; color: var(--tx-2); font-size: var(--text-secondary); line-height: var(--leading-body); }
.rangebar > .dim { color: var(--tx-2); font-size: var(--text-secondary); }

/* 后台数据更新：顶栏入口与管理页共用运行状态。 */
#data-refresh.updating .i { animation: du-spin 1.2s linear infinite; }
@keyframes du-spin { to { transform: rotate(360deg); } }
.du-progress { position: fixed; right: 22px; bottom: 96px; z-index: 75; width: 380px; max-width: calc(100vw - 32px); padding: var(--space-16); background: var(--panel); border: var(--panel-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); backdrop-filter: var(--blur); color: var(--tx); font-size: var(--text-secondary); }
.du-progress-head, .du-progress-foot, .du-run-state, .du-actions { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.du-progress-head b { font-size: var(--text-body); }
.du-progress-head .icon-btn { margin-left: auto; width: 28px; height: 28px; }
.du-progress-text { margin: var(--space-12) 0; color: var(--tx-2); overflow-wrap: anywhere; }
.du-progress progress { width: 100%; height: 7px; accent-color: var(--pri); }
.du-progress-foot { justify-content: space-between; margin: var(--space-8) 0; color: var(--tx-2); }
.du-description { margin: 0 0 var(--space-16); }
.du-actions { margin-bottom: var(--space-16); }
.du-actions > .link { margin-left: auto; font-size: var(--text-secondary); }
.du-run-state { padding: var(--space-12) 0; color: var(--tx-2); font-size: var(--text-secondary); }
.du-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.du-step-grid > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-12); }
.du-step-grid > div > div { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.du-step-grid b { font-size: var(--text-body); font-weight: 600; }
.du-step-grid p { font-size: var(--text-secondary); color: var(--tx-2); margin: var(--space-8) 0 0; overflow-wrap: anywhere; }
.du-log { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-3); color: var(--tx); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-16); margin: 0; font: var(--text-secondary)/1.8 var(--mono); }
@media (max-width: 1000px) { .du-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .du-progress { right: 16px; bottom: 86px; } .du-step-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #data-refresh.updating .i { animation: none; } }
#crumb { flex-wrap: wrap; }

.workspace-tabs a { color: var(--tx-2); text-decoration: none; padding: var(--space-12) var(--space-4); font-size: var(--text-body); font-weight: 500; line-height: var(--leading-body); position: relative; flex: none; white-space: nowrap; }
.workspace-tabs a.on { color: var(--pri-tx); font-weight: 600; border-bottom: 2px solid var(--pri); }
.workspace-subtabs { gap: var(--space-20); }
.workspace-subtabs a { font-size: var(--text-secondary); padding: var(--space-8) var(--space-4); }
.workspace-content { min-width: 0; }

.workspace-heading h1 { margin: 0 0 var(--space-16); font-size: var(--text-page-title); line-height: var(--leading-body); font-weight: 600; }
.workspace-content > .page-head h2 { margin: 0; font-size: var(--text-section); line-height: var(--leading-body); font-weight: 600; }

/* 系统管理：稳定的内容工作区，列表、表单和模块配置共用一套管理界面。 */
:root[data-theme="light"] :is(.admin-view, body.admin-mode .modal, body.admin-mode .du-progress) {
  --admin-surface: #fff; --panel: #fff; --panel-2: #fafbfc; --panel-3: #f5f7fa;
  --line: #e5e9ef; --line-2: #d6dce5; --tx: #1b2738; --tx-2: #526076; --tx-3: #738096;
  --blur: none; --shadow: none; --panel-border: 1px solid var(--line);
}
:root[data-theme="dark"] :is(.admin-view, body.admin-mode .modal, body.admin-mode .du-progress) {
  --admin-surface: #1c2330; --panel: #1c2330; --panel-2: #202938; --panel-3: #263142;
  --line: #354052; --line-2: #475369; --tx: #e6edf6; --tx-2: #b9c5d6; --tx-3: #94a4ba;
  --blur: none; --shadow: none; --panel-border: 1px solid var(--line);
}
.view.admin-view {
  width: calc(100% - 28px); max-width: none; min-height: calc(100dvh - var(--top-h) - 28px);
  margin: var(--space-16); padding: var(--space-24) var(--space-24); background: var(--admin-surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: none; animation: none;
}
.admin-view .page-head { align-items: flex-start; gap: var(--space-12) var(--space-24); margin-bottom: var(--space-24); }
.admin-view .page-head > div:first-child { min-width: 0; }
.admin-view .page-head h1 { font-size: var(--text-section); font-weight: 600; line-height: var(--leading-body); }
.admin-view .page-head .sub { font-size: var(--text-secondary); margin-top: 0; color: var(--tx-3); max-width: 76ch; }
.admin-view .page-head .tools { align-items: center; }
.admin-view > .card { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: var(--space-20) 0; border-top: 1px solid var(--line); backdrop-filter: none; }
.admin-view > .page-head + .card { border-top: 0; padding-top: 0; }
.admin-view > .card + .card { margin-top: var(--space-12); }
.admin-view .card-h { margin-top: 0; }
.admin-view .table-wrap { border-radius: 6px; }
.admin-view .tbl th { background: var(--panel-3); color: var(--tx-2); font-weight: 500; padding: var(--space-12) var(--space-16); backdrop-filter: none; }
.admin-view .tbl td { padding: var(--space-8) var(--space-12); line-height: var(--leading-body); }
.admin-view .tbl th:last-child, .admin-view .tbl td:last-child { text-align: right; }
.admin-view .tbl td b { font-weight: 500; }
.admin-view .tag { border-radius: 4px; font-weight: 400; padding: 0 var(--space-8); }
.admin-view .role-type { background: var(--pri-soft); color: var(--pri-tx); }
.admin-view .role-name { font-weight: 500; }
.admin-view .role-list .tbl th:first-child { width: 17%; }
.admin-view .role-list .tbl th:nth-child(2) { width: 43%; }
.admin-view .role-list .tbl td:nth-child(2) { white-space: normal; min-width: 240px; color: var(--tx-2); }
.admin-view .role-list .tbl th:nth-child(3), .admin-view .role-list .tbl th:nth-child(4) { min-width: 80px; }
.admin-view .role-list .tbl th:last-child { min-width: 110px; }
.admin-row-actions { display: inline-flex; justify-content: flex-end; align-items: center; gap: var(--space-16); }
.admin-view .note { background: var(--panel-2); border: 1px solid var(--line); }
.admin-view .module-option { box-shadow: none; }
body.admin-mode .modal { background: var(--panel); backdrop-filter: none; }
@media (max-width: 900px) {
  .view.admin-view { width: calc(100% - 16px); min-height: calc(100dvh - var(--top-h) - 16px); margin: var(--space-8); padding: var(--space-16); }
  .admin-view .page-head { margin-bottom: var(--space-20); gap: var(--space-12); }
  .admin-view .page-head .tools { margin-left: 0; width: 100%; }
  .admin-view .page-head .tools > .input { flex: 1; max-width: 100%; }
  .admin-view .page-head .tools input[type="date"] { min-width: 0; }
  .admin-view > .card { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}
.admin-view .user-name { font-weight: 500; }
.admin-view button.user-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.admin-view .user-station-scope { color: var(--tx-2); white-space: normal; display: inline-block; max-width: 260px; }
.admin-view .user-last-login { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-view .user-list .tbl th:first-child { width: 17%; }
.admin-view .user-list .tbl th:nth-child(2) { width: 13%; }
.admin-view .user-list .tbl th:nth-child(3) { width: 14%; }
.admin-view .user-list .tbl th:nth-child(4) { width: 17%; }
.admin-view .user-list .tbl th:nth-child(6) { min-width: 154px; }
.admin-view .user-list .tbl th:last-child { min-width: 220px; }

.home-settle-status { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); }

/* Shared reading rhythm and numeric alignment. */
h1, h2, h3, h4, h5, h6 { font-size: var(--text-section); font-weight: 600; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { line-height: var(--leading-title); }
small { font-size: var(--text-caption); }
.main, .chart-box, .table-wrap, .ex-grid { min-width: 0; max-width: 100%; }
.num, input[type="number"], input[inputmode="decimal"], .tbl :is(th, td).num {
  font-variant-numeric: tabular-nums; text-align: right;
}
.page-head h1, .workspace-heading h1 { line-height: var(--leading-title); }
.home-heading h1, .home-section-head h2 { font-size: var(--text-section); font-weight: 600; }
.kpi .k-ico, .kpi-ask { top: var(--space-12); right: var(--space-16); width: 32px; height: 32px; border-radius: var(--r-sm); }
.kpi .k-label { min-height: 32px; padding-right: var(--space-32); }
.kpi .k-val { min-width: 0; }
.h2-tri > div, .mlt-term-summary .grid > div { text-align: right; font-variant-numeric: tabular-nums; }
.hero-rev-main, .hero-rev-break > div { text-align: right; align-items: flex-end; }
.tag.ok { background: var(--panel-3); color: var(--tx-2); }
.tabs button:hover, .workspace-tabs a:hover, .seg button:not(.on):hover { background: var(--hover); color: var(--pri-tx); }
.asset-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-16); font-size: var(--text-secondary); }
.asset-meta > span { min-width: 0; overflow-wrap: anywhere; }
.asset-card > .muted { min-height: 2.4em; }
.asset-card b { font-weight: 500; }
.k-status { display: block; font-size: var(--text-body); line-height: var(--leading-body); white-space: normal; overflow-wrap: anywhere; }
.home-metric strong { max-width: 100%; white-space: nowrap; }
.home-metric strong > span { display: inline-block; }
.home-metric .home-note { overflow-wrap: anywhere; }
/* The chart keeps its own horizontal data scale; surrounding controls wrap. */
@media (max-width: 560px) {
  .view, [data-skin="glass"] .view { padding: var(--space-12); padding-bottom: calc(var(--tabbar-h) + var(--space-24)); }
  .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-16); }
  .page-head .tools { margin-left: 0; width: 100%; }
  .home-three, .home-two { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .home-three .home-metric, .home-two .home-metric {
    display: flex; align-items: flex-start; gap: var(--space-4);
  }
  .home-three .home-label, .home-two .home-label { text-align: left; }
  .home-three .home-note, .home-two .home-note { grid-column: 1 / -1; }
  .home-metric small { display: inline; margin: 0 0 0 var(--space-4); }
  .home-panel, .home-contract { padding-bottom: 0; }
  .home-panel-head { align-items: flex-start; gap: var(--space-8); }
  .home-panel-head > .home-date { margin-left: 0; }
  .home-date { white-space: normal; }
  .home-pnl-parts { gap: var(--space-12); }
  .home-pnl-parts .home-metric strong { font-size: var(--text-section); }
  .home-heading-main { width: 100%; }
  .home-heading .home-station-meta { flex-basis: 100%; }
  .home-section-head > .link { margin-left: auto; }
  .rangebar, .rangebar .dates { min-width: 0; max-width: 100%; }
  .rangebar .dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .rangebar .dates input { width: 100%; min-width: 0; }
  .rangebar .seg { flex-wrap: wrap; }
  .kpi .k-val { font-size: var(--text-page-title); }
}

/* 跟随顶部时只展示当前窗口；独立编辑仍使用原 rangeBar。 */
.chart-time [hidden] { display: none; }
.chart-time-edit { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--pri-tx); }
.chart-time.is-following .chart-time-line { margin-bottom: 0; }
/* 同行卡片共享标题、指标、页脚三条轨道，页脚贴底且不积累空白。 */
.home-settlements, .home-fm-grid { align-items: stretch; }
.home-panel { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
.home-panel > :is(.home-three, .home-two) { align-items: start; margin-bottom: var(--space-8); }
.home-panel-foot { align-items: center; }
.home-pnl .home-metric { align-items: flex-start; text-align: left; }
.home-time-info { line-height: var(--leading-body); }
.avatar { background: var(--pri); color: var(--tx-inv); }
@media (max-width: 700px) {
  .mileage-chart { height: 520px !important; }
  /* 手机筛选栏占多行，随文档滚动，避免遮住图表和表头；日期框仍常显。 */
  .page-head:has(.module-time) { position: static; }
  .wide-data-table { min-width: 0; }
  .wide-data-table .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .wide-data-table .tbl { min-width: 760px; }
  .wide-data-table .tbl tr > :first-child {
    position: sticky; left: 0; z-index: 2; background: var(--solid-surface);
    box-shadow: 1px 0 0 var(--line-2);
  }
  .wide-data-table .tbl thead tr > :first-child { z-index: 3; }
}

/* 导入说明和标题换行，清除窄卡片的文本溢出候选。 */
#official-market > .help { margin-block: var(--space-12); }
#profs .card-h { flex-wrap: wrap; }
#profs .card-h h3 { flex-shrink: 0; }

/* 宽屏按信息组重排，保留 1440px 与手机已验收的外观及字号色板。 */
.mileage-charts { margin-block: var(--gap); }
@media (min-width: 1800px) {
  .home-contract-body { grid-template-columns: clamp(320px, 24vw, 480px) minmax(0, 1fr); }
  .home-price .chart { height: clamp(260px, 12vw, 304px); }
  .home-pnl { display: flex; flex-direction: column; justify-content: space-between; }
  .home-pnl-parts { margin-top: var(--space-20); }
  .settle-trend { height: clamp(400px, 22vw, 560px); }
  .mileage-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mileage-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); }
  .mileage-charts > .card { margin: 0; }
  .mileage-charts .chart { height: clamp(360px, 18vw, 464px); }
  .refer-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); margin-bottom: var(--gap); align-items: start; }
  .refer-overview > .grid { align-items: start; }
  .refer-notes > .note:last-child { margin-bottom: 0 !important; }
}

/* KPI 单位只走公共 renderer，数字保留原颜色和精度。 */
:root body small.k-unit { font-size: var(--text-secondary); font-weight: 400; color: var(--tx-2); margin-left: var(--space-4); letter-spacing: 0; }
.section-note { margin-block: var(--gap); padding-inline: var(--space-20); color: var(--tx-2); font-size: var(--text-secondary); line-height: var(--leading-body); }
@media (max-width: 700px) { .section-note { padding-inline: var(--space-16); } }

/* 页面布局与内容适配。 */
.page-head .sub, .admin-view .page-head .sub { max-width: min(100%, 80em); text-wrap: pretty; line-break: strict; }
.view:has(#refer-time) .page-head .sub { text-wrap: balance; }
.view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head { align-items: flex-start; }
.view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head > :first-child { flex: 1 1 460px; min-width: 0; }
.view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head > .tools { flex: 0 1 auto; justify-content: flex-end; }
.view:has(#refer-time, .mileage-kpis, #hr-seg) .tools .rangebar { justify-content: flex-end; }
.view:has(#hr-seg) .page-head .tools { max-width: 100%; justify-content: flex-end; }
.settle-overview .table-wrap { width: 100%; }
@media (min-width: 1400px) { .settle-overview .tbl { width: 100%; table-layout: fixed; } }
.home-fm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.home-performance { background: var(--panel); }
.home-pnl { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-16); }
.home-pnl-parts { margin-top: 0; padding-block: var(--space-16); }
.home-pnl > p { margin: 0; text-wrap: pretty; }
.hourly-charts > .card:last-child { grid-column: 1 / -1; }
.chart-sign-legend { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); font-size: var(--text-secondary); color: var(--tx-2); }
.chart-sign-legend span { white-space: nowrap; }
.chart-sign-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: var(--space-4); }
.refer-notes .note { display: flex; gap: var(--space-8); align-items: flex-start; padding: var(--space-12); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); text-wrap: pretty; line-break: strict; }
.refer-notes .note > .i { flex: 0 0 16px; margin-top: 3px; }
.refer-notes .note > .refer-note-text { min-width: 0; }
.fm-demand-pending { padding: var(--space-24); color: var(--tx); }
.fm-demand-pending-title { display: flex; align-items: center; gap: var(--space-8); }
.fm-demand-pending-title > .i { color: var(--tx-2); width: 20px; height: 20px; }
.fm-demand-pending-title h3 { margin: 0; font-size: var(--text-section); font-weight: 600; }
.fm-demand-pending p { margin: var(--space-12) 0; font-size: var(--text-body); line-height: var(--leading-body); }
.fm-demand-pending-file { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-12); background: var(--panel-3); border-radius: var(--r-sm); font-size: var(--text-secondary); }
.fm-demand-pending-file > span { color: var(--tx-2); }
.fm-demand-pending-file code { overflow-wrap: anywhere; }
.fm-demand-pending-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-20); }
#rt td { padding-block: var(--space-4); height: 40px; }
#rt th { white-space: normal; min-width: 136px; max-width: 160px; }
#rt .refer-receipt { display: inline; margin-left: var(--space-8); white-space: nowrap; }
#rt .refer-history { background: none !important; }
#rt .no-input { color: var(--tx-3); }
.imp-act { align-items: center; }
.imp-d { overflow-wrap: anywhere; text-wrap: pretty; padding-inline-end: var(--space-8); }
.imp-extra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.imp-extra .input:is([type=month],[type=date]) { width: 180px; }
.imp-extra .input[name=note] { width: min(100%, 400px); }
#profs .card-h { display: grid; grid-template-columns: minmax(0,1fr) auto; }
#profs .card-h .hint { grid-column: 1/-1; grid-row: 2; text-wrap: pretty; }
#profs .card-h .right { grid-column: 2; grid-row: 1; }
#profs .empty { padding: var(--space-16); min-height: 60px; }
.sync-result.ok { color: var(--ok) !important; background: var(--panel-2) !important; }
.sync-result.err { color: var(--err) !important; background: var(--panel-2) !important; }
.k-sync-time { font-size: var(--text-metric); white-space: nowrap; }
.admin-view .page-head .tools > :is(.input,.select,.btn) { height: 36px; }
.market-empty { display: grid; gap: var(--space-16); width: 100%; }
.market-empty > h3 { font-size: var(--text-section); font-weight: 600; }
.market-empty h3, .market-empty p { margin: 0; text-wrap: pretty; }
.market-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.no-break { white-space: nowrap; }
@media (max-width: 800px) { .home-fm-grid { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 701px) { .mileage-charts.is-sparse .chart { height: 240px !important; } }
@media (max-width: 700px) {
  .view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head > :first-child { flex-basis: 100%; }
  .table-scroll-hint { font-size: var(--text-caption); }
  .k-sync-time { font-size: var(--text-page-title); }
}

/* 调频页：标题与时间工具同一轨道，说明独占下一轨道。 */
@media (min-width: 1400px) {
  .view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: var(--space-8) var(--space-16); }
  .view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head > :first-child { display: contents; }
  .view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head h1 { grid-column: 1; grid-row: 1; }
  .view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head .sub { grid-column: 1/-1; grid-row: 2; margin-top: 0; max-width: none; text-wrap: pretty; }
  .view:has(#refer-time, .mileage-kpis, #hr-seg) .page-head > .tools { grid-column: 2; grid-row: 1; width: auto; flex-wrap: nowrap; gap: var(--space-8); }
  .view:has(#hr-seg) .page-head .rangebar { gap: var(--space-4); }
  .view:has(#hr-seg) .page-head .rangebar .seg button { padding-inline: var(--space-8); }
}
.imp-extra .input[name=price], .imp-extra .input[name=name] { flex: 1 1 220px; width: 100%; min-width: 0; }
.imp-extra .input:placeholder-shown, .imp-extra .input::placeholder { text-align: left; }
.view:has(#hist) > .page-head .sub { max-width: 100%; text-wrap: balance; }

@media (min-width: 701px) { .home-price .chart { height: 200px; } }

/* Ask Flux 浮动与停靠几何，所有风格共用；手机沿用原布局。 */
.flux-flight { position:fixed; inset:0; width:100vw; height:100vh; z-index:10000; pointer-events:none; }
.flux-edge-right,.flux-edge-corner { display:none; }
@media(min-width:900px) {
  :root[data-skin] body #ai-drawer[data-flux-window] {
    position:fixed!important; left:var(--flux-x)!important; top:var(--flux-y)!important; right:auto!important; bottom:auto!important;
    width:var(--flux-w)!important; height:var(--flux-h)!important; max-height:none!important; max-width:none!important;
    transform:none!important; border-radius:18px!important; overflow:visible; transition:opacity .15s,visibility .15s!important; animation:none!important;
  }
  :root[data-skin] body #ai-drawer[data-flux-window]:not(.open) { visibility:hidden!important; opacity:0!important; pointer-events:none; }
  :root[data-skin] body #ai-drawer[data-flux-window].open { visibility:visible!important; opacity:1!important; }
  :root[data-skin] body #ai-drawer[data-flux-window] .ai-body { flex:1; min-height:0; }
  :root[data-skin] body #ai-drawer[data-flux-window] .ai-head { cursor:move; touch-action:none; flex:none; padding:12px 16px; }
  :root[data-skin] body #ai-drawer[data-flux-window] #ai-orb { position:relative; left:auto; top:auto; width:38px; height:38px; animation:none; flex:none; }
  :root[data-skin] body #ai-drawer[data-flux-window] .ai-resize { display:block; }
  #ai-drawer[data-flux-window] .flux-edge-right { display:block; position:absolute; right:-5px; top:0; bottom:12px; width:10px; cursor:ew-resize; touch-action:none; }
  #ai-drawer[data-flux-window] .flux-edge-corner { display:block; position:absolute; right:0; bottom:0; width:20px; height:20px; cursor:nwse-resize; touch-action:none; border-right:3px solid var(--pri); border-bottom:3px solid var(--pri); border-radius:0 0 16px 0; }
  :root[data-skin] body #ai-drawer[data-flux-dock] { border-radius:0!important; }
  #ai-drawer[data-flux-dock] :is(.flux-edge-right,.flux-edge-corner) { display:none; }
  #ai-drawer[data-flux-dock] .ai-head { cursor:default!important; }
  body.flux-docked .main { margin-right:var(--flux-dock-w); min-width:0; }
}
@media(max-width:899px) { #ai-dock { display:none; } }
/* Ask Flux 欢迎区：能力说明收进身份行后的 ⓘ，悬停 / 键盘聚焦 / 点按才展开（用户 2026-11-12：每次打开一大段介绍看着累） */
.ai-hello-role { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ai-hello-more { position: relative; display: inline-flex; width: 16px; height: 16px; color: var(--tx-3, var(--tx-2)); cursor: help; outline: none; letter-spacing: 0; }
.ai-hello-more > svg { width: 14px; height: 14px; }
.ai-hello-more:hover, .ai-hello-more:focus-visible, .ai-hello-more.open { color: var(--pri, #22d3ee); }
.ai-hello-tip { position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(420px, 80vw);
  display: none; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; text-align: left;
  font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--tx-1, var(--tx));
  background: var(--pop-bg, var(--card, rgba(16, 24, 40, .96))); border: 1px solid var(--line, rgba(148, 163, 184, .25)); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.ai-hello-more:hover .ai-hello-tip, .ai-hello-more:focus-within .ai-hello-tip, .ai-hello-more.open .ai-hello-tip { display: flex; }
.ai-hello-tip .ask-ico svg { width: 12px; height: 12px; vertical-align: -1px; }
.ai-hello-more { color: var(--tx-2); }
.ai-hello-more:hover, .ai-hello-more:focus-visible, .ai-hello-more.open { color: var(--pri); }
.ai-hello-tip { background: var(--panel); color: var(--tx); border-color: var(--line); backdrop-filter: blur(14px); }
/* 模块切换动效：粒子速度与外观面板里的紧凑选择条 */
.fx-speed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-12); font-size: var(--text-secondary); }
.fx-speed > span { color: var(--tx-2); }
.fx-speed .seg button { min-width: 44px; }
.fx-speed em { font-style: normal; font-size: var(--text-caption); color: var(--tx-3); }
.fx-compact { display: grid; gap: var(--space-4); }
.fx-compact .fx-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.fx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--tx-2); font-size: var(--text-caption); cursor: pointer; }
.fx-chip svg.i { width: 14px; height: 14px; }
.fx-chip:hover { border-color: var(--pri); color: var(--tx); }
.fx-chip.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-tx); }
.fx-compact .fx-speed { margin-top: var(--space-4); }
.menu .fx-compact { padding: 2px 12px 8px; max-width: 340px; }

/* 首页「区间中长期合约营收」右栏紧凑化（用户 2026-11-13：大段空白、图太小）：
   AI 分析按钮并入标题行；标题下的日期与「跟随顶部」行重复，隐藏；上边距收紧；图表吃满左栏撑出的高度。 */
.home-contract .home-price { position: relative; padding-top: var(--space-4); }
.home-contract .home-chart-head { padding-right: 104px; min-height: 36px; }
.home-contract .home-chart-head h4 { margin: 0; }
.home-contract #home-chart-range { display: none; }
.home-contract .home-price .chart-ai-toolbar { position: absolute; top: var(--space-4); right: 0; margin: 0; width: auto; pointer-events: none; }
/* 绝对定位的工具条原继承 width:100%，透明区域整行盖住「按日/按月」导致点不动（2026-11-13）；只占自身按钮宽、空白处放行点击 */
.home-contract .home-price .chart-ai-toolbar > * { pointer-events: auto; }
.home-contract .home-price .chart-time { margin-top: var(--space-4); }
@media (min-width: 701px) { .home-contract .home-price .chart { height: 290px; } }

/* 首页一屏看完（用户 2026-11-13：整体再紧凑，顶部空白只留一点点）：经典 / 智能舱标准下收紧间距，不缩字号。
   智能舱沉浸与 AI 模式有各自的首页样式，不受影响。 */
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) #view:has(> .home-page) { padding-top: 6px; padding-bottom: 8px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page { padding-bottom: 0; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .ex-head-filters { margin-bottom: 8px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-heading,
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-section-head { margin-bottom: 8px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-section + .home-section { margin-top: 12px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .card { margin-bottom: 10px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-settlements { margin-bottom: 10px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-settlements > .card,
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-fm-grid > .card { margin-bottom: 0; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-panel { padding-top: 12px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-panel-head { margin-bottom: 8px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-three { margin-bottom: 10px; row-gap: 8px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-metric { gap: 2px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-panel-foot { padding-top: 7px; padding-bottom: 7px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-contract { padding-top: 12px; padding-bottom: 0; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-pnl { padding-top: 8px; padding-bottom: 10px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-pnl-parts { margin-top: 10px; padding: 10px 0 6px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-pnl > p { margin-top: 6px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-price { padding-bottom: 8px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-price .chart-time { margin: 2px 0 0; }
@media (min-width: 701px) {
  :root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-contract .home-price .chart { height: 220px; }
}
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-metric strong { line-height: 1.2; }
@media (min-width: 1200px) {
  /* 「跟随顶部 + 日期」并到图表标题行右侧，不再单占一行 */
  :root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-contract .home-price .chart-time { position: absolute; top: 12px; left: 220px; margin: 0; z-index: 1; }
  :root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-contract .home-price .chart { height: 200px; }
}
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-panel-foot { padding-top: 5px; padding-bottom: 5px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-heading,
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-section-head { margin-bottom: 6px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) .home-page .home-panel { padding-top: 10px; }
:root:not([data-skin="alice"]) body:not(.ex-ai-mode) #view:has(> .home-page) { padding-bottom: 4px; }

/* Ask Flux：截图附件与语音输入（用户 2026-11-13，移植 Alice） */
.ai-input .ai-tool-btn { flex: none; align-self: flex-end; }
.ai-input .ai-tool-btn.on { color: var(--bad, #ef4444); background: color-mix(in srgb, var(--bad, #ef4444) 14%, transparent); animation: aiMicPulse 1.2s ease-in-out infinite; }
@keyframes aiMicPulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad, #ef4444) 18%, transparent); } }
.ai-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.ai-img { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.ai-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-img .icon-btn { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; }
.ai-img .icon-btn .i { width: 12px; height: 12px; }
.ai-voice { font-size: var(--text-caption); color: var(--tx-3); margin: 0 0 6px; }
.ai-voice.rec { color: var(--bad, #ef4444); }
.ai-voice.err { color: var(--warn, #d97706); }
.ai-msg-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ai-msg-imgs img { max-width: 160px; max-height: 120px; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.ai-drop { outline: 2px dashed var(--pri); outline-offset: -6px; }