/* ==========================================================================
   迷石 · 运营前台  ——  V3 沙盒视觉语言全量样式表（合并版 V3.1）
   ----------------------------------------------------------------------------
   设计源头  : C:\Projects\mishi_v3_sandbox\public\style.css
   规范依据  : 《前台页面细则.md》 §1 全局 UI 设计体系 / §18 实现细则
   关键支柱  : 深空底色 · 毛玻璃面板 · 霓虹辉光 · 动效呼吸
   废弃声明  : V2 黑蓝极客色板 + JetBrains Mono 字体 永久作废
   合并说明  : 本表 = 老 V3 沙盒精致皮肤  +  V3 审计新增功能（vault 角标 / 底数
              预览面板 / 骨架屏 / 三段优先级标签 / 闭店结余巨号）
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============= 0. 设计 Token (CSS Variables) ============= */
:root {
    /* —— 深空底色 / 面板 —— */
    --bg-main:        #050508;
    --bg-base:        #050508;                    /* legacy alias */
    --bg-panel:       rgba(15, 15, 20, 0.7);
    --bg-panel-deep:  rgba(10, 10, 15, 0.85);
    --bg-panel-modal: rgba(15, 15, 20, 0.95);
    --bg-hover:       rgba(40, 40, 60, 0.5);
    --bg-input:       rgba(0, 0, 0, 0.3);
    --bg-input-focus: rgba(0, 0, 0, 0.5);
    --bg-card-sub:    rgba(0, 0, 0, 0.2);
    --bg-elev1:       rgba(15, 15, 20, 0.65);
    --bg-elev2:       rgba(20, 20, 28, 0.65);
    --bg-elev3:       rgba(28, 28, 38, 0.65);

    /* —— 柔性边框 —— */
    --border-color:    rgba(255, 255, 255, 0.08);
    --border-soft:     rgba(255, 255, 255, 0.05);
    --border-strong:   rgba(255, 255, 255, 0.20);
    --border-line:     rgba(255, 255, 255, 0.10);
    --line:            rgba(255, 255, 255, 0.08); /* legacy alias */
    --line-soft:       rgba(255, 255, 255, 0.05); /* legacy alias */

    /* —— 强调色（V3 SSOT） —— */
    --accent-blue:    #3b82f6;
    --accent-purple:  #8b5cf6;
    --accent-green:   #10b981;
    --accent-orange:  #f59e0b;
    --accent-red:     #ef4444;
    --accent-cyan:    #06b6d4;
    --accent-blue-strong: #2563eb;                /* legacy alias */

    /* —— 文字 —— */
    --text-primary:   #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary:  #64748b;
    --text-disabled:  rgba(255, 255, 255, 0.25);
    --text-main: var(--text-primary);             /* legacy alias */
    --text-mid:  var(--text-secondary);           /* legacy alias */
    --text-dim:  var(--text-tertiary);            /* legacy alias */

    /* —— 毛玻璃强度 —— */
    --glass-blur:        blur(16px);
    --glass-blur-light:  blur(8px);
    --glass-blur-faint:  blur(4px);
    --glass-blur-modal:  blur(10px);

    /* —— 背景辉光 —— */
    --glow-cyan:    rgba(6, 182, 212, 0.20);
    --glow-purple:  rgba(139, 92, 246, 0.20);

    /* —— 状态色辉光 —— */
    --glow-blue:    rgba(59, 130, 246, 0.30);
    --glow-orange:  rgba(245, 158, 11, 0.30);
    --glow-red:     rgba(239, 68, 68, 0.30);
    --glow-green:   rgba(16, 185, 129, 0.30);

    /* —— 布局尺寸 —— */
    --gantt-sidebar-w: 220px;
    --gantt-row-h:     90px;
    --header-h:        80px;

    /* —— 字体 (V3: 统一 Inter；废弃 JetBrains Mono) —— */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-mono: 'Inter', ui-monospace, Menlo, Consolas, monospace;

    /* —— 过渡曲线 —— */
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============= 1. Reset & Base ============= */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

body {
    display: flex;
    flex-direction: column;
}

/* 双焦点径向渐变背景 + 25s 缓慢平移呼吸 */
body::before {
    content: '';
    position: fixed;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background:
        radial-gradient(ellipse at 20% 50%, var(--glow-cyan)   0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--glow-purple) 0%, transparent 50%);
    z-index: -1;
    animation: bgShift 25s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes bgShift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-5%, 5%); }
}

[v-cloak] { display: none !important; }

button {
    font-family: inherit;
    cursor: pointer;
    user-select: none;
}

button:disabled { cursor: not-allowed; }

::selection {
    background: rgba(59, 130, 246, 0.4);
    color: #fff;
}

/* V3.1 §M10 TODO — 项目级建议加 stylelint custom rule 锁住:
   - declaration-property-value-disallowed-list: { "letter-spacing": ["/^0$/"] }
   - color-no-hex (or restrict to var(--*) only)
   防止未来回归到 V2 黑蓝色板 / `letter-spacing: 0` 等已废弃写法。 */

/* ============= 2. 滚动条铁律（V3.1 · 强制可见 10px） =============
   ❌ 之前 6px + 半透明白几乎不可见，用户视觉反馈"完全找不到滚动条"
   ✅ 强制 10px 宽 + 深灰 track + 半白 thumb，hover 加深至 0.6
   全部 !important 覆盖任何下游样式或浏览器默认            */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* ============= 3. Number Input 去 spinner ============= */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
.no-spin           { -moz-appearance: textfield !important; }
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* checkbox / radio 统一蓝色 */
input[type=checkbox],
input[type=radio] {
    accent-color: var(--accent-blue);
    cursor: pointer;
}

/* ============= 4. Toast 全局提示 ============= */
#toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    z-index: 9000;
    background: rgba(16, 185, 129, 0.9);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4);
    transition: opacity 0.3s;
    animation: toast-in 0.25s ease-out;
}

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============= 5. 网络锁屏 (红黑全屏阻断) ============= */
.net-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        radial-gradient(circle at center, rgba(239, 68, 68, 0.25) 0%, #000 70%),
        repeating-linear-gradient(45deg,
            rgba(239, 68, 68, 0.04) 0,
            rgba(239, 68, 68, 0.04) 12px,
            transparent             12px,
            transparent             24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent-red);
    font-family: var(--font-mono);
    user-select: none;
    backdrop-filter: blur(2px);
}

/* ============= 6. Header 顶栏 ============= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: var(--header-h);
    background: rgba(10, 10, 15, 0.65);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
    flex-wrap: wrap;
}

.header-left h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    display: inline-block;
    vertical-align: middle;
}

.brand-logo {
    height: 28px;
    width: auto;
    margin-right: 4px;
    vertical-align: middle;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.sys-time {
    font-size: 18px;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
    letter-spacing: 1px;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ============= 7. 胶囊主操作按钮（新增场次 / 前台交接 大椭圆） ============= */
.btn-add-top,
.btn-finance {
    color: #fff;
    border: none;
    padding: 12px 36px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--easing);
    font-family: inherit;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.btn-add-top {
    background: linear-gradient(135deg, var(--accent-blue) 0%, #1e3a8a 100%);
    box-shadow: 0 4px 15px var(--glow-blue);
}

.btn-finance {
    background: linear-gradient(135deg, var(--accent-purple) 0%, #4c1d95 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-add-top:not(:disabled):hover,
.btn-finance:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

.btn-add-top:not(:disabled):hover { box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5); }
.btn-finance:not(:disabled):hover { box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5); }

.btn-add-top:disabled,
.btn-finance:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* ============= 8. 多前台节点 (vault-card V3 audit) ============= */
.vault-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-color);
    backdrop-filter: var(--glass-blur-faint);
    padding: 8px 12px;
    border-radius: 12px;
    min-width: 140px;
    transition: all 0.25s var(--easing);
}

.vault-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.25);
}

.vault-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vault-card .btn-base {
    width: 100%;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* V3.1 §D3 — "营业中"徽章按钮（替代行内 style，统一调皮肤） */
.vault-open-badge {
    background: rgba(16, 185, 129, 0.10) !important;
    color: var(--accent-green) !important;
    border: 1px solid var(--accent-green) !important;
    cursor: default !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.18);
}

/* "营业中 · X家门店" 绿色徽章 */
.vault-multi-badge {
    background: rgba(16, 185, 129, 0.18);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.5);
    border-radius: 100px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-left: 6px;
    text-shadow: 0 0 6px var(--glow-green);
    vertical-align: middle;
    display: inline-block;
}

/* "⚠ Boss改底" 橙色角标 */
.vault-force-flag {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-orange);
    color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow: 0 0 14px var(--glow-orange);
    z-index: 5;
    cursor: help;
    animation: force-flag-blink 2.4s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes force-flag-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.06); }
}

/* 多门店 hover tooltip */
.vault-tooltip {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-panel-modal);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    backdrop-filter: var(--glass-blur);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
}

.vault-tooltip-row {
    line-height: 1.7;
    color: var(--text-secondary);
}

.vault-tooltip-row + .vault-tooltip-row {
    border-top: 1px dashed var(--border-soft);
    padding-top: 6px;
    margin-top: 6px;
}

.vault-card:hover .vault-tooltip {
    opacity: 1;
}

/* ============= 9. Stat 战报按钮 ============= */
.stat-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 80px;
    backdrop-filter: var(--glass-blur-faint);
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.15);
}

.stat-btn:hover {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.35);
    transform: translateY(-1px);
}

.stat-title {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-mono);
}

/* 战报弹层 */
.stats-popover {
    position: absolute;
    background: var(--bg-panel-modal);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    z-index: 200;
    padding: 24px;
    min-width: 500px;
    backdrop-filter: var(--glass-blur);
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stats-popover table {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
    color: #cbd5e1;
}

.stats-popover th {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-line);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.stats-popover td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}

.stats-popover .total-row td {
    font-weight: 800;
    color: var(--accent-cyan);
    border-top: 2px solid var(--border-line);
}

/* ============= 10. 主区 + 甘特图布局 (V3.1.2 冻结窗格 · 单一滚动容器) =============
   架构铁律（修复 2026-05-11 横向挤压 + 纵向错位）：
   ① .main-content 是唯一滚动容器：纵向 + 横向均由它接管
   ② .gantt-header-row 与 .gantt-body-row 内部不再独立滚动
   ③ .time-axis 与 .gantt-area 上加 min-width: 1200px 阻止挤压
   ④ .sidebar-header 与 .sidebar 用 position: sticky; left: 0 冻结左列
   ⑤ .theme-item 与 .gantt-row 用 !important 锁死 90px 高度 + flex-shrink: 0
      → 左右两列行高必然 1:1 对齐
*/
.main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* 显式高度兜底：即便 flex:1 失败也能有可滚动的容器 */
    height: calc(100vh - var(--header-h));
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}

.gantt-header-row {
    display: flex;
    position: sticky;
    top: 0;
    /* V13 — bumped from 80 to 8000 so the contained 门店选择 dropdown can
       open and float above every Gantt row beneath it. Sticky elements
       create their own stacking context, which was previously trapping
       the dropdown menu below z:auto session blocks under specific scroll
       positions. */
    z-index: 8000;
    background: var(--bg-panel-deep);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-line);
    height: 50px;
    flex-shrink: 0;
    /* 让 header row 跟随 body row 同宽，触发 main-content 横向滚动 */
    min-width: max-content;
    align-items: stretch;
    /* Allow the dropdown menu to overflow the header row vertically. */
    overflow: visible;
}

.sidebar-header {
    width: var(--gantt-sidebar-w);
    flex: 0 0 var(--gantt-sidebar-w);
    border-right: 1px solid var(--border-line);
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 50px;
    overflow: visible;
    /* 冻结左列：水平滚动时表头与侧栏顶部保持在视口左侧 */
    position: sticky;
    left: 0;
    /* V13 — bumped above the local stacking context so the dropdown
       menu paints above the Gantt rows. See .gantt-header-row note. */
    z-index: 8500;
    background: var(--bg-panel-deep);
    backdrop-filter: var(--glass-blur);
}

.gantt-body-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    position: relative;
    align-items: flex-start;            /* 像素对齐铁律：杜绝条形码悬空 */
    min-width: max-content;
}

.sidebar {
    width: var(--gantt-sidebar-w);
    flex: 0 0 var(--gantt-sidebar-w);
    background: rgba(10, 10, 15, 0.85);
    border-right: 1px solid var(--border-soft);
    backdrop-filter: var(--glass-blur-light);
    /* V3.1.2: 取消独立 overflow-y → 由 .main-content 接管纵向滚动，
       与右侧 gantt-area 行高 1:1 同步滚动 */
    overflow: visible;
    /* 冻结左列：水平滚动时侧栏保持在视口左侧 */
    position: sticky;
    left: 0;
    z-index: 60;
}

.gantt-area {
    /* V3.1.2: 给时间轴定下最小宽度，窗口太窄时由外层 .main-content 提供横滚 */
    flex: 1 1 auto;
    min-width: 1200px;
    position: relative;
    display: flex;
    flex-direction: column;
    /* 不再独立 overflow → 滚动归 .main-content 一处统一管 */
    overflow: visible;
}

/* ============= 11. 主题侧栏卡片（高对比 · V3.1.2 行高死锁） ============= */
.theme-item {
    /* V3.1.2: 行高用 !important + flex-shrink:0 + box-sizing 严锁 90px。
       目标：与 .gantt-row 1:1 对齐，禁止文字换行/flex 压缩造成纵向错位 */
    height: var(--gantt-row-h) !important;
    min-height: var(--gantt-row-h) !important;
    max-height: var(--gantt-row-h) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 4px solid transparent;
    transition: all 0.2s var(--easing);
    cursor: pointer;
    overflow: hidden;
}

.theme-item:hover {
    /* V3.1 §D8 — §1.5 hover 三选二: 颜色 + translateY + brightness */
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--accent-blue);
    padding-left: 24px;            /* hover 时整体右移 4px，营造抽屉感 */
    transform: translateY(-1px);   /* §1.5 hover 律动 */
    filter: brightness(1.12);
    box-shadow: inset 4px 0 18px rgba(59, 130, 246, 0.15);
}

.theme-name {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 5px;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-store {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.theme-meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    align-items: center;
}

.theme-price {
    color: var(--accent-green);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}

.theme-duration {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* ============= 12. 时间轴 ============= */
.time-axis {
    /* V3.1.2: 横向不挤压 — 与 .gantt-area 同步 min-width，确保时刻刻度宽松可读 */
    flex: 1 1 auto;
    min-width: 1200px;
    height: 50px;
    position: relative;
}

.time-tick {
    position: absolute;
    bottom: 0;
    height: 35%;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 8px;
    padding-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.next-day-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-orange);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    vertical-align: middle;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

/* ============= 13. 当前时间红线（三角头） ============= */
.now-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-red);
    z-index: 45;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
    transform: translateX(-50%);
    transition: left 1s linear;
}

.now-indicator-head {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--accent-red);
    z-index: 85;
    transform: translateX(-50%);
    transition: left 1s linear;
    filter: drop-shadow(0 -2px 5px rgba(239, 68, 68, 0.8));
}

/* ============= 14. 甘特行 + 场次色块（V3 §1.10 状态色 SSOT） ============= */
.gantt-row {
    /* V3.1.2: 行高死锁 — 与 .theme-item 1:1 像素级对齐 */
    height: var(--gantt-row-h) !important;
    min-height: var(--gantt-row-h) !important;
    max-height: var(--gantt-row-h) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: calc(100% / 15) 100%;
    transition: background 0.3s;
    /* min-width 让一行也撑住时间轴最小宽，配合外层 .main-content 横滚 */
    min-width: 1200px;
}

.gantt-row:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

.block {
    position: absolute;
    height: 56px;
    top: 17px;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.25s var(--easing);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--glass-blur-faint);
}

.block:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.2);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.block-title {
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    font-size: 13px;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.block-info {
    font-size: 11px;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    font-weight: 500;
}

/* 三态着色 (V3 SSOT §1.10) */
.block.waiting {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.9));
    border-left-color: #bfdbfe;
}

.block.playing {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.8), rgba(217, 119, 6, 0.9));
    border-left-color: #fde68a;
}

.block.ended {
    background: linear-gradient(135deg, rgba(30, 30, 35, 0.9), rgba(20, 20, 25, 0.9));
    border-left-color: var(--accent-purple);
    color: #94a3b8;
}

.block.ended .block-title { color: #cbd5e1; }

.block.overlap-warn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.9)) !important;
    border: 2px solid #fca5a5 !important;
    animation: danger-pulse 1.5s infinite;
}

/* §18.2 强制写法：danger-pulse 红色脉冲 */
@keyframes danger-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

/* playing 态 current_stage 跑马灯 */
.block-info.marquee-scroll {
    overflow: hidden;
}

.block-info.marquee-scroll span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 14s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ============= 15. Hover Tooltip ============= */
.hover-tooltip {
    position: fixed;
    transform: translate(-50%, -100%);
    background: rgba(15, 15, 25, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(6, 182, 212, 0.30);
    border-radius: 8px;
    padding: 8px 14px;
    z-index: 1500;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(6, 182, 212, 0.10);
    max-width: 240px;
    white-space: nowrap;
}

/* ============= 16. Modal Overlay + Content ============= */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: var(--glass-blur-modal);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: overlay-in 0.2s ease-out;
}

@keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    background: var(--bg-panel-modal);
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 32px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
    position: relative;
    animation: modal-in 0.22s var(--easing);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ============= 17. Popover (场次操作) ============= */
.popover {
    position: absolute;
    background: var(--bg-panel-modal);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    z-index: 200;
    width: 280px;
    backdrop-filter: var(--glass-blur);
}

/* ============= 18. 通用按钮 ============= */
.btn-base {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s var(--easing);
    font-size: 14px;
    font-family: inherit;
}

.btn-submit {
    background: linear-gradient(135deg, var(--accent-blue), #4f46e5);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-submit:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.btn-base:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* "开店" 节点专用 — 亮青绿渐变（老版"bright cyan"feel） */
.btn-open-vault {
    background: linear-gradient(135deg, #00b4db, #0083b0) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 180, 219, 0.35);
}

.btn-open-vault:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
    box-shadow: 0 8px 25px rgba(0, 180, 219, 0.55);
}

/* ============= 19. 表单 section ============= */
.new-form-section {
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    padding: 20px;
    margin-bottom: 20px;
    background: var(--bg-card-sub);
}

.new-form-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    border-left: 4px solid var(--accent-cyan);
    padding-left: 12px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.grid-2col { display: grid; grid-template-columns: 1fr 1fr;        gap: 20px; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ============= 20. Input + Select (黑玻璃) ============= */
.input-dark {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

.input-dark::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.input-dark:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
    background: var(--bg-input-focus);
}

.input-dark:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

select.input-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--accent-cyan) 50%),
        linear-gradient(135deg, var(--accent-cyan) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
}

select.input-dark option {
    background: #0d0d11;
    color: #fff;
}

/*
 * V13 — multiline contact_phone textarea. Shared sessions can carry 4–8
 * players' phone numbers; the single-line input let long strings overflow
 * past the form column. word-break + pre-wrap keep every number visible
 * without clipping; resize:vertical lets the operator expand if needed.
 */
textarea.input-dark.contact-phone-textarea {
    word-break: break-all;
    white-space: pre-wrap;
    resize: vertical;
    min-height: 48px;
    line-height: 1.5;
    font-family: var(--font-mono, monospace);
}

/*
 * V13 — past-hour / past-minute hint on the time-selector dropdowns.
 * Options stay selectable (operators can backdate a session when needed)
 * but the option text dims to 40% so the operator can tell at a glance
 * which slots are in the past.
 */
.input-dark option.past-hour {
    opacity: 0.4;
    color: var(--text-tertiary, #777);
}

/* ============= 21. 自定义下拉 (custom-dropdown) ============= */
/*
 * V13 z-index fix — the menu used to render BEHIND Gantt rows because the
 * .sidebar-header stacking context (z:100) trapped the dropdown's local
 * z:999. We give the dropdown its own root-level stacking context so the
 * absolute-positioned panel can escape the sidebar-header bounds and
 * paint above every Gantt row beneath it.
 */
.custom-dropdown {
    position: relative;
    display: block;
    width: 100%;
    z-index: 9000;
}

.dropdown-btn {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    backdrop-filter: var(--glass-blur-faint);
}

.dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
}

.dropdown-content {
    display: none;
    position: absolute;
    background: rgba(20, 20, 25, 0.95);
    min-width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    top: 100%;
    margin-top: 8px;
    z-index: 9999;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
}

.dropdown-content.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.dropdown-content label {
    display: block;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #cbd5e1;
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.2s;
}

.dropdown-content label:last-child { border-bottom: none; }

.dropdown-content label:hover {
    background: rgba(59, 130, 246, 0.20);
    color: #fff;
}

/* ============= 22. 异常退款 (refund) ============= */
.refund-box {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}

.refund-title {
    color: var(--accent-red);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.refund-box.refund-active {
    border-color: rgba(239, 68, 68, 0.70) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
    animation: refundPulse 2s ease-in-out infinite;
}

@keyframes refundPulse {
    0%, 100% { border-color: rgba(239, 68, 68, 0.70); box-shadow: 0 0 20px rgba(239, 68, 68, 0.15); }
    50%      { border-color: rgba(239, 68, 68, 1);    box-shadow: 0 0 35px rgba(239, 68, 68, 0.30); }
}

/* V3.1 §M6 — 已删除孤立的 .refund-list / .refund-item / .refund-info 三组 CSS。
   异常退款明细在前台交接弹窗的"今日进账"区由 .finRefundDetails 内联渲染（index.html 第 740 行附近），
   不再需要独立的 list 类。如未来需要历史退款列表，重新引入即可。 */

/* 占位以保持后续 .refund-info 等可能引用稳定 — 实际无样式生效 */
.refund-list-placeholder {
    /* intentionally empty — see §M6 above */
}

/* ============= 23. 汇总预览 ============= */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card-sub);
}

.sum-cell {
    padding: 16px 20px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.sum-cell:hover { background: rgba(255, 255, 255, 0.02); }
.sum-cell:nth-child(3n) { border-right: none; }

.sum-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.sum-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.sum-value.blue   { color: var(--accent-cyan);   text-shadow: 0 0 8px rgba(6, 182, 212, 0.30); }
.sum-value.orange { color: var(--accent-orange); text-shadow: 0 0 8px rgba(245, 158, 11, 0.30); }

.sum-final {
    grid-column: span 3;
    padding: 24px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.05));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sum-final .label {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-green);
    letter-spacing: 0.5px;
}

.sum-final .value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-green);
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.40);
    letter-spacing: 1px;
}

/* ============= 24. 前台交接弹窗 V2 (Finance Modal) ============= */
.finance-modal-content {
    max-width: 1080px;
    padding: 0;
    background: rgba(10, 10, 15, 0.95);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    width: 95%;
    max-height: 92vh;
    border-radius: 20px;
}

/* 算式流 - 备用金底数死锁巨号 */
.math-base-val {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
    user-select: none;
    pointer-events: none;        /* 死锁不可点击 / 选中 */
    text-shadow: 0 0 14px currentColor;
    opacity: 0.96;
    line-height: 1.2;
    padding: 4px 0;
}

/* V3 audit · 闭店结余巨号（绿色霓虹） */
.math-final-val {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 900;
    color: var(--accent-green);
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    letter-spacing: 1px;
    margin-top: 10px;
    line-height: 1.2;
}

/* 算式连接符 ➕ ➖ 🟰 */
.math-op-divider {
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    margin: 6px 0;
    letter-spacing: 4px;
    text-shadow: 0 0 14px currentColor;
    user-select: none;
    animation: op-breathe 2.4s ease-in-out infinite;
}

@keyframes op-breathe {
    0%, 100% { opacity: 0.80; transform: scale(1);    }
    50%      { opacity: 1;    transform: scale(1.06); }
}

/* 钱弹窗内输入 focus 改为青色光圈（区别于场次编辑的蓝色） */
.finance-modal-content .input-dark:focus,
.modal-content .refund-box .input-dark:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
}

/* ============= 25. 警报弹窗动画 (异常终止 / 游戏结束 / 强力校准) ============= */
@keyframes danger-pulse-modal {
    0%, 100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.50), 0 0 0 1px rgba(239, 68, 68, 0.30); }
    50%      { box-shadow: 0 0 60px rgba(239, 68, 68, 0.85), 0 0 0 2px rgba(239, 68, 68, 0.65); }
}

@keyframes success-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.35); }
    50%      { box-shadow: 0 0 60px rgba(16, 185, 129, 0.65); }
}

/* ============= 26. V3 audit · 备用金底数预览面板（开店弹窗 §7.4） ============= */
.base-preview-panel {
    background: rgba(20, 20, 25, 0.65);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 18px 0;
    backdrop-filter: var(--glass-blur-light);
}

.base-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.base-preview-source {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 100px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* V12.2 §SSOT — source 标签三档 */
.base-preview-source.synced {
    background: rgba(59, 130, 246, 0.18);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.4);
    text-shadow: 0 0 6px var(--glow-blue);
}

.base-preview-source.boss-set {
    background: rgba(245, 158, 11, 0.18);
    color: var(--accent-orange);
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 12px var(--glow-orange);
}

.base-preview-source.initial {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.base-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.base-preview-cell {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 16px;
}

.base-preview-cell-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.base-preview-cell-value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 900;
    color: var(--accent-green);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    letter-spacing: 0.5px;
}

.base-preview-help {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 12px;
    line-height: 1.7;
    border-top: 1px dashed var(--border-soft);
    padding-top: 10px;
}

/* ============= 27. V3 audit · 骨架屏 / 加载态 ============= */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
    text-shadow: none !important;
    user-select: none;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

.skeleton-line {
    display: inline-block;
    height: 1em;
    min-width: 60px;
    border-radius: 4px;
    vertical-align: middle;
}

.skeleton-block {
    display: block;
    height: 32px;
    width: 100%;
    border-radius: 6px;
}

.loading-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.loading-chip::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-cyan);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============= 28. 杂项 / 工具类 ============= */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 最末主题 / 最末甘特行底部对齐铁律 */
.theme-item:last-child,
.gantt-row:last-child {
    border-bottom: 1px solid var(--border-soft);
}

/* 普通按钮（btn-base 内联状态色按钮）通用 hover 反馈 */
.btn-base:not(:disabled):hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

/* ============= 29. 响应式守门 ============= */
@media (max-width: 1280px) {
    .header           { padding: 0 16px; }
    .header-center    { gap: 12px; }
    .btn-add-top,
    .btn-finance      { padding: 10px 24px; font-size: 13px; }
    .stat-btn         { min-width: 64px; padding: 6px 12px; }
    .stat-val         { font-size: 14px; }
    .stats-popover    { min-width: 380px; }
    .vault-card       { min-width: 120px; padding: 6px 10px; }
    :root {
        --gantt-sidebar-w: 200px;
        --gantt-row-h:     80px;
        --header-h:        72px;
    }
}

@media (max-width: 1024px) {
    .header-left h1 { font-size: 18px; }
    .sys-time       { font-size: 14px; }
}

/* ============= 30. 打印态屏蔽（防止误触打印浏览器快捷键） ============= */
@media print {
    body::before,
    .stats-popover,
    .popover,
    .hover-tooltip,
    .modal-overlay { display: none !important; }
}

/* ============= 31. 资金核对弹窗 · Step 2 对账表 ============= */
.recon-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.recon-table th {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.recon-table td {
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
}
.recon-table td:first-child {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 1px;
}
.recon-table td:last-child {
    font-weight: 900;
}