/* 江苏招投标情报 — 组件库
 * 依赖: tokens.css + Bootstrap 5
 * 命名: yc-{component}-{variant}
 */

/* ═══════════════════════════════════════════════════════════
 *   全局
 * ═══════════════════════════════════════════════════════════ */
*       { scrollbar-width: thin; scrollbar-color: var(--yc-muted) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--yc-border-strong); border-radius: var(--yc-radius-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--yc-muted); }

body {
    font-family: var(--yc-font-sans);
    font-size: var(--yc-text-base);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-link:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--yc-primary);
    outline-offset: 2px;
    border-radius: var(--yc-radius-sm);
}

.tabular-nums { font-variant-numeric: tabular-nums; font-family: var(--yc-font-num); }

/* ═══════════════════════════════════════════════════════════
 *   侧栏 + 主内容
 * ═══════════════════════════════════════════════════════════ */
.sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--yc-sidebar-width); height: 100vh;
    background: var(--yc-sidebar-bg);
    border-right: 1px solid var(--yc-border);
    z-index: var(--yc-z-sidebar);
    display: flex; flex-direction: column;
    transition: transform var(--yc-dur-base) var(--yc-ease-standard);
}
.sidebar-brand {
    padding: 1.1rem 1rem;
    font-size: var(--yc-text-md);
    font-weight: 700;
    color: var(--yc-primary);
    border-bottom: 1px solid var(--yc-border);
    display: flex; align-items: center; gap: .5rem;
    letter-spacing: .01em;
}
.sidebar-brand i { font-size: 1.3rem; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; }

/* 折叠分组 — 使用 <details> 原生 a11y */
.sidebar-group { border-bottom: 1px solid transparent; margin: 0; }
.sidebar-group > summary {
    list-style: none;
    cursor: pointer;
    padding: .5rem 1rem .35rem;
    font-size: var(--yc-text-xxs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--yc-muted);
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
    transition: color var(--yc-dur-fast);
}
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary:hover { color: var(--bs-body-color); }
.sidebar-group > summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: .7rem;
    transition: transform var(--yc-dur-fast);
}
.sidebar-group[open] > summary::after { transform: rotate(180deg); }
.sidebar-group.primary > summary { color: var(--yc-primary); font-weight: 700; }

.sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .55rem 1rem;
    color: var(--bs-body-color);
    font-size: var(--yc-text-sm);
    border-radius: 0;
    transition: background var(--yc-dur-fast), color var(--yc-dur-fast);
    position: relative;
}
.sidebar-nav .nav-link:hover { background: var(--yc-hover); color: var(--yc-primary); }
.sidebar-nav .nav-link.active {
    background: rgb(var(--yc-primary-rgb) / .12);
    color: var(--yc-primary);
    font-weight: 600;
}
.sidebar-nav .nav-link.active::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--yc-primary);
}
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
/* 独立工具项 (需求反馈): 与上方分组留一道淡分隔, 显得有意为之 */
.sidebar-nav .nav-link-standalone { margin-top: .35rem; border-top: 1px solid var(--yc-border); padding-top: .55rem; }
.sidebar-nav .nav-link .yc-kbd {
    margin-left: auto; font-size: var(--yc-text-xxs);
    color: var(--yc-muted); padding: 1px 5px;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius-sm);
    font-family: var(--yc-font-mono);
}
.sidebar-footer {
    border-top: 1px solid var(--yc-border);
    padding: .5rem 1rem;
    font-size: var(--yc-text-xxs);
    color: var(--yc-muted);
    line-height: 1.5;
}
/* 备案区: ICP + 公安 各占一行居中, 图标文字对齐, 低调但可读 */
.sidebar-footer .yc-beian {
    display: flex; flex-direction: column; align-items: center; gap: .18rem;
    text-align: center;
}
.sidebar-footer .yc-beian-link {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--yc-muted); text-decoration: none;
    transition: color var(--yc-dur-fast);
    line-height: 1.35;
}
.sidebar-footer .yc-beian-link:hover { color: var(--yc-text-secondary); }
.sidebar-footer .yc-beian-link img { display: block; flex-shrink: 0; }

/* 主内容区 */
.main-content {
    margin-left: var(--yc-sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--yc-dur-base) var(--yc-ease-standard);
}
.topbar {
    position: sticky; top: 0; z-index: var(--yc-z-topbar);
    height: var(--yc-topbar-height);
    padding: 0 var(--yc-page-pad-x);
    background: color-mix(in srgb, var(--yc-sidebar-bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--yc-border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topbar .page-title { font-size: var(--yc-text-base); font-weight: 600; margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }

/* 主内容区: 默认满屏 (Bloomberg/Datadog/Grafana 模式).
 * 横向 padding 使用 clamp() 在超宽屏上自适应增大, 维持信息密度与视觉透气感.
 * .page-body--narrow 修饰符用于少数阅读型页面 (登录/注册/反馈/错误页), 居中收窄到 720px. */
.page-body {
    padding: var(--yc-page-pad-y) clamp(var(--yc-page-pad-x), 2.4vw, 2.5rem);
    width: 100%;
}
.page-body--narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* 命令面板触发器 */
.yc-cmdk-trigger {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem;
    background: var(--yc-card-bg);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius-md);
    color: var(--yc-muted);
    font-size: var(--yc-text-sm);
    transition: border-color var(--yc-dur-fast);
    min-width: 200px;
}
.yc-cmdk-trigger:hover { border-color: var(--yc-primary); color: var(--bs-body-color); }
.yc-cmdk-trigger .yc-kbd { margin-left: auto; }
.yc-kbd {
    font-family: var(--yc-font-mono);
    font-size: var(--yc-text-xxs);
    padding: 1px 6px;
    border: 1px solid var(--yc-border);
    border-bottom-width: 2px;
    border-radius: var(--yc-radius-sm);
    color: var(--yc-text-secondary);
    background: var(--yc-card-bg);
}

/* ═══════════════════════════════════════════════════════════
 *   卡片
 * ═══════════════════════════════════════════════════════════ */
.yc-card {
    background: var(--yc-card-bg);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius-lg);
    overflow: hidden;
    transition: border-color var(--yc-dur-fast), box-shadow var(--yc-dur-fast);
}
.yc-card.interactive:hover { border-color: var(--yc-border-strong); box-shadow: var(--yc-shadow-md); }
.yc-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--yc-border);
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: var(--yc-text-sm);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: 44px;
}
.yc-card .card-header .yc-card-actions { display: inline-flex; gap: .25rem; align-items: center; }
/* 标题不可被 actions 压缩成竖排单字列 (2026-06-10 审计 P2: 移动端 /bid/); 窄屏整体换行 */
.yc-card .card-header > span:first-child { flex-shrink: 0; }
@media (max-width: 576px) {
    .yc-card .card-header { flex-wrap: wrap; row-gap: .4rem; min-height: auto; }
    .yc-card .card-header .yc-card-actions { flex-wrap: wrap; width: 100%; gap: .3rem; }
    .yc-card .card-header .yc-card-actions .form-select-sm,
    .yc-card .card-header .yc-card-actions .form-control-sm {
        width: auto !important; min-width: 0; flex: 1; font-size: var(--yc-text-xs); padding: .2rem .3rem;
    }
}
.yc-card .card-body { padding: .9rem 1rem; }

/* ═══════════════════════════════════════════════════════════
 *   指标卡 (Stat)
 * ═══════════════════════════════════════════════════════════ */
.stat-card {
    background: var(--yc-card-bg);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius-lg);
    padding: 1rem 1.1rem;
    display: flex; align-items: flex-start; gap: .9rem;
    transition: border-color var(--yc-dur-fast);
}
.stat-card:hover { border-color: var(--yc-border-strong); }
.stat-card .stat-icon {
    width: 40px; height: 40px; border-radius: var(--yc-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
}
.stat-card .stat-body { min-width: 0; flex: 1; }
.stat-card .stat-value {
    font-size: var(--yc-text-xl); font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat-card .stat-label {
    font-size: var(--yc-text-xs);
    color: var(--yc-muted);
    margin-top: .15rem;
    display: flex; align-items: center; gap: .25rem;
}
/* 紧凑顶栏指标 */
.yc-stat-strip { display: flex; gap: .25rem; flex-wrap: wrap; }
.yc-stat-strip .stat-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius-pill);
    background: var(--yc-card-bg);
    font-size: var(--yc-text-xs);
    color: var(--yc-text-secondary);
}
.yc-stat-strip .stat-pill b { color: var(--bs-body-color); font-variant-numeric: tabular-nums; }

/* 提示型标签下划线 */
[data-bs-toggle="tooltip"][title]:not(.btn):not(.nav-link),
.stat-label[data-bs-toggle="tooltip"],
.card-header [data-bs-toggle="tooltip"],
th[data-bs-toggle="tooltip"] {
    border-bottom: 1px dashed currentColor;
    text-decoration: none;
    cursor: help;
}

/* ═══════════════════════════════════════════════════════════
 *   表格
 * ═══════════════════════════════════════════════════════════ */
.table {
    --bs-table-bg: transparent;
    font-size: var(--yc-text-sm);
    margin-bottom: 0;
}
.table thead th {
    font-weight: 600;
    font-size: var(--yc-text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--yc-muted);
    border-bottom: 1px solid var(--yc-border);
    padding: .55rem .65rem;
    white-space: nowrap;
}
.table thead.sticky-top th { background: var(--yc-card-bg); z-index: 2; }
.table td {
    border-color: var(--yc-border);
    vertical-align: middle;
    padding: .55rem .65rem;
}
/* 2026-04-22 (v2): 表格列宽策略 — 修正用户反馈的"城市区域浪费 + 采购方被限死".
 *
 * 第一性原理: HTML table 的列宽分配规则 —
 *   - 带 width/max-width 的列: 不超过该值
 *   - 只有 min-width 或无约束的列: **贪婪占用剩余空间**
 *
 * 上一版 bug: col-org 有 max-width:220, col-city/area 只有 min-width → 浏览器把
 * 剩余空间全给了 city/area (贪婪), 采购方反而被卡在 220px. 完全相反.
 *
 * SOTA 策略 (参考 Jira/Linear/GitHub issue list):
 *   - 已知短的列 (城市/区域/日期/金额/计数): **width + max-width 三管齐下**, 严格锁死
 *   - 内容可变的列 (项目名/采购方/中标方): **只设 min-width, 无 max-width**,
 *     自然吸收剩余空间, 长则单行显示完整, 极长则折行
 */

/* 城市: "盐城市 / 南京市 / 宿迁市" 3-4 字, 74px 足够 */
.table .col-city {
    white-space: nowrap;
    width: 74px;
    min-width: 66px;
    max-width: 74px;
}
/* 区域: "盐城市大丰区 / 云龙区" 2-6 字, 88px 足够 */
.table .col-area {
    white-space: nowrap;
    width: 88px;
    min-width: 72px;
    max-width: 88px;
}

/* 核心识别字段: 项目名 / 公告标题 — 主信息, 完全自适应吸收剩余空间.
 * 数据驱动 (26 万项目实测): P95=45 字, P99=61 字, avg=24.7 字.
 * 无 max-width 让项目名独占剩余空间 (业务主信息), 极长名 (>40 字) 折行兜底. */
.table .col-name {
    min-width: 220px;
    /* 无 max-width: 项目名是主信息, 吸收剩余空间 */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
    font-size: var(--yc-text-sm);
}
/* 组织名: 采购方 / 中标方 / 代理 — 辅助信息, 自适应但**不过宽**.
 * 数据驱动 (20 万实体实测): P95=19 字, P99=25 字, avg=12.5 字.
 * max-width 300px ≈ 20 字单行, 覆盖 95% 场景单行显示, 多余空间流向 col-name (项目名).
 * 极长名 (P99, 约 1% 场景) 折行兜底, 仍能完整阅读不截断. */
.table .col-org {
    min-width: 160px;
    max-width: 300px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
    font-size: var(--yc-text-sm);
}
/* 紧凑字段 (数值/日期/标签): 只 nowrap, 不设 width 让 HTML 按内容自然宽度 */
.table .col-num, .table .col-date, .table .col-tag {
    white-space: nowrap;
}

/* 主列表视口自适应容器 — 替代 inline "max-height:Npx;overflow-y:auto".
 * 数据驱动预算: yc-nav(56) + 页标题(40) + 过滤卡(140) + 列表头(48) + 呼吸(30) ≈ 314 → 取 320.
 * 100dvh (dynamic viewport) 在 iOS Safari / Chrome 稳定覆盖 100vh.
 * min-height 320 保证超小屏 (≥720 高, 减掉 315 ≈ 405 列表区域) 仍能看 5 行以上. */
.yc-table-viewport {
    max-height: calc(100dvh - 320px);
    min-height: 320px;
    overflow-y: auto;
}
/* 含 Tab bar 的页面 (如 bid_decision): 额外预留 48px (tab-bar) + 16px margin */
.yc-table-viewport-tabbed {
    max-height: calc(100dvh - 380px);
    min-height: 320px;
    overflow-y: auto;
}
/* 兼容老浏览器无 dvh 的回退 (用 vh) */
@supports not (height: 100dvh) {
    .yc-table-viewport { max-height: calc(100vh - 320px); }
    .yc-table-viewport-tabbed { max-height: calc(100vh - 380px); }
}

.table tbody tr { transition: background var(--yc-dur-fast); }
.table tbody tr:hover { background: var(--yc-hover); }

.table tbody tr.is-selected { background: rgb(var(--yc-primary-rgb) / .08); }
.table .row-actions { display: inline-flex; gap: .25rem; opacity: 0; transition: opacity var(--yc-dur-fast); }
.table tbody tr:hover .row-actions { opacity: 1; }
.table .row-actions .btn { padding: .15rem .4rem; font-size: var(--yc-text-xs); }
/* 金额/计数是原子语义单元: 禁止 "790.00 / 万" 这类断行 (CJK 断行规则会在数字-汉字边界断开) */
.table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.sortable {
    cursor: pointer; user-select: none; white-space: nowrap;
    background: none; border: 0; color: inherit;
    padding: 0; font: inherit;
}
.sortable:hover { color: var(--bs-body-color); }
.sortable .sort-icon { opacity: .3; font-size: .65rem; margin-left: 2px; transition: opacity var(--yc-dur-fast); }
.sortable.asc .sort-icon, .sortable.desc .sort-icon { opacity: 1; color: var(--yc-primary); }

/* ═══════════════════════════════════════════════════════════
 *   类型 / 状态 徽章
 * ═══════════════════════════════════════════════════════════ */
.badge-type {
    font-size: var(--yc-text-xxs);
    padding: .2rem .55rem;
    border-radius: var(--yc-radius-pill);
    font-weight: 500;
    background: rgb(100 116 139 / .15);
    color: var(--yc-text-secondary);
    line-height: 1.4;
    letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: .25rem;
}
.badge-招标计划       { background: rgb(99 102 241 / .15); color: #818cf8; }
.badge-招标公告       { background: rgb(6 182 212 / .15);  color: #22d3ee; }
.badge-招标资审公告   { background: rgb(6 182 212 / .15);  color: #22d3ee; }
.badge-采购公告       { background: rgb(139 92 246 / .15); color: #a78bfa; }
.badge-政府采购       { background: rgb(139 92 246 / .15); color: #a78bfa; }
.badge-中标候选人公示 { background: rgb(245 158 11 / .15); color: #fbbf24; }
.badge-中标结果公告   { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-中标公告       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-中标公示       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-中标结果       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-结果公示       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-结果公告       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-成交公告       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-成交公示       { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-成交结果       { background: rgb(16 185 129 / .15); color: #34d399; }
[class*="badge-中标（"]  { background: rgb(16 185 129 / .15); color: #34d399; }
[class*="badge-中标(成交)"] { background: rgb(16 185 129 / .15); color: #34d399; }
.badge-更正公告       { background: rgb(239 68 68 / .15);  color: #f87171; }
.badge-招标失败公示   { background: rgb(239 68 68 / .15);  color: #f87171; }
.badge-招标异常       { background: rgb(239 68 68 / .15);  color: #f87171; }
.badge-最高限价公示   { background: rgb(249 115 22 / .9);  color: #fff; }
.badge-交易公告       { background: rgb(168 85 247 / .15); color: #c084fc; }
.badge-挂牌公告       { background: rgb(168 85 247 / .15); color: #c084fc; }
.badge-挂牌披露       { background: rgb(168 85 247 / .15); color: #c084fc; }
.badge-出让公告       { background: rgb(168 85 247 / .15); color: #c084fc; }
.badge-合同订立       { background: rgb(14 165 233 / .15); color: #38bdf8; }
.badge-合同公示       { background: rgb(14 165 233 / .15); color: #38bdf8; }
.badge-合同公告       { background: rgb(14 165 233 / .15); color: #38bdf8; }
.badge-合同履行及变更 { background: rgb(14 165 233 / .15); color: #38bdf8; }
.badge-中标合同       { background: rgb(14 165 233 / .15); color: #38bdf8; }
.badge-履约信息       { background: rgb(20 184 166 / .15); color: #2dd4bf; }
.badge-工程建设, .badge-建设工程, .badge-交通工程,
.badge-水利工程, .badge-工程货物, .badge-施工, .badge-勘察设计 { background: rgb(245 158 11 / .15); color: #fbbf24; }
.badge-土地矿产, .badge-土地使用权出让公告 { background: rgb(217 119 6 / .15); color: #fb923c; }
.badge-国有产权 { background: rgb(236 72 153 / .15); color: #f472b6; }
.badge-综合交易, .badge-其他交易, .badge-其他, .badge-服务 { background: rgb(100 116 139 / .15); color: var(--yc-text-secondary); }

/* 状态点 */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.status-dot.planning   { background: var(--yc-status-planning); }
.status-dot.bidding    { background: var(--yc-status-bidding); }
.status-dot.listing    { background: var(--yc-status-listing); }
.status-dot.evaluating { background: var(--yc-status-evaluating); }
.status-dot.awarded    { background: var(--yc-status-awarded); }
.status-dot.contracted { background: var(--yc-status-contracted); }
.status-dot.executing  { background: var(--yc-status-executing); }
.status-dot.correction { background: var(--yc-status-correction); }
.status-dot.terminated { background: var(--yc-status-terminated); }
.status-dot.unknown    { background: var(--yc-status-unknown); }

/* Chip */
.yc-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem;
    background: var(--yc-chip-bg);
    color: var(--yc-chip-color);
    border-radius: var(--yc-radius-pill);
    font-size: var(--yc-text-xs);
    font-weight: 500;
    border: 0;
    cursor: pointer;
    transition: background var(--yc-dur-fast);
}
.yc-chip:hover { background: rgb(var(--yc-primary-rgb) / .22); }
.yc-chip.active { background: var(--yc-primary); color: #fff; }
.yc-chip .yc-chip-close { opacity: .6; }
.yc-chip .yc-chip-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
 *   分页
 * ═══════════════════════════════════════════════════════════ */
.pagination .page-link {
    background: var(--yc-card-bg);
    border-color: var(--yc-border);
    color: var(--bs-body-color);
    font-size: var(--yc-text-sm);
}
.pagination .page-link:hover { background: var(--yc-hover); color: var(--yc-primary); }
.pagination .page-item.active .page-link {
    background: var(--yc-primary);
    border-color: var(--yc-primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link { background: var(--yc-card-bg); color: var(--yc-muted); }

/* ═══════════════════════════════════════════════════════════
 *   筛选条
 * ═══════════════════════════════════════════════════════════ */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: center; padding: .65rem 0;
}
.filter-bar .form-select,
.filter-bar .form-control {
    font-size: var(--yc-text-sm);
    max-width: 200px;
    background: var(--yc-card-bg);
    border-color: var(--yc-border);
    color: var(--bs-body-color);
}
.filter-bar .form-select:focus,
.filter-bar .form-control:focus {
    border-color: var(--yc-primary);
    box-shadow: var(--yc-shadow-glow);
}
.filter-bar label {
    font-size: var(--yc-text-xs);
    color: var(--yc-muted);
    margin-bottom: .15rem;
}

.yc-active-filters {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin: .25rem 0 .5rem;
}

/* ═══════════════════════════════════════════════════════════
 *   Tabs
 * ═══════════════════════════════════════════════════════════ */
.yc-tabs {
    display: flex; gap: .15rem; padding: 0;
    border-bottom: 1px solid var(--yc-border);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.yc-tabs::-webkit-scrollbar { display: none; }
.yc-tabs .yc-tab {
    background: none; border: 0;
    padding: .65rem 1rem;
    color: var(--yc-text-secondary);
    font-size: var(--yc-text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--yc-dur-fast), border-color var(--yc-dur-fast);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: .35rem;
}
.yc-tabs .yc-tab:hover { color: var(--bs-body-color); }
.yc-tabs .yc-tab.active { color: var(--yc-primary); border-bottom-color: var(--yc-primary); }
.yc-tabs .yc-tab .badge {
    background: var(--yc-hover); color: var(--yc-text-secondary);
    font-size: var(--yc-text-xxs); padding: 1px 6px;
    border-radius: var(--yc-radius-pill); font-weight: 500;
}
.yc-tabs.sticky { position: sticky; top: var(--yc-topbar-height); background: var(--bs-body-bg); z-index: var(--yc-z-sticky); }

/* ═══════════════════════════════════════════════════════════
 *   Sticky 操作条 (详情页头部)
 * ═══════════════════════════════════════════════════════════ */
.yc-action-bar {
    position: sticky; top: var(--yc-topbar-height); z-index: calc(var(--yc-z-sticky) - 1);
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    background: color-mix(in srgb, var(--yc-card-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius-lg);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.yc-action-bar .yc-action-meta { flex: 1; min-width: 0; font-size: var(--yc-text-sm); color: var(--yc-text-secondary); }
.yc-action-bar .btn { font-size: var(--yc-text-sm); }

/* ═══════════════════════════════════════════════════════════
 *   骨架屏
 * ═══════════════════════════════════════════════════════════ */
.yc-skel {
    background: var(--yc-skel-bg);
    background-size: 200% 100%;
    border-radius: var(--yc-radius-sm);
    animation: yc-skel-pulse 1.4s ease-in-out infinite;
    display: inline-block;
    color: transparent;
    user-select: none;
}
@keyframes yc-skel-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.yc-skel-line { height: 12px; margin: .35rem 0; border-radius: var(--yc-radius-sm); }
.yc-skel-block { height: 100px; border-radius: var(--yc-radius-md); }
.yc-skel-text-sm { width: 60%; }
.yc-skel-text-md { width: 80%; }
.yc-skel-text-lg { width: 95%; }

/* 加载/空/错状态 */
.loading-spinner {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px; color: var(--yc-muted);
    flex-direction: column; gap: .5rem;
}
.yc-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1rem; color: var(--yc-muted);
    text-align: center; gap: .5rem;
}
.yc-empty i { font-size: 2.25rem; opacity: .35; }
.yc-empty .yc-empty-title { font-size: var(--yc-text-md); color: var(--yc-text-secondary); }
.yc-empty .yc-empty-hint { font-size: var(--yc-text-xs); }

/* ═══════════════════════════════════════════════════════════
 *   Toast (替代 alert)
 * ═══════════════════════════════════════════════════════════ */
#yc-toast-host {
    position: fixed; top: calc(var(--yc-topbar-height) + 12px); right: 16px;
    display: flex; flex-direction: column; gap: .5rem;
    z-index: var(--yc-z-toast); pointer-events: none;
}
.yc-toast {
    pointer-events: auto;
    min-width: 240px; max-width: 360px;
    padding: .65rem .9rem .65rem .8rem;
    background: var(--yc-card-bg-elev);
    border: 1px solid var(--yc-border);
    border-left: 3px solid var(--yc-primary);
    border-radius: var(--yc-radius-md);
    box-shadow: var(--yc-shadow-lg);
    font-size: var(--yc-text-sm);
    color: var(--bs-body-color);
    display: flex; align-items: flex-start; gap: .55rem;
    animation: yc-toast-in var(--yc-dur-base) var(--yc-ease-decel);
}
.yc-toast.success { border-left-color: var(--yc-success); }
.yc-toast.warning { border-left-color: var(--yc-warning); }
.yc-toast.error   { border-left-color: var(--yc-danger); }
.yc-toast.info    { border-left-color: var(--yc-accent); }
.yc-toast i { font-size: 1.05rem; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.yc-toast.success i { color: var(--yc-success); }
.yc-toast.warning i { color: var(--yc-warning); }
.yc-toast.error i   { color: var(--yc-danger); }
.yc-toast.info i    { color: var(--yc-accent); }
.yc-toast .yc-toast-body { flex: 1; min-width: 0; word-break: break-word; }
.yc-toast .yc-toast-close { background: none; border: 0; color: var(--yc-muted); padding: 0 0 0 .25rem; }
.yc-toast.fade-out { animation: yc-toast-out var(--yc-dur-base) var(--yc-ease-accel) forwards; }
@keyframes yc-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes yc-toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(20px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
 *   命令面板 (Cmd+K)
 * ═══════════════════════════════════════════════════════════ */
.yc-cmdk-overlay {
    position: fixed; inset: 0;
    background: var(--yc-overlay);
    backdrop-filter: blur(4px);
    z-index: var(--yc-z-overlay);
    display: none;
    align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    animation: yc-fade-in var(--yc-dur-fast);
}
.yc-cmdk-overlay.open { display: flex; }
.yc-cmdk-panel {
    width: min(640px, 92vw);
    background: var(--yc-card-bg-elev);
    border: 1px solid var(--yc-border-strong);
    border-radius: var(--yc-radius-lg);
    box-shadow: var(--yc-shadow-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 70vh;
}
.yc-cmdk-input {
    width: 100%; border: 0;
    padding: .9rem 1rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--yc-text-md);
    border-bottom: 1px solid var(--yc-border);
    outline: none;
}
.yc-cmdk-input::placeholder { color: var(--yc-muted); }
.yc-cmdk-results {
    overflow-y: auto;
    flex: 1;
    padding: .25rem 0;
}
.yc-cmdk-section {
    padding: .35rem 1rem .2rem;
    font-size: var(--yc-text-xxs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--yc-muted);
    font-weight: 600;
}
.yc-cmdk-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem 1rem;
    cursor: pointer;
    color: var(--bs-body-color);
    font-size: var(--yc-text-sm);
    transition: background var(--yc-dur-fast);
}
.yc-cmdk-item i { color: var(--yc-text-secondary); font-size: 1rem; width: 18px; text-align: center; }
.yc-cmdk-item:hover, .yc-cmdk-item.active { background: rgb(var(--yc-primary-rgb) / .12); }
.yc-cmdk-item.active i { color: var(--yc-primary); }
.yc-cmdk-item .yc-cmdk-hint { margin-left: auto; font-size: var(--yc-text-xxs); color: var(--yc-muted); }
.yc-cmdk-empty { padding: 2rem 1rem; text-align: center; color: var(--yc-muted); font-size: var(--yc-text-sm); }
.yc-cmdk-footer {
    border-top: 1px solid var(--yc-border);
    padding: .35rem 1rem;
    font-size: var(--yc-text-xxs);
    color: var(--yc-muted);
    display: flex; justify-content: space-between; gap: 1rem;
}
@keyframes yc-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════
 *   抽屉 (Drawer)
 * ═══════════════════════════════════════════════════════════ */
.yc-drawer-overlay {
    position: fixed; inset: 0;
    background: var(--yc-overlay);
    z-index: var(--yc-z-modal);
    display: none;
    animation: yc-fade-in var(--yc-dur-base);
}
.yc-drawer-overlay.open { display: block; }
.yc-drawer {
    position: fixed; top: 0; right: 0;
    width: min(540px, 92vw); height: 100vh;
    background: var(--yc-card-bg-elev);
    border-left: 1px solid var(--yc-border);
    z-index: calc(var(--yc-z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--yc-dur-slow) var(--yc-ease-decel);
    display: flex; flex-direction: column;
    box-shadow: var(--yc-shadow-lg);
}
.yc-drawer.open { transform: translateX(0); }
.yc-drawer-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--yc-border);
    display: flex; align-items: center; justify-content: space-between;
}
.yc-drawer-header h3 { margin: 0; font-size: var(--yc-text-md); font-weight: 600; }
.yc-drawer-body { padding: 1rem; overflow-y: auto; flex: 1; }

/* ═══════════════════════════════════════════════════════════
 *   数据新鲜度元信息条
 * ═══════════════════════════════════════════════════════════ */
.yc-data-meta {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .55rem;
    background: var(--yc-hover);
    border-radius: var(--yc-radius-pill);
    font-size: var(--yc-text-xxs);
    color: var(--yc-muted);
}
.yc-data-meta.stale { background: rgb(var(--yc-warning) / .15); color: var(--yc-warning); }
.yc-data-meta i { font-size: .8rem; }

/* ═══════════════════════════════════════════════════════════
 *   图表容器
 * ═══════════════════════════════════════════════════════════ */
.chart-container { position: relative; width: 100%; min-height: 280px; }
.chart-container.tall { min-height: 380px; }
.chart-container.short { min-height: 200px; }

/* ═══════════════════════════════════════════════════════════
 *   响应式
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); width: 80vw; max-width: 320px; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .topbar { padding: 0 .75rem; }
    .page-body { padding: .75rem; }
    .yc-cmdk-trigger { display: none; }
    .topbar .page-title { font-size: var(--yc-text-sm); }
    .topbar-actions { gap: .3rem; }
    .topbar-actions .btn { padding: .25rem .4rem; font-size: .75rem; }
    .topbar-actions .dropdown-toggle .badge { display: none; }
}
@media (max-width: 575.98px) {
    /* ── 基础布局 ── */
    .page-body { padding: .5rem; }
    .row.g-3, .row.g-4 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
    h5, .h5 { font-size: 1rem; }

    /* ── 卡片 ── */
    .yc-card { border-radius: var(--yc-radius-md); }
    .yc-card .card-body { padding: .6rem .7rem; }
    .yc-card .card-header { padding: .55rem .7rem; font-size: var(--yc-text-sm); min-height: auto; }

    /* ── 统计条 ── */
    .stat-card { padding: .55rem; gap: .35rem; min-width: 0; }
    .stat-card .stat-icon { width: 26px; height: 26px; font-size: .75rem; }
    .stat-card .stat-value { font-size: var(--yc-text-sm); }
    .stat-card .stat-label { font-size: var(--yc-text-xxs); }
    .yc-stat-strip .stat-pill { padding: .25rem .5rem; font-size: var(--yc-text-xxs); gap: .3rem; }

    /* ── 操作条：名字占满整行(省略号)，按钮在下一行均分 ── */
    .yc-action-bar { padding: .4rem .5rem; gap: .35rem; border-radius: var(--yc-radius-md); flex-wrap: wrap; }
    .yc-action-bar .yc-action-meta {
        flex: 1 0 100%; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: flex; align-items: center;
    }
    .yc-action-bar .yc-action-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .yc-action-bar .btn { flex: 1; font-size: var(--yc-text-xs); padding: .3rem .35rem; white-space: nowrap; }
    .yc-action-bar .dropdown { flex: 0 0 auto; }
    .yc-action-bar .dropdown .btn { flex: none; }

    /* ── Tab ── */
    .yc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .yc-tabs::-webkit-scrollbar { display: none; }
    .yc-tabs .yc-tab { padding: .4rem .5rem; font-size: var(--yc-text-xxs); white-space: nowrap; flex-shrink: 0; }

    /* ── 表格 ── */
    .table { font-size: var(--yc-text-xs); }
    .table th, .table td { padding: .3rem .35rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ── 筛选栏（所有页面的 flex 筛选行）── */
    .d-flex.gap-2.mb-3.flex-wrap .form-select-sm,
    .d-flex.gap-2.mb-3.flex-wrap .form-control-sm { font-size: var(--yc-text-xs); padding: .2rem .35rem; min-width: 0; }
    .d-flex.gap-3.align-items-end.flex-wrap > div { min-width: 0; }
    .form-select-sm, .form-control-sm { font-size: var(--yc-text-xs); }

    /* ── 图表通用 ── */
    [id$="-chart"], [id^="chart-"] { min-height: 160px !important; max-height: 220px !important; }

    /* ── 导航栏用户区 ── */
    .topbar-actions .dropdown .d-none.d-md-inline { display: none !important; }
    .topbar-actions > .btn > .d-none.d-md-inline { display: none !important; }
}

/* 打印 */
@media print {
    .sidebar, .topbar, .yc-action-bar, #yc-toast-host, .yc-cmdk-trigger { display: none !important; }
    .main-content { margin-left: 0; }
    .page-body { padding: 0; }
    .yc-card { border: 1px solid #ccc; box-shadow: none; }
    a { color: #000; text-decoration: underline; }
}

/* ═══════════════════════════════════════════════════════════
 *   视觉升级 v2 (2026-06): 品牌渐变 · 立体层次 · 微交互
 *   第一性原理: 高级质感 = 光(渐变/高光) + 影(层次阴影) + 动(过渡).
 *   全部令牌驱动并集中于此, 通过共享组件级联到全站 (奥卡姆剃刀).
 * ═══════════════════════════════════════════════════════════ */

/* — 新增令牌: 靛蓝→紫 签名渐变 + 分主题层次阴影/辉光 (覆盖 base 内联令牌) — */
:root{
    /* 权威蓝品牌主色 (中老年信任锚点: 政务/银行/支付宝皆蓝); 全站链接/激活/焦点统一 */
    --yc-primary: #2563eb; --yc-primary-rgb: 37,99,235;
    /* 根治"双主色 bug": Bootstrap 主色/链接色映射到品牌蓝, 全站 text/bg/border-primary 一致 */
    --bs-primary: #2563eb; --bs-primary-rgb: 37,99,235;
    --bs-link-color: #2563eb; --bs-link-color-rgb: 37,99,235;
    --bs-link-hover-color: #1d4ed8; --bs-link-hover-color-rgb: 29,78,216;
    /* 克制的深蓝→蓝→青渐变 (有质感但不浮夸, 去掉偏年轻的紫/品红) */
    --yc-gradient-brand: linear-gradient(135deg,#1d4ed8 0%,#2563eb 45%,#0ea5e9 100%);
    --yc-gradient-brand-soft: linear-gradient(135deg,rgb(37 99 235/.12) 0%,rgb(14 165 233/.10) 100%);
    /* ── 长辈友好字号阶梯 (老花眼可读性优先, 整体上调 ~12%) ── */
    --yc-text-xxs: .72rem;   /* 11.5px (原 10.4) */
    --yc-text-xs:  .8rem;    /* 12.8px (原 11.5) */
    --yc-text-sm:  .9rem;    /* 14.4px (原 13.2) */
    --yc-text-base: 1rem;    /* 16px   (原 14.4) — 正文基准 */
    --yc-text-md:  1.0625rem;/* 17px */
    --yc-text-lg:  1.25rem;  /* 20px */
    --yc-text-xl:  1.5rem;   /* 24px */
    --yc-text-2xl: 2rem;     /* 32px */
    --yc-text-3xl: 2.5rem;   /* 40px */
}
[data-bs-theme=dark]{
    --yc-shadow-sm: 0 1px 2px rgb(0 0 0/.45);
    --yc-shadow-md: 0 6px 18px -4px rgb(0 0 0/.55), 0 2px 6px -2px rgb(0 0 0/.4);
    --yc-shadow-lg: 0 20px 48px -12px rgb(0 0 0/.65), 0 8px 18px -8px rgb(0 0 0/.45);
    --yc-glow: 0 0 28px -6px rgb(var(--yc-primary-rgb)/.55);
    /* 暗色链接用更亮的蓝保证对比 */
    --bs-link-color: #60a5fa; --bs-link-color-rgb: 96,165,250;
    --bs-link-hover-color: #93c5fd; --bs-link-hover-color-rgb: 147,197,253;
    /* 长辈友好: 提升次要/弱化文字对比 (老花眼) */
    --yc-muted: #8b9bb4;
    --yc-text-secondary: #b6c2d6;
}
[data-bs-theme=light]{
    --yc-shadow-sm: 0 1px 2px rgb(15 23 42/.06);
    --yc-shadow-md: 0 6px 20px -6px rgb(15 23 42/.12), 0 2px 6px -3px rgb(15 23 42/.07);
    --yc-shadow-lg: 0 24px 54px -14px rgb(15 23 42/.18), 0 10px 24px -10px rgb(15 23 42/.1);
    --yc-glow: 0 0 0 3px rgb(var(--yc-primary-rgb)/.14);
    /* 链接用醒目的品牌蓝(原 #1d4ed8 偏深不够显眼 → 调亮); hover 加深 */
    --bs-link-color: #2563eb; --bs-link-color-rgb: 37,99,235;
    --bs-link-hover-color: #1d4ed8; --bs-link-hover-color-rgb: 29,78,216;
    /* 长辈友好: 亮色正文加深到近黑(老花高可读) + 次要文字加深 */
    --bs-body-color: #0f172a;
    --yc-muted: #5b6b85;
    --yc-text-secondary: #334155;
}

/* — 品牌标识: 渐变字 logo — */
.sidebar-brand span{
    background: var(--yc-gradient-brand);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800; letter-spacing: .02em;
}

/* — 侧栏激活态: 渐变高亮条 + 柔和渐变底 — */
.sidebar-nav .nav-link.active{ background: var(--yc-gradient-brand-soft); }
.sidebar-nav .nav-link.active::before{ width: 3px; background: var(--yc-gradient-brand); }

/* — 卡片: 默认轻阴影; interactive 悬浮抬升; 暗色加 1px 顶部高光 — */
.yc-card{ box-shadow: var(--yc-shadow-sm); transition: border-color var(--yc-dur-base), box-shadow var(--yc-dur-base), transform var(--yc-dur-base); }
[data-bs-theme=dark] .yc-card{ box-shadow: var(--yc-shadow-sm), inset 0 1px 0 rgb(255 255 255/.03); }
.yc-card.interactive{ cursor: pointer; }
.yc-card.interactive:hover{ transform: translateY(-2px); box-shadow: var(--yc-shadow-lg); border-color: var(--yc-border-strong); }

/* — 统计卡: 渐变图标徽 + 轻阴影 + 悬浮 — */
.stat-card{ box-shadow: var(--yc-shadow-sm); transition: border-color var(--yc-dur-base), box-shadow var(--yc-dur-base), transform var(--yc-dur-base); }
.stat-card:hover{ box-shadow: var(--yc-shadow-md); transform: translateY(-1px); }
.stat-card .stat-icon{
    background: var(--yc-gradient-brand); color: #fff;
    box-shadow: 0 4px 12px -3px rgb(var(--yc-primary-rgb)/.5);
}

/* — 主按钮: 渐变 + 辉光微交互 — */
.btn-primary{
    background-image: var(--yc-gradient-brand);
    border-color: transparent;
    box-shadow: 0 2px 10px -3px rgb(var(--yc-primary-rgb)/.55);
    transition: filter var(--yc-dur-base), box-shadow var(--yc-dur-base), transform var(--yc-dur-fast);
}
.btn-primary:hover, .btn-primary:focus-visible{
    filter: brightness(1.08) saturate(1.05);
    box-shadow: var(--yc-glow);
    transform: translateY(-1px);
}
.btn-primary:active{ transform: translateY(0); }

/* — 顶栏统计药丸: 轻微立体 — */
.yc-stat-strip .stat-pill{ box-shadow: var(--yc-shadow-sm); }

/* ── 长辈友好: 行高/控件尺寸 (老花眼 + 运动控制) ── */
body{ line-height: 1.6; }
/* 小号按钮/控件普遍偏小, 适度加大点击目标与字号 (不破坏密集布局) */
.btn-sm, .btn-group-sm > .btn{ padding: .34rem .7rem; font-size: var(--yc-text-sm); }
.form-select-sm, .form-control-sm{ padding: .34rem .6rem; font-size: var(--yc-text-sm); min-height: 2rem; }
/* 侧栏导航: 可点区域充足, 但字号比正文(16px)略小 → 导航为辅、内容为主, 层次清晰 */
.sidebar-nav .nav-link{ padding: .5rem 1rem; font-size: var(--yc-text-sm); }
.sidebar-nav .nav-link i{ font-size: 1.05rem; }
/* 品牌 Logo 标记 */
.sidebar-brand .sidebar-logo{ border-radius: 7px; flex-shrink: 0; }
/* 表格: 行更高更易读 (阅读密集页) */
.table td, .table th{ padding-top: .6rem; padding-bottom: .6rem; }

/* — 评分胶囊: 分档渐变 (高=翠绿青 / 中=琥珀橙 / 低=中性) — */
.yc-score{
    display: inline-block; min-width: 2.3em; padding: .12rem .5rem;
    border-radius: var(--yc-radius-pill); font-weight: 800; font-size: .8rem;
    line-height: 1.45; color: #fff; font-variant-numeric: tabular-nums; text-align: center;
}
.yc-score.high{ background: linear-gradient(135deg,#10b981 0%,#06b6d4 100%); box-shadow: 0 2px 8px -3px rgb(16 185 129/.6); }
.yc-score.mid{ background: linear-gradient(135deg,#f59e0b 0%,#f97316 100%); box-shadow: 0 2px 8px -3px rgb(245 158 11/.55); }
.yc-score.low{ background: var(--yc-hover); color: var(--yc-text-secondary); box-shadow: none; }