:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #1a2233;
  --ink-2: #4a5568;
  --ink-3: #8492a6;
  --line: #e3e8ef;
  --line-2: #eef1f6;
  --brand: #005bac;          /* 主色 深蓝 */
  --brand-2: #4ebcc5;        /* 副色 浅青 */
  --brand-3: #5eb589;        /* 副色 浅绿 */
  --brand-soft: #eaf1fb;     /* 软底浅蓝 */
  --brand-warn: #ffeaa7;     /* 浅黄 */
  --brand-info: #c9e4d6;     /* 浅薄荷 */
  --gold: #b8860b;
  --up: #d32f2f;
  --down: #2e7d32;
  --up-bg: #fdecec;
  --down-bg: #e9f5ea;
  --green: #43a047;
  --green-bg: #e8f5e9;
  --green-ink: #1b5e20;
  --yellow: #fb8c00;
  --yellow-bg: #fff8e1;
  --yellow-ink: #e65100;
  --red: #e53935;
  --red-bg: #ffebee;
  --red-ink: #b71c1c;
  --shadow: 0 1px 3px rgba(26, 34, 51, .07), 0 6px 18px rgba(26, 34, 51, .05);
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: "DIN Alternate", "Bahnschrift", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(26, 34, 51, .05);
}
.topbar-inner {
  max-width: 1560px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(135deg, #005bac, #4ebcc5);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: -0.5px;
  box-shadow: 0 3px 10px rgba(26, 77, 143, .28);
}
.brand-txt h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.brand-txt p { margin: 0; font-size: 12px; color: var(--ink-3); }

.spacer { flex: 1 1 auto; }

.ctrl { display: flex; align-items: center; gap: 8px; }
.ctrl label { font-size: 12px; color: var(--ink-3); }

select, input[type="text"] {
  font: inherit; color: var(--ink);
  border: 1px solid var(--line); background: #fff;
  border-radius: 7px; padding: 7px 10px; outline: none;
}
select:focus, input[type="text"]:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(43, 111, 196, .12); }

.btn {
  font: inherit; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 7px; padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-soft); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ---------------- layout ---------------- */
.wrap { max-width: 1560px; margin: 0 auto; padding: 20px 24px 60px; display: flex; gap: 20px; align-items: flex-start; }
.main { flex: 1 1 auto; min-width: 0; }

.sidenav {
  position: sticky; top: 76px; width: 200px; flex: 0 0 200px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow);
}
.sidenav a {
  display: block; padding: 8px 10px; border-radius: 7px;
  color: var(--ink-2); text-decoration: none; font-size: 13px;
  border-left: 3px solid transparent; transition: all .15s;
}
.sidenav a:hover { background: var(--line-2); color: var(--brand); }
.sidenav a.active { background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.sidenav .nav-title { font-size: 11px; color: var(--ink-3); padding: 6px 10px 4px; letter-spacing: .5px; }
.sidenav .nav-group { margin-bottom: 2px; }
.sidenav .nav-cat {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #16324f;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: 7px;
}
.sidenav .nav-cat:hover { background: var(--line-2); }
.sidenav .nav-cat .nav-arrow { font-size: 11px; color: var(--ink-3); transition: transform .18s; }
.sidenav .nav-group.open .nav-cat .nav-arrow { transform: rotate(90deg); color: var(--brand); }
.sidenav .nav-links { display: none; padding: 2px 0 6px 8px; }
.sidenav .nav-group.open .nav-links { display: block; }
.sidenav .nav-links a { font-size: 12.5px; padding: 6px 8px 6px 14px; }
.sidenav .nav-links a.active { border-left-color: var(--brand); }
.sidenav .nav-empty { font-size: 12px; color: var(--ink-3); padding: 6px 8px 6px 14px; }

/* ---------------- section / card ---------------- */
.section { margin-bottom: 22px; scroll-margin-top: 80px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.section-head h2 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.section-head h2 .idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
}
.section-head .hint { font-size: 12px; color: var(--ink-3); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.card + .card { margin-top: 14px; }
.card-head {
  padding: 11px 16px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fcfdff, #f8fafd);
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.card-head .sub { font-size: 12px; color: var(--ink-3); }
.card-body { padding: 14px 16px; }
.card-body.flush { padding: 0; }

/* ---------------- KPI ---------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.kpi.k-up::before { background: var(--up); }
.kpi.k-down::before { background: var(--down); }
.kpi.k-gold::before { background: var(--gold); }
.kpi .k-label { font-size: 12px; color: var(--ink-3); margin-bottom: 5px; }
.kpi .k-value { font-size: 23px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; }
.kpi .k-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.kpi .k-foot { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.kpi .k-foot b { font-weight: 700; }

/* ---------------- table ---------------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tbl th, table.tbl td {
  padding: 9px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
table.tbl th {
  background: #f7f9fc; color: var(--ink-2); font-weight: 600; font-size: 12.5px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2;
}
table.tbl th:first-child, table.tbl td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
table.tbl th:first-child { background: #f7f9fc; z-index: 3; }
table.tbl th:nth-child(2), table.tbl td:nth-child(2) { text-align: left; }
table.tbl tbody tr:hover td { background: #fafcff; }
table.tbl tbody tr:hover td:first-child { background: #f4f8ff; }
table.tbl td.num, table.tbl th.num { font-variant-numeric: tabular-nums; }

tr.is-total td { background: #f2f6fc !important; font-weight: 700; border-top: 2px solid var(--brand); }
tr.is-total td:first-child { color: var(--brand); }
tr.is-sub td { background: #fbfcfe; color: var(--ink-2); font-size: 12.5px; }
tr.is-sub td:first-child { padding-left: 26px; color: var(--ink-3); }
tr.is-sub td:first-child::before { content: "└ "; color: var(--line); }
tr.is-subtotal td { background: #f6f9fd; font-weight: 700; border-top: 1px dashed #c6d2e2; }
tr.is-subtotal td:first-child { color: #16324f; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-3); }

/* conditional formatting */
.cf { display: inline-block; min-width: 68px; padding: 2px 8px; border-radius: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-green { background: var(--green-bg); color: var(--green-ink); }
.cf-yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.cf-red { background: var(--red-bg); color: var(--red-ink); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red { background: var(--red); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); align-items: center; }
.legend .item { display: inline-flex; align-items: center; gap: 5px; }

/* editable */
[contenteditable="true"] {
  outline: none; border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
  transition: background .15s, box-shadow .15s;
}
[contenteditable="true"]:hover { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--line); }
[contenteditable="true"]:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--brand-2); }

textarea.editable {
  width: 100%; min-height: 74px; resize: vertical;
  font: inherit; font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px;
  background: #fcfdff; outline: none; white-space: pre-wrap;
}
textarea.editable:focus { border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 3px rgba(43, 111, 196, .12); }

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 6px 15px; border-radius: 7px 7px 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--ink-3);
}
.tab:hover { color: var(--brand); background: #fff; }
.tab.active { background: #fff; border-color: var(--line); color: var(--brand); font-weight: 700; box-shadow: inset 0 2px 0 var(--brand); }
.tab-bar { border-bottom: 1px solid var(--line); padding: 0 6px; background: #f7f9fc; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tab-panes { padding: 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---------------- notes ---------------- */
.note-list { display: grid; gap: 10px; }
.note-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fcfdff; }
.note-item .ni-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.note-item .ni-co { font-weight: 700; font-size: 13px; }
.note-item .ni-delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.note-item .ni-del { cursor: pointer; color: var(--ink-3); font-size: 12px; margin-left: auto; }
.note-item .ni-del:hover { color: var(--red); }
.add-note { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ---------------- charts ---------------- */
.chart { width: 100%; height: 300px; }
.chart-sm { height: 250px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }

/* ---------------- advice ---------------- */
.adv-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 12px; }
.adv-card { border: 1px solid var(--line); border-radius: 8px; background: #fcfdff; overflow: hidden; }
.adv-card .ac-head {
  padding: 8px 12px; background: linear-gradient(180deg, #f7f9fc, #f2f5fa);
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.adv-card .ac-head .co { font-weight: 700; font-size: 13px; }
.adv-card .ac-head .tag { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink-3); }
.adv-card .ac-body { padding: 6px 12px; }
.adv-card .ac-body textarea { min-height: 46px; resize: vertical; }
.adv-card .ac-body textarea.editable { border: 1px dashed transparent; background: transparent; }
.adv-card .ac-body textarea.editable:hover { border-color: var(--line-2); }
.adv-card .ac-metrics { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-3); padding: 0 12px 9px; flex-wrap: wrap; }
.adv-card .ac-metrics b { font-variant-numeric: tabular-nums; }

/* ---------------- import modal ---------------- */
.mask {
  position: fixed; inset: 0; background: rgba(20, 28, 42, .45);
  display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px;
  backdrop-filter: blur(2px);
}
.mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 12px; width: 640px; max-width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
}
.modal-head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-head .x { margin-left: auto; cursor: pointer; color: var(--ink-3); font-size: 20px; line-height: 1; }
.modal-head .x:hover { color: var(--red); }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: #fafbfd; }

.drop {
  border: 1.5px dashed var(--line); border-radius: 9px; padding: 16px;
  display: flex; align-items: center; gap: 13px; margin-bottom: 11px;
  background: #fcfdff; transition: all .15s; cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--brand-2); background: var(--brand-soft); }
.drop .di {
  width: 40px; height: 40px; border-radius: 8px; background: var(--brand-soft);
  color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 40px;
}
.drop .dt { flex: 1; min-width: 0; }
.drop .dt b { display: block; font-size: 13.5px; }
.drop .dt span { font-size: 12px; color: var(--ink-3); }
.drop .dt .file { color: var(--brand); font-weight: 600; word-break: break-all; }
.drop.ok { border-color: var(--green); background: var(--green-bg); }
.drop.ok .di { background: var(--green-bg); color: var(--green-ink); }
.drop.err { border-color: var(--red); background: var(--red-bg); }
.drop.err .di { background: var(--red-bg); color: var(--red-ink); }

.opt-row { display: flex; gap: 16px; align-items: center; padding: 11px 13px; background: #f7f9fc; border-radius: 8px; margin-top: 12px; flex-wrap: wrap; }
.opt-row label { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.opt-row .desc { font-size: 12px; color: var(--ink-3); flex: 1 1 100%; }

/* ---------------- toast ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: #1a2233; color: #fff; padding: 10px 20px; border-radius: 8px;
  font-size: 13px; z-index: 300; opacity: 0; pointer-events: none;
  transition: all .25s; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: 80vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { background: #1b5e20; }
#toast.err { background: #b71c1c; }

.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.badge.gray { background: var(--line-2); color: var(--ink-3); }
.empty { padding: 22px; text-align: center; color: var(--ink-3); font-size: 13px; }
.muted { color: var(--ink-3); font-size: 12px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .sidenav { display: none; }
  .wrap { padding: 14px; }
  .topbar-inner { padding: 10px 14px; }
}

/* ---------------- print ---------------- */
@media print {
  body { background: #fff; font-size: 11px; }
  .topbar, .sidenav, .btn, .tabs, .ni-del, .add-note, .no-print { display: none !important; }
  .wrap { max-width: 100%; padding: 0; display: block; }
  .card, .kpi { box-shadow: none; border: 1px solid #d5dae2; break-inside: avoid; }
  .section { break-inside: avoid; margin-bottom: 14px; }
  .tab-pane { display: block !important; }
  .tab-panes > .tab-pane { page-break-inside: avoid; }
  .chart { height: 260px; }
  table.tbl th { position: static; }
  table.tbl td:first-child, table.tbl th:first-child { position: static; }
  textarea.editable { border: none; background: transparent; padding: 0; resize: none; overflow: visible; min-height: 0; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .adv-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ---------------- seg cards (3.1-3.4 / 4.1-4.4) ---------------- */
.seg-cards { display: grid; gap: 14px; }
.seg-card { margin: 0; }
.seg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg-head h3 { font-size: 16px; font-weight: 800; color: #16324f; display: inline-flex; align-items: center; gap: 0; }
.seg-head h3 .idx {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; margin-right: 8px; padding: 0 6px;
  border-radius: 6px; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 700;
}
.chart-cap { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sec-excerpt-btn {
  margin-left: auto; align-self: center; white-space: nowrap;
  font: inherit; font-size: 12px; color: var(--brand); cursor: pointer;
  padding: 3px 11px; border-radius: 999px; border: 1px solid var(--brand);
  background: transparent;
}
.sec-excerpt-btn:hover { background: var(--brand); color: #fff; }
.sec-excerpt-body {
  border: 1px solid var(--line); border-radius: 10px; background: #fcfdff;
  padding: 4px 14px 12px; margin-top: 10px; max-height: 460px; overflow: auto;
  box-shadow: 0 6px 18px rgba(20, 40, 80, .06);
}
.seg-total.chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink); white-space: nowrap; }
.seg-total.up { background: var(--up-bg); color: var(--up); }
.seg-total.down { background: var(--down-bg); color: var(--down); }
.chart-nav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.chart-nav .chart-label { min-width: 84px; text-align: center; }
.icon-btn { font: inherit; font-size: 12px; width: 24px; height: 24px; line-height: 1; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-2); cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--brand-2); color: var(--brand); }
.seg-body { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .seg-body { grid-template-columns: 1fr; } }
.seg-left { min-width: 0; }
.seg-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.seg-left .tbl-wrap { overflow-x: auto; }
.seg-left .tbl { min-width: 360px; }
.seg-left .tbl td:first-child { word-break: keep-all; white-space: normal; }
.chart-seg { width: 100%; height: 320px; border: 1px solid var(--line); border-radius: 8px; background: #fafcff; }
.chart-seg-stack { height: 260px; margin-top: 12px; }
/* 3.2/3.3/3.4（含 4.x 对应卡）紧凑布局：缩短左侧图示与右侧文字框 */
.seg-card-compact .chart-seg-stack { height: 175px; margin-top: 10px; }
.seg-card-compact .solo-note { min-height: 90px; }
.solo-note {
  width: 100%; min-height: 150px; resize: vertical;
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.7; color: var(--ink);
  background: #fff; outline: none;
}
.solo-note:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.seg-notes { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fcfdff; }
.seg-notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.seg-notes-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.seg-notes-head .spacer { flex: 1; }
.seg-notes-head .hint-link { font-size: 12px; color: var(--brand); cursor: pointer; padding: 2px 8px; border-radius: 4px; background: var(--brand-soft); }
.seg-notes-head .hint-link:hover { background: var(--brand); color: #fff; }

.seg-excerpts { border: 1px solid var(--line); border-radius: 8px; background: #fcfdff; overflow: hidden; }
.seg-excerpts-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; }
.seg-excerpts-head:hover { background: var(--line-2); }
.seg-excerpts-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.seg-excerpts-head .spacer { flex: 1; }
.seg-excerpts-head .count { font-size: 12px; color: var(--ink-3); }
.seg-excerpts-head .toggle { font-size: 12px; color: var(--ink-3); transition: transform .15s; }
.seg-excerpts.open .toggle { transform: rotate(90deg); color: var(--brand); }
.seg-excerpts-body { display: none; padding: 0 12px 12px; border-top: 1px dashed var(--line); }
.seg-excerpts.open .seg-excerpts-body { display: block; }
.excerpt-item { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.excerpt-item:last-child { border-bottom: none; }
.excerpt-item .co { display: inline-block; font-weight: 700; font-size: 13px; color: var(--brand-2); background: var(--brand-soft); padding: 1px 8px; border-radius: 4px; margin-bottom: 6px; }
.excerpt-item .text { white-space: pre-wrap; font-size: 12px; line-height: 1.6; color: var(--ink); }
.seg-src { font-size: 12px; color: var(--brand-2); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.seg-src b { color: var(--brand); }

/* ---------------- sidebar (蓝色企业后台风格，与整体品牌一致) ---------------- */
.sidenav {
  position: sticky; top: 76px; width: 196px; flex: 0 0 196px;
  background: linear-gradient(180deg, #4ebcc5, #005bac);
  border-radius: 10px;
  display: flex; flex-direction: column;
  color: #fff; box-shadow: 0 4px 14px rgba(20, 40, 80, .15);
  overflow: hidden;
}
.sidenav .brand-block {
  padding: 22px 14px 16px; text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.sidenav .brand-logo { display: inline-flex; justify-content: center; }
.sidenav .brand-logo svg { display: block; }
.sidenav .brand-name {
  margin-top: 10px; font-size: 13px; font-weight: 500; color: #fff;
  line-height: 1.45; letter-spacing: .5px;
}
.sidenav .nav-section { padding: 12px 8px; flex: 1; }
.sidenav .nav-group { margin-bottom: 4px; }
.sidenav .nav-cat {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: 8px; letter-spacing: .3px;
}
.sidenav .nav-cat:hover { background: rgba(255, 255, 255, .10); }
.sidenav .nav-cat .nav-arrow { font-size: 11px; color: rgba(255, 255, 255, .55); transition: transform .18s; }
.sidenav .nav-group.open .nav-cat .nav-arrow { transform: rotate(90deg); color: rgba(255, 255, 255, .85); }
.sidenav .nav-links { display: none; padding: 4px 0 6px 4px; }
.sidenav .nav-group.open .nav-links { display: block; }
.sidenav .nav-links a {
  display: block; font-size: 13px; padding: 8px 12px; margin: 2px 0;
  border-radius: 7px; color: rgba(255, 255, 255, .82);
  text-decoration: none; border-left: 3px solid transparent; transition: all .15s;
}
.sidenav .nav-links a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.sidenav .nav-links a.active {
  background: #fff; color: #005bac; font-weight: 600; border-left-color: #005bac;
}
.sidenav .nav-leaf {
  display: block; margin: 4px 0; padding: 10px 12px; border-radius: 8px;
  color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
  border-left: 3px solid transparent; transition: all .15s;
}
.sidenav .nav-leaf:hover { background: rgba(255, 255, 255, .10); }
.sidenav .nav-leaf.active { background: #fff; color: #005bac; border-left-color: #005bac; }
.sidenav .nav-empty {
  font-size: 12px; color: rgba(255, 255, 255, .55);
  padding: 6px 14px 4px 14px;
}
.sidenav .user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.sidenav .user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #dce6f2;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidenav .user-info { flex: 1; min-width: 0; }
.sidenav .user-name { font-size: 13px; color: #fff; font-weight: 600; }
.sidenav .user-dept { font-size: 11px; color: rgba(255, 255, 255, .65); margin-top: 2px; }
.sidenav .user-arrow { color: rgba(255, 255, 255, .5); font-size: 14px; }

/* ---------------- 三项费用（附表4）---------------- */
.tbl-fee { min-width: 1080px; white-space: nowrap; }
.fee-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.fee-note ul { margin: 2px 0 0; padding-left: 20px; }
.fee-note li { margin: 2px 0; }
.fee-note b { color: var(--ink); }
.over-badge { font-size: 12px; line-height: 1; }
.over-text { color: #c62828; font-weight: 700; }
.ok-text { color: var(--ink-3); }
td.num.over { color: #c62828; font-weight: 700; }

/* 三项费用：表格收窄 + 分区色块 */
.fee-box { max-width: 860px; }
.fee-box-wide { max-width: 100%; }
.tbl-warn { min-width: 560px; }
.tbl-fee { min-width: 880px; font-size: 12.5px; }
.fee-box .tbl { font-size: 12.5px; }
.tbl-fee th, .tbl-fee td { white-space: nowrap; }
.tbl-fee thead th.fee-g {
  color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .5px;
  padding: 8px 6px; border-right: 2px solid #fff;
}
.tbl-fee thead th.fee-g-name { background: #5a6b82; color: #fff; }
.tbl-fee thead th.fee-g0 { background: #ffeaa7; color: #5a4d00; }   /* 业务招待费 · 浅黄 */
.tbl-fee thead th.fee-g1 { background: #4ebcc5; color: #003f44; }   /* 差旅费 · 浅青 */
.tbl-fee thead th.fee-g2 { background: #5eb589; color: #1f4d2e; }   /* 汽车费 · 浅绿 */
.tbl-fee thead tr:last-child th { background: #f3f6fb; color: #5a6b82; font-weight: 600; font-size: 12px; }
.tbl-fee tbody td.fee-sep { border-left: 2px solid #eef1f6; }
.tbl-fee tbody tr:not(.is-total) td:first-child { font-weight: 600; color: #16324f; }

/* 片区表：表头换行 + 居中 + 整表自适应（不横向溢出） */
.tbl-fee { width: 100%; min-width: 0; }
.tbl-fee thead th { white-space: normal; text-align: center; vertical-align: middle; padding: 6px 3px; }
.tbl-fee thead th.fee-g { padding: 8px 3px; font-size: 13px; }
.tbl-fee thead th.fee-g-name { font-size: 13px; }
.tbl-fee tbody td { white-space: nowrap; padding: 7px 3px; }
.tbl-fee tbody td:first-child { white-space: normal; text-align: center; font-weight: 600; color: #16324f; }
.tbl-fee tbody tr.is-total td:first-child { text-align: center; }

/* 片区表头公司名称白底 */
.tbl-fee thead th.fee-g-name { background: #fff; color: #5a6b82; }

/* 片区表公司名称数据靠左 */
.tbl-fee tbody td:first-child { text-align: left; }
.tbl-fee tbody tr.is-total td:first-child { text-align: left; }

/* 片区表公司名称列宽 = 长运本部（含高客司）整行宽 */
.tbl-fee thead th.fee-g-name,
.tbl-fee tbody td:first-child {
  width: 160px; min-width: 160px; max-width: 160px;
  white-space: nowrap; text-align: left;
}

/* 片区表固定布局以均分费用列宽 */
.tbl-fee { table-layout: fixed; }

/* 片区表：字段与数据全部居中 */
.tbl-fee thead th,
.tbl-fee thead th.fee-g,
.tbl-fee thead th.fee-g-name { text-align: center; }
.tbl-fee tbody td,
.tbl-fee tbody td.num { text-align: center; }
.tbl-fee tbody td:first-child,
.tbl-fee tbody tr.is-total td:first-child { text-align: center; }

/* 公司名称表头底色与年度定额(浅灰)一致 */
.tbl-fee thead th.fee-g-name { background: #f3f6fb; color: #5a6b82; }

/* 长运整体考核进度：与参考图一致（浅蓝灰表头/深色合计顶线/红色正差异） */
.fee-overall thead th {
  background: #eaf2f8; color: #16324f; font-weight: 700;
  text-align: center; border-bottom: 2px solid #c9d6e4; padding: 8px 10px;
}
.fee-overall tr.is-total td { background: #f6f9fd; font-weight: 700; border-top: 2px solid #16324f; }
.fee-overall tr.is-total td:first-child { text-align: center; font-weight: 700; }
.fee-overall .num.up { color: #d32f2f; font-weight: 700; }
.fee-overall .num.down { color: #1e8e3e; font-weight: 700; }

/* 片区表「公司名称」表头与整体风格匹配（浅蓝灰） */
.tbl-fee thead th.fee-g-name { background: #eaf2f8; color: #16324f; }

/* 片区表：取消全局冻结列，子表头第一/第二列也居中 */
.tbl-fee th:first-child,
.tbl-fee td:first-child { position: static !important; }
.tbl-fee thead th:first-child,
.tbl-fee thead th:nth-child(2),
.tbl-fee tbody td:first-child,
.tbl-fee tbody td:nth-child(2) { text-align: center !important; }

/* 片区表公司名称列字体颜色与「年度定额」表头一致 */
.tbl-fee thead th.fee-g-name,
.tbl-fee tbody td:first-child,
.tbl-fee tbody tr.is-total td:first-child { color: #5a6b82 !important; font-weight: 600; }

/* 长运整体表：铺满卡片白色区域 */
#feeOverall .tbl-wrap { background: #fff; max-width: 100%; }

/* 长运整体表：费用项目列靠左，其余列文字与数据居中 */
.fee-overall thead th:first-child,
.fee-overall tbody td:first-child { text-align: left; }
.fee-overall tbody td:not(:first-child) { text-align: center; }
.fee-overall tbody td.num:not(:first-child) { text-align: center; }

/* 长运整体表：修复第二列表头（考核利润）被全局规则左对齐 */
.fee-overall thead th:nth-child(2) { text-align: center !important; }

/* 年度总况表格：收窄紧凑 */
#trendTbl { width: auto; min-width: 620px; max-width: 920px; font-size: 12px; }
#trendTbl th, #trendTbl td { padding: 6px 9px; white-space: nowrap; }
#trendTbl th { text-align: center; font-weight: 700; }

/* 年度总况表格：再收窄 + 数据整体居中 */
#trendTblWrap { max-width: 960px; }
#trendTbl { width: auto; min-width: 480px; max-width: 100%; font-size: 11.5px; }
#trendTbl th, #trendTbl td { padding: 5px 8px; white-space: nowrap; text-align: center; }
#trendTbl td.num { text-align: center; }
#trendTbl tbody td:first-child { text-align: center; }

/* 年度总况表：固定布局使月份列等宽 */
#trendTbl { table-layout: fixed; }

/* 年度总况表：月份列收紧后进一步压缩单元格内边距 */
#trendTbl th, #trendTbl td { padding: 5px 3px; }

/* 年度总况表：铺满卡片、与上方右视图右缘对齐（去除 960px 收缩限制） */
#trendTblWrap { max-width: 100%; width: 100%; }
#trendTbl { width: 100%; min-width: 0; max-width: 100%; }

/* ---------------- 工作台欢迎页 ---------------- */
#modHome .section { margin-bottom: 0; }
.home-hero {
  background: linear-gradient(135deg, #4ebcc5, #005bac);
  color: #fff; border-radius: 12px; padding: 34px 36px 30px;
  box-shadow: 0 6px 20px rgba(26, 77, 143, .18);
}
.home-hero .hh-badge {
  display: inline-block; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 12px; margin-bottom: 12px;
}
.home-hero h1 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.home-hero p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .88); line-height: 1.8; max-width: 760px; }
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.home-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 18px 18px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.home-card .hc-title { font-size: 15px; font-weight: 800; color: #16324f; }
.home-card .hc-title::before { content: ''; display: inline-block; width: 8px; height: 14px; border-radius: 2px; background: var(--brand-2); margin-right: 8px; vertical-align: -2px; }
.home-card .hc-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; flex: 1; }
.home-card .btn { align-self: flex-start; }
.home-tips {
  margin-top: 18px; border: 1px dashed var(--line); background: #fbfcfe; border-radius: 10px;
  padding: 14px 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.9;
}
.home-tips b { color: #16324f; }
.home-tips ul { margin: 4px 0 0; padding-left: 20px; }
.home-tips li b { color: var(--brand); }
@media (max-width: 900px) { .home-cards { grid-template-columns: 1fr; } }

/* 工作台 KPI 卡片行 */
.home-kpis { margin-top: 18px; grid-template-columns: repeat(3, 1fr); }
.home-kpis .kpi { background: var(--card); }
@media (max-width: 900px) { .home-kpis { grid-template-columns: 1fr; } }

/* 工作台：隐藏文字备注（卡片描述 + 使用提示），保留标题/按钮/KPI */
.home-card .hc-desc { display: none; }
.home-tips { display: none; }

/* 工作台快捷卡片：仅显示按钮（隐藏标题/描述，按钮居中） */
.home-card .hc-title { display: none; }
.home-card { justify-content: center; align-items: center; }
.home-card .btn { align-self: center; }

/* 工作台：隐藏红色框内所有文字备注 */
.home-hero p#homeSub { display: none; }
.home-card .hc-desc { display: none; }
.home-tips { display: none; }

/* 工作台：快捷入口折叠按钮 */
.home-quick { margin-top: 18px; }
.btn-quick {
  background: linear-gradient(90deg, #4ebcc5, #005bac); color: #fff; font-weight: 700;
  border: none; padding: 8px 18px; border-radius: 18px; cursor: pointer; font-size: 13.5px;
}
.btn-quick:hover { opacity: .9; }
.home-quick .home-cards { margin-top: 14px; }

/* 工作台：快捷入口按钮与问候同排（向日葵右侧） */
.home-hero h1 { display: inline-block; }
#quickToggle { vertical-align: middle; margin-left: 14px; }
#homeQuickCards { margin-top: 14px; }

/* ---------------- 侧栏按参考图配色（深蓝 + 亮黄 + 浅青） ---------------- */
.sidenav {
  background: linear-gradient(180deg, #005bac 0%, #0a6bb8 60%, #085aa3 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12);
}
.sidenav .brand-block { border-bottom-color: rgba(255, 255, 255, .20) !important; }
.sidenav .nav-cat {
  background: transparent; color: #fff !important;
  position: relative; transition: background .15s, color .15s;
}
.sidenav .nav-cat:hover { background: rgba(127, 200, 220, .18); color: #d7efff !important; }
.sidenav .nav-group.open > .nav-cat {
  background: rgba(127, 200, 220, .22);
  color: #fff !important;
}
.sidenav .nav-group.open > .nav-cat::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: #7fc8dc; border-radius: 2px;
}
.sidenav .nav-cat .nav-arrow { color: #f9e16b !important; opacity: .95; }
.sidenav .nav-links { background: rgba(0, 0, 0, .10); border-radius: 8px; padding: 4px 4px 6px; }
.sidenav .nav-links a { color: rgba(255, 255, 255, .85) !important; }
.sidenav .nav-links a:hover { background: rgba(127, 200, 220, .25); color: #fff !important; }
.sidenav .nav-links a.active {
  background: #f9e16b !important; color: #00498a !important; font-weight: 700 !important;
  border-left-color: #00498a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.sidenav .nav-leaf {
  background: transparent; color: #fff !important; position: relative;
}
.sidenav .nav-leaf:hover { background: rgba(127, 200, 220, .18); color: #fff !important; }
.sidenav .nav-leaf.active {
  background: #f9e16b !important; color: #00498a !important; font-weight: 700 !important;
  border-left-color: #00498a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.sidenav .user-card { background: #7fc8dc; color: #00498a; border-top: 1px solid rgba(0, 0, 0, .10); }
.sidenav .user-avatar { background: #fff !important; }
.sidenav .user-avatar svg circle { fill: #005bac; }
.sidenav .user-avatar svg path { fill: #005bac; }
.sidenav .user-name { color: #00498a !important; font-weight: 700; }
.sidenav .user-dept { color: #005bac !important; }
.sidenav .user-arrow { color: #005bac !important; }

/* 下属片区总况表（与板块总况表一致） */
#trendAreaTblWrap { width: 100%; max-width: 100%; }
#trendAreaTbl { table-layout: fixed; width: 100%; min-width: 0; font-size: 12px; }
#trendAreaTbl th, #trendAreaTbl td { padding: 6px 8px; white-space: nowrap; text-align: center; }
#trendAreaTbl td.num { text-align: center; }
#trendAreaTbl tbody tr.is-total td { background: #f2f6fc; font-weight: 700; border-top: 2px solid #005bac; }

/* 顶栏 上次刷新/保存时间 */
.sync-time { font-size: 12px; color: #5a6b82; margin: 0 6px 0 10px; white-space: nowrap; align-self: center; }

root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #1a2233;
  --ink-2: #4a5568;
  --ink-3: #8492a6;
  --line: #e3e8ef;
  --line-2: #eef1f6;
  --brand: #005bac;          /* 主色 深蓝 */
  --brand-2: #4ebcc5;        /* 副色 浅青 */
  --brand-3: #5eb589;        /* 副色 浅绿 */
  --brand-soft: #eaf1fb;     /* 软底浅蓝 */
  --brand-warn: #ffeaa7;     /* 浅黄 */
  --brand-info: #c9e4d6;     /* 浅薄荷 */
  --gold: #b8860b;
  --up: #d32f2f;
  --down: #2e7d32;
  --up-bg: #fdecec;
  --down-bg: #e9f5ea;
  --green: #43a047;
  --green-bg: #e8f5e9;
  --green-ink: #1b5e20;
  --yellow: #fb8c00;
  --yellow-bg: #fff8e1;
  --yellow-ink: #e65100;
  --red: #e53935;
  --red-bg: #ffebee;
  --red-ink: #b71c1c;
  --shadow: 0 1px 3px rgba(26, 34, 51, .07), 0 6px 18px rgba(26, 34, 51, .05);
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: "DIN Alternate", "Bahnschrift", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(26, 34, 51, .05);
}
.topbar-inner {
  max-width: 1560px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(135deg, #005bac, #4ebcc5);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: -0.5px;
  box-shadow: 0 3px 10px rgba(26, 77, 143, .28);
}
.brand-txt h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.brand-txt p { margin: 0; font-size: 12px; color: var(--ink-3); }

.spacer { flex: 1 1 auto; }

.ctrl { display: flex; align-items: center; gap: 8px; }
.ctrl label { font-size: 12px; color: var(--ink-3); }

select, input[type="text"] {
  font: inherit; color: var(--ink);
  border: 1px solid var(--line); background: #fff;
  border-radius: 7px; padding: 7px 10px; outline: none;
}
select:focus, input[type="text"]:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(43, 111, 196, .12); }

.btn {
  font: inherit; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 7px; padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-soft); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ---------------- layout ---------------- */
.wrap { max-width: 1560px; margin: 0 auto; padding: 20px 24px 60px; display: flex; gap: 20px; align-items: flex-start; }
.main { flex: 1 1 auto; min-width: 0; }

.sidenav {
  position: sticky; top: 76px; width: 200px; flex: 0 0 200px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow);
}
.sidenav a {
  display: block; padding: 8px 10px; border-radius: 7px;
  color: var(--ink-2); text-decoration: none; font-size: 13px;
  border-left: 3px solid transparent; transition: all .15s;
}
.sidenav a:hover { background: var(--line-2); color: var(--brand); }
.sidenav a.active { background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.sidenav .nav-title { font-size: 11px; color: var(--ink-3); padding: 6px 10px 4px; letter-spacing: .5px; }
.sidenav .nav-group { margin-bottom: 2px; }
.sidenav .nav-cat {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #16324f;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: 7px;
}
.sidenav .nav-cat:hover { background: var(--line-2); }
.sidenav .nav-cat .nav-arrow { font-size: 11px; color: var(--ink-3); transition: transform .18s; }
.sidenav .nav-group.open .nav-cat .nav-arrow { transform: rotate(90deg); color: var(--brand); }
.sidenav .nav-links { display: none; padding: 2px 0 6px 8px; }
.sidenav .nav-group.open .nav-links { display: block; }
.sidenav .nav-links a { font-size: 12.5px; padding: 6px 8px 6px 14px; }
.sidenav .nav-links a.active { border-left-color: var(--brand); }
.sidenav .nav-empty { font-size: 12px; color: var(--ink-3); padding: 6px 8px 6px 14px; }

/* ---------------- section / card ---------------- */
.section { margin-bottom: 22px; scroll-margin-top: 80px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.section-head h2 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.section-head h2 .idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
}
.section-head .hint { font-size: 12px; color: var(--ink-3); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.card + .card { margin-top: 14px; }
.card-head {
  padding: 11px 16px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fcfdff, #f8fafd);
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.card-head .sub { font-size: 12px; color: var(--ink-3); }
.card-body { padding: 14px 16px; }
.card-body.flush { padding: 0; }

/* ---------------- KPI ---------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.kpi.k-up::before { background: var(--up); }
.kpi.k-down::before { background: var(--down); }
.kpi.k-gold::before { background: var(--gold); }
.kpi .k-label { font-size: 12px; color: var(--ink-3); margin-bottom: 5px; }
.kpi .k-value { font-size: 23px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; }
.kpi .k-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.kpi .k-foot { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.kpi .k-foot b { font-weight: 700; }

/* ---------------- table ---------------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tbl th, table.tbl td {
  padding: 9px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
table.tbl th {
  background: #f7f9fc; color: var(--ink-2); font-weight: 600; font-size: 12.5px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2;
}
table.tbl th:first-child, table.tbl td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
table.tbl th:first-child { background: #f7f9fc; z-index: 3; }
table.tbl th:nth-child(2), table.tbl td:nth-child(2) { text-align: left; }
table.tbl tbody tr:hover td { background: #fafcff; }
table.tbl tbody tr:hover td:first-child { background: #f4f8ff; }
table.tbl td.num, table.tbl th.num { font-variant-numeric: tabular-nums; }

tr.is-total td { background: #f2f6fc !important; font-weight: 700; border-top: 2px solid var(--brand); }
tr.is-total td:first-child { color: var(--brand); }
tr.is-sub td { background: #fbfcfe; color: var(--ink-2); font-size: 12.5px; }
tr.is-sub td:first-child { padding-left: 26px; color: var(--ink-3); }
tr.is-sub td:first-child::before { content: "└ "; color: var(--line); }
tr.is-subtotal td { background: #f6f9fd; font-weight: 700; border-top: 1px dashed #c6d2e2; }
tr.is-subtotal td:first-child { color: #16324f; }

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-3); }

/* conditional formatting */
.cf { display: inline-block; min-width: 68px; padding: 2px 8px; border-radius: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-green { background: var(--green-bg); color: var(--green-ink); }
.cf-yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.cf-red { background: var(--red-bg); color: var(--red-ink); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red { background: var(--red); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); align-items: center; }
.legend .item { display: inline-flex; align-items: center; gap: 5px; }

/* editable */
[contenteditable="true"] {
  outline: none; border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
  transition: background .15s, box-shadow .15s;
}
[contenteditable="true"]:hover { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--line); }
[contenteditable="true"]:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--brand-2); }

textarea.editable {
  width: 100%; min-height: 74px; resize: vertical;
  font: inherit; font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px;
  background: #fcfdff; outline: none; white-space: pre-wrap;
}
textarea.editable:focus { border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 3px rgba(43, 111, 196, .12); }

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 6px 15px; border-radius: 7px 7px 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--ink-3);
}
.tab:hover { color: var(--brand); background: #fff; }
.tab.active { background: #fff; border-color: var(--line); color: var(--brand); font-weight: 700; box-shadow: inset 0 2px 0 var(--brand); }
.tab-bar { border-bottom: 1px solid var(--line); padding: 0 6px; background: #f7f9fc; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tab-panes { padding: 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---------------- notes ---------------- */
.note-list { display: grid; gap: 10px; }
.note-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fcfdff; }
.note-item .ni-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.note-item .ni-co { font-weight: 700; font-size: 13px; }
.note-item .ni-delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.note-item .ni-del { cursor: pointer; color: var(--ink-3); font-size: 12px; margin-left: auto; }
.note-item .ni-del:hover { color: var(--red); }
.add-note { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ---------------- charts ---------------- */
.chart { width: 100%; height: 300px; }
.chart-sm { height: 250px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }

/* ---------------- advice ---------------- */
.adv-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 12px; }
.adv-card { border: 1px solid var(--line); border-radius: 8px; background: #fcfdff; overflow: hidden; }
.adv-card .ac-head {
  padding: 8px 12px; background: linear-gradient(180deg, #f7f9fc, #f2f5fa);
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.adv-card .ac-head .co { font-weight: 700; font-size: 13px; }
.adv-card .ac-head .tag { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink-3); }
.adv-card .ac-body { padding: 6px 12px; }
.adv-card .ac-body textarea { min-height: 46px; resize: vertical; }
.adv-card .ac-body textarea.editable { border: 1px dashed transparent; background: transparent; }
.adv-card .ac-body textarea.editable:hover { border-color: var(--line-2); }
.adv-card .ac-metrics { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-3); padding: 0 12px 9px; flex-wrap: wrap; }
.adv-card .ac-metrics b { font-variant-numeric: tabular-nums; }

/* ---------------- import modal ---------------- */
.mask {
  position: fixed; inset: 0; background: rgba(20, 28, 42, .45);
  display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px;
  backdrop-filter: blur(2px);
}
.mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 12px; width: 640px; max-width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
}
.modal-head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-head .x { margin-left: auto; cursor: pointer; color: var(--ink-3); font-size: 20px; line-height: 1; }
.modal-head .x:hover { color: var(--red); }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: #fafbfd; }

.drop {
  border: 1.5px dashed var(--line); border-radius: 9px; padding: 16px;
  display: flex; align-items: center; gap: 13px; margin-bottom: 11px;
  background: #fcfdff; transition: all .15s; cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--brand-2); background: var(--brand-soft); }
.drop .di {
  width: 40px; height: 40px; border-radius: 8px; background: var(--brand-soft);
  color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 40px;
}
.drop .dt { flex: 1; min-width: 0; }
.drop .dt b { display: block; font-size: 13.5px; }
.drop .dt span { font-size: 12px; color: var(--ink-3); }
.drop .dt .file { color: var(--brand); font-weight: 600; word-break: break-all; }
.drop.ok { border-color: var(--green); background: var(--green-bg); }
.drop.ok .di { background: var(--green-bg); color: var(--green-ink); }
.drop.err { border-color: var(--red); background: var(--red-bg); }
.drop.err .di { background: var(--red-bg); color: var(--red-ink); }

.opt-row { display: flex; gap: 16px; align-items: center; padding: 11px 13px; background: #f7f9fc; border-radius: 8px; margin-top: 12px; flex-wrap: wrap; }
.opt-row label { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.opt-row .desc { font-size: 12px; color: var(--ink-3); flex: 1 1 100%; }

/* ---------------- toast ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: #1a2233; color: #fff; padding: 10px 20px; border-radius: 8px;
  font-size: 13px; z-index: 300; opacity: 0; pointer-events: none;
  transition: all .25s; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: 80vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { background: #1b5e20; }
#toast.err { background: #b71c1c; }

.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.badge.gray { background: var(--line-2); color: var(--ink-3); }
.empty { padding: 22px; text-align: center; color: var(--ink-3); font-size: 13px; }
.muted { color: var(--ink-3); font-size: 12px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .sidenav { display: none; }
  .wrap { padding: 14px; }
  .topbar-inner { padding: 10px 14px; }
}

/* ---------------- print ---------------- */
@media print {
  body { background: #fff; font-size: 11px; }
  .topbar, .sidenav, .btn, .tabs, .ni-del, .add-note, .no-print { display: none !important; }
  .wrap { max-width: 100%; padding: 0; display: block; }
  .card, .kpi { box-shadow: none; border: 1px solid #d5dae2; break-inside: avoid; }
  .section { break-inside: avoid; margin-bottom: 14px; }
  .tab-pane { display: block !important; }
  .tab-panes > .tab-pane { page-break-inside: avoid; }
  .chart { height: 260px; }
  table.tbl th { position: static; }
  table.tbl td:first-child, table.tbl th:first-child { position: static; }
  textarea.editable { border: none; background: transparent; padding: 0; resize: none; overflow: visible; min-height: 0; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .adv-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ---------------- seg cards (3.1-3.4 / 4.1-4.4) ---------------- */
.seg-cards { display: grid; gap: 14px; }
.seg-card { margin: 0; }
.seg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg-head h3 { font-size: 16px; font-weight: 800; color: #16324f; display: inline-flex; align-items: center; gap: 0; }
.seg-head h3 .idx {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; margin-right: 8px; padding: 0 6px;
  border-radius: 6px; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 700;
}
.chart-cap { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sec-excerpt-btn {
  margin-left: auto; align-self: center; white-space: nowrap;
  font: inherit; font-size: 12px; color: var(--brand); cursor: pointer;
  padding: 3px 11px; border-radius: 999px; border: 1px solid var(--brand);
  background: transparent;
}
.sec-excerpt-btn:hover { background: var(--brand); color: #fff; }
.sec-excerpt-body {
  border: 1px solid var(--line); border-radius: 10px; background: #fcfdff;
  padding: 4px 14px 12px; margin-top: 10px; max-height: 460px; overflow: auto;
  box-shadow: 0 6px 18px rgba(20, 40, 80, .06);
}
.seg-total.chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink); white-space: nowrap; }
.seg-total.up { background: var(--up-bg); color: var(--up); }
.seg-total.down { background: var(--down-bg); color: var(--down); }
.chart-nav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.chart-nav .chart-label { min-width: 84px; text-align: center; }
.icon-btn { font: inherit; font-size: 12px; width: 24px; height: 24px; line-height: 1; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-2); cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--brand-2); color: var(--brand); }
.seg-body { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .seg-body { grid-template-columns: 1fr; } }
.seg-left { min-width: 0; }
.seg-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.seg-left .tbl-wrap { overflow-x: auto; }
.seg-left .tbl { min-width: 360px; }
.seg-left .tbl td:first-child { word-break: keep-all; white-space: normal; }
.chart-seg { width: 100%; height: 320px; border: 1px solid var(--line); border-radius: 8px; background: #fafcff; }
.chart-seg-stack { height: 260px; margin-top: 12px; }
/* 3.2/3.3/3.4（含 4.x 对应卡）紧凑布局：缩短左侧图示与右侧文字框 */
.seg-card-compact .chart-seg-stack { height: 175px; margin-top: 10px; }
.seg-card-compact .solo-note { min-height: 90px; }
.solo-note {
  width: 100%; min-height: 150px; resize: vertical;
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.7; color: var(--ink);
  background: #fff; outline: none;
}
.solo-note:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.seg-notes { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fcfdff; }
.seg-notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.seg-notes-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.seg-notes-head .spacer { flex: 1; }
.seg-notes-head .hint-link { font-size: 12px; color: var(--brand); cursor: pointer; padding: 2px 8px; border-radius: 4px; background: var(--brand-soft); }
.seg-notes-head .hint-link:hover { background: var(--brand); color: #fff; }

.seg-excerpts { border: 1px solid var(--line); border-radius: 8px; background: #fcfdff; overflow: hidden; }
.seg-excerpts-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; }
.seg-excerpts-head:hover { background: var(--line-2); }
.seg-excerpts-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.seg-excerpts-head .spacer { flex: 1; }
.seg-excerpts-head .count { font-size: 12px; color: var(--ink-3); }
.seg-excerpts-head .toggle { font-size: 12px; color: var(--ink-3); transition: transform .15s; }
.seg-excerpts.open .toggle { transform: rotate(90deg); color: var(--brand); }
.seg-excerpts-body { display: none; padding: 0 12px 12px; border-top: 1px dashed var(--line); }
.seg-excerpts.open .seg-excerpts-body { display: block; }
.excerpt-item { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.excerpt-item:last-child { border-bottom: none; }
.excerpt-item .co { display: inline-block; font-weight: 700; font-size: 13px; color: var(--brand-2); background: var(--brand-soft); padding: 1px 8px; border-radius: 4px; margin-bottom: 6px; }
.excerpt-item .text { white-space: pre-wrap; font-size: 12px; line-height: 1.6; color: var(--ink); }
.seg-src { font-size: 12px; color: var(--brand-2); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.seg-src b { color: var(--brand); }

/* ---------------- sidebar (蓝色企业后台风格，与整体品牌一致) ---------------- */
.sidenav {
  position: sticky; top: 76px; width: 196px; flex: 0 0 196px;
  background: linear-gradient(180deg, #4ebcc5, #005bac);
  border-radius: 10px;
  display: flex; flex-direction: column;
  color: #fff; box-shadow: 0 4px 14px rgba(20, 40, 80, .15);
  overflow: hidden;
}
.sidenav .brand-block {
  padding: 22px 14px 16px; text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.sidenav .brand-logo { display: inline-flex; justify-content: center; }
.sidenav .brand-logo svg { display: block; }
.sidenav .brand-name {
  margin-top: 10px; font-size: 13px; font-weight: 500; color: #fff;
  line-height: 1.45; letter-spacing: .5px;
}
.sidenav .nav-section { padding: 12px 8px; flex: 1; }
.sidenav .nav-group { margin-bottom: 4px; }
.sidenav .nav-cat {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: 8px; letter-spacing: .3px;
}
.sidenav .nav-cat:hover { background: rgba(255, 255, 255, .10); }
.sidenav .nav-cat .nav-arrow { font-size: 11px; color: rgba(255, 255, 255, .55); transition: transform .18s; }
.sidenav .nav-group.open .nav-cat .nav-arrow { transform: rotate(90deg); color: rgba(255, 255, 255, .85); }
.sidenav .nav-links { display: none; padding: 4px 0 6px 4px; }
.sidenav .nav-group.open .nav-links { display: block; }
.sidenav .nav-links a {
  display: block; font-size: 13px; padding: 8px 12px; margin: 2px 0;
  border-radius: 7px; color: rgba(255, 255, 255, .82);
  text-decoration: none; border-left: 3px solid transparent; transition: all .15s;
}
.sidenav .nav-links a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.sidenav .nav-links a.active {
  background: #fff; color: #005bac; font-weight: 600; border-left-color: #005bac;
}
.sidenav .nav-leaf {
  display: block; margin: 4px 0; padding: 10px 12px; border-radius: 8px;
  color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
  border-left: 3px solid transparent; transition: all .15s;
}
.sidenav .nav-leaf:hover { background: rgba(255, 255, 255, .10); }
.sidenav .nav-leaf.active { background: #fff; color: #005bac; border-left-color: #005bac; }
.sidenav .nav-empty {
  font-size: 12px; color: rgba(255, 255, 255, .55);
  padding: 6px 14px 4px 14px;
}
.sidenav .user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.sidenav .user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #dce6f2;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidenav .user-info { flex: 1; min-width: 0; }
.sidenav .user-name { font-size: 13px; color: #fff; font-weight: 600; }
.sidenav .user-dept { font-size: 11px; color: rgba(255, 255, 255, .65); margin-top: 2px; }
.sidenav .user-arrow { color: rgba(255, 255, 255, .5); font-size: 14px; }

/* ---------------- 三项费用（附表4）---------------- */
.tbl-fee { min-width: 1080px; white-space: nowrap; }
.fee-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.fee-note ul { margin: 2px 0 0; padding-left: 20px; }
.fee-note li { margin: 2px 0; }
.fee-note b { color: var(--ink); }
.over-badge { font-size: 12px; line-height: 1; }
.over-text { color: #c62828; font-weight: 700; }
.ok-text { color: var(--ink-3); }
td.num.over { color: #c62828; font-weight: 700; }

/* 三项费用：表格收窄 + 分区色块 */
.fee-box { max-width: 860px; }
.fee-box-wide { max-width: 100%; }
.tbl-warn { min-width: 560px; }
.tbl-fee { min-width: 880px; font-size: 12.5px; }
.fee-box .tbl { font-size: 12.5px; }
.tbl-fee th, .tbl-fee td { white-space: nowrap; }
.tbl-fee thead th.fee-g {
  color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .5px;
  padding: 8px 6px; border-right: 2px solid #fff;
}
.tbl-fee thead th.fee-g-name { background: #5a6b82; color: #fff; }
.tbl-fee thead th.fee-g0 { background: #ffeaa7; color: #5a4d00; }   /* 业务招待费 · 浅黄 */
.tbl-fee thead th.fee-g1 { background: #4ebcc5; color: #003f44; }   /* 差旅费 · 浅青 */
.tbl-fee thead th.fee-g2 { background: #5eb589; color: #1f4d2e; }   /* 汽车费 · 浅绿 */
.tbl-fee thead tr:last-child th { background: #f3f6fb; color: #5a6b82; font-weight: 600; font-size: 12px; }
.tbl-fee tbody td.fee-sep { border-left: 2px solid #eef1f6; }
.tbl-fee tbody tr:not(.is-total) td:first-child { font-weight: 600; color: #16324f; }

/* 片区表：表头换行 + 居中 + 整表自适应（不横向溢出） */
.tbl-fee { width: 100%; min-width: 0; }
.tbl-fee thead th { white-space: normal; text-align: center; vertical-align: middle; padding: 6px 3px; }
.tbl-fee thead th.fee-g { padding: 8px 3px; font-size: 13px; }
.tbl-fee thead th.fee-g-name { font-size: 13px; }
.tbl-fee tbody td { white-space: nowrap; padding: 7px 3px; }
.tbl-fee tbody td:first-child { white-space: normal; text-align: center; font-weight: 600; color: #16324f; }
.tbl-fee tbody tr.is-total td:first-child { text-align: center; }

/* 片区表头公司名称白底 */
.tbl-fee thead th.fee-g-name { background: #fff; color: #5a6b82; }

/* 片区表公司名称数据靠左 */
.tbl-fee tbody td:first-child { text-align: left; }
.tbl-fee tbody tr.is-total td:first-child { text-align: left; }

/* 片区表公司名称列宽 = 长运本部（含高客司）整行宽 */
.tbl-fee thead th.fee-g-name,
.tbl-fee tbody td:first-child {
  width: 160px; min-width: 160px; max-width: 160px;
  white-space: nowrap; text-align: left;
}

/* 片区表固定布局以均分费用列宽 */
.tbl-fee { table-layout: fixed; }

/* 片区表：字段与数据全部居中 */
.tbl-fee thead th,
.tbl-fee thead th.fee-g,
.tbl-fee thead th.fee-g-name { text-align: center; }
.tbl-fee tbody td,
.tbl-fee tbody td.num { text-align: center; }
.tbl-fee tbody td:first-child,
.tbl-fee tbody tr.is-total td:first-child { text-align: center; }

/* 公司名称表头底色与年度定额(浅灰)一致 */
.tbl-fee thead th.fee-g-name { background: #f3f6fb; color: #5a6b82; }

/* 长运整体考核进度：与参考图一致（浅蓝灰表头/深色合计顶线/红色正差异） */
.fee-overall thead th {
  background: #eaf2f8; color: #16324f; font-weight: 700;
  text-align: center; border-bottom: 2px solid #c9d6e4; padding: 8px 10px;
}
.fee-overall tr.is-total td { background: #f6f9fd; font-weight: 700; border-top: 2px solid #16324f; }
.fee-overall tr.is-total td:first-child { text-align: center; font-weight: 700; }
.fee-overall .num.up { color: #d32f2f; font-weight: 700; }
.fee-overall .num.down { color: #1e8e3e; font-weight: 700; }

/* 片区表「公司名称」表头与整体风格匹配（浅蓝灰） */
.tbl-fee thead th.fee-g-name { background: #eaf2f8; color: #16324f; }

/* 片区表：取消全局冻结列，子表头第一/第二列也居中 */
.tbl-fee th:first-child,
.tbl-fee td:first-child { position: static !important; }
.tbl-fee thead th:first-child,
.tbl-fee thead th:nth-child(2),
.tbl-fee tbody td:first-child,
.tbl-fee tbody td:nth-child(2) { text-align: center !important; }

/* 片区表公司名称列字体颜色与「年度定额」表头一致 */
.tbl-fee thead th.fee-g-name,
.tbl-fee tbody td:first-child,
.tbl-fee tbody tr.is-total td:first-child { color: #5a6b82 !important; font-weight: 600; }

/* 长运整体表：铺满卡片白色区域 */
#feeOverall .tbl-wrap { background: #fff; max-width: 100%; }

/* 长运整体表：费用项目列靠左，其余列文字与数据居中 */
.fee-overall thead th:first-child,
.fee-overall tbody td:first-child { text-align: left; }
.fee-overall tbody td:not(:first-child) { text-align: center; }
.fee-overall tbody td.num:not(:first-child) { text-align: center; }

/* 长运整体表：修复第二列表头（考核利润）被全局规则左对齐 */
.fee-overall thead th:nth-child(2) { text-align: center !important; }

/* 年度总况表格：收窄紧凑 */
#trendTbl { width: auto; min-width: 620px; max-width: 920px; font-size: 12px; }
#trendTbl th, #trendTbl td { padding: 6px 9px; white-space: nowrap; }
#trendTbl th { text-align: center; font-weight: 700; }

/* 年度总况表格：再收窄 + 数据整体居中 */
#trendTblWrap { max-width: 960px; }
#trendTbl { width: auto; min-width: 480px; max-width: 100%; font-size: 11.5px; }
#trendTbl th, #trendTbl td { padding: 5px 8px; white-space: nowrap; text-align: center; }
#trendTbl td.num { text-align: center; }
#trendTbl tbody td:first-child { text-align: center; }

/* 年度总况表：固定布局使月份列等宽 */
#trendTbl { table-layout: fixed; }

/* 年度总况表：月份列收紧后进一步压缩单元格内边距 */
#trendTbl th, #trendTbl td { padding: 5px 3px; }

/* 年度总况表：铺满卡片、与上方右视图右缘对齐（去除 960px 收缩限制） */
#trendTblWrap { max-width: 100%; width: 100%; }
#trendTbl { width: 100%; min-width: 0; max-width: 100%; }

/* ---------------- 工作台欢迎页 ---------------- */
#modHome .section { margin-bottom: 0; }
.home-hero {
  background: linear-gradient(135deg, #4ebcc5, #005bac);
  color: #fff; border-radius: 12px; padding: 34px 36px 30px;
  box-shadow: 0 6px 20px rgba(26, 77, 143, .18);
}
.home-hero .hh-badge {
  display: inline-block; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 12px; margin-bottom: 12px;
}
.home-hero h1 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.home-hero p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .88); line-height: 1.8; max-width: 760px; }
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.home-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 18px 18px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.home-card .hc-title { font-size: 15px; font-weight: 800; color: #16324f; }
.home-card .hc-title::before { content: ''; display: inline-block; width: 8px; height: 14px; border-radius: 2px; background: var(--brand-2); margin-right: 8px; vertical-align: -2px; }
.home-card .hc-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; flex: 1; }
.home-card .btn { align-self: flex-start; }
.home-tips {
  margin-top: 18px; border: 1px dashed var(--line); background: #fbfcfe; border-radius: 10px;
  padding: 14px 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.9;
}
.home-tips b { color: #16324f; }
.home-tips ul { margin: 4px 0 0; padding-left: 20px; }
.home-tips li b { color: var(--brand); }
@media (max-width: 900px) { .home-cards { grid-template-columns: 1fr; } }

/* 工作台 KPI 卡片行 */
.home-kpis { margin-top: 18px; grid-template-columns: repeat(3, 1fr); }
.home-kpis .kpi { background: var(--card); }
@media (max-width: 900px) { .home-kpis { grid-template-columns: 1fr; } }

/* 工作台：隐藏文字备注（卡片描述 + 使用提示），保留标题/按钮/KPI */
.home-card .hc-desc { display: none; }
.home-tips { display: none; }

/* 工作台快捷卡片：仅显示按钮（隐藏标题/描述，按钮居中） */
.home-card .hc-title { display: none; }
.home-card { justify-content: center; align-items: center; }
.home-card .btn { align-self: center; }

/* 工作台：隐藏红色框内所有文字备注 */
.home-hero p#homeSub { display: none; }
.home-card .hc-desc { display: none; }
.home-tips { display: none; }

/* 工作台：快捷入口折叠按钮 */
.home-quick { margin-top: 18px; }
.btn-quick {
  background: linear-gradient(90deg, #4ebcc5, #005bac); color: #fff; font-weight: 700;
  border: none; padding: 8px 18px; border-radius: 18px; cursor: pointer; font-size: 13.5px;
}
.btn-quick:hover { opacity: .9; }
.home-quick .home-cards { margin-top: 14px; }

/* 工作台：快捷入口按钮与问候同排（向日葵右侧） */
.home-hero h1 { display: inline-block; }
#quickToggle { vertical-align: middle; margin-left: 14px; }
#homeQuickCards { margin-top: 14px; }

/* ---------------- 侧栏按参考图配色（深蓝 + 亮黄 + 浅青） ---------------- */
.sidenav {
  background: linear-gradient(180deg, #005bac 0%, #0a6bb8 60%, #085aa3 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12);
}
.sidenav .brand-block { border-bottom-color: rgba(255, 255, 255, .20) !important; }
.sidenav .nav-cat {
  background: transparent; color: #fff !important;
  position: relative; transition: background .15s, color .15s;
}
.sidenav .nav-cat:hover { background: rgba(127, 200, 220, .18); color: #d7efff !important; }
.sidenav .nav-group.open > .nav-cat {
  background: rgba(127, 200, 220, .22);
  color: #fff !important;
}
.sidenav .nav-group.open > .nav-cat::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: #7fc8dc; border-radius: 2px;
}
.sidenav .nav-cat .nav-arrow { color: #f9e16b !important; opacity: .95; }
.sidenav .nav-links { background: rgba(0, 0, 0, .10); border-radius: 8px; padding: 4px 4px 6px; }
.sidenav .nav-links a { color: rgba(255, 255, 255, .85) !important; }
.sidenav .nav-links a:hover { background: rgba(127, 200, 220, .25); color: #fff !important; }
.sidenav .nav-links a.active {
  background: #f9e16b !important; color: #00498a !important; font-weight: 700 !important;
  border-left-color: #00498a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.sidenav .nav-leaf {
  background: transparent; color: #fff !important; position: relative;
}
.sidenav .nav-leaf:hover { background: rgba(127, 200, 220, .18); color: #fff !important; }
.sidenav .nav-leaf.active {
  background: #f9e16b !important; color: #00498a !important; font-weight: 700 !important;
  border-left-color: #00498a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.sidenav .user-card { background: #7fc8dc; color: #00498a; border-top: 1px solid rgba(0, 0, 0, .10); }
.sidenav .user-avatar { background: #fff !important; }
.sidenav .user-avatar svg circle { fill: #005bac; }
.sidenav .user-avatar svg path { fill: #005bac; }
.sidenav .user-name { color: #00498a !important; font-weight: 700; }
.sidenav .user-dept { color: #005bac !important; }
.sidenav .user-arrow { color: #005bac !important; }

/* 下属片区总况表（与板块总况表一致） */
#trendAreaTblWrap { width: 100%; max-width: 100%; }
#trendAreaTbl { table-layout: fixed; width: 100%; min-width: 0; font-size: 12px; }
#trendAreaTbl th, #trendAreaTbl td { padding: 6px 8px; white-space: nowrap; text-align: center; }
#trendAreaTbl td.num { text-align: center; }
#trendAreaTbl tbody tr.is-total td { background: #f2f6fc; font-weight: 700; border-top: 2px solid #005bac; }

/* 顶栏 上次刷新/保存时间 */
.sync-time { font-size: 12px; color: #5a6b82; margin: 0 6px 0 10px; white-space: nowrap; align-self: center; }

/* 客运报表（附表5 快巴） */
/* 客运报表（附表5 快巴）：图下汇总备注 */
.bus-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
  margin: 12px 0 4px; padding: 8px 14px;
  background: #f6f8fb; border: 1px dashed #d5dde8; border-radius: 8px;
  color: #5a6b82; font-size: 12.5px;
}
.bus-note .bs-label { color: #8a97a8; font-weight: 700; }
.bus-note .bs-item b { color: #16324f; font-weight: 700; margin-right: 2px; }
.bus-note .bs-item { color: #005bac; font-weight: 600; }
.bus-note .bs-item.neg { color: #c62828; }
#busTblWrap { width: 100%; max-width: 100%; }
#busTbl { table-layout: fixed; width: 100%; min-width: 900px; font-size: 12px; }
#busTbl th, #busTbl td { padding: 6px 6px; white-space: nowrap; text-align: center; }
#busTbl td:nth-child(3), #busTbl th:nth-child(3) { text-align: left; white-space: normal; word-break: break-all; min-width: 130px; }
#busTbl td.note { text-align: left; color: #8a97a8; font-size: 11px; white-space: normal; word-break: break-all; }

/* 客运报表：线路全年趋势 选择行 */
.trend-sel-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.trend-sel-row .ts-label { font-size: 13px; font-weight: 700; color: #16324f; white-space: nowrap; }
.bus-line-sel {
  min-width: 260px; max-width: 460px; height: 32px; padding: 0 8px;
  font-size: 13px; color: #16324f;
  border: 1px solid #c9d6e4; border-radius: 7px; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bus-line-sel:focus { border-color: #005bac; box-shadow: 0 0 0 3px rgba(0, 91, 172, .14); }

/* 客运报表：图表与表格与三项费用统一 */
.bus-grid-2 { grid-template-columns: 1fr 1fr; }
.bus-grid-2 > div > .chart { height: 300px; }
.bus-trend-pane { display: flex; flex-direction: column; }
.bus-trend-pane .chart { flex: 1; height: 260px; }
#busTblWrap .tbl { font-size: 12.5px; }     /* 与 fee-* 一致 */
#busTblWrap .tbl th, #busTblWrap .tbl td { padding: 8px 10px; }
#busTblWrap .tbl td.note { font-size: 11px; color: #6a7a90; text-align: left; line-height: 1.5; }
#busTblWrap .tbl td.num { font-size: 12.5px; }

/* 客运报表五色调色板（参考图：深绿 / 卡其 / 青 / 草绿 / 蓝） */
:root {
  --bus-c1: #1a7a3a;   /* 深绿 */
  --bus-c2: #c8cd88;   /* 卡其黄 */
  --bus-c3: #2f8b95;   /* 青蓝 */
  --bus-c4: #7fa15e;   /* 草绿 */
  --bus-c5: #1f77b4;   /* 蓝 */
}

/* 工作台：三指标卡纵向排列 */
.home-kpis-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.home-kpis-row .kpi-grid { grid-template-columns: 1fr; }
.home-kpis-row .home-kpis { grid-template-columns: 1fr; gap: 10px; }
.home-kpis-row .kpi { padding: 14px 18px; min-height: 96px; }
.home-kpis-row .kpi .kpi-value { font-size: 24px; }
.home-kpis-row .kpi .kpi-label { font-size: 12.5px; }
/* 侧栏 user-card 退出按钮（位于原 ▾ 位置） */
.sidenav .user-card { position: relative; }
.sidenav .user-logout {
 position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
 border: none; background: transparent; color: #005bac;
 font-size: 13px; font-weight: 500; letter-spacing: .5px;
 padding: 6px 13px; border-radius: 7px;
 cursor: pointer; transition: background .15s, color .15s;
}
.sidenav .user-logout:hover { background: rgba(0, 91, 172, .12); color: #003d78; }
.sidenav .user-card .user-info { padding-right: 56px; }

/* iframe 嵌入（飞书工作台等）高度兜底：避免 body 无流内内容时 iframe 高度塌陷为 0（白屏） */
html, body { min-height: 100%; }
body { min-height: 100vh; }
.login-page { min-height: 100vh; }

/* 可编辑分析框：空态占位提示（避免误以为内容丢失） */
textarea.solo-note::placeholder,
textarea.editable::placeholder { color: #b6c0cf; opacity: 1; font-style: normal; }

/* ---------------- 债权考核（附表0 · 三、债权） ---------------- */
/* 片区明细表：单元格收紧，14 列尽量在一屏内显示
   注意：基础规则 `table.tbl th, table.tbl td` 权重为 (0,1,2)，这里必须用
   `.tbl.tbl-debt`(0,2,1) 才压得住它的 9px 12px 内边距。 */
.tbl.tbl-debt { table-layout: fixed; }
.tbl.tbl-debt th, .tbl.tbl-debt td { padding: 7px 8px; font-size: 12.5px; }
.tbl.tbl-debt thead th { text-align: center; white-space: normal; line-height: 1.35; }
.tbl.tbl-debt thead th:first-child { text-align: left; }
.tbl.tbl-debt tbody td:first-child { text-align: left; }
.tbl.tbl-debt td.num { font-variant-numeric: tabular-nums; }
.tbl.tbl-debt tbody tr.is-total td { border-top: 2px solid var(--brand); }
/* 经济指标考核：图表下方明细表 */
#debtKpiTblWrap { margin-top: 14px; }
#debtKpiTbl th:first-child, #debtKpiTbl td:first-child { width: 30%; }

/* ---------------- 工作台 KPI：一行三个 ----------------
   用 ID 选择器提高权重，覆盖前面「纵向排列」的旧规则（含窄屏媒体查询） */
#homeKpis { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { #homeKpis { grid-template-columns: 1fr; } }
/* 第二行三张「扣除债权后」口径的卡片：数值字号与小标题略作区分 */
#homeKpis .kpi .k-foot { line-height: 1.45; }

/* ---------------- 智能识别框（财务分析 · 5 片区管理建议） ----------------
   按当月全工作台数据自动列出应重点关注的单位/事项；结论来自本地规则引擎 */
.smart-box {
  background: linear-gradient(135deg, #f7fbff 0%, #f5f9f6 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 12px 14px 11px;
  margin: 0 0 14px;
  box-shadow: var(--shadow);
}
.smart-lead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.smart-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 9px; border-radius: 999px;
}
.smart-tag::before { content: "◈"; font-size: 11px; }
.smart-sub { color: var(--ink-2); font-size: 12.5px; }
.smart-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.smart-chip {
  flex: 1 1 300px; min-width: 260px; max-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px 10px; border-top: 3px solid var(--ink-3);
}
.smart-chip .sc-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.smart-chip .sc-sev { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.smart-chip .sc-unit { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.smart-chip .sc-title { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 3px; }
.smart-chip .sc-detail { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.smart-chip .sc-act { margin-top: 5px; font-size: 12px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 5px; }
/* 严重度配色：重点关注(红) / 需说明(橙) / 持续关注(蓝) / 亮点(绿) */
.smart-hot { border-top-color: var(--red); }
.smart-hot .sc-sev { background: var(--red-bg); color: var(--red-ink); }
.smart-warn { border-top-color: var(--yellow); }
.smart-warn .sc-sev { background: var(--yellow-bg); color: var(--yellow-ink); }
.smart-watch { border-top-color: var(--brand); }
.smart-watch .sc-sev { background: var(--brand-soft); color: var(--brand); }
.smart-good { border-top-color: var(--green); }
.smart-good .sc-sev { background: var(--green-bg); color: var(--green-ink); }
.smart-empty { color: var(--ink-3); font-size: 12.5px; padding: 2px 0; }
.smart-note { margin-top: 9px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 900px) {
  .smart-chip { flex: 1 1 100%; min-width: 0; }
}

/* ==================== 移动端适配（2026-09-15） ====================
   目标：① 卡片在手机宽度下正确换行；② 图表横向滑动浏览。
   策略：宽屏样式一律不动，只在窄屏媒体查询里覆写；
        图表由 app.js 的 ensureChartScroll() 套一层 .chart-scroll（横向滚动壳），
        .chart 保留 min-width 以保证缩放后可读。 */

/* ---- 图表横向滚动壳 ----
   注意：图表的 min-width 只在窄屏媒体查询里给，宽屏一律保持 100%，
   否则 grid 轨道（如 .grid-3 的 1.25fr / 1fr）会被 min-content 撑歪。 */
.chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; }
.chart-scroll > .chart, .chart-scroll > .chart-seg { min-width: 0; }
.chart-scroll::-webkit-scrollbar { height: 6px; }
.chart-scroll::-webkit-scrollbar-track { background: transparent; }
.chart-scroll::-webkit-scrollbar-thumb { background: #c7d2e0; border-radius: 3px; }
.chart-swipe-hint { display: none; font-size: 11.5px; color: var(--ink-3); text-align: right; margin: 0 2px 3px; }
.chart-swipe-hint.show { display: block; }

/* ---- 窄屏（手机 / 竖屏平板） ---- */
@media (max-width: 900px) {
  /* ① 布局骨架：侧栏 → 顶部横向滑动导航 */
  .wrap { display: block; padding: 10px 10px 48px; max-width: 100%; }
  .sidenav {
    position: sticky; top: var(--topbar-h, 0px); z-index: 40;
    width: auto; flex: none; border-radius: 0 0 12px 12px;
    margin: -10px -10px 12px; box-shadow: 0 6px 16px rgba(20, 40, 80, .18);
  }
  .sidenav .brand-block { display: none; }              /* 品牌已在顶栏，这里省掉 */
  .sidenav .nav-section {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 9px 10px; scrollbar-width: none;
  }
  .sidenav .nav-section::-webkit-scrollbar { display: none; }
  /* 打平分组：所有页面链接平铺成一行可横向滑动（分组按钮在手机上无意义） */
  .sidenav .nav-group { display: contents; }
  .sidenav .nav-group.open .nav-links { display: contents; }
  .sidenav .nav-links { display: contents; }
  .sidenav .nav-cat { display: none; }
  /* 关键：导航项一律 flex:0 0 auto + nowrap。否则横向溢出时被压缩换行，会把整条导航撑高 */
  .sidenav .nav-section > a,
  .sidenav .nav-links a {
    flex: 0 0 auto; white-space: nowrap; margin: 0;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border-left: none;
    font-size: 13px; font-weight: 600; line-height: 1.3;
  }
  .sidenav .nav-section a.active {
    background: #f9e16b !important; color: #00498a !important;
    font-weight: 700 !important; border-left-color: transparent !important;
  }
  .sidenav .nav-empty { display: none; }
  /* 用户区压缩成一行，避免吸顶导航占掉太多屏幕高度 */
  .sidenav .user-card { padding: 6px 10px; gap: 8px; justify-content: space-between; }
  .sidenav .user-avatar { display: none; }
  .sidenav .user-dept { display: none; }
  .sidenav .user-name { font-size: 12px; }
  .sidenav .user-logout { padding: 4px 12px !important; font-size: 12px !important; }

  /* ② 顶栏：品牌占一行，控件行横向滑动 */
  .topbar-inner { padding: 8px 10px; gap: 8px; }
  .brand { flex: 1 1 100%; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; font-size: 13px; border-radius: 7px; }
  .brand-txt h1 { font-size: 15px; }
  .brand-txt p { display: none; }
  .topbar .spacer { display: none; }
  .topbar-inner > .ctrl {
    flex: 1 1 0; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 1px;
  }
  .topbar-inner > .ctrl::-webkit-scrollbar { display: none; }
  .topbar-inner > .ctrl > * { flex: 0 0 auto; }
  .topbar-inner > .ctrl label { white-space: nowrap; }
  .btn { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
  .sync-time { display: none; }

  /* ③ 卡片换行：全部收敛为单列/双列 */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  #homeKpis, .home-kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .seg-body, .seg-cards, .home-cards, .adv-grid { grid-template-columns: 1fr; }
  .section { margin-bottom: 14px; }
  .section-head { gap: 8px; }
  .section-head h2 { font-size: 16px; }
  .card-body { padding: 12px; }
  .kpi { padding: 12px 13px; }
  .smart-chip { flex: 1 1 100%; min-width: 0; }

  /* ④ 图表：高度略降 + 给可读的固定宽度，超出部分靠 .chart-scroll 横向滑动 */
  .chart { height: 260px; }
  .chart-seg { height: 280px; }
  .chart-seg-stack { height: 240px; }
  .chart-scroll > .chart, .chart-scroll > .chart-seg { min-width: 660px; }

  /* ⑤ 关键：grid/flex 子项默认 min-width:auto，会被图表 min-width 撑开整页。
        统一放开收缩，让 .chart-scroll 真正成为“容器内滚动” */
  .main, .card, .card-body, .card-body > *, .grid-2 > *, .grid-3 > *,
  .seg-body > *, .seg-card, .adv-card { min-width: 0; }
  .chart-scroll { min-width: 0; width: 100%; }

  /* ⑥ 数据表：窄屏下宽表的最小宽度由 app.js 的 syncTableScroll() 按列数写入，
        这里只补触摸滚动与滚动条样式（表体在 .tbl-wrap 内横向滚动，首列 sticky 保持可见） */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .tbl-wrap::-webkit-scrollbar { height: 6px; }
  .tbl-wrap::-webkit-scrollbar-track { background: transparent; }
  .tbl-wrap::-webkit-scrollbar-thumb { background: #c7d2e0; border-radius: 3px; }
}

/* ---- 手机（窄屏手机 360~560px） ---- */
@media (max-width: 560px) {
  .wrap { padding: 8px 8px 40px; }
  .sidenav { margin: -8px -8px 10px; }
  .kpi-grid, #homeKpis, .home-kpis { grid-template-columns: 1fr; }
  .chart { height: 240px; }
  .section-head h2 { font-size: 15px; }
  .card-body { padding: 10px; }
  table.tbl th, table.tbl td { padding: 6px 8px; font-size: 12px; }
  .chart-scroll > .chart, .chart-scroll > .chart-seg { min-width: 560px; }
  /* 图表滑动提示更醒目一点，避免用户不知道可以横滑 */
  .chart-swipe-hint { text-align: center; }
  /* 顶栏收成一行（只留 logo 方块 + 月份 + 可横滑的按钮），给内容多留出高度 */
  .topbar-inner { flex-wrap: nowrap; padding: 7px 8px; gap: 8px; }
  .brand { flex: 0 0 auto; }
  .brand-txt { display: none; }
  .topbar-inner > .ctrl { flex: 1 1 auto; }
}

/* ---------------- 客运报表明细表：固定列宽 ----------------
   问题（2026-09-15 用户反馈）：该表 17 列平分宽度，窄屏/宽屏下每列都只有 ~59px，
   「线路名称」「备注」被挤成逐字换行 → 行高参差（实测 55~133px 不等），表格看起来一条条不一样宽。
   处理：给出固定列宽（序号/公司/线路/累计/12 个月/备注），备注列给足 320px，
   文字在表内自然成一行；整表比容器宽的部分由 .tbl-wrap 横向滚动查看（侧滑即可读备注）。 */
#busTblWrap #busTbl {
  font-size: 12px;
  table-layout: fixed;
  width: 1400px;
  min-width: 1400px !important;   /* 固定几何：宽屏/窄屏一致，避免被脚本按列数改宽 */
}
#busTblWrap #busTbl th, #busTblWrap #busTbl td { padding: 6px 7px; }
#busTblWrap #busTbl thead th:nth-child(1) { width: 44px; }                 /* 序号 */
#busTblWrap #busTbl thead th:nth-child(2) { width: 88px; }                 /* 所属公司 */
#busTblWrap #busTbl thead th:nth-child(3) { width: 152px; white-space: normal; text-align: left; }  /* 线路名称 */
#busTblWrap #busTbl thead th:nth-child(4) { width: 76px; }                 /* 累计 */
#busTblWrap #busTbl thead th:nth-child(n+5):nth-child(-n+16) { width: 60px; }  /* 1月..12月 */
#busTblWrap #busTbl thead th:nth-child(17) { width: 320px; white-space: normal; text-align: left; } /* 备注 */
/* 单元格：与表头同规则，保证每条数据行宽度一致 */
#busTblWrap #busTbl td:nth-child(1),
#busTblWrap #busTbl td:nth-child(2),
#busTblWrap #busTbl td:nth-child(4),
#busTblWrap #busTbl td:nth-child(n+5):nth-child(-n+16) { white-space: nowrap; text-align: center; }
#busTblWrap #busTbl td:nth-child(3) {
  min-width: 0;                 /* 取消旧的 130px（固定布局下会把单元格撑歪） */
  white-space: normal; word-break: break-all; text-align: left;
}
#busTblWrap #busTbl td.note {
  white-space: normal; word-break: break-all; text-align: left;
  font-size: 11px; color: #6a7a90; line-height: 1.45;
}