* { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --bg-page: #f5f6f8; --bg-card: #ffffff; --bg-secondary: #f8f9fa;
    --text-primary: #1a1a2e; --text-secondary: #6c757d; --text-tertiary: #adb5bd;
    --border: #e9ecef;
    --red: #e74c3c; --red-light: #fdeaea;
    --yellow: #f39c12; --yellow-light: #fef5e7;
    --green: #27ae60; --green-light: #e8f8f0;
    --blue: #3498db; --blue-light: #ebf5fb;
    --purple: #9b59b6; --purple-light: #f5eef8;
  }
  body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg-page); color: var(--text-primary); line-height: 1.6; padding-bottom: 40px; font-variant-numeric: tabular-nums; }
  .header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; padding: 24px 32px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .header h1 { font-size: 20px; font-weight: 600; }
  .header .meta { font-size: 13px; opacity: 0.7; margin-top: 4px; }
  .nav-tabs { display: flex; gap: 4px; background: var(--bg-card); padding: 8px 32px; border-bottom: 1px solid var(--border); position: sticky; top: 118px; z-index: 99; }
  .nav-tab { padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: transparent; color: var(--text-secondary); transition: all 0.2s; }
  .nav-tab:hover { background: var(--bg-secondary); color: var(--text-primary); }
  .nav-tab.active { background: var(--blue-light); color: var(--blue); }
  .container { max-width: 1400px; margin: 0 auto; padding: 24px 32px; }
  .section { display: none; } .section.active { display: block; }
  .section-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .section-title .badge { font-size: 11px; padding: 2px 10px; border-radius: 12px; font-weight: 500; }
  .badge-blue { background: var(--blue-light); color: var(--blue); }
  .badge-green { background: var(--green-light); color: var(--green); }
  .badge-red { background: var(--red-light); color: var(--red); }
  .badge-yellow { background: var(--yellow-light); color: var(--yellow); }
  .badge-purple { background: var(--purple-light); color: var(--purple); }
  .badge-gray { background: #eef1f5; color: #8a94a6; }
  .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
  .card { background: var(--bg-card); border-radius: 12px; padding: 20px; border: 1px solid var(--border); transition: box-shadow 0.2s, transform 0.2s; }
  .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
  .card-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .card-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
  .card-value.small { font-size: 22px; }
  .card-unit { font-size: 13px; color: var(--text-secondary); font-weight: 400; margin-left: 4px; }
  .card-delta { font-size: 12px; margin-top: 6px; font-weight: 500; }
  .delta-up { color: var(--red); } .delta-down { color: var(--green); } .delta-neutral { color: var(--text-secondary); }
  .card-detail { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.55; }
  .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; margin-bottom: 24px; }
  .chart-card { background: var(--bg-card); border-radius: 12px; padding: 20px; border: 1px solid var(--border); }
  .chart-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
  .alert-box { background: var(--red-light); border: 1px solid #f5c6cb; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
  .alert-box.yellow { background: var(--yellow-light); border-color: #ffeaa7; }
  .alert-box.green { background: var(--green-light); border-color: #b8e6d0; }
  .alert-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
  .alert-icon.red { background: var(--red); color: #fff; }
  .alert-icon.yellow { background: var(--yellow); color: #fff; }
  .alert-icon.green { background: var(--green); color: #fff; }
  .alert-content h4 { font-size: 14px; font-weight: 600; }
  .alert-content p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
  .table-container { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); overflow: auto; margin-bottom: 20px; }
  .table-container h3 { font-size: 14px; font-weight: 600; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; left: 0; }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th, td { padding: 10px 14px; text-align: left; white-space: nowrap; }
  th { background: var(--bg-secondary); font-weight: 600; color: var(--text-secondary); font-size: 11px; letter-spacing: 0.3px; position: sticky; top: 0; }
  td.num, th.num { text-align: right; }
  tr { border-bottom: 1px solid var(--border); }
  tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--bg-secondary); }
  .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .tag-red { background: var(--red-light); color: var(--red); }
  .tag-yellow { background: var(--yellow-light); color: var(--yellow); }
  .tag-green { background: var(--green-light); color: var(--green); }
  .tag-blue { background: var(--blue-light); color: var(--blue); }
  .tag-gray { background: #eef1f5; color: #8a94a6; }
  .text-red { color: var(--red); font-weight: 600; }
  .text-green { color: var(--green); font-weight: 600; }
  .text-yellow { color: var(--yellow); font-weight: 600; }
  .text-dim { color: var(--text-tertiary); }
  /* 同期人次系统无数据：同期生均 / 同比列整体置灰，避免被当成真实读数 */
  .cell-mute { color: #c2c8d0 !important; font-weight: 400 !important; }
  .th-mute { color: #b0b8c2 !important; }
  .progress-bar { width: 100%; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .footnote { color: var(--text-secondary); font-size: 12px; line-height: 1.8; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
  .footnote b { color: var(--text-primary); }
  /* 展开/折叠 */
  .expandable-row { cursor: pointer; }
  .expandable-row:hover { background: #eef4ff !important; }
  .expand-icon { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-secondary); margin-right: 8px; transition: transform 0.2s; vertical-align: middle; }
  .expandable-row.expanded .expand-icon { transform: rotate(180deg); }
  .sub-table-row { display: none; } .sub-table-row.show { display: table-row; }
  .sub-table-row > td { padding: 0; background: #fbfcfe; }
  /* 固定列宽布局：父表与下钻子表共用同一套列宽，整表不再横向溢出（无需拖底部滚动条），下钻行列与父表列对齐 */
  #mtxTable { table-layout: fixed; }
  #mtxTable th { padding: 9px 8px; white-space: normal; line-height: 1.25; }
  #mtxTable td { padding: 9px 8px; }
  /* 下钻行整格承载子表，必须清零内边距，否则子表整体右移、与父表列错位 */
  #mtxTable .sub-table-row > td { padding: 0; }
  #mtxTable td:first-child, #mtxTable tfoot td { white-space: normal; }
  .sub-table { border-collapse: collapse; font-size: 11px; margin: 0; table-layout: fixed; }
  .sub-table th { background: #f0f4f8; font-weight: 600; color: var(--text-secondary); padding: 8px 8px; font-size: 10px; position: static; white-space: normal; line-height: 1.25; }
  .sub-table td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; }
  .sub-table td:first-child { white-space: normal; }
  .sub-table td.num { text-align: right; }
  .sub-table tr:last-child td { border-bottom: none; }
  .sub-table tr:hover { background: #f8fafc; }
  .sub-table .sub-total { background: #f8fafc; font-weight: 600; }
  .sub-table .sub-total td { border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }
  .expand-hint { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; }
  /* 表头口径注记：标明该列是否为运营物资料、单位等 */
  th .th-sup { font-weight: 400; color: var(--text-tertiary); font-size: 9px; letter-spacing: 0; margin-left: 3px; }
  /* ===== 追加：区间工具栏 ===== */
  .range-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-card); padding: 10px 32px; border-bottom: 1px solid var(--border); position: sticky; top: 76px; z-index: 99; }
  .range-bar .lab { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
  .range-bar .seg { display: flex; gap: 4px; flex-wrap: wrap; }
  .range-bar button.p { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
  .range-bar button.p:hover { background: var(--bg-secondary); }
  .range-bar button.p.on { background: var(--blue-light); color: var(--blue); border-color: var(--blue); font-weight: 600; }
  .range-bar input[type=date] { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--text-primary); }
  .range-bar .go { padding: 6px 16px; border-radius: 6px; border: none; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
  /* ===== 追加：预算弱化样式 ===== */
  .soft-card { background: #fafbfc; border: 1px dashed var(--border); }
  .soft-card .card-value { color: var(--text-secondary); }
  .soft-col { color: var(--text-tertiary) !important; }
  th.soft-col { color: #b6bec9; }
  .todo-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .todo-card { border-radius: 12px; padding: 16px 18px; border: 1px solid; }
  .todo-card.red { background: var(--red-light); border-color: #f5c6cb; }
  .todo-card.yellow { background: var(--yellow-light); border-color: #ffeaa7; }
  .todo-card h4 { font-size: 13px; display: flex; gap: 8px; align-items: center; }
  .todo-card p { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.7; }
  .todo-card .who { font-size: 12px; color: var(--text-primary); font-weight: 600; margin-top: 4px; }
  .donut-box { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .donut { width: 170px; height: 170px; border-radius: 50%; position: relative; flex: 0 0 170px; }
  .donut:after { content: ""; position: absolute; inset: 40px; border-radius: 50%; background: #fff; }
  .donut-center { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.4; }
  .donut-center small { display: block; font-size: 10px; color: var(--text-secondary); font-weight: 400; }
  .legend-list { display: grid; gap: 8px; flex: 1; min-width: 260px; }
  .legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .legend-item i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
  .legend-item b { margin-left: auto; }
  .legend-item small { color: var(--text-secondary); width: 52px; text-align: right; }
  .controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .controls select, .controls input { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 8px 12px; color: var(--text-primary); font-size: 12px; }
  .num-cell { font-variant-numeric: tabular-nums; }
  @media (max-width: 900px) {
    .two-col, .chart-grid { grid-template-columns: 1fr; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-tabs, .range-bar, .header, .container { padding-left: 16px; padding-right: 16px; }
  }