/* static/css/style.css — 方Tang · macOS Big Sur 玻璃质感 */

/* ============ 主题变量 ============ */
:root,
[data-theme="light"] {
    --bg: #f5f5f7;
    --bg-texture: rgba(0, 0, 0, 0.028);
    --orb-1: rgba(0, 113, 227, 0.22);
    --orb-2: rgba(52, 199, 89, 0.16);
    --orb-3: rgba(255, 149, 0, 0.14);
    --card: rgba(255, 255, 255, 0.68);
    --card-border: rgba(255, 255, 255, 0.72);
    --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
    --card-shadow-hover: 0 18px 48px rgba(0, 0, 0, 0.1);
    --titlebar: rgba(255, 255, 255, 0.55);
    --titlebar-border: rgba(0, 0, 0, 0.06);
    --text: #1d1d1f;
    --text-secondary: #86868b;
    --warn: var(--text);
    --accent: #0071e3;
    --accent-strong: #0077ed;
    --accent-soft: rgba(0, 113, 227, 0.12);
    --accent-contrast: #ffffff;
    --up: #ff3b30;
    --down: #34c759;
    --track: #e9ecef;
    --track-border: #d5d9de;
    --row-hover: rgba(0, 0, 0, 0.045);
    --row-stripe: rgba(0, 0, 0, 0.02);
    --divider: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(255, 255, 255, 0.9);
    --overlay: rgba(0, 0, 0, 0.4);
    --gauge-color-cold: #0a84ff;
    --gauge-color-cool: #34c759;
    --gauge-color-warm: #ff9f0a;
    --gauge-color-hot: #ff453a;
    --gauge-color-bg: #e9ecef;
    --gauge-color-border: #d5d9de;
    /* 温度条连续色温：蓝(冷) → 青 → 中性灰(50) → 橙 → 红(热) */
    --gauge-gradient: linear-gradient(90deg,
        #0a84ff 0%, #14b8c4 26%, #9aa3af 50%, #f59e0b 74%, #ef4444 100%);
    --gauge-track-bg: rgba(120, 130, 145, .14);
    --heat: 0, 113, 227;
}

[data-theme="dark"] {
    --bg: #000000;
    --bg-texture: rgba(255, 255, 255, 0.022);
    --orb-1: rgba(10, 132, 255, 0.3);
    --orb-2: rgba(48, 209, 88, 0.18);
    --orb-3: rgba(255, 159, 10, 0.16);
    --card: rgba(30, 30, 32, 0.62);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    --card-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.65);
    --titlebar: rgba(20, 20, 22, 0.55);
    --titlebar-border: rgba(255, 255, 255, 0.08);
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --warn: var(--text);
    --accent: #0a84ff;
    --accent-strong: #3aa0ff;
    --accent-soft: rgba(10, 132, 255, 0.18);
    --accent-contrast: #ffffff;
    --up: #ff453a;
    --down: #30d158;
    --track: #3a3a3c;
    --track-border: #48484a;
    --row-hover: rgba(255, 255, 255, 0.06);
    --row-stripe: rgba(255, 255, 255, 0.025);
    --divider: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(44, 44, 46, 0.9);
    --overlay: rgba(0, 0, 0, 0.65);
    --gauge-color-cold: #0a84ff;
    --gauge-color-cool: #30d158;
    --gauge-color-warm: #ff9f0a;
    --gauge-color-hot: #ff453a;
    --gauge-color-bg: #3a3a3c;
    --gauge-color-border: #48484a;
    --heat: 10, 132, 255;
}

/* ============ 基础 ============ */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(120% 90% at 50% 0%, var(--bg-texture), transparent 70%);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* hidden 属性必须压过组件自身的 display（如 .cbm-concl{display:flex}），否则空态收不起来 */
[hidden] { display: none !important; }

/* 背景光晕 */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    transition: background-color 0.5s ease;
}
.orb-1 { width: 520px; height: 520px; top: -160px; left: -80px;  background: var(--orb-1); }
.orb-2 { width: 460px; height: 460px; top: 8%; right: -140px; background: var(--orb-2); }
.orb-3 { width: 420px; height: 420px; bottom: -160px; left: 30%; background: var(--orb-3); }

.page {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* ============ 标题栏 ============ */
.titlebar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 52px;
    padding: 0 18px;
    background: var(--titlebar);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--titlebar-border);
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

.traffic-lights {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.tl {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.tl-close  { background: #ff5f57; }
.tl-min    { background: #febc2e; }
.tl-max    { background: #28c840; }

.titlebar-brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.titlebar-brand .logo {
    font-family: "KaiTi", "STKaiti", "Ma Shan Zheng", "SimSun", serif;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    transition: color 0.35s ease;
}
.titlebar-divider {
    width: 1px;
    height: 16px;
    background: var(--divider);
    align-self: center;
    flex-shrink: 0;
}
.titlebar-brand .lishu-text {
    font-family: 'Ma Shan Zheng', "KaiTi", cursive;
    font-size: 0.95em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.35s ease;
}

.titlebar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.ws-status {
    font-size: 0.72em;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    transition: all 0.3s ease;
}

.theme-toggle {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.theme-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg {
    grid-area: 1 / 1;
    width: 18px;
    height: 18px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* ============ 玻璃卡片通用 ============ */
.glass {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ============ Hero ============ */
.hero {
    text-align: center;
    padding: 48px 16px 30px;
    animation: fade-up 0.7s ease both;
}
.hero-kicker {
    margin: 0 0 10px;
    font-size: 0.72em;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    transition: color 0.3s ease;
}
.hero-title {
    margin: 0;
    font-family: 'Ma Shan Zheng', "KaiTi", cursive;
    font-size: 2.5em;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text);
    transition: color 0.3s ease;
}
.hero-sub {
    margin: 12px 0 0;
    font-size: 0.85em;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ 温度计（水平渐变温度条） ============ */
.gauges {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 22px 16px 18px;
    margin-bottom: 18px;
    text-align: center;
    animation: fade-up 0.7s ease 0.08s both;
}
.gauge {
    flex: 1;
    min-width: 150px;
    max-width: 210px;
    padding: 6px 4px 2px;
}
/* 顶行：标签在左、数值在右，窄容器下也不挤压 */
.gauge-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}
.gauge-label {
    display: block;
    text-align: left;
    font-size: .8em;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.3s ease;
}
/* 数值：大号 + 等宽数字，颜色随温度区间变化 */
.gauge-value {
    font-size: 1.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
}
/* 强制刷新中：数字变淡，避免看起来像已出结果 */
.gauge.is-refreshing .gauge-value { opacity: .45; }
/* 值后的温度词（偏冷/中性/偏热/过热）：数字着色、词保持正文色 */
.gauge-word {
    font-style: normal;
    font-size: .52em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 3px;
}
/* 轨道：两层同渐变叠加 —— 底层淡化表示全域，上层按值宽表示已达位置 */
.gauge-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--gauge-track-bg, rgba(120, 130, 145, .16));
    overflow: hidden;
    isolation: isolate;
}
.gauge-track::before,
.gauge-track-fill {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gauge-gradient);
}
.gauge-track::before { opacity: .2; }
/* 用 clip-path 从左侧裁到 --v：渐变始终铺满整条轨道，不会被压扁在已填充宽度里 */
.gauge-track-fill {
    clip-path: inset(0 calc(100% - var(--v, 0%)) 0 0);
    transition: clip-path .65s cubic-bezier(.22, 1, .36, 1);
}
/* 每市场数据时间标注（温度条右侧行内）：只显示最近一次取到的数据时间
   （intraday 取 as_of 时分，收盘定版取 as_of_date 月-日；A股/转债无行情时间戳则不显示）。
   不显示交易状态：交易日/会话判定容易误判，宁可只给确定的取数时间。 */
.gauge-asof {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .66em;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
}
.gauge-asof-t { font-weight: 400; font-variant-numeric: tabular-nums; }
/* 陈旧（展示的是上次有效值）：琥珀点 + 琥珀字。不写字，避免撑宽定宽时间列、
   溢出压到左侧温度词；整体口径由卡片顶部的「数据陈旧」胶囊兜底。
   圆点挂在时间那一段上（不是整个 span），跟着文字走、不额外占行。 */
.gauge-asof.is-stale { color: var(--gauge-color-warm); }
.gauge-asof.is-stale .gauge-asof-t::before {
    content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--gauge-color-warm); margin-right: 4px; vertical-align: middle;
}
/* 深色主题：渐变略降饱和，避免夜间刺眼 */
:root[data-theme="dark"] {
    --gauge-gradient: linear-gradient(90deg,
        #3b9dff 0%, #35c8d8 26%, #8b93a3 50%, #f0a03c 74%, #f0625c 100%);
    --gauge-track-bg: rgba(255, 255, 255, .08);
}

/* ============ 区块标题 ============ */
.section-title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--text);
    padding: 0 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}
.section-controls { display: flex; align-items: center; gap: 10px; }
.section-controls a {
    font-size: 0.8em;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}
.section-controls a:hover { text-decoration: underline; opacity: 0.8; }

/* ============ 财经日历 ============ */
.calendar-section {
    padding: 18px 20px 12px;
    margin-bottom: 18px;
    animation: fade-up 0.7s ease 0.16s both;
}
.calendar {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 120px;
}
.calendar-day {
    flex: 1;
    flex-basis: 0;
    min-width: 200px;
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.35);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85em;
    min-height: 100px;
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .calendar-day { background: rgba(255, 255, 255, 0.04); }
.calendar-day::-webkit-scrollbar { width: 6px; }
.calendar-day::-webkit-scrollbar-thumb {
    background-color: var(--track-border);
    border-radius: 3px;
}
.calendar-day h4 {
    font-size: 0.92em;
    margin: 2px 0 8px;
    color: var(--text);
    font-weight: 600;
    transition: color 0.3s ease;
}
.calendar-day ul { list-style: none; padding-left: 0; margin: 0; margin-top: auto; flex-grow: 1; }
.calendar-day li { font-size: 0.9em; margin-bottom: 5px; color: var(--text); transition: color 0.3s ease; }
.calendar-day li .tag { padding: 2px 7px; font-size: 0.78em; margin-right: 5px; }
.calendar-day.placeholder {
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    background: transparent;
    transition: color 0.3s ease;
}

/* ============ 主页 · 右侧竖栏（财经日历）+ 行业结构只读卡 ============ */
/* 两栏：左主栏放原有全部区块，右栏只放日历；右栏 sticky 跟随滚动 */
.page--rail {
    max-width: 1280px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-w, 320px);
    gap: 18px;
    align-items: start;
    transition: grid-template-columns 0.26s ease;
}
.page--rail.is-rail-hidden { --rail-w: 46px; }
.page-main { min-width: 0; }
.page-rail { position: sticky; top: 64px; min-width: 0; }

.rail-panel {
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 88px);
}
/* 注意：这里不能再挂 fade-up 之类的入场动画——动画的 opacity 会盖掉
   移动端浮层的 opacity:0（动画优先级高于普通声明），收起状态会失效。 */
.rail-panel__head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; }
.rail-panel__title { font-size: 0.95em; font-weight: 700; color: var(--text); }
.rail-panel__more {
    margin-left: auto; font-size: 0.78em; color: var(--accent);
    text-decoration: none; font-weight: 500;
}
.rail-panel__more:hover { text-decoration: underline; }
.rail-hide {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid var(--divider); border-radius: 50%;
    background: var(--track); color: var(--text-secondary); cursor: pointer; padding: 0;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.rail-hide:hover { color: var(--text); background: var(--row-hover); }

/* 竖排日历：三天纵向堆叠，超过栏高时面板内部滚动 */
.calendar--rail {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.calendar--rail .calendar-day { flex: none; min-width: 0; max-height: none; }
.calendar--rail::-webkit-scrollbar { width: 6px; }
.calendar--rail::-webkit-scrollbar-thumb { background-color: var(--track-border); border-radius: 3px; }

/* 收起后桌面端只留一条竖向窄条，点它展开 */
.rail-show { display: none; }
.page--rail.is-rail-hidden .rail-panel { display: none; }
.page--rail.is-rail-hidden .rail-show {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 46px; padding: 12px 0; border-radius: 14px; cursor: pointer;
    background: var(--card); border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow); color: var(--text-secondary);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    transition: color 0.2s ease;
}
.rail-show:hover { color: var(--accent); }
.rail-show__txt { writing-mode: vertical-rl; font-size: 0.76em; letter-spacing: 0.16em; }
.rail-backdrop { display: none; }

/* 行业结构只读卡（复制全景页行业结构默认「当日占比」视图，去掉一切点击） */
.ind-mini { margin: 16px 0; padding: 16px 18px 12px; }
.ind-mini .section-title { flex-wrap: wrap; gap: 8px; }
.ind-mini-sub {
    font-size: 0.72em; font-weight: 400; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.ind-mini-tree {
    position: relative; height: 300px;
    border-radius: 10px; overflow: hidden; background: var(--track);
}
.ind-mini .legend {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
    font-size: 0.7em; color: var(--text-secondary);
}
.ind-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 16px; text-align: center; font-size: 0.8em; color: var(--text-secondary);
}
/* 树图块：只读 —— 无 cursor:pointer、无 hover 高亮、无选中描边 */
.ind-tile { position: absolute; padding: 1px; box-sizing: border-box; overflow: hidden; cursor: default; }
.ind-tile > div {
    height: 100%; border-radius: 6px; padding: 6px 7px; overflow: hidden; color: #fff;
    display: flex; flex-direction: column; gap: 2px; background: rgba(128, 128, 128, 0.35);
}
.ind-tile .t-n { font-size: 0.78em; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.ind-tile .t-v { font-size: 0.72em; line-height: 1.25; font-variant-numeric: tabular-nums; opacity: 0.95; white-space: nowrap; flex: none; }
.ind-tile .t-s { font-size: 0.64em; line-height: 1.3; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.ind-tile.small > div { padding: 3px 5px; gap: 0; }
.ind-tile.small .t-s { display: none; }
.ind-tile.tiny .t-v { display: none; }
.ind-tile.tiny .t-n { font-size: 0.7em; }
.ind-tile.mini > div { padding: 0; }
.ind-tile.mini .t-n, .ind-tile.mini .t-v { display: none; }

/* 移动端：日历改为浮层 —— 点右下角按钮浮在当前页上，再点收起 */
@media (max-width: 900px) {
    .page--rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .page-rail { position: static; }
    .ind-mini-tree { height: 260px; }
    .page--rail .rail-panel,
    .page--rail.is-rail-hidden .rail-panel {
        display: flex; position: fixed; z-index: 121;
        left: 12px; right: 12px; bottom: 76px;
        max-height: min(64vh, 560px);
        opacity: 0; transform: translateY(14px) scale(0.985); pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    }
    .page--rail:not(.is-rail-hidden) .rail-panel {
        opacity: 1; transform: none; pointer-events: auto;
    }
    /* 移动端按钮始终浮在右下角（含展开态：再点即收起），
       选择器带上 .is-rail-hidden 才能盖掉桌面端竖向窄条那套尺寸 */
    .page--rail .rail-show,
    .page--rail.is-rail-hidden .rail-show {
        display: flex !important; flex-direction: row; align-items: center; gap: 7px;
        position: fixed; right: 14px; bottom: 16px; z-index: 131;
        width: auto; height: 44px; padding: 0 16px; border-radius: 999px;
        font-size: 0.84em; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    }
    .page--rail .rail-show__txt { writing-mode: horizontal-tb; letter-spacing: normal; }
    .page--rail:not(.is-rail-hidden) .rail-backdrop {
        display: block; position: fixed; inset: 0; z-index: 120;
        background: rgba(0, 0, 0, 0.32);
    }
    body.rail-open { overflow: hidden; }
}

/* ============ 标签页（iOS 分段控件） ============ */
.tab-container {
    padding: 6px;
    margin-bottom: 14px;
    width: fit-content;
    animation: fade-up 0.7s ease 0.24s both;
}
.tab-buttons {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}
.tab-button {
    padding: 6px 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85em;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.tab-button:hover { color: var(--text); background: var(--row-hover); }
.tab-button.active {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
    box-shadow: 0 2px 10px var(--accent-soft);
}

.tab-content {
    display: none;
    margin-bottom: 0;
    padding: 1px 0;
    width: 100%;
    box-sizing: border-box;
}
.tab-content.active {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

/* ============ 数据时间戳 ============ */
.all-tab-header {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.data-timestamp {
    font-size: 0.75em;
    border-radius: 999px;
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}
/* 「全部数据」按钮：时间戳在左、按钮靠右 */
.all-tab-header .all-data-btn { margin-left: auto; }

/* ============ 主页 · 转债日线卡（复制全景页 chD，财经日历下方水平展示） ============ */
.cbm-home-daily { margin: 16px 0; }
.cbm-home-daily .section-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cbm-home-daily-sub { font-size: 0.72em; color: var(--text-secondary); font-weight: 400; margin-left: 8px; }
.cbm-home-daily .canvas-wrap { position: relative; height: 200px; margin-top: 8px; }
.cbm-home-daily .note { margin-top: 6px; font-size: 0.78em; color: var(--text-secondary); }

/* ============ 底部转债清单：默认折叠，点标题展开 ============ */
.cb-list-toggle { cursor: pointer; user-select: none; }
.cb-list-toggle::after { content: ' ▸'; color: var(--text-secondary); font-weight: 400; }
.cb-list:not(.collapsed) .cb-list-toggle::after { content: ' ▾'; }
.cb-list-hint { font-size: 0.72em; color: var(--text-secondary); font-weight: 400; margin-left: 8px; }
.cb-list.collapsed table { display: none; }

/* ============ 按钮 ============ */
.all-data-btn {
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    box-shadow: 0 2px 12px var(--accent-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.all-data-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-soft); }
.all-data-btn:active { transform: scale(0.96); }

.refresh-button {
    padding: 7px 16px;
    font-size: 0.85em;
    cursor: pointer;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.refresh-button:hover { transform: translateY(-1px); box-shadow: var(--card-shadow-hover); }
.refresh-button:disabled { opacity: 0.45; cursor: not-allowed; }

.learn-more-btn {
    margin-left: 8px;
    padding: 3px 10px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text);
    transition: background-color 0.2s ease;
}
.learn-more-btn:hover { background: var(--row-hover); }

/* ============ 转债表格区 ============ */
.cb-section {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 8px;
    width: 100%;
    justify-content: center;
    overflow-x: hidden;
}

.other-table-container {
    flex-basis: 49%;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 250px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-right: 10px;
    max-height: 1500px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.etf-table-container h4, .other-table-container h4 {
    text-align: center;
    margin: 14px 0 10px;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text);
    transition: color 0.3s ease;
}

.etf-table,
.reits-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85em;
    table-layout: auto;
}

.etf-table th,
.reits-table th,
.etf-table td,
.reits-table td {
    padding: 9px 8px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--divider);
    transition: color 0.3s ease, background-color 0.2s ease;
}

.etf-table thead,
.reits-table thead {
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--divider);
    position: sticky;
    top: 0;
    z-index: 10;
}
.etf-table thead th,
.reits-table thead th {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--divider);
    padding: 10px 8px;
    font-size: 0.82em;
    transition: background-color 0.3s ease, color 0.3s ease;
}
[data-theme="dark"] .etf-table thead th,
[data-theme="dark"] .reits-table thead th {
    background: rgba(44, 44, 46, 0.72);
}

.etf-table tbody tr:nth-child(even),
.reits-table tbody tr:nth-child(even) {
    background-color: var(--row-stripe);
}
.etf-table tbody tr:hover,
.reits-table tbody tr:hover {
    background-color: var(--row-hover);
}

/* 代码/名称列 */
.etf-table td.code-name,
.reits-table td.code-name {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.etf-table td.code-name .code,
.reits-table td.code-name .code {
    font-weight: 600;
    font-family: Menlo, Monaco, Consolas, "SF Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}
.etf-table td.code-name .name,
.reits-table td.code-name .name {
    font-size: 0.9em;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.clickable-bond {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.clickable-bond:hover {
    background-color: var(--accent-soft) !important;
    border-radius: 6px;
}
.clickable-bond .code,
.clickable-bond .name { color: var(--accent); transition: color 0.3s ease; }
.clickable-bond:hover .code,
.clickable-bond:hover .name { text-decoration: underline; }

/* 数字列 */
.etf-table td:nth-child(3),
.reits-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.etf-table td:nth-child(4),
.etf-table td:nth-child(5),
.reits-table td:nth-child(4),
.reits-table td:nth-child(5) {
    text-align: right;
    font-family: Menlo, Monaco, Consolas, "SF Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.etf-table .positive,
.reits-table .positive { color: var(--up); font-weight: 600; transition: color 0.3s ease; }
.etf-table .negative,
.reits-table .negative { color: var(--down); font-weight: 600; transition: color 0.3s ease; }

.etf-table tbody td[colspan],
.reits-table tbody td[colspan] {
    height: 80px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    background: transparent !important;
}

/* 排序 */
th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
    user-select: none;
}
th.sortable:hover { color: var(--text); }
th.sortable::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.3;
}
th.sort-asc::after {
    border-bottom: 5px solid var(--accent);
    opacity: 1;
}
th.sort-desc::after {
    border-top: 5px solid var(--accent);
    opacity: 1;
}

/* ============ Swiper ============ */
.swiper-container {
    width: 100%;
    overflow: hidden;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    touch-action: pan-y;
}
.swiper-slide .other-table-container { width: 100%; box-sizing: border-box; }
.swiper-pagination { position: relative; margin-top: 10px; }
.swiper-pagination-bullet {
    background: var(--track-border);
    opacity: 0.6;
}
.swiper-pagination-bullet-active {
    background: var(--accent);
    opacity: 1;
}
/* 降级：Swiper 库没加载上时（CDN 宕 / vendor 文件缺失），容器被 JS 打上
   is-no-swiper。把两屏改成纵向堆叠，避免两屏并排挤在一行里互相裁切。 */
.swiper-container.is-no-swiper { overflow: visible; }
.swiper-container.is-no-swiper .swiper-wrapper { display: block; transform: none !important; }
.swiper-container.is-no-swiper .swiper-slide { width: 100%; }

/* ============ 页脚 ============ */
footer {
    border-top: 1px solid var(--divider);
    padding: 16px 0 6px;
    margin-top: 20px;
    text-align: center;
    font-size: 0.75em;
    color: var(--text-secondary);
    transition: color 0.3s ease, border-color 0.3s ease;
}
footer p { margin: 0; }

/* ============ 错误提示 ============ */
.error-message {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--up);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 0.85em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ============ 模态框 ============ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--overlay);
    z-index: 1000;
    opacity: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.3s ease-in-out;
}
.modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--card);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: var(--card-shadow-hover);
    padding: 26px 30px;
    z-index: 1001;
    width: 80%;
    max-width: 650px;
    max-height: 80vh;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.modal-overlay.modal-active,
.modal.modal-active { display: flex; opacity: 1; }
.modal.modal-active { transform: translate(-50%, -50%) scale(1); }

.modal-close-btn {
    position: absolute;
    top: 12px; right: 18px;
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}
.modal-close-btn:hover { color: var(--text); }
.modal h3 {
    margin-top: 0;
    margin-bottom: 18px;
    color: var(--text);
    text-align: center;
    font-size: 1.2em;
    border-bottom: 1px solid var(--divider);
    padding-bottom: 10px;
    flex-shrink: 0;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.modal-content {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px;
    color: var(--text);
    transition: color 0.3s ease;
}
.modal-content ul { list-style: none; padding-left: 5px; margin: 0; }
.modal-content .modal-calendar-day { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.modal-content .modal-calendar-day:last-child { margin-bottom: 0; border-bottom: none; }
.modal-content h5 { font-size: 1em; margin-bottom: 8px; color: var(--text); }
.modal-content li {
    margin-bottom: 8px;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--text);
}
.modal-content .tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.85em;
    margin-right: 8px;
    color: #fff;
    min-width: 40px;
    text-align: center;
    vertical-align: middle;
}
body.modal-open { overflow: hidden; }

/* ============ 标签（国家/地区） ============ */
.tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.85em;
    margin-right: 8px;
    background-color: var(--track-border);
    color: var(--text);
    min-width: 40px;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.tag-cn, .tag[tag="cn"], .tag[tag="china"], .tag[tag="中国"] { background-color: #e5484d; color: #fff; }
.tag-us, .tag[tag="us"], .tag[tag="usa"], .tag[tag="美国"] { background-color: #3b82f6; color: #fff; }
.tag-eu, .tag[tag="eu"], .tag[tag="eur"], .tag[tag="欧元区"] { background-color: #f5a623; color: #333; }
.tag-jp, .tag[tag="jp"], .tag[tag="jpn"], .tag[tag="日本"] { background-color: #8b5cf6; color: #fff; }
.tag-gb, .tag[tag="gb"], .tag[tag="gbp"], .tag[tag="英国"] { background-color: #22a06b; color: #fff; }
.tag-hk, .tag[tag="hk"], .tag[tag="hongkong"], .tag[tag="中国香港"] { background-color: #e5488c; color: #fff; }
.tag-fr, .tag[tag="fr"], .tag[tag="france"], .tag[tag="法国"] { background-color: #7c3aed; color: #fff; }
.tag-de, .tag[tag="de"], .tag[tag="germany"], .tag[tag="德国"] { background-color: #3a3a3c; color: #fff; }
.tag-id, .tag[tag="id"], .tag[tag="indonesia"], .tag[tag="印尼"] { background-color: #e5484d; color: #fff; }
.tag-at, .tag[tag="at"], .tag[tag="austria"], .tag[tag="奥地利"] { background-color: #e5484d; color: #fff; }
.tag-global, .tag[tag="global"], .tag[tag="全球"] { background-color: #8e8e93; color: #fff; }
.tag-default { background-color: #8e8e93; color: #fff; }

/* 重要度 */
.importance-high { color: #ff453a; font-weight: 700; }
.importance-medium { color: #ff9f0a; }
.importance-low { color: var(--text-secondary); font-weight: 400; }

/* ============ 登录/管理面板（共享） ============ */
.admin-panel { padding: 12px 16px; margin-bottom: 12px; }
.admin-panel h3 { font-size: 1.05em; margin-bottom: 10px; color: var(--text); }
.admin-controls { gap: 15px; }
.admin-control-group { padding: 10px; }
.admin-control-group p { margin-bottom: 8px; font-size: 0.9em; color: var(--text-secondary); }
.admin-control-group .refresh-button { padding: 5px 12px; font-size: 0.82em; }
.admin-control-group .data-timestamp { font-size: 0.75em; margin-top: 4px; }

.auth-buttons button { padding: 6px 14px; font-size: 0.82em; }
.auth-buttons .register { background-color: var(--accent); color: var(--accent-contrast); border: none; border-radius: 999px; }
.auth-buttons .register:hover { opacity: 0.9; }
.auth-buttons .login { background-color: var(--down); color: #fff; border: none; border-radius: 999px; }
.auth-buttons .login:hover { opacity: 0.9; }
button.logout {
    background-color: var(--track-border);
    color: var(--text);
    border: none;
    border-radius: 999px;
}
button.logout:hover { background-color: var(--track); }

#login-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--card);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: var(--card-shadow-hover);
    padding: 25px 30px;
    z-index: 1001;
    width: 90%;
    max-width: 400px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#login-modal.modal-active { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
#login-modal h3 {
    margin-top: 0; margin-bottom: 20px;
    color: var(--text);
    text-align: center;
    font-size: 1.25em;
    border-bottom: 1px solid var(--divider);
    padding-bottom: 10px;
}
#login-form label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-secondary); text-align: left; }
#login-form input[type="text"],
#login-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#login-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
#login-form button[type="submit"] {
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
    transition: opacity 0.2s ease;
}
#login-form button[type="submit"]:hover { opacity: 0.9; }
#login-error {
    color: var(--up);
    margin-top: 10px;
    text-align: center;
    font-size: 0.9em;
    min-height: 1.2em;
}

/* ============ 响应式 ============ */
@media (max-width: 768px) {
    .hero { padding: 34px 12px 22px; }
    .hero-title { font-size: 1.9em; }
    .titlebar { gap: 10px; padding: 0 12px; }
    .titlebar-brand .lishu-text { display: none; }
    .cb-section {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        padding-bottom: 10px !important;
        margin: 0 !important;
    }
    .other-table-container {
        flex-basis: 49% !important;
        min-width: 100% !important;
        overflow-y: auto !important;
        position: relative;
    }
    .reits-table, .etf-table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }
    .reits-table th, .etf-table th,
    .reits-table td, .etf-table td {
        font-size: 0.78em !important;
        padding: 6px 4px !important;
    }
    .reits-table thead { position: sticky; top: 0; z-index: 10; }
    .tab-content.active { display: block !important; width: 100% !important; overflow: visible !important; }
    .swiper-slide { touch-action: pan-y !important; }
}

@media (min-width: 769px) {
    .cb-section {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
    }
    /* 两榜单等分一行：去掉 flex-basis 49% + margin-right 10px 造成的溢出（左裁 + 横向滚动条元凶） */
    .cb-section .other-table-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
    /* 7 列压进半宽：收紧单元格内边距 */
    .cb-section .reits-table th,
    .cb-section .reits-table td {
        padding: 7px 5px !important;
        font-size: 0.8em !important;
    }
    .swiper-container,
    .swiper-wrapper,
    .swiper-slide { display: contents !important; }
    .swiper-pagination { display: none !important; }
}

/* ============ 转债首行：左「今日决策」研判栏 + 右温度计（主页，决策漏斗版） ============ */
/* 页面私有类一律 .cbm- 前缀，避免与全站 .tag/.positive/.d 等既有类撞名 */
.cbm-fr {
    display: grid;
    /* 左宽右窄：左列放决策漏斗，右列纵向堆叠三只通栏温度计，多出的宽度给左侧概览 */
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
    margin-bottom: 10px;
    overflow: hidden;
}
.cbm-fr__d { min-width: 0; display: flex; flex-direction: column; gap: 5px;
    padding: 10px 16px 8px; border-right: 1px solid var(--divider); }
.cbm-fr__g { min-width: 0; display: flex; flex-direction: column; align-items: stretch;
    padding: 10px 16px 8px; }
/* 眉题行：左边「市场温度」（数据时间已并入各表盘行内，不再占栏眉） */
.cbm-fr__ghead { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 0; }
/* 眉题对称：左列「今日决策」对应右列「市场温度」 */
.cbm-fr__eyebrow--g { margin-bottom: 0; }
/* 表头右侧：A股活跃度（上涨家数占比，实时）——与「A股温度」（PB 十年分位，日频）
   并列显示，字号压到眉题同级，避免被误读成第二个温度值 */
.cbm-fr__gsub { display: inline-flex; align-items: baseline; gap: 3px;
    font-size: .74em; color: var(--text-secondary); white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.cbm-fr__gsub b { font-weight: 700; color: var(--text); }
.cbm-fr__gsub i { font-style: normal; opacity: .68; margin-left: 3px; }
/* 卡内复用 .gauges：改为纵向堆叠——五只温度计各占一行、铺满列宽，
   按剩余列高均分（space-evenly），把右列的垂直留白变成五条完整温度带 */
.cbm-fr .gauges { flex: 1; flex-direction: column; flex-wrap: nowrap;
    justify-content: space-evenly; gap: 4px 0;
    margin: 0; width: 100%; padding: 0; text-align: left; }
.cbm-fr .gauge { min-width: 0; max-width: none; width: 100%; padding: 0; }
/* 卡内温度计改为横向单行：四列同栏 ——「A股温度」| 温度条 | 数值 | 数据时间。
   轨道两端不再挂「冷/热」刻度（那行文字会把标签和条拆散）。
   .gauge-top 置为 contents，让 label / value 成为各自独立的栅格项。
   对齐约束（三竖线）：温度条右端、数值右沿、数据时间右沿，五行必须落在同一条竖线上。
   - 数值列宽度靠 b 的 min-width:3ch 锁死 → 1/2/3 位数占同样宽，不会把 1fr 的条挤短；
   - 数据时间列定宽 + 右对齐 → 不再留 7em 的白，省下的宽度全部给温度条。
   2026-10-28 晚：韩日两行曾加过第二行「年内 +42.7%」，行高比其余三行高一截、
   条后面的空白也更刺眼，已撤掉 → 列宽从 6.6em 收回 4.6em，五行行高一致。 */
.cbm-fr .gauge {
    display: grid;
    grid-template-columns: minmax(3.4em, auto) minmax(0, 1fr) auto 4.6em;
    grid-template-areas: "label track value asof";
    align-items: center;
    column-gap: 12px;
}
.cbm-fr .gauge-top { display: contents; }
.cbm-fr .gauge-label { grid-area: label; align-self: center; }
.cbm-fr .gauge-track { grid-area: track; align-self: center; height: 12px; }
/* 数值 + 温度词：flex 交叉轴居中 —— 词与数字共中线（原先跟随基线，小字号会视觉下沉） */
.cbm-fr .gauge-value {
    grid-area: value; align-self: center;
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
    font-size: 1.45em; line-height: 1;
}
/* 数字定宽右对齐：3ch = 三个等宽数字，两位数与三位数同宽 */
.cbm-fr .gauge-value b { display: inline-block; min-width: 3ch; text-align: right; }
.cbm-fr .gauge-value .gauge-word { line-height: 1; }
.cbm-fr .gauge-asof { grid-area: asof; align-self: center; width: 100%;
    margin: 0; justify-content: flex-end; text-align: right; }
/* 眉题行：今日决策 + 数据时间 + 两个出口按钮 */
.cbm-fr__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cbm-fr__eyebrow { font-size: .74em; color: var(--text-secondary); letter-spacing: .04em; white-space: nowrap; }
.cbm-fr__pills { margin-left: auto; display: flex; align-items: center; gap: 7px; }
/* 立场徽标（已撤销：首页不再显示风险提示行，规则留档备查，无 DOM 引用） */
/* 一句话大判断（今日盘面 × 估值档）：字号压一档，正文区整体上移 */
.cbm-head { font-size: 1.32em; font-weight: 800; line-height: 1.25; letter-spacing: .01em; }
/* 现状叙事：日内/日线两张图的结论句，各占一行（\n 生效），最多两行 */
.cbm-narr { font-size: .84em; line-height: 1.5; color: var(--text-secondary); margin: -1px 0 0;
    white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 核心指标第一排：全景页 #kpis 的前 5 张（中位价格/中位溢价率/中位双低/中位平价/涨跌平）。
   2026-10-29 换掉原先的三枚 chip（中位溢价/站上MA5/低溢价价带）——
   那三个数信息量窄且与上方判断句重复；换成全景同源的一排，读数逐位一致。 */
.cbm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 10px; }
.cbm-kpi { min-width: 0; }
.cbm-kpi .c-lab { font-size: .7em; color: var(--text-secondary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.cbm-kpi .k-val { font-size: .95em; font-weight: 700; font-variant-numeric: tabular-nums;
    white-space: nowrap; line-height: 1.15; letter-spacing: -.01em; }
.cbm-kpi .k-unit { font-size: .72em; font-weight: 400; opacity: .6; margin-left: 2px; }
.cbm-act { display: flex; gap: 8px; flex-wrap: wrap; }
/* 两个出口提到眉题行右侧（2026-10-29）：原先独占底行、且纵向堆叠两个按钮，
   把决策栏撑到近 200px 高；提到顶行后底边只剩 KPI 一排，信息框上下明显收窄。 */
.cbm-fr__top .cbm-act { margin-left: 0; flex: none; }
.cbm-fr__top .cbm-go { text-align: center; padding: 3px 11px; font-size: .72em; }
/* 无数据态（灰度/停用/急停）：占位文案，布局不塌陷 */
.cbm-empty { font-size: .84em; color: var(--text-secondary); font-style: italic; padding: 2px 0; }
.cbm-up { color: var(--up); }
.cbm-dn { color: var(--down); }
.cbm-flat { color: var(--text-secondary); }
.cbm-ts { font-size: .74em; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft);
    color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbm-ts.stale { background: rgba(255, 159, 10, .16); color: var(--gauge-color-warm); }
.cbm-go { background: var(--accent); color: var(--accent-contrast); border: none; padding: 7px 16px;
    border-radius: 999px; cursor: pointer; font-size: .84em; font-weight: 500; white-space: nowrap;
    text-decoration: none; box-shadow: 0 2px 12px var(--accent-soft);
    transition: transform .2s ease, box-shadow .2s ease; }
.cbm-go:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-soft); }
.cbm-go:active { transform: scale(.96); }
/* 并列两个出口时的次按钮：同尺寸幽灵态，避免两个实心按钮互相抢眼 */
.cbm-go--ghost { background: transparent; color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-soft); }
.cbm-go--ghost:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-soft); }

/* ============ 全球交易时段卡（默认折叠，复用 .cb-list 折叠模式） ============ */
.sessions-card { padding: 12px 20px 10px; margin-bottom: 18px;
    animation: fade-up .7s ease .12s both; }
.sessions-toggle { display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: 0; cursor: pointer; user-select: none;
    font-size: .95em; font-weight: 600; color: var(--text); }
.sessions-summary { font-size: .74em; color: var(--text-secondary); margin: 3px 0 0; }
.sessions-card.collapsed .sessions-body { display: none; }
.sessions-body { margin-top: 10px; }
.sessions-tz { font-size: .72em; color: var(--text-secondary); margin: 0 0 8px; }
.sessions-note { font-size: .7em; color: var(--text-secondary); margin: 8px 0 2px; }
/* 时间轴：每行 = 市场名（固定列）+ 轨道（1fr）；「现在」红线为绝对定位覆盖层 */
.sessions-axis { position: relative; margin-top: 14px; }
.sessions-row { display: grid; grid-template-columns: 2.8em minmax(0, 1fr);
    column-gap: 10px; align-items: center; height: 20px; }
.sessions-label { grid-column: 1; text-align: right; font-size: .72em; color: var(--text); }
.sessions-track { grid-column: 2; position: relative; height: 12px; border-radius: 999px;
    background: var(--gauge-track-bg, rgba(120, 130, 145, .12)); }
.s-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px;
    background: var(--accent); opacity: .85; }
/* 刻度线 + 当前时刻标记：与轨道区左右对齐（标签列 2.8em + 列距 10px） */
.sessions-overlay { position: absolute; left: calc(2.8em + 10px); right: 0; top: 0; bottom: 16px; pointer-events: none; }
.s-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--divider); }
.sessions-now { position: absolute; top: -2px; bottom: 0; width: 2px; background: var(--up); }
.sessions-now b { position: absolute; top: -14px; left: 5px; font-size: 10px; font-weight: 600;
    color: var(--up); white-space: nowrap; font-style: normal; }
/* 轴下时刻标签：与轨道区同起点，首末标签不越界 */
.sessions-ticks { position: relative; height: 14px; margin-left: calc(2.8em + 10px); margin-top: 2px; }
.sessions-ticks span { position: absolute; top: 0; transform: translateX(-50%);
    font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sessions-ticks span:first-child { transform: none; }
.sessions-ticks span:last-child { transform: translateX(-100%); }
/* 窄屏：单列，决策栏排前 —— 先看判断再看温度。
   断点 900 → 1200：内容区宽度 ≈ 视口的 63%（容器 max-width 902），双栏时温度卡只占
   0.92fr ≈ 46%，扣掉「标签+数值+时间+三处间距」≈238px 后留给温度条的只剩个位数。
   实测（2026-10-28）：950px 视口条宽 **0px**、1000px 16px、1024px 27px、1100px 62px
   —— 温度条等于不存在。单列后同一视口下条宽 500px 以上，读得出来。 */
@media (max-width: 1200px) {
    .cbm-fr { grid-template-columns: 1fr; }
    .cbm-fr__d { border-right: none; border-bottom: 1px solid var(--divider); }
}
/* 窄屏：5 列 KPI 挤不下（标签「中位数价格」+数值「127.83元」至少要 ~5.5em），
   改成 3 列换行；再窄则 2 列。 */
@media (max-width: 760px) {
    .cbm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
}
@media (max-width: 460px) {
    .cbm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}