/* 全站浅色主题统一（本代码仅供学习研究使用） */
:root {
    /* 品牌与配色令牌（45 §视觉基线：深色侧栏 + 浅灰背景 + 白色卡片 + 克制绿） */
    --brand: #168269;          /* 主操作（克制绿，不做大面积高饱和） */
    --brand-hover: #12695a;    /* 主操作悬停/focus */
    --accent: #168269;         /* 强调色与主操作同源 */
    --bg: #f4f7f7;             /* 页面背景 */
    --card-bg: #ffffff;        /* 内容卡 */
    --text: #182c34;           /* 主文本 */
    --text-secondary: #667d83; /* 正文辅助 */
    --border: #e6ebed;         /* 边框 */
    --sidebar: #152c32;        /* 侧栏底色 */
    --radius: 10px;
    --sidebar-w: 220px;        /* 桌面侧栏宽（规范 218—224px） */

    /* 覆盖 PicoCSS 2 → 强制浅色，任何系统主题一致 */
    --pico-background-color: var(--bg);
    --pico-color: var(--text);
    --pico-muted-color: var(--text-secondary);
    --pico-muted-border-color: var(--border);
    --pico-primary: var(--brand);
    --pico-primary-background: var(--brand);
    --pico-primary-hover: #ffffff;
    --pico-primary-hover-background: var(--brand-hover);
    --pico-primary-focus: rgba(22, 130, 105, 0.18);
    --pico-secondary: var(--brand);
    --pico-secondary-background: transparent;
    --pico-secondary-hover-background: rgba(22, 130, 105, 0.08);
    --pico-contrast: var(--text);
    --pico-contrast-background: #ffffff;
    --pico-form-element-background-color: #ffffff;
    --pico-form-element-active-background-color: #ffffff;
    --pico-form-element-color: var(--text);
    --pico-form-element-placeholder-color: #94a3b8;
    --pico-form-element-border-color: var(--border);
    --pico-form-element-focus-color: var(--brand);
    --pico-table-border-color: var(--border);
    --pico-table-row-stripped-background-color: #fafbfc;
    --pico-border-radius: var(--radius);
    --pico-border-radius-form: 8px;
    --pico-font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
                         "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pico-font-size: 15px;
    --pico-line-height: 1.55;
    --pico-spacing: 1rem;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
}

/* ============ 全站字体层级（所有页面遵守） ============ */
h1 { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.3; }
h2, .card-title { font-size: 1.2rem; font-weight: 700; color: var(--text); line-height: 1.35; }
h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.4; }
small, .subtle, .text-secondary, .muted { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
/* 任何文字不得低于 12px（图表标签、图例、tooltip、label 兜底） */
legend, figcaption, caption, .chart-label, .echarts-tooltip * { font-size: 13px; }
table, th, td, input, select, textarea, button, label, .data-table, .match-table, .compact-table { font-size: 15px; }
table.small, table.small th, table.small td, .compact-table th, .compact-table td { font-size: 14px; }

/* ============ 全站通用布局与间距规范 ============ */
/* 卡片之间、区块之间统一 1.25rem */
.card + .card, section + section, article + article { margin-top: 1.25rem; }
.hero-card + section, .hero-card + .dashboard-grid { margin-top: 1.25rem; }

/* 卡片内边距统一 1.25rem（紧凑视图卡片，旧 1.5rem 仍覆盖 .card.padding-lg） */
.card { padding: 1.25rem; }
.card-padding-lg { padding: 1.5rem; }

/* 长内容收敛：任何列表/表格容器 > 10 行时 max-height + 滚动，禁止无限平铺 */
.scrollable-list,
.scrollable-table,
.table-box,
.tbody-scroll {
    max-height: 340px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

/* 折叠展开锚点样式 */
.expand-all-toggle { font-size: 13px; color: var(--brand); text-decoration: none; }
.expand-all-toggle:hover { text-decoration: underline; color: var(--brand-hover); }

/* 页面标题区规范：1.5rem 粗 + 副标题灰字 + 间距 1.5rem */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.3rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.section-header h1, .section-header h2, .section-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.2px;
}
.section-header h1 .subtle, .section-header h2 .subtle, .section-header h3 .subtle {
    margin-left: 0.55rem;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.section-desc {
    color: var(--text-secondary);
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
}

/* 卡片：白底、细边、圆角、轻阴影、1.5rem 内边距 */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 1.5rem;
}
.hero-card {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* 表单：label 灰色小字号；focus 深蓝边；placeholder 可读 */
label {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
input, select, textarea {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
input::placeholder, textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(22, 130, 105, 0.16) !important;
    outline: none !important;
}

/* 按钮层级：主实底、次描边、危红；同排间距 0.5rem */
button, [role="button"], .button, a[role="button"] {
    border-radius: 8px !important;
    font-weight: 500;
    padding-inline: 1rem;
}
button + button, [role="button"] + [role="button"] {
    margin-left: 0.5rem;
}
.row > button + button, .row > [role="button"] + [role="button"] {
    margin-left: 0.5rem;
}
.primary, button.primary, [role="button"].primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #ffffff !important;
}
.primary:hover, button.primary:hover, [role="button"].primary:hover {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}
.secondary, button.secondary, [role="button"].secondary {
    background: transparent !important;
    color: var(--brand) !important;
    border: 1px solid var(--brand) !important;
}
.secondary:hover, button.secondary:hover, [role="button"].secondary:hover {
    background: rgba(22, 130, 105, 0.08) !important;
    color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}
button.outline, [role="button"].outline {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
button.outline:hover, [role="button"].outline:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}
button.danger, [role="button"].danger {
    background: #dc3545 !important;
    color: #fff !important;
    border: 1px solid #dc3545 !important;
}

/* 表格：表头浅灰底 + 深字加粗 + 斑马纹 + 行高舒适（>0.6rem）*/
table.data-table, table.match-table, table.compact-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.data-table thead th,
.match-table thead th,
.compact-table thead th {
    background: #f0f3f7 !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
    text-align: left;
}
.data-table tbody tr:nth-child(even) td,
.match-table tbody tr:nth-child(even) td,
.compact-table tbody tr:nth-child(even) td {
    background: #fafbfc !important;
}
.data-table tbody td,
.match-table tbody td,
.compact-table tbody td {
    border-bottom: 1px solid var(--border) !important;
    padding: 0.7rem 1rem !important;
    color: var(--text) !important;
    background: #ffffff !important;
    vertical-align: middle;
}
.data-table tbody tr:hover td,
.match-table tbody tr:hover td,
.compact-table tbody tr:hover td {
    background: #f3f7fc !important;
}
/* 禁用纯白字配浅灰底（Pico 2 在深色变量下的反色补丁我们直接在浅主题里覆盖掉）*/
thead, thead * { color: var(--text) !important; }

/* ================================================================
   深色侧栏导航（45 §视觉基线 / §响应式）
     ≥1280px 完整侧栏 220px；768—1279px 可压缩侧栏 176px；
     <768px 顶部栏 + 抽屉（沿用既有 #nav-toggle / #nav-links.open 逻辑）
   侧栏用 fixed，脱离文档流，由 body padding-left 让位。
   ================================================================ */
html, body { overflow: visible !important; }
body {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 !important;
    padding-left: var(--sidebar-w);
}
.topbar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    z-index: 200 !important;
    background: var(--sidebar) !important;
    border-right: 1px solid #0f2227;
    border-bottom: 0;
    color: #e9f0f0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .15s ease;
}
.topbar + main,
.topbar + .page-shell {
    /* 侧栏不占文档流，正文只补一个明确的上间距 */
    padding-top: 12px !important;
}
.page-shell {
    padding-bottom: 2.5rem;
}
.topbar .nav-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.9rem 0.7rem 1.5rem;
    max-width: none !important;
    margin: 0 !important;
}
.topbar .brand {
    color: #f4f8f8 !important;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 0.15rem 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.3rem;
}
.topbar .nav-toggle { display: none; }
.topbar .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
.topbar .nav-links li { margin: 0; }
.nav-group {
    list-style: none;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: rgba(233, 240, 240, 0.48);
    padding: 0.65rem 0.55rem 0.2rem;
}
.topbar .nav-links a {
    display: block;
    padding: 0.42rem 0.55rem 0.42rem 0.65rem;
    border-left: 3px solid transparent;
    border-bottom: 0 !important;
    border-radius: 6px;
    color: rgba(233, 240, 240, 0.82) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.topbar .nav-links a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
    border-left-color: rgba(22, 130, 105, 0.55);
}
/* 当前菜单：深绿底 + 左侧绿线（不靠颜色单独表意，仍有文字） */
.topbar .nav-links a.active {
    color: #ffffff !important;
    background: rgba(22, 130, 105, 0.26);
    border-left-color: var(--brand);
    font-weight: 600;
}
@media (max-width: 1279px) and (min-width: 768px) {
    :root { --sidebar-w: 176px; }
    .topbar .nav-links a { font-size: 13px; padding: 0.4rem 0.5rem 0.4rem 0.6rem; }
    .topbar .brand { font-size: 0.95rem; }
}
@media (max-width: 767px) {
    :root { --sidebar-w: 0px; }
    body { padding-left: 0; }
    .topbar {
        position: sticky !important;
        top: 0 !important;
        bottom: auto;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #0f2227;
        overflow: visible;
    }
    .topbar .nav-shell {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.7rem 0;
    }
    .topbar .brand { border-bottom: 0; margin: 0; padding: 0; }
    .topbar .nav-toggle { display: flex; }
    .topbar .nav-links { display: none; width: 100%; }
    .topbar .nav-links.open { display: flex; }
    .topbar + main,
    .topbar + .page-shell { padding-top: 12px !important; }
}

/* 行/堆栈布局间距统一 */
.stack { display: flex; flex-direction: column; gap: 0.9rem; }
.row   { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* 页脚 */
.site-footer {
    color: var(--text-secondary);
    font-size: 0.92rem;
    padding: 0.5rem 0 2.5rem;
}

/* 诊断：深色模式补丁块禁止（历史遗留分析页黑底） */
.derivation-box {
    background: #0f172a;
    color: #e2e8f0;
}
.derivation-box * { color: #e2e8f0 !important; }

/* 竞彩页精修专用 */
/* 顶部三按钮：右对齐 + 主次分明 */
.section-header .actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* 栅格：左右两卡顶部对齐，间距统一 */
.jingcai-grid {
    display: grid;
    /* 用 fr 而非百分比：百分比 + gap 会超过 100% 导致整页横溢 */
    grid-template-columns: 2fr 3fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1080px) {
    .jingcai-grid { grid-template-columns: 1fr; }
}
.jingcai-input, .jingcai-list { margin: 0; }
.jingcai-input h3 { margin-top: 0; font-size: 1.15rem; }
/* 表单 label 挤断行处理：给 1.5 列列宽 & 换行断词 */
.jingcai-input label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
    white-space: normal;
}
.jingcai-input .grid > label {
    min-width: 0;
}
/* 赛事列表头：日期筛选 + 共N场基线对齐 */
.jingcai-list .list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
}
.jingcai-list .list-header .count-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
}
.jingcai-list .list-header label {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.jingcai-list .list-header label input {
    width: 180px;
}
/* 空状态：灰字居中留白，不出现黑块 */
.jc-empty-state {
    text-align: center;
    padding: 3.5rem 1rem !important;
    color: var(--text-secondary) !important;
    background: #ffffff !important;
    font-size: 0.98rem;
    border-bottom: 1px solid var(--border) !important;
}
.jc-empty-state strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

/* =============== 首页精修专用 =============== */
.home-hero {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 1.25rem 1.3rem 1.1rem;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 1.1rem;
    align-items: stretch;
}
.home-hero-head {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
}
.home-hero-head h1 { margin: 0; font-size: 1.6rem; line-height: 1.25; }
.home-hero-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
}
.home-hero-actions a { text-decoration: none; padding: 0.48rem 0.85rem; border-radius: 8px; font-size: 14px; line-height: 1.2; }
.home-quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.1rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.home-quick-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.32rem 0.65rem;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    text-decoration: none;
    line-height: 1.2;
}
.home-quick-nav a:hover { border-color: var(--brand); background: #f3f7fc; }

/* 快速分析卡（与 hero 左栏同高，flex 柱撑满） */
.home-quick-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.home-quick-card .qc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.home-quick-card .qc-head h2 { margin: 0; font-size: 1.1rem; }
.home-quick-card .qc-head .note { font-size: 12px; color: var(--text-secondary); }
.home-quick-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    flex: 1 1 auto;
    align-content: start;
}
.home-quick-form label {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.home-quick-form label span, .home-quick-form label .label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.2;
}
.home-quick-form .qc-submit-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.05rem;
}
.home-quick-form .qc-submit-row button { padding: 0.5rem 1.1rem; font-size: 14px; }

/* 首页两行栅格：左右卡同高（grid stretch 默认） */
.home-rows {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 0;
}
.home-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.1rem;
    align-items: stretch;
}
.home-row > .card { margin: 0; }
.home-row .row-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    margin: 0;
}
@media (max-width: 1080px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-row { grid-template-columns: 1fr; }
}

/* 统计数字卡：标签 13 灰在上，数字 1.8rem+ 粗在下；flex:1 保证与快速分析右卡等高 */
.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    flex: 1 1 auto;
    align-content: stretch;
    min-height: 0;
}
.home-stat-tile {
    background: #f7fafd;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.home-stat-tile .lbl { display: block; color: var(--text-secondary); font-size: 13px; line-height: 1.3; margin-bottom: 0.3rem; }
.home-stat-tile .val { display: block; color: var(--text); font-size: 2rem; font-weight: 800; letter-spacing: 0.3px; line-height: 1.15; }

/* 首页两行栅格 + 两列双开 ≥1081 生效；内嵌浏览器窄窗 (<=1080) 单列，但 1080p 验收用 ≥1440 宽度仍两列 */
@media (min-width: 1081px) {
    .home-row > .row-card:first-child { min-height: 0; }
    .home-row .row-card .home-quick-form { flex: 1 1 auto; align-content: start; }
}

/* 卡片标题栏：说明文字缩到右上角灰小字 */
.card-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}
.card-head-row h2 { margin: 0; font-size: 1.2rem; }
.card-head-row .hint { font-size: 12px; color: var(--text-secondary); text-align: right; max-width: 60%; line-height: 1.45; }

/* 环形图：容器 ≥ 300px + 下方完整分布跳转链接 */
.home-league-chart-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}
.home-league-chart {
    width: 100%;
    height: 320px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    flex: 0 0 320px;
}
.home-league-link {
    text-align: right;
    font-size: 13px;
    margin-top: -0.1rem;
}
.home-league-link a { color: var(--brand); text-decoration: none; }
.home-league-link a:hover { color: var(--brand-hover); text-decoration: underline; }

/* 待分析比赛：空状态居中空位 + 列表滚动容器 */
.pending-list-wrap {
    flex: 1 1 auto;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}
.pending-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.2rem 1.2rem;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: #fafbfd;
}
.pending-empty .icn {
    font-size: 2.2rem;
    line-height: 1;
    color: #c4ccd8;
    margin-bottom: 0.7rem;
}
.pending-empty strong { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 0.3rem; }
.pending-empty span { font-size: 13px; line-height: 1.55; }

/* 待分析表格高度与左图对齐，内滚 */
.pending-scroll {
    max-height: 320px;
    min-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.pending-scroll table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; }
.pending-scroll th, .pending-scroll td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 14px;
}
.pending-scroll thead th {
    position: sticky;
    top: 0;
    background: #f0f3f7;
    color: var(--text);
    font-weight: 700;
    z-index: 2;
    font-size: 13px;
}
.pending-scroll tbody tr:last-child td { border-bottom: 0; }
.pending-scroll tbody tr:hover { background: #f5f8fc; cursor: pointer; }
.pending-scroll td.ops { text-align: right; }

/* ================================================
   统一页头规范 page-header（全站所有页面共用）
   两档：
     - 内页型：padding 0.9rem 1.5rem（默认）
     - 首页型：padding 1rem 1.5rem（page-header.home）
   结构：
     <div class="page-header [home]">
       <div class="page-header-main">
         <h1 class="ph-title">标题 <span class="ph-date">日期</span></h1>
         <p class="ph-sub">副标题（一行，13px 灰字）</p>
       </div>
       <div class="ph-actions"> 按钮组（小号） </div>
     </div>
   ================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.55rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    margin-bottom: 1.25rem;
    min-height: 0;
}
.page-header.home {
    padding: 0.65rem 1.25rem;
    background: #ffffff;
}
.page-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
    flex: 1 1 38%;
    max-width: 38%;
}
.page-header .ph-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.page-header .ph-date {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0;
}
.page-header .ph-sub {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: var(--text-secondary) !important;
    max-width: none !important;
    /* 45 §：不得用强制 nowrap 截掉说明文字 —— 允许正常换行，保证说明完整可读 */
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
.page-header .ph-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
    max-width: 62%;
}
/* 页头里的按钮：小号尺寸（padding 0.35rem 0.9rem，字号 14px），避免撑高 */
.page-header .ph-actions button,
.page-header .ph-actions [role="button"],
.page-header .ph-actions a[role="button"],
.page-header .ph-actions a.button,
.page-header .ph-actions a {
    padding: 0.35rem 0.9rem !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    border-radius: 8px !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
/* 页头内嵌的 label：也要小号（label 间距更紧凑），与按钮居中对齐 */
.page-header .ph-actions label {
    margin: 0;
    font-size: 13px;
    gap: 0.2rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.page-header .ph-actions label > input,
.page-header .ph-actions label > select {
    padding: 0.3rem 0.55rem;
    font-size: 14px;
    min-height: 0;
    height: auto;
    line-height: 1.2;
}
/* 兼容历史遗留的 .actions-right / .row 放在页头：保持与按钮组一致 */
.page-header .actions-right,
.page-header > .row:last-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
}
.page-header .chip {
    font-size: 13px;
    padding: 0.2rem 0.7rem;
    line-height: 1.25;
}

/* 旧 .section-header：禁止再被用到，统一用 page-header（覆盖历史遗留的大 padding） */
.section-header {
    margin-bottom: 1.25rem !important;
    padding: 0.9rem 1.5rem !important;
    min-height: 0;
}
.section-header h1, .section-header h2, .section-header h3 {
    font-size: 1.5rem !important;
}

/* ============ 防整页横溢（45 §响应式：390px 不得整页横溢） ============
   grid/flex 子项默认 min-width:auto 会按「内容最小宽度」撑破容器（宽表尤其明显），
   统一允许收缩；超宽表格交给 .table-wrap / .ra-table-wrap 独立滚动，不再顶破整页。 */
.reports-layout > *,
.graph-layout > *,
.jingcai-grid > *,
.dashboard-grid > *,
.report-grid > *,
.team-detail-grid > *,
.hero-card > * {
    min-width: 0;
}
.page-header { min-width: 0; }
.page-header-main { min-width: 0; }
.page-header .ph-actions { min-width: 0; }
.table-wrap,
.ra-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}
/* 长路径/哈希等不可断词串：允许任意位置换行，避免撑破整页（45 §） */
code, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }

/* 移动端：页头自动折行，左标题+副标题 / 右按钮组各占一整行 */
@media (max-width: 900px) {
    .page-header {
        flex-wrap: wrap;
        padding: 0.75rem 1.05rem;
        gap: 0.7rem;
    }
    .page-header.home { padding: 0.85rem 1.05rem; }
    .page-header-main { flex: 1 1 100%; max-width: 100%; }
    .page-header .ph-actions { justify-content: flex-start; width: 100%; max-width: 100%; flex: 1 1 100%; }
}