/* ============================================================
 * app.style.css —— 个别页面专属样式
 * 职责：仅存放页面级自定义样式（竞品分析矩阵、位点对比结果、
 *   内标比对、招标反馈汇总、首页、操作说明页、建设中占位页等）。
 * 全站通用样式（SPA 布局壳、面板/表单/表格、TableBar / SelectBar /
 *   SearchBar / ModalSub / ModalTiles / ModalTable / ModalPicker 等）
 *   已并入 all.style.css 第 22 段；依赖 all.color.css 设计变量。
 * ============================================================ */

/* ==================== P1 首页（HomeView） ==================== */
.home-header {
    height: 76px;
}

.home-title {
    font-size: 20px;
    color: var(--color-text-main);
}

.home-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--color-backg-white);
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
}

.stat-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex: none;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-main);
}

.stat-label {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.stat-blue  .stat-icon { color: var(--color-blue-main);  background: var(--color-blue-light); }
.stat-green .stat-icon { color: var(--color-green-main); background: var(--color-green-light); }
.stat-orange .stat-icon { color: var(--color-orange-main); background: var(--color-orange-light); }
.stat-purple .stat-icon { color: var(--color-purple-main); background: var(--color-purple-light); }

/* ==================== P2 操作说明页（UserHelp，读 doc/manual.md 渲染） ==================== */
.help-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.help-toc {
    flex: 0 0 220px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: var(--color-backg-white, #fff);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 10px;
    padding: 14px 12px;
    box-sizing: border-box;
}

.help-toc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary-main, #3b82f6);
    padding: 2px 8px 10px;
    border-bottom: 1px solid var(--color-border-light, #eef0f3);
    margin-bottom: 8px;
}

.help-toc-item {
    display: block;
    padding: 5px 8px;
    font-size: 13px;
    color: var(--color-text-dark, #333);
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.5;
    transition: .15s;
}

.help-toc-item:hover {
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary-main, #3b82f6);
}

.help-toc-lv2 { padding-left: 8px; font-weight: 500; }
.help-toc-lv3 { padding-left: 20px; font-size: 12px; }
.help-toc-lv4 { padding-left: 32px; font-size: 12px; color: var(--color-text-muted, #888); }

.help-content {
    flex: 1;
    min-width: 0;
    background: var(--color-backg-white, #fff);
    border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: 10px;
    padding: 28px 36px;
    box-sizing: border-box;
    line-height: 1.9;
    font-size: 14px;
    color: var(--color-text-dark, #333);
}

.help-content h1 {
    font-size: 26px;
    margin: 0 0 6px;
    color: var(--color-text-dark, #222);
    border-bottom: 2px solid var(--color-primary-main, #3b82f6);
    padding-bottom: 14px;
}

.help-content h2 {
    font-size: 20px;
    margin: 32px 0 12px;
    color: var(--color-primary-main, #3b82f6);
    padding-left: 12px;
    border-left: 4px solid var(--color-primary-main, #3b82f6);
}

.help-content h3 {
    font-size: 16px;
    margin: 24px 0 10px;
    color: var(--color-text-dark, #333);
}

.help-content h4 {
    font-size: 15px;
    margin: 18px 0 8px;
    color: var(--color-text-dark, #444);
}

.help-content p { margin: 10px 0; }
.help-content strong { color: var(--color-text-dark, #222); }

.help-content code {
    background: var(--color-backg-muted, #f4f6f9);
    border: 1px solid var(--color-border-light, #e9ecf0);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 13px;
    color: var(--color-red-main, #e24a4a);
}

.help-content pre {
    background: var(--color-backg-muted, #f4f6f9);
    border: 1px solid var(--color-border-light, #e9ecf0);
    border-radius: 8px;
    padding: 14px 16px;
    overflow-x: auto;
}

.help-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

.help-content blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    background: var(--color-primary-light, #eff6ff);
    border-left: 4px solid var(--color-primary-main, #3b82f6);
    border-radius: 0 8px 8px 0;
    color: var(--color-text-dark, #333);
}

.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
}

.help-content table th {
    background: var(--color-primary-main, #3b82f6);
    color: var(--color-text-white, #fff);
    padding: 9px 12px;
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

.help-content table td {
    padding: 8px 12px;
    border: 1px solid var(--color-border-light, #e9ecf0);
    vertical-align: top;
}

.help-content table tbody tr:nth-child(even) { background: var(--color-backg-muted, #f7f9fc); }
.help-content table tbody tr:hover { background: var(--color-primary-light, #eff6ff); }

.help-content hr {
    border: none;
    border-top: 1px dashed var(--color-border-main, #d6dce4);
    margin: 26px 0;
}

.help-content ul,
.help-content ol {
    margin: 8px 0;
    padding-left: 26px;
}

.help-content li { margin: 4px 0; }
.help-content a { color: var(--color-primary-main, #3b82f6); }

.user-help {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ==================== P3 建设中占位页（building-box） ==================== */
.building-box {
    padding: 80px 24px;
    text-align: center;
    color: #666;
}

.building-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #eef3ff, #f7f9ff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.building-icon i {
    font-size: 32px;
    color: var(--color-primary-main);
}

.building-box h2 {
    font-size: 22px;
    margin: 0 0 8px;
    color: #333;
}

.building-desc {
    margin: 0 auto 20px;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.8;
}

.building-tips {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.building-tips li {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.building-tips li i {
    color: var(--color-primary-main);
}

.building-tag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #999;
    font-size: 12px;
}

/* ==================== P4 竞品分析矩阵（MarketKit，移植自副本 kit-analy.php） ====================
 * 筛选控件（.ka-select-wrap）等通用样式已并入 all.style.css 22.8 段；工具带按钮统一走 btn-primary / btn-secondary；
 * 此处仅保留竞品分析页专属的布局（ka-pane）与列筛选/矩阵表格（ka-chips / ka-table）。 */
.ka-pane { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* ka-pane 内间距全权由 gap 管理，抵消 .table-bar 自带的 16px 下外边距（否则叠加成 28px） */
.ka-pane .table-bar { margin-bottom: 0; }

/* 显示列 chips */
.ka-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ka-chips label { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 9px 16px; font-size: 13px; line-height: 1; width: 96px; box-sizing: border-box; color: var(--cg-solid, var(--color-text-main)); background: var(--cg-light, var(--color-backg-white)); border-radius: 6px; cursor: pointer; white-space: nowrap; user-select: none; transition: all .18s ease; }
.ka-chips input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.ka-chips label:has(input:checked) { color: #fff; background: var(--cg-solid, var(--color-primary-main)); }
.ka-chips .ka-filter-all { font-weight: 600; color: var(--color-primary-main); background: var(--color-primary-light); }
.ka-chips .ka-filter-all:has(input:checked),
.ka-chips .ka-filter-all:has(input:indeterminate) { color: #fff; background: var(--color-primary-main); }
.ka-divider { align-self: center; width: 1px; height: 22px; background: var(--color-border-main); }

/* 矩阵表格：与通用列表（.table-base）完全一致的高度 calc(100vh - 120px) / max-height 1060px；
   表格本体已迁 TableBase（table-class="ka-table" 透传），滚动/白底/圆角由 .table-base > .table-wrap 接管 */
.ka-table-box { flex: none; height: calc(100vh - 120px); max-height: 1060px; min-height: 0; display: flex; flex-direction: column; }
.ka-table-box > .table-base { flex: 1; min-height: 0; height: auto; max-height: none; }
.ka-table { width: max-content; min-width: 100%; table-layout: auto; }
.ka-table thead th.ka-fixed { position: sticky; left: 0; z-index: 11; }
.ka-table thead th.ka-fixed-2 { position: sticky; left: 200px; z-index: 11; }
.ka-table td.ka-fixed-cell { position: sticky; left: 0; z-index: 4; background: var(--color-backg-muted); }
.ka-table td.ka-fixed-cell-2 { position: sticky; left: 200px; z-index: 4; background: var(--color-backg-muted); }
.ka-table th.ka-fixed, .ka-table td.ka-fixed-cell { width: 200px; min-width: 200px; max-width: 200px; }
.ka-table th.ka-fixed-2, .ka-table td.ka-fixed-cell-2 { width: 150px; min-width: 150px; max-width: 150px; }
.ka-table th.ka-fixed-2, .ka-table td.ka-fixed-cell-2 { white-space: nowrap; overflow: visible; text-overflow: clip; }
.ka-table tbody tr:hover td.ka-fixed-cell,
.ka-table tbody tr:hover td.ka-fixed-cell-2 { background: var(--color-primary-light); }
.ka-table th.ka-cnt, .ka-table td.ka-cnt,
.ka-table th.ka-other, .ka-table td.ka-other { width: 80px; min-width: 80px; max-width: 80px; text-align: center; }
.ka-table td.ka-cnt { color: var(--cg-solid, var(--color-text-dark)); background: var(--cg-light, var(--color-backg-white)); }
.ka-table td.ka-other { color: var(--cg-solid, var(--color-text-dark)); background: var(--cg-light, var(--color-backg-white)); }
.ka-table tbody tr:hover td.ka-cnt,
.ka-table tbody tr:hover td.ka-other { background: var(--cg-light, var(--color-backg-white)); }
.ka-table th.ka-bp, .ka-table td.ka-bp { width: 110px; min-width: 110px; max-width: 110px; text-align: center; }
.ka-table th.ka-remark, .ka-table td.ka-remark { width: 220px; min-width: 220px; max-width: 220px; }
.ka-table .ka-num { font-variant-numeric: tabular-nums; }
.ka-zero { color: #c6ccd6 !important; }
.ka-cnt b { font-weight: 700; }

/* ---- 位点标签（竞品分析矩阵） ---- */
.locus-chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 1px 8px;
    font-size: 12px;
    border-radius: 999px;
    background: #eef3ff;
    color: #4a67c2;
}

/* ==================== P4.5 位点渲染（荧光通道电泳图式，移植自副本 kit-modal.php） ==================== */
.km-render { margin-top: 6px; }
.kd-channel { margin-bottom: 6px; }

/* 着色模式切换标签 */
.km-render-actions { display: flex; align-items: center; gap: 8px; }
.km-color-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-backg-main);
    border: 1px solid var(--color-border-main);
    border-radius: 6px;
}
.km-color-tab {
    border: none;
    background: transparent;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: all .2s ease;
}
.km-color-tab:hover { color: var(--color-text-dark); }
.km-color-tab.active { background: var(--color-primary-main); color: var(--color-text-white); }

/* 着色模式图例 */
.km-legend-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--color-backg-main);
    border-radius: 6px;
}
.km-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.km-legend-item i {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 1px 2px var(--color-black-10);
}

/* 坐标轴：第一行横线 / 第二行刻度 / 第三行刻度值，颜色 LIZ #FF9900 */
.kd-axis { position: relative; height: 34px; color: #FF9900; font-size: 11px; }
.kd-axis::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: #FF9900; }
.kd-axis-tick { position: absolute; top: 4px; width: 1px; height: 8px; background: #FF9900; transform: translateX(-50%); }
.kd-axis-num { position: absolute; top: 15px; transform: translateX(-50%); }
.kd-axis-tick.first { transform: none; }
.kd-axis-num.first { transform: none; left: 0 !important; }
.kd-axis-tick.last { transform: translateX(-100%); }
.kd-axis-num.last { transform: translateX(-100%); }

.kd-channel-track { position: relative; height: 54px; overflow: visible; }
/* 标签宽度严格由 inline width%（bp 换算）控制，不得为文字放宽；文字放不下时由 JS 缩写为 A. 形式 */
.kd-locus-tag {
    position: absolute;
    top: 6px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 3px var(--color-black-10);
    padding: 0;
    cursor: default;
    overflow: visible;
}
.kd-locus-tag .kd-tagname {
    line-height: 1.1;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}
/* 美化 tip：深色圆角气泡 + 小三角 + 淡入 */
.kd-locus-tag::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(30, 32, 38, .93);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--color-black-10);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 99;
}
.kd-locus-tag::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(30, 32, 38, .93);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 99;
}
.kd-locus-tag:hover::after,
.kd-locus-tag:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.kd-locus-tag:hover::before { transform: translateX(-50%); }

/* ==================== P5 位点对比结果 / 内标比对（MarketKit） ==================== */
.kc-result {
    margin: 0;
    height: 100%;
    overflow: auto;
}
.kc-result .kc-table { min-height: 100%; }

/* ---- 内标比对（cmp）----
 * 弹窗结构：顶部输入区 + ModalSub「比对结果」+ ModalTiles 磁贴（每厂家一贴）。
 * 仅保留三个类：输入区间距、磁贴内序列命中/未命中高亮、空结果提示。 */
.cmp-input-wrap {
    margin-bottom: 14px;
}
.cmp-hit {
    color: var(--color-green-dark);
    font-weight: 600;
}
.cmp-miss {
    color: var(--color-gray-muted);
}
.cmp-empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: 28px 0;
}
.kc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--color-backg-white);
    border-radius: 6px;
    overflow: hidden;
}
.kc-table thead {
    background: var(--color-primary-main);
    border-bottom: 2px solid var(--color-border-main);
}
.kc-table thead th {
    padding: 10px 8px;
    font-weight: 500;
    color: var(--color-text-white);
    white-space: nowrap;
    letter-spacing: .3px;
    line-height: 1.2;
    text-align: center;
}
.kc-table tbody tr {
    border-bottom: 1px solid var(--color-border-main);
    white-space: nowrap;
    transition: background .2s ease;
}
.kc-table tbody tr:hover {
    background: var(--color-primary-light);
}
.kc-table tbody td {
    padding: 8px 12px;
    color: var(--color-text-dark);
    text-align: center;
}
.kc-table td.kc-locus {
    text-align: left;
    font-weight: 600;
}

/* ==================== P6 招标信息：反馈汇总（ECharts 堆叠柱状图） ==================== */
.fb-pane { min-height: 0; }
.fb-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary-main);
}
.fb-sum { font-size: 13px; color: var(--color-text-muted); }
.fb-chart-box {
    background: var(--color-backg-white);
    border: 1px solid var(--color-border-main);
    border-radius: 8px;
    padding: 16px 20px 20px;
    height: calc(100vh - 210px);
    max-height: 960px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* ECharts 容器：铺满 fb-chart-box 剩余空间 */
.fb-chart { flex: 1; min-height: 0; width: 100%; }

/* 系统维护页（.mtn-*）样式已移至 all.style.css 全站通用层 ——
   维护页为公共组件 assets/cmp/MaintenanceView.js，非某页面专属。 */

/* ==================== P7 市场分析（MarketAny） ==================== */
.mk-page {
    padding: 8px 20px 24px;   /* 顶部 8px 与首页 banner 距顶一致 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 顶部 banner（复用首页 hp-banner 布局，右侧改为日期筛选） */
.mk-banner { margin-bottom: 0; }
.mk-banner-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.mk-filter-group { display: inline-flex; align-items: center; gap: 8px; }
.mk-filter-label { font-size: 13px; color: var(--color-text-muted); }
.mk-filter-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-backg-main);
    border: 1px solid var(--color-border-main);
    border-radius: 6px;
}
.mk-filter-tab {
    border: none;
    background: transparent;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
    border-radius: 5px;
    cursor: pointer;
    transition: all .18s ease;
}
.mk-filter-tab:hover { color: var(--color-text-dark); }
.mk-filter-tab.on { background: var(--color-primary-main); color: var(--color-text-white); }
.mk-filter-year,
.mk-filter-date {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--color-border-main);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-dark);
    background: var(--color-backg-white);
    box-sizing: border-box;
}
.mk-filter-sep { font-size: 13px; color: var(--color-text-muted); }
.mk-filter-apply { height: 30px; padding: 0 14px; font-size: 12px; }

/* ① 汇总卡片（3 张）：图标 + 数值 横排，accent 控制主题色 */
.mk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.mk-card {
    --accent: var(--color-primary-main);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-backg-white);
    border: 1px solid var(--color-border-main);
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
/* 顶部 accent 细彩条 */
.mk-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    opacity: .85;
}
.mk-card:hover {
    box-shadow: 0 6px 16px var(--color-black-10);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.mk-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--color-backg-white));
}
.mk-card-body { flex: 1; min-width: 0; }
.mk-card-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    word-break: break-all;
}
.mk-card-label {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
/* 类型卡：标签行右侧的 明细数/份额 附注 */
.mk-card-meta {
    font-size: 12px;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ② 区块通用 */
.mk-sec {
    background: var(--color-backg-white);
    border: 1px solid var(--color-border-main);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mk-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.mk-sec-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary-main);
}
.mk-sec-title i { font-size: 14px; }

/* 热力图指标切换 */
.mk-heat-switch { display: inline-flex; gap: 4px; padding: 2px; background: var(--color-backg-main); border: 1px solid var(--color-border-main); border-radius: 6px; }
.btn-heat {
    border: none;
    background: transparent;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
    border-radius: 5px;
    cursor: pointer;
    transition: all .18s ease;
}
.btn-heat:hover { color: var(--color-text-dark); }
.btn-heat.on { background: var(--color-primary-main); color: var(--color-text-white); }

/* 地图容器：必须显式高度，echarts 不会从子元素推断 */
.mk-map { width: 100%; min-width: 0; height: var(--mk-map-h, 520px); }
.mk-map-box { min-width: 0; }

/* 地图 + 排行 左右分布：地图占大头（2fr），表格窄列（1fr）；grid 默认 stretch，两列同高 */
.mk-grid-map {
    /* 统一高度基准：地图与右侧排行表共用，保证两列等高且不随数据行数变化 */
    --mk-map-h: 520px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
    gap: 16px;
}
/* 排行区与地图同高：表格区锁定高度（不随行数撑高），超出部分表内滚动，表头吸顶 */
.mk-grid-map .mk-sec { display: flex; flex-direction: column; }
.mk-grid-map .mk-tbl-wrap {
    flex: 1 1 auto;
    height: var(--mk-map-h, 520px);
    min-height: 0;
}

/* ③ 双列网格 */
.mk-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* 表格 */
.mk-tbl-wrap { flex: 1; overflow: auto; min-height: 0; }
.mk-flex-1 { flex: 1; min-width: 0; }
.mk-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
/* 表头默认左对齐；具体列用 .mk-col-c / .mk-col-r 覆盖，保证表头与内容对齐一致 */
.mk-tbl thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 10px;
    background: var(--color-primary-main);
    color: var(--color-text-white);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}
.mk-tbl tbody tr {
    border-bottom: 1px solid var(--color-border-main);
    transition: background .18s ease;
}
/* 隔行换色（斑马纹），hover 高亮在其上 */
.mk-tbl tbody tr:nth-child(even) { background: var(--color-backg-main); }
.mk-tbl tbody tr:hover { background: var(--color-primary-light); }
.mk-tbl tbody td {
    padding: 8px 10px;
    color: var(--color-text-dark);
    text-align: left;
}
/* 列对齐工具类（表头 th 与内容 td 共用，确保对齐一致） */
.mk-col-c { text-align: center !important; }
.mk-col-l { text-align: left   !important; }
.mk-col-r { text-align: right  !important; }
/* 旧 class 兼容 */
.mk-rank { width: 48px; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.mk-num  { text-align: right; font-variant-numeric: tabular-nums; }
.mk-sub { color: var(--color-text-light); font-size: 12px; margin-left: 4px; }
.mk-empty {
    text-align: center !important;
    color: var(--color-text-light) !important;
    padding: 24px 0 !important;
}

/* ④ 厂家份额：饼图 + 表格 横排，统一按 18 行数据高度设计（约 612px），厂家更多时表格内部滚动 */
.mk-pie-row {
    display: flex;
    align-items: stretch;
    gap: 32px;
    flex-wrap: wrap;
}
.mk-pie {
    width: 40%;
    min-width: 340px;
    height: 612px;
    flex-shrink: 0;
}
.mk-manu-tbl { flex: 1; min-width: 0; max-height: 612px; }

/* ⑤ 试剂盒分析：两组筛选（类型/指标）+ 柱状图 */
.mk-kit-filters {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mk-kit-chart { width: 100%; min-width: 0; height: 420px; }
.mk-prvcmanu-chart { width: 100%; min-width: 0; height: 420px; }

/* 响应式：窄屏单列 */
@media (max-width: 980px) {
    .mk-cards { grid-template-columns: 1fr; }
    .mk-grid-2 { grid-template-columns: 1fr; }
    .mk-grid-map { grid-template-columns: 1fr; --mk-map-h: 360px; }
    .mk-pie { width: 100%; height: 360px; }
    .mk-manu-tbl { max-height: 400px; }
}

/* ==================== P8 投标工具（TenderTool：人民币大写） ==================== */
.tt-panel { max-width: 900px; }
.tt-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tt-field:last-child { margin-bottom: 0; }
.tt-field-label { width: 88px; flex: none; font-size: 14px; color: var(--color-text-secondary); }
.tt-input { flex: 1; min-width: 240px; height: 40px; font-size: 16px; }
.tt-result {
    flex: 1;
    min-width: 240px;
    padding: 12px 16px;
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text-main);
    background: var(--color-backg-light);
    border: 1px solid var(--color-border-main);
    border-radius: 8px;
    cursor: pointer;
    user-select: all;
    word-break: break-all;
}
.tt-result:hover { border-color: var(--color-primary-main); }
.tt-result.tt-result-error { color: var(--color-red-main); background: var(--color-backg-white); }
.tt-result.tt-result-error:hover { border-color: var(--color-border-main); }
.tt-samples { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-sample {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    background: var(--color-backg-white);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.tt-sample:hover { color: var(--color-primary-main); border-color: var(--color-primary-main); }
.tt-hint { margin: 14px 0 0; }
.tt-panel .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 人民币大写双栏布局：左换算面板 + 右常用符号面板，等高等宽、沾满横向宽度，窄屏自动堆叠 */
.tt-layout { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.tt-layout .tt-panel { flex: 1 1 0; min-width: 480px; max-width: none; }

/* 常用符号面板（纯展示）：与人民币大写面板等高等宽，无交互逻辑 */
.tt-symbols-panel { flex: 1 1 0; min-width: 260px; display: flex; flex-direction: column; }
.tt-symbols-panel .panel-body { flex: 1; display: flex; flex-direction: column; }
.tt-symbols-title { font-size: 14px; font-weight: 600; color: var(--color-text-main); margin-bottom: 6px; }
.tt-symbols-title .fa { color: var(--color-primary-main); margin-right: 4px; }
.tt-symbols-desc { font-size: 12px; margin: 0 0 12px; }
.tt-symbols-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.tt-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--color-backg-white);
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-main);
    /* 纯展示但支持一键选中，方便直接复制粘贴到标书 */
    user-select: all;
    cursor: text;
    transition: border-color .15s ease;
}
.tt-symbol:hover { border-color: var(--color-primary-main); }

/* 声明函范本：规模判定结果标签（公共 status-tag 固定 80px 不够，放开宽度） */
.tt-judge-tag { width: auto; min-width: 110px; }

/* 图标内嵌控件（行业下拉 / 数值输入通用）：图标浮在控件左侧 */
.tt-icon-field { position: relative; display: inline-flex; align-items: center; }
.tt-icon-field > .fa {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: var(--color-text-secondary);
    pointer-events: none;
    z-index: 1;
}
.tt-icon-field select.form-control,
.tt-icon-field input.form-control { height: 32px; padding-left: 30px; font-size: 12px; }
.tt-icon-field select.form-control,
.tt-icon-field input.form-control { width: 180px; }
/* 声明函工具条：类型/采购人/项目/本公司 四个图标字段等宽弹性分布，铺满工具条整行 */
.table-bar.tt-dc-toolbar .table-bar-side { margin-left: 0; flex: 1 1 auto; }
.table-bar .tt-dc-field { flex: 1 1 0; min-width: 120px; }
.table-bar .tt-dc-field select.form-control,
.table-bar .tt-dc-field input.form-control { width: 100%; }
/* 声明函动作按钮：微软官方配色（Excel 绿 #217346 / Word 蓝 #2B579A） */
.btn.btn-tt-excel { background: #217346; border-color: #217346; color: #fff; }
.btn.btn-tt-excel:hover:not(:disabled) { background: #1b5e38; border-color: #1b5e38; }
.btn.btn-tt-word { background: #2b579a; border-color: #2b579a; color: #fff; }
.btn.btn-tt-word:hover:not(:disabled) { background: #204472; border-color: #204472; }
/* 列表「导出Excel」通用按钮：同 Excel 绿（与声明函页配色一致） */
.btn.btn-xlsx { background: #217346; border-color: #217346; color: #fff; }
.btn.btn-xlsx:hover:not(:disabled) { background: #1b5e38; border-color: #1b5e38; }
.btn.btn-xlsx:disabled { background: #9dbfae; border-color: #9dbfae; color: #fff; cursor: not-allowed; opacity: .8; }

/* 声明函磁贴：范本文本占前两列，复制按钮同排靠右占第三列 */
.tile-grid .tile-field.tt-declare-text { grid-column: 1 / -2; }
.tile-grid .tile-field.tt-declare-copy { grid-column: -2 / -1; align-self: center; justify-self: end; }
.tile-field.tt-declare-copy .list-btn { width: auto; padding: 3px 9px; font-size: 12px; white-space: nowrap; }

/* 划分标准弹窗：查询表单行 + 标准明细表 */
.tt-std-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.tt-std-form .tt-std-query-btn { margin-left: auto; }
/* 划分标准弹窗：标准明细表复用公共 .modal-table 样式。
 * 限高 500px 为计算值：modal-body 可用 676px（700 限高 − 上下 padding 24）
 * − 查询行 38 − 区块标题 76 − 底部规则说明 56（保守按两行）≈ 506，取整留余量；
 * 保证表格内部滚动，弹窗 body 不出现纵向滚动、规则说明始终贴底可见。 */
.tt-std-wrap { max-height: 500px; overflow: auto; border-radius: 8px; }
.tt-std-wrap table { table-layout: fixed; }
.tt-std-wrap tbody tr { white-space: normal; }
.tt-std-wrap td { word-break: break-all; }
.tt-std-wrap th.align-center, .tt-std-wrap td.align-center { text-align: center; }
.tt-std-wrap td.tt-std-industry { font-weight: 600; }
.tt-std-wrap tr.tt-std-row-active td { background: var(--color-primary-light); }