/* ============================================================
   生命科研数据伪造检测工具 - Clean Modern Theme
   ============================================================ */

:root {
    /* 主色与状态色 */
    --primary:        #409EFF;
    --primary-light:  #66b1ff;
    --primary-dark:   #337ECC;
    --success:        #67C23A;
    --warning:        #E6A23C;
    --danger:         #F56C6C;
    --info:           #909399;

    /* 文字 */
    --text-primary:   #303133;
    --text-regular:   #606266;
    --text-secondary: #909399;
    --text-placeholder:#C0C4CC;

    /* 边框 */
    --border-color:   #DCDFE6;
    --border-light:   #E4E7ED;
    --border-lighter: #EBEEF5;
    --border-extra:   #F2F6FC;

    /* 背景 */
    --bg-color:       #FFFFFF;
    --bg-page:        #F5F7FA;
    --bg-soft:        #FAFBFC;

    /* 检测器主题色 */
    --hl-exact:       #FF6B6B;     /* 红 数值完全相等 */
    --hl-digit:       #FFA500;     /* 橙 尾数位数相等 */
    --hl-offset:      #9B59B6;     /* 紫 批量同样加权 */
    --hl-preference:  #00897B;     /* 青 尾数偏好异常 */
    --hl-scaling:     #795548;     /* 棕 数据缩放比例 */
    --hl-variance:    #0D47A1;     /* 蓝 方差异常 */

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    --font-mono: "SF Mono", "Consolas", "Monaco", "Courier New", monospace;

    /* 圆角 */
    --radius-sm: 2px;
    --radius:    4px;
    --radius-lg: 6px;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 隐藏旧 grain 节点（HTML 中已移除，但兼容残留） */
.grain { display: none; }

/* ===== Stage ===== */
.stage {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 16px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* ===== Upload ===== */
.upload-area {
    animation: fade-in 0.4s ease both;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.upload-shell {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.upload-index {
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-regular);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-lighter);
}
.upload-drop {
    padding: 56px 40px;
    margin: 20px;
    text-align: center;
    background: var(--bg-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
    cursor: pointer;
}
.upload-drop:hover,
.upload-drop.drag-over {
    border-color: var(--primary);
    background: rgba(64, 158, 255, 0.04);
}
.upload-glyph {
    color: var(--text-secondary);
    margin-bottom: 20px;
    transition: color 0.25s ease;
}
.upload-drop:hover .upload-glyph,
.upload-drop.drag-over .upload-glyph {
    color: var(--primary);
}
.upload-title {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 10px;
    color: var(--text-primary);
    letter-spacing: 0;
}
.upload-title em {
    font-style: normal;
    color: var(--primary);
}
.upload-hint {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--text-regular);
}
.upload-link {
    color: var(--primary);
    cursor: pointer;
    transition: color 0.2s ease;
}
.upload-link:hover { color: var(--primary-light); }
.upload-foot {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}
.dotsep {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-placeholder);
}

/* 检测算法介绍面板（位于上传区下方） */
.upload-algos {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.algos-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 24px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-lighter);
}
.algos-index {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-regular);
}
.algos-sub {
    font-size: 12px;
    color: var(--text-secondary);
}
.algos-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
}
.aside-block {
    background: var(--bg-color);
    border: 1px solid var(--border-lighter);
    border-left: 3px solid var(--info);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.aside-block:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.algos-grid .aside-block:nth-child(1) { border-left-color: var(--hl-exact); }
.algos-grid .aside-block:nth-child(2) { border-left-color: var(--hl-digit); }
.algos-grid .aside-block:nth-child(3) { border-left-color: var(--hl-offset); }
.algos-grid .aside-block:nth-child(4) { border-left-color: var(--hl-preference); }
.algos-grid .aside-block:nth-child(5) { border-left-color: var(--hl-scaling); }
.algos-grid .aside-block:nth-child(6) { border-left-color: var(--hl-variance); }
.aside-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}
.aside-text {
    font-size: 14px;
    margin-top: 4px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ===== Workspace ===== */
.workspace {
    animation: fade-in 0.35s ease both;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.workspace-head {
    flex: none;
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 10px;
}
.ws-meta { display: flex; align-items: baseline; gap: 16px; }
.ws-index {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}
.ws-filename {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}
/* 工具名称标题（与官网 stlwcc.cn/ywyc 完全一致） */
.title_info {
    display: flex;
    justify-content: center;
    padding: 18px 0 4px;
}
.title_content {
    font-size: 26px;
    font-family: 微软雅黑, sans-serif;
    font-weight: 700;
    color: rgb(51, 51, 51);
    margin: 0 15px;
}
.title_img {
    width: 124px;
    height: 9px;
    align-self: center;
}
.ghost-btn {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-regular);
    font-family: var(--font-family);
    font-size: 13px;
    padding: 7px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ghost-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(64, 158, 255, 0.04);
}

/* ===== Sheet Tabs ===== */
.sheet-tabs {
    flex: none;
    display: flex; gap: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-lighter);
    background: var(--bg-color);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.sheet-tab {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-regular);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.sheet-tab:hover {
    color: var(--primary);
}
.sheet-tab .tab-index {
    font-size: 11px;
    color: var(--text-secondary);
    margin-right: 6px;
    font-weight: 500;
}
.sheet-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 500;
}
.sheet-tab.active .tab-index { color: var(--primary); }

/* ===== Toolbar ===== */
.toolbar {
    flex: none;
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-top: 10px;
    margin-bottom: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.toolbar-label {
    align-self: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding-right: 12px;
    border-right: 1px solid var(--border-lighter);
    margin-right: 4px;
}

.detect-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.detect-btn .btn-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.detect-btn .btn-name { font-size: 13px; }
.detect-btn .btn-code {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    color: var(--text-secondary);
}
.detect-btn .btn-badge {
    color: #E53935;
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
    min-width: 0;
}
.detect-btn .btn-badge:empty {
    display: none;
}

/* 各检测器各自配色 - 默认（白底 + 彩色文字 + 彩色边框） */
.detect-btn[data-tone="exact"]      { color: var(--hl-exact);      border-color: var(--hl-exact); }
.detect-btn[data-tone="digit"]      { color: var(--hl-digit);      border-color: var(--hl-digit); }
.detect-btn[data-tone="offset"]     { color: var(--hl-offset);     border-color: var(--hl-offset); }
.detect-btn[data-tone="preference"] { color: var(--hl-preference); border-color: var(--hl-preference); }
.detect-btn[data-tone="scaling"]    { color: var(--hl-scaling);    border-color: var(--hl-scaling); }
.detect-btn[data-tone="variance"]   { color: var(--hl-variance);   border-color: var(--hl-variance); }

.detect-btn[data-tone="exact"] .btn-num,
.detect-btn[data-tone="digit"] .btn-num,
.detect-btn[data-tone="offset"] .btn-num,
.detect-btn[data-tone="preference"] .btn-num,
.detect-btn[data-tone="scaling"] .btn-num { color: currentColor; opacity: 0.7; }
.detect-btn[data-tone="variance"] .btn-num { color: currentColor; opacity: 0.7; }

.detect-btn[data-tone="exact"] .btn-code      { background: rgba(255, 107, 107, 0.10); color: var(--hl-exact); }
.detect-btn[data-tone="digit"] .btn-code      { background: rgba(255, 165, 0,   0.10); color: var(--hl-digit); }
.detect-btn[data-tone="offset"] .btn-code     { background: rgba(155, 89, 182,  0.10); color: var(--hl-offset); }
.detect-btn[data-tone="preference"] .btn-code { background: rgba(0, 137, 123,   0.10); color: var(--hl-preference); }
.detect-btn[data-tone="scaling"] .btn-code    { background: rgba(121, 85, 72,   0.10); color: var(--hl-scaling); }
.detect-btn[data-tone="variance"] .btn-code   { background: rgba(13, 71, 161,   0.10); color: var(--hl-variance); }

/* hover - 填充色 + 白字 */
.detect-btn:hover { color: #fff; box-shadow: var(--shadow-sm); }
.detect-btn[data-tone="exact"]:hover      { background: var(--hl-exact); }
.detect-btn[data-tone="digit"]:hover      { background: var(--hl-digit); }
.detect-btn[data-tone="offset"]:hover     { background: var(--hl-offset); }
.detect-btn[data-tone="preference"]:hover { background: var(--hl-preference); }
.detect-btn[data-tone="scaling"]:hover    { background: var(--hl-scaling); }
.detect-btn[data-tone="variance"]:hover   { background: var(--hl-variance); }
.detect-btn:hover .btn-num,
.detect-btn:hover .btn-code {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.18);
}

/* active（选中态）- 加深色 */
.detect-btn.active { color: #fff; box-shadow: var(--shadow); }
.detect-btn[data-tone="exact"].active      { background: #e85555; border-color: #e85555; }
.detect-btn[data-tone="digit"].active      { background: #e08e00; border-color: #e08e00; }
.detect-btn[data-tone="offset"].active     { background: #844aa0; border-color: #844aa0; }
.detect-btn[data-tone="preference"].active { background: #006e64; border-color: #006e64; }
.detect-btn[data-tone="scaling"].active    { background: #5d4037; border-color: #5d4037; }
.detect-btn[data-tone="variance"].active   { background: #0a3a85; border-color: #0a3a85; }
.detect-btn.active .btn-num,
.detect-btn.active .btn-code {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.18);
}

.toolbar-counter {
    align-self: center; margin-left: auto;
    font-size: 13px;
    color: var(--text-regular);
}
.toolbar-counter .count { color: var(--primary); font-weight: 600; }

/* ===== Groups Info ===== */
.groups-info {
    flex: none;
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 10px;
}
.group-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 8px;
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text-regular);
}
.group-chip .chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
}
.group-chip .chip-name { color: var(--text-primary); font-weight: 500; }
.group-chip .chip-range {
    color: var(--text-secondary);
    border-left: 1px solid var(--border-lighter);
    padding-left: 8px;
}

/* ===== Table ===== */
.table-container {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.table-empty {
    padding: 80px 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 表格容器水印覆盖层（「深瞳查重」斜向重复背景）
   - 覆盖整个表格容器区域，随容器滚动一同滚动（absolute 默认必要填满，且不影响表格高度）
   - pointer-events:none 保证不阻断单元格交互
   - z-index 高于单元格，不阻断交互（pointer-events:none） */
.watermark-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background-repeat: repeat;
    background-position: 0 0;
}

.xl-table {
    /* 使用 separate + border-spacing:0 而非 collapse：
       collapse 模式下相邻 td 的 box-shadow inset 会被合并的边框遮挡，
       导致相邻匹配组（左 底色A + 右 顶色B）的双色边框不可见。
       separate 让每个 td 的 box-shadow 独立渲染，相邻处可叠加显示。*/
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-color);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
}
.xl-table td, .xl-table th {
    /* 仅设右/下边框，避免相邻 td 在 separate 模式下产生 2px 重线；
       首行/首列另行加 top/left 边框以构成完整网格。
       依赖全局 box-sizing:border-box + 显式 height 锁定单元格高度，
       高亮态切到 3px 实色边框时不会引起整行高度变化，
       从而避免 hover 触发的高度抖动传导到匹配组按钮面板。*/
    border-right: 1px solid var(--border-lighter);
    border-bottom: 1px solid var(--border-lighter);
    padding: 2px 6px;
    background: var(--bg-color);
    white-space: nowrap;
    vertical-align: middle;
    min-width: 48px;
    height: 20px;
}

/* Column header row (A, B, C…) */
.xl-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg-page);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--border-color);
    border-right-color: var(--border-color);
    border-bottom-color: var(--border-color);
}
/* 首列补左边框（row-head 与 thead 第一格） */
.xl-table tbody tr td:first-child,
.xl-table thead tr th:first-child {
    border-left: 1px solid var(--border-color);
}
.xl-table thead th::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: var(--border-color);
}

/* Row number column */
.xl-table td.row-head, .xl-table th.row-head {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-page);
    color: var(--text-regular);
    font-weight: 600;
    text-align: center;
    min-width: 40px;
    border-right: 1px solid var(--border-color);
}
.xl-table td.row-head::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: -1px;
    width: 1px; background: var(--border-color);
}

/* Top-left corner */
.xl-table thead th.corner {
    position: sticky; top: 0; left: 0; z-index: 4;
    background: var(--bg-page);
    border-color: var(--border-color);
}

/* Cell variants */
.xl-table td.is-num { text-align: right; }
.xl-table td.is-text { text-align: left; }
.xl-table td.is-empty { background: var(--bg-soft); }

/* 匹配高亮竖线：用伪元素绘制，避免 border 角落渐变导致不可见 */
.xl-table td.hl-border-left,
.xl-table td.hl-border-right {
    position: relative;
}
.xl-table td.hl-border-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hl-left-color, #FF6B6B);
    pointer-events: none;
    z-index: 1;
}
.xl-table td.hl-border-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hl-right-color, #FF6B6B);
    pointer-events: none;
    z-index: 1;
}

/* Group borders - overlay class added per side, unified green.
   不使用 !important，以便 inline style 的高亮边框可以覆盖。
   使用高特异性选择器确保优先于默认 td 边框。
   设计原则：算法激活时仍保留绿色数据组边界，算法的 inline border 因
   优先级（inline > class）天然覆盖；未被算法绘制的边界继续显示绿色，
   保证数据组边界（如列L=STAT3i起始列）在任何状态下都清晰可见。*/
.xl-table td.grp-top    { border-top:    2px solid #28a745; }
.xl-table td.grp-bottom { border-bottom: 2px solid #28a745; }
.xl-table td.grp-left   { border-left:   2px solid #28a745; }
.xl-table td.grp-right  { border-right:  2px solid #28a745; }

/* 规范5：悬停某个匹配组按钮时，整体隐藏数据组绿边框，
   让用户视觉聚焦在该匹配组的算法着色上。
   匹配组单元格的 inline border（3px solid color）由更高优先级的
   inline style 直接覆盖，因此目标组依然可见。*/
.has-active-highlights .xl-table td.grp-top    { border-top-color:    transparent; }
.has-active-highlights .xl-table td.grp-bottom { border-bottom-color: transparent; }
.has-active-highlights .xl-table td.grp-left   { border-left-color:   transparent; }
.has-active-highlights .xl-table td.grp-right  { border-right-color: transparent; }

/* Highlights - background-color applied via inline style from API response */
.highlight-exact  { color: #1a0808; font-weight: 600; }
.highlight-digit  { color: #1a1100; font-weight: 600; }
.highlight-offset { color: #fff; font-weight: 600; }

/* Digit-level highlight (tail digit matching) */
.digit-highlight {
    display: inline;
    border-radius: 2px;
    padding: 0 2px;
    font-weight: bold;
}

/* ===== Loading ===== */
.loading-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.loading-card {
    padding: 32px 44px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.spinner {
    display: inline-grid;
    grid-template-columns: repeat(2, 12px);
    grid-template-rows: repeat(2, 12px);
    gap: 4px;
    margin-bottom: 16px;
}
.spinner span {
    display: block; width: 12px; height: 12px;
    border-radius: 2px;
    background: var(--primary);
    animation: blink 1.2s infinite ease-in-out;
}
.spinner span:nth-child(1) { background: var(--hl-exact);   animation-delay: 0s; }
.spinner span:nth-child(2) { background: var(--hl-digit);   animation-delay: 0.15s; }
.spinner span:nth-child(3) { background: var(--primary);    animation-delay: 0.45s; }
.spinner span:nth-child(4) { background: var(--hl-offset);  animation-delay: 0.3s; }
.loading-text {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}
.loading-text .dots i {
    display: inline-block;
    animation: dot-bounce 1.4s infinite ease-in-out;
    font-style: normal;
}
.loading-text .dots i:nth-child(2) { animation-delay: 0.15s; }
.loading-text .dots i:nth-child(3) { animation-delay: 0.3s; }
.loading-sub {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* ===== Footer ===== */
.site-foot {
    flex: none;
    position: relative;
    background: var(--bg-page);
    border-top: 1px solid var(--border-lighter);
    padding: 10px 32px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== Toast ===== */
.toast {
    position: fixed; left: 50%; bottom: 32px;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 18px;
    background: var(--text-primary);
    color: #fff;
    font-size: 13px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
.toast.error { background: var(--danger); }

/* ===== Animations ===== */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1); }
}
@keyframes dot-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-4px); }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .stage { padding: 16px 16px 12px; }
    .algos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toolbar-counter { width: 100%; margin-left: 0; }
    .site-foot { padding: 10px 16px; }
}

/* Scrollbars */
.table-container::-webkit-scrollbar { width: 10px; height: 10px; }
.table-container::-webkit-scrollbar-track { background: var(--bg-page); }
.table-container::-webkit-scrollbar-thumb {
    background: #C0C4CC;
    border: 2px solid var(--bg-page);
    border-radius: 5px;
}
.table-container::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ===== Match Groups Panel ===== */
#match-groups-panel {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    margin-top: 8px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    max-height: 88px;
    overflow-y: auto;
}

.match-groups-label {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-regular);
    margin-right: 8px;
}

#match-groups-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 无命中时的占位提示：在匹配组列表区域居中显示「未检测到」。
   width:100% 确保在 flex-wrap 容器中独占一行；
   V2 布局下父级 flex-direction:column 时同样可水平居中。*/
.no-match-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.match-group-btn {
    padding: 4px 10px;
    /* 用 transparent border 预留空间，hover 时仅替换颜色——
       避免 hover 改变盒模型尺寸导致按钮位置位移，
       配合 box-shadow 反馈，hover 不再抖动。*/
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    /* 组内检测的 group_pair 文本可能较长（如 "A5:C5 = D5:F5 = G5:I5 (组)"），
       通过 max-width + ellipsis 控制按钮长度，完整文本通过 title 显示。*/
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 500;
    box-sizing: border-box;
    /* 让按钮成为稳定渲染层，避免父级布局回流影响 */
    will-change: box-shadow;
}

/* hover 态：在彩色按钮上需要"白边 + 黑环"双重描边才能在任意背景色下清晰可见。
   - border-color 切换到亮白：与按钮内底色形成第一层对比
   - box-shadow 多层叠加：外层黑环 + 外层白环 + 升起阴影，构造"漂浮+聚焦"
   - inset 5px 0 0 白色：左侧亮条，类似检测器卡片的指示条
   - 不使用 transform，沿用既有规范避免 enter/leave 循环 */
.match-group-btn:hover {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.65),
        0 0 0 4px rgba(255, 255, 255, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 5px 0 0 rgba(255, 255, 255, 0.95);
}

/* 锁定态：按钮被点击锁定后呈现"按下/激活"视觉：
   - 双层环形描边（黑环 3px + 白环 5px）形成强烈外发光轮廓
   - 模糊外阴影 22px 制造"被选中"的离散感，与未锁定按钮拉开距离
   - inset 双层光泽 + 顶部按下阴影，保留物理按下的厚重感
   - ▍ 标识保留并放大，叠加文字深色阴影确保任意底色下都可读 */
.match-group-btn.locked {
    border-color: #fff;
    box-shadow:
        0 0 0 3px #111,
        0 0 0 5px rgba(255, 255, 255, 0.88),
        0 0 22px 2px rgba(0, 0, 0, 0.45),
        inset 0 0 0 2px rgba(255, 255, 255, 0.62),
        inset 0 2px 6px rgba(0, 0, 0, 0.42);
    padding-left: 24px;
    font-weight: 700;
    letter-spacing: 0.03em;
    position: relative;
    cursor: pointer;
}

.match-group-btn.locked::before {
    content: "▍";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 14px;
    line-height: 1;
    color: #fff;
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.85),
        0 0 2px rgba(0, 0, 0, 0.95);
    pointer-events: none;
}

/* 锁定 + hover：在锁定的双层环上再叠一层更亮的白环，让"已锁定的当前焦点"
   依然能与"已锁定但非焦点"区分，外阴影同步加深加大。 */
.match-group-btn.locked:hover {
    border-color: #fff;
    box-shadow:
        0 0 0 3px #111,
        0 0 0 6px rgba(255, 255, 255, 0.98),
        0 0 28px 3px rgba(0, 0, 0, 0.55),
        inset 0 0 0 2px rgba(255, 255, 255, 0.75),
        inset 0 2px 6px rgba(0, 0, 0, 0.42);
}

/* ===== V2 Layout: 右侧面板模式 ===== */
.layout-v2 .upload-area {
  display: grid;
  /* 右列改为固定 220px 像素宽度，宽屏时左侧拖放框可获得更多空间 */
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 12px;
  align-items: stretch;
}
.layout-v2 .upload-area > .upload-index {
  grid-column: 1 / -1;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* 标题独立成行，去除原本与 shell 共用时的底边线 */
  border-bottom: 1px solid var(--border-color);
}
.layout-v2 .upload-left {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.layout-v2 .upload-right {
  grid-column: 2;
  grid-row: 2;
  width: 220px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.layout-v2 .upload-right .detect-btn {
  width: 100%;
  /* 按钮全宽竖排 */
}

.layout-v2 .stage {
  /* 让 stage 自身填满可用高度 */
  overflow: hidden;
  /* V2 工作区铺满整个视口宽度：去掉默认 .stage 的 1400px 居中限制，
     仅保留极小的左右内边距，避免内容紧贴视口边缘。 */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 12px 8px;
}
/* 导入文件后工作区填满视口，footer自然推出视口 */
.layout-v2 .stage.workspace-active {
  height: calc(100vh - 70px);
  flex: 0 0 auto; /* ?? flex ??????? height */
  overflow: hidden;
}
.layout-v2 .workspace {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: none;
  gap: 12px;
  /* 显式声明 stretch，确保左右两列严格等高，底部对齐 */
  align-items: stretch;
}
.layout-v2 .main-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.layout-v2 .main-area .table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.layout-v2 .right-panel {
  /* 改为固定像素宽度：窄屏占比合理，宽屏让出更多空间给左侧表格 */
  flex: 0 0 220px;
  width: 220px;
  min-width: 180px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  /* 与左侧 main-area 同为 workspace 的 flex 子项，stretch 后底部对齐 */
  align-self: stretch;
  height: 100%;
}
.layout-v2 .right-panel .toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  /* 去掉与外层 .right-panel 重复的边框/背景/圆角/外边距，
     避免出现"卡片套卡片"的双层视觉，并让顶部紧贴右侧面板顶端。*/
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.layout-v2 .right-panel .toolbar .toolbar-label {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
  margin-bottom: 4px;
}
.layout-v2 .right-panel .toolbar .detect-btn {
  width: 100%;
}
.layout-v2 .right-panel .toolbar .toolbar-counter {
  margin-left: 0;
  margin-top: 4px;
  align-self: stretch;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding-top: 6px;
  border-top: 1px dashed var(--border-lighter);
}
.layout-v2 .right-panel #match-groups-panel {
  /* 关键修复：去掉基础样式中的 max-height: 88px 限制，
     让面板用 flex:1 填满剩余空间，底部与左侧表格容器对齐。*/
  flex: 1 1 0; /* was auto */
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
  padding: 10px;
  margin: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
}
.layout-v2 .right-panel #match-groups-panel .match-groups-label {
  flex: 0 0 auto;
  margin-right: 0;
  margin-bottom: 2px;
}
.layout-v2 .right-panel #match-groups-list {
  flex: 1 1 0; /* was auto */
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  /* gap 调大到 10px：为相邻按钮的双层外环（最多 6px）预留视觉间距，避免环相互贴合。*/
  gap: 10px;
  overflow-y: auto;
  /* 四周内边距：让 hover/locked 的外发光环不被父级 overflow 裁切。
     上下 6px 容纳第一个/最后一个按钮的环；右 8px 给环 + 滚动条让位。*/
  padding: 6px 8px 6px 6px;
}
.layout-v2 .right-panel #match-groups-list .match-group-btn {
  width: 100%;
  max-width: none;
  text-align: left;
  box-sizing: border-box;
  /* 在垂直 flex 列表里禁止收缩，避免按钮被压扁导致文字被裁切；
     超出可视范围由 #match-groups-list 自身的滚动条承担。*/
  flex: 0 0 auto;
  padding: 6px 10px;
  line-height: 1.4;
}
.layout-v2 .right-panel #match-groups-list::-webkit-scrollbar { width: 8px; }
.layout-v2 .right-panel #match-groups-list::-webkit-scrollbar-track { background: transparent; }
.layout-v2 .right-panel #match-groups-list::-webkit-scrollbar-thumb {
  background: #C0C4CC;
  border-radius: 4px;
}
.layout-v2 .right-panel #match-groups-list::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* 宽屏（>=1600px）下右侧面板稍微变宽，更好地展示匹配组文本 */
@media (min-width: 1600px) {
  .layout-v2 .upload-area {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
  .layout-v2 .upload-right {
    width: 250px;
  }
  .layout-v2 .right-panel {
    flex: 0 0 250px;
    width: 250px;
  }
}

/* ============================================================
   方差异常 · 悬停浮窗
   设计语言：编辑式信息卡 + 数据对比 + 极简骨架
   ------------------------------------------------------------
   - 上下两段柱状图（异常/正常）通过 VS 分隔，强化"对比叙事"
   - 异常组使用方差色（深蓝），正常组使用对比绿
   - 标签栏使用 letter-spacing 强调技术感
   ============================================================ */
.variance-popover {
  position: fixed;
  z-index: 9999;
  width: 296px;
  padding: 14px 16px 12px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--hl-variance);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(13, 71, 161, 0.16),
              0 2px 8px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  font-family: inherit;
  /* 进入动画：淡入 + 轻微右滑 */
  animation: variance-pop-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes variance-pop-in {
  from {
    opacity: 0;
    transform: translateX(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.variance-popover-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.variance-popover-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hl-variance);
  background: rgba(13, 71, 161, 0.08);
  padding: 2px 6px;
  border-radius: 2px;
  font-family: 'SF Mono', Consolas, 'Courier New', monospace;
}

.variance-popover-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.variance-popover-section {
  margin-bottom: 4px;
}

.variance-popover-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.variance-popover-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.variance-popover-label .dot-abnormal { background: var(--hl-variance); }
.variance-popover-label .dot-normal   { background: #2E7D5C; }

.variance-chart {
  height: 56px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 4px 2px 0;
  position: relative;
  /* 底部基线 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.variance-chart .bar {
  flex: 1;
  min-width: 6px;
  max-width: 28px;
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: opacity 0.2s;
  /* 初始展开动画 */
  animation: bar-grow 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.variance-chart .bar:nth-child(1) { animation-delay: 0ms; }
.variance-chart .bar:nth-child(2) { animation-delay: 30ms; }
.variance-chart .bar:nth-child(3) { animation-delay: 60ms; }
.variance-chart .bar:nth-child(4) { animation-delay: 90ms; }
.variance-chart .bar:nth-child(5) { animation-delay: 120ms; }
.variance-chart .bar:nth-child(6) { animation-delay: 150ms; }
.variance-chart .bar:nth-child(7) { animation-delay: 180ms; }
.variance-chart .bar:nth-child(8) { animation-delay: 210ms; }
.variance-chart .bar:nth-child(n+9) { animation-delay: 240ms; }

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.variance-chart .bar { transform-origin: bottom; }

/* 异常：深蓝主调 + 顶部强调线，柱子几乎等高视觉冲击 */
.variance-chart.abnormal .bar {
  background: linear-gradient(180deg,
              var(--hl-variance) 0%,
              #1A5FC4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.variance-chart.abnormal .bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hl-variance);
}

/* 正常参考：自然绿，无装饰，朴素的"高低不一" */
.variance-chart.normal .bar {
  background: linear-gradient(180deg, #66BB6A 0%, #2E7D5C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.variance-popover-stats {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-family: 'SF Mono', Consolas, 'Courier New', monospace;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.variance-popover-stats-muted { opacity: 0.75; }

.variance-popover-divider {
  position: relative;
  height: 1px;
  background: var(--border-color);
  margin: 14px 0 12px;
  text-align: center;
}
.variance-popover-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.18em;
  font-family: 'SF Mono', Consolas, 'Courier New', monospace;
}

.variance-popover-conclusion {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(13, 71, 161, 0.06);
  border-left: 2px solid var(--hl-variance);
  font-size: 11px;
  line-height: 1.55;
  color: var(--hl-variance);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* 方差检测按钮自定义警告提示 */
.detect-btn-tooltip {
  position: fixed;
  z-index: 9999;
  background: #fff;
  font-size: 11px;
  line-height: 1.6;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  width: 250px;
  pointer-events: none;
}
.detect-btn-tooltip .tip-desc {
  color: var(--text-primary);
  margin-bottom: 6px;
}
.detect-btn-tooltip .tip-warning {
  color: #D32F2F;
  font-weight: 500;
  border-top: 1px dashed #FFCDD2;
  padding-top: 6px;
}

/* V3: 全量检测进行中状态 */
.detect-btn.detecting {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
.detect-btn.detecting::after {
    content: '⏳';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

/* ===== Site Header（与官网一致）===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    height: 70px;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-brand {
    display: flex;
    align-items: center;
}
.header-logo {
    height: 40px;
    width: auto;
}
.header-right {
    display: flex;
    align-items: center;
}
.header-login {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.header-login:hover {
    color: #1976D2;
}

/* body 需要 padding-top 为 header 腾出空间 */
body.layout-v2 {
    padding-top: 70px;
}
body.layout-v4 {
    padding-top: 70px;
}

/* ===== Site Footer（与官网一致）===== */
.site-footer {
    margin-top: 60px;
    background: #f7f8fa;
    border-top: 1px solid #e8e8e8;
}
.footer-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-contact {
    flex: 1;
    min-width: 280px;
}
.footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}
.footer-item {
    font-size: 14px;
    color: #555;
    line-height: 2.2;
    display: flex;
    align-items: center;
}
.footer-qr {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.footer-qr-item {
    text-align: center;
}
.footer-qrcode {
    width: 110px;
    height: 110px;
    border-radius: 4px;
}
.footer-qr-title {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}
.footer-divider {
    height: 1px;
    background: #e0e0e0;
    max-width: 1400px;
    margin: 0 auto;
}
.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #888;
}
.footer-bc-logo {
    height: 28px;
    width: auto;
}
.footer-bottom a {
    color: #1976D2;
    text-decoration: none;
}
.footer-bottom a:hover {
    text-decoration: underline;
}

/* ============================================================
   V4 Layout · 三列上传区 + 右侧深度核查说明面板
   ------------------------------------------------------------
   · 第1列：上传拖放区（自适应，主视觉）
   · 第2列：检测按钮列表（180px 紧凑列）
   · 第3列：科研深度核查说明面板（自适应宽度，编辑式排版）
   · 文件导入后的工作区与 V2 完全一致（多选择器复用）
   ============================================================ */

/* —— 上传区三列网格 —— */
.layout-v4 .upload-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content 320px;
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 12px;
  align-items: stretch;
}
.layout-v4 .upload-area > .upload-index {
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-color);
}
.layout-v4 .upload-left {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.layout-v4 .upload-left .upload-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.layout-v4 .upload-left .upload-drop {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.layout-v4 .upload-right {
  grid-column: 2;
  grid-row: 2;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.layout-v4 .upload-right .detect-btn {
  width: 100%;
  white-space: nowrap;
}

/* —— 科研深度核查 · 说明面板 —— */
.layout-v4 .upload-info-panel {
  grid-column: 3;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(13, 71, 161, 0.06) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0, 137, 123, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #fbfcfd 0%, #f4f6fa 100%);
  border: 1px solid #e2e6ee;
  border-radius: 6px;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #2c3543;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 6px 20px -14px rgba(13, 71, 161, 0.18);
}
/* 左侧三色竖条：与品牌色呼应，强化"权威感" */
.layout-v4 .upload-info-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    #0D47A1 0%,
    #0D47A1 33%,
    #00897B 33%,
    #00897B 66%,
    #FFA500 66%,
    #FFA500 100%);
}
/* 右上角"+" 装饰 */
.layout-v4 .upload-info-panel::after {
  content: "+";
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 18px;
  line-height: 1;
  color: rgba(13, 71, 161, 0.18);
  font-weight: 300;
  pointer-events: none;
}

.layout-v4 .upload-info-panel .info-panel-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0D47A1;
  background: rgba(13, 71, 161, 0.08);
  border: 1px solid rgba(13, 71, 161, 0.18);
  border-radius: 2px;
  font-family: "SF Mono", Consolas, "Courier New", monospace;
}

.layout-v4 .upload-info-panel .info-panel-title {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(13, 71, 161, 0.12);
  padding-bottom: 12px;
}
.layout-v4 .upload-info-panel .info-panel-title-zh {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0D47A1;
  line-height: 1.1;
}
.layout-v4 .upload-info-panel .info-panel-title-en {
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.06em;
  color: #8a94a6;
  font-family: Georgia, "Times New Roman", serif;
}

.layout-v4 .upload-info-panel .info-panel-content {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  line-height: 1.75;
}

.layout-v4 .upload-info-panel .info-highlight {
  position: relative;
  margin: 0;
  padding: 8px 10px 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1a2535;
  letter-spacing: 0.02em;
  background: rgba(255, 165, 0, 0.08);
  border-left: 2px solid #FFA500;
  border-radius: 0 3px 3px 0;
}
.layout-v4 .upload-info-panel .info-highlight em {
  font-style: normal;
  color: #d84315;
  font-weight: 700;
  padding: 0 2px;
  background: linear-gradient(transparent 60%, rgba(255, 165, 0, 0.35) 60%);
}
.layout-v4 .upload-info-panel .info-highlight-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: #FFA500;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.18);
}

.layout-v4 .upload-info-panel .info-body {
  margin: 0;
  color: #4a5468;
  text-align: justify;
  text-justify: inter-ideograph;
}
.layout-v4 .upload-info-panel .info-body strong {
  color: #0D47A1;
  font-weight: 600;
  position: relative;
  white-space: nowrap;
}
.layout-v4 .upload-info-panel .info-count {
  display: inline-flex;
  align-items: baseline;
  margin: 0 2px;
  padding: 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  color: #00897B;
  letter-spacing: -0.02em;
  border-bottom: 2px solid #00897B;
}
.layout-v4 .upload-info-panel .info-count sup {
  font-size: 11px;
  margin-left: 1px;
  top: -0.4em;
}

/* 三点分隔，编辑式过渡 */
.layout-v4 .upload-info-panel .info-panel-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
  opacity: 0.55;
}
.layout-v4 .upload-info-panel .info-panel-divider span {
  width: 3px;
  height: 3px;
  background: #0D47A1;
  border-radius: 50%;
}
.layout-v4 .upload-info-panel .info-panel-divider span:nth-child(2) { background: #00897B; }
.layout-v4 .upload-info-panel .info-panel-divider span:nth-child(3) { background: #FFA500; }

.layout-v4 .upload-info-panel .info-cta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #4a5468;
  padding-top: 4px;
}
.layout-v4 .upload-info-panel .info-cta-brand {
  font-weight: 700;
  color: #0D47A1;
  border-bottom: 1px dashed #0D47A1;
  padding-bottom: 1px;
  cursor: pointer;
  transition: color 0.18s ease;
}
.layout-v4 .upload-info-panel .info-cta-brand:hover {
  color: #FFA500;
  border-bottom-color: #FFA500;
}
.layout-v4 .upload-info-panel .info-cta-arrow {
  color: #0D47A1;
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.layout-v4 .upload-info-panel .info-cta:hover .info-cta-arrow {
  transform: translateX(3px);
  color: #FFA500;
}

/* —— 工作区（文件导入后） · 与 V2 完全一致 —— */
/* 复用 V2 的所有 .workspace 相关样式 */
.layout-v4 .stage {
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 12px 8px;
}
.layout-v4 .stage.workspace-active {
  height: calc(100vh - 70px);
  flex: 0 0 auto;
  overflow: hidden;
}
.layout-v4 .workspace {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: none;
  gap: 12px;
  align-items: stretch;
}
.layout-v4 .main-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.layout-v4 .main-area .table-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.layout-v4 .right-panel {
  flex: 0 0 220px;
  width: 220px;
  min-width: 180px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  align-self: stretch;
  height: 100%;
}
.layout-v4 .right-panel .toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.layout-v4 .right-panel .toolbar .toolbar-label {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
  margin-bottom: 4px;
}
.layout-v4 .right-panel .toolbar .detect-btn {
  width: 100%;
}
.layout-v4 .right-panel .toolbar .toolbar-counter {
  margin-left: 0;
  margin-top: 4px;
  align-self: stretch;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding-top: 6px;
  border-top: 1px dashed var(--border-lighter);
}
.layout-v4 .right-panel #match-groups-panel {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
  padding: 10px;
  margin: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
}
.layout-v4 .right-panel #match-groups-panel .match-groups-label {
  flex: 0 0 auto;
  margin-right: 0;
  margin-bottom: 2px;
}
.layout-v4 .right-panel #match-groups-list {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  overflow-y: auto;
  padding: 6px 8px 6px 6px;
}
.layout-v4 .right-panel #match-groups-list .match-group-btn {
  width: 100%;
  max-width: none;
  text-align: left;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 6px 10px;
  line-height: 1.4;
}
.layout-v4 .right-panel #match-groups-list::-webkit-scrollbar { width: 8px; }
.layout-v4 .right-panel #match-groups-list::-webkit-scrollbar-track { background: transparent; }
.layout-v4 .right-panel #match-groups-list::-webkit-scrollbar-thumb {
  background: #C0C4CC;
  border-radius: 4px;
}
.layout-v4 .right-panel #match-groups-list::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* —— 窄屏自适应：上传区自动收缩，按钮列和说明面板宽度不变 —— */
@media (max-width: 1280px) {
  .layout-v4 .upload-area {
    grid-template-columns: minmax(0, 1fr) max-content 300px;
  }
}

/* —— 宽屏（≥1600px）：说明面板拉宽 —— */
@media (min-width: 1600px) {
  .layout-v4 .upload-area {
    grid-template-columns: minmax(0, 1fr) max-content minmax(300px, 360px);
  }
  .layout-v4 .right-panel {
    flex: 0 0 250px;
    width: 250px;
  }
}