:root {
  --bg: #f3f5f1;
  --surface: #ffffff;
  --surface-soft: #f8f9f6;
  --ink: #17221d;
  --muted: #738078;
  --line: #e5e9e3;
  --green: #176b4b;
  --green-2: #2c8b66;
  --green-soft: #e7f3ec;
  --lime: #d9f27c;
  --orange: #e88746;
  --orange-soft: #fff0e5;
  --red: #ce594f;
  --red-soft: #fae9e7;
  --blue: #4b78a8;
  --blue-soft: #eaf1f8;
  --shadow: 0 12px 34px rgba(32, 58, 46, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  font-size: 14px;
  max-width: 100%;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 238px;
  display: flex; flex-direction: column; padding: 26px 18px 18px;
  color: #e8f1eb; background: #153e30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 27px; color: white; text-decoration: none; }
.brand-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #153e30; background: var(--lime); font-size: 17px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(0,0,0,.09); }
.brand-name { display: block; }
.brand strong { display: block; font-size: 19px; letter-spacing: .12em; }
.brand small, .user-card small, .sidebar-card small { display: block; margin-top: 2px; color: #a9beb4; font-size: 10px; letter-spacing: .12em; }
.nav { flex: 1; }
.nav-label { margin: 16px 12px 8px; color: #7fa394; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.nav-item {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px;
  margin: 3px 0; padding: 11px 12px; border: 0; border-radius: 11px;
  color: #bcd0c7; background: transparent; cursor: pointer; text-align: left;
  transition: .2s ease;
}
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: #153e30; background: var(--lime); font-weight: 700; }
.nav-item[hidden] { display: none !important; }
.nav-icon { width: 20px; font-size: 18px; text-align: center; }
.nav-count { margin-left: auto; min-width: 24px; padding: 2px 7px; border-radius: 20px; color: #d9ede4; background: rgba(255,255,255,.1); font-size: 10px; text-align: center; }
.nav-item.active .nav-count { color: #fff; background: #176b4b; }
.nav-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #ff9970; box-shadow: 0 0 0 4px rgba(255,153,112,.12); }
.sidebar-card {
  display: flex; align-items: center; gap: 11px; margin: 10px 2px 16px; padding: 13px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.055);
}
.sidebar-card strong { display: block; font-size: 12px; }
.sidebar-card small { letter-spacing: 0; font-size: 10px; }
.mini-ring {
  --p: 0; position: relative; display: grid; place-items: center; width: 44px; aspect-ratio: 1;
  border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
}
.mini-ring::before { content: ""; position: absolute; inset: 5px; border-radius: inherit; background: #214a3c; }
.mini-ring span { position: relative; font-size: 9px; font-weight: 800; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 13px 6px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.user-card strong { display: block; font-size: 11px; }
.user-card .icon-button { margin-left: auto; color: #9db5aa; }
.logout-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #e4efe9;
  background: rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 800;
}
.logout-button:hover { color: white; background: rgba(255,255,255,.16); }
.logout-button b { font-size: 10px; }
.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  color: #153e30; background: #d2e9dc; font-size: 12px; font-weight: 800;
}
.main { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 72px; display: flex; align-items: center;
  padding: 0 32px; border-bottom: 1px solid rgba(218,224,216,.8); background: rgba(243,245,241,.9);
  backdrop-filter: blur(14px);
}
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.breadcrumb span { color: var(--muted); }
.breadcrumb b { color: #bdc4bf; font-weight: 400; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.global-search {
  width: 260px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.75);
}
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 12px; }
.global-search kbd { padding: 2px 5px; border: 1px solid #dfe4df; border-radius: 5px; color: #8a958e; background: #f7f8f6; font: 9px system-ui; }
.icon-button { border: 0; background: transparent; cursor: pointer; }
.notice-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.75); font-size: 18px; }
.notice-button i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; background: var(--orange); }
.date-pill { padding: 8px 10px; color: var(--muted); font-size: 11px; }
.menu-button { display: none; }
.page { display: none; padding: 27px 32px 48px; animation: pageIn .22s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: .3; transform: translateY(4px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.page-head h1 { margin: 3px 0 6px; font-size: 27px; letter-spacing: -.04em; }
.page-head p { margin: 0; color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--green-2); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.head-actions, .filter-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.button {
  height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 15px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 12px; font-weight: 700;
  transition: .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: var(--green); box-shadow: 0 7px 18px rgba(23,107,75,.16); }
.button.accent { color: #183a2d; background: var(--lime); }
.button.secondary { border-color: var(--line); background: white; }
.button.danger { color: var(--red); background: var(--red-soft); }
.button.small { min-height: 30px; padding: 6px 10px; border-radius: 8px; font-size: 10px; }
.select, .search-input, .input {
  height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  outline: none; color: var(--ink); background: white; font-size: 12px;
}
.select:focus, .search-input:focus, .input:focus, textarea:focus { border-color: #84ae99; box-shadow: 0 0 0 3px rgba(44,139,102,.09); }
.search-input { width: 210px; }
.target-select, .phone-target-select {
  height: 34px; padding: 0 28px 0 10px; border: 1px solid #cfe0d6; border-radius: 10px;
  color: var(--green); background: white; font-size: 11px; font-weight: 800; outline: none;
}
.target-select:focus, .phone-target-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,107,75,.08); }
.card {
  border: 1px solid rgba(222,228,221,.88); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 3px 16px rgba(30,52,42,.025);
}
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 15px; }
.kpi-card { position: relative; overflow: hidden; min-height: 139px; padding: 19px 20px; }
.kpi-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -36px; top: -36px; border-radius: 50%; background: var(--tint, #eef4ef); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--tone, var(--green)); background: var(--tint, var(--green-soft)); font-size: 16px; }
.kpi-value { margin: 17px 0 8px; font: 700 29px/1.05 Georgia, "Times New Roman", serif; }
.kpi-foot { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.trend { padding: 3px 6px; border-radius: 5px; font-weight: 800; }
.trend.up { color: var(--green); background: var(--green-soft); }
.trend.down { color: var(--red); background: var(--red-soft); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 15px; margin-bottom: 15px; }
.panel { padding: 20px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.panel-head h2 { margin: 2px 0 4px; font-size: 15px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 10px; }
.segmented { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-soft); }
.segmented button { padding: 5px 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.segmented button.active { color: var(--green); background: white; box-shadow: 0 2px 7px rgba(0,0,0,.06); font-weight: 700; }
.chart-wrap { height: 238px; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: #e8ece7; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#areaGradient); }
.chart-point { fill: white; stroke: var(--green); stroke-width: 2; }
.chart-label { fill: #89948d; font: 9px "Microsoft YaHei UI"; }
.chart-value { fill: var(--ink); font: 700 9px "Microsoft YaHei UI"; }
.donut-layout { display: flex; align-items: center; gap: 24px; min-height: 230px; }
.donut {
  position: relative; flex: 0 0 145px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--segments)); transform: rotate(-90deg);
}
.donut::after { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: white; }
.donut-center { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; text-align: center; transform: rotate(90deg); }
.donut-center strong { font: 700 25px Georgia, serif; }
.donut-center small { color: var(--muted); font-size: 9px; }
.legend { flex: 1; display: grid; gap: 12px; }
.legend-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; font-size: 10px; }
.legend-row i { width: 7px; height: 7px; border-radius: 3px; }
.legend-row span { color: var(--muted); }
.legend-row strong { font-size: 11px; }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .85fr); gap: 15px; }
.ranking { display: grid; gap: 12px; }
.rank-row { display: grid; grid-template-columns: 28px minmax(95px, 1fr) 2.3fr 55px; gap: 10px; align-items: center; font-size: 11px; }
.rank-num { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-size: 9px; font-weight: 800; }
.rank-num.top { color: #244b38; background: var(--lime); }
.bar-track { height: 7px; overflow: hidden; border-radius: 8px; background: #edf0ec; }
.bar-track span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.risk-list { display: grid; gap: 9px; }
.risk-item { display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface-soft); }
.risk-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: var(--orange); background: var(--orange-soft); }
.risk-item strong { display: block; font-size: 11px; }
.risk-item small { color: var(--muted); font-size: 9px; }
.risk-value { color: var(--red); font-size: 11px; font-weight: 800; }
.table-card { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.table-toolbar .meta { color: var(--muted); font-size: 11px; }
.table-scroll { overflow: auto; }
.sticky-table-scroll {
  max-height: min(68vh, 760px);
  overscroll-behavior: contain;
}
.annual-scroll { max-height: min(72vh, 820px); }
.sticky-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  box-shadow: 0 1px 0 var(--line);
}
.sticky-data-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -1px 0 #dce8df, 0 -8px 18px rgba(20,50,36,.04);
}
.annual-table.sticky-data-table thead tr:first-child th { top: 0; z-index: 9; }
.annual-table.sticky-data-table thead tr:nth-child(2) th { top: 49px; z-index: 8; }
.annual-table.sticky-data-table thead tr:first-child th:first-child { z-index: 11; }
.annual-table.sticky-data-table tfoot td:first-child { z-index: 7; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 11px 14px; color: #768179; background: #f8f9f7; font-size: 10px; font-weight: 700; text-align: left; letter-spacing: .02em; }
th.highlight-col { color: var(--green); background: #eef8f2; font-weight: 900; }
td { padding: 12px 14px; border-top: 1px solid #edf0ec; font-size: 11px; vertical-align: middle; }
tbody tr:hover { background: #fbfcfa; }
.arrival-value {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 6px 10px;
  border-radius: 12px; color: #0f4f36; background: linear-gradient(135deg, #dff5e9, #f3faef);
  font: 900 17px/1 Georgia, "Times New Roman", serif; box-shadow: inset 0 0 0 1px rgba(23,107,75,.08);
}
.org-cell { display: flex; align-items: center; gap: 9px; }
.org-logo { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 800; }
.org-logo.rank-logo { width: 32px; font-size: 9px; letter-spacing: .02em; }
.org-logo.rank-logo.top { color: #173e30; background: var(--lime); }
.org-cell strong { display: block; font-size: 11px; }
.org-cell small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 20px; font-size: 9px; font-weight: 800; }
.badge.green { color: var(--green); background: var(--green-soft); }
.badge.orange { color: #aa5a27; background: var(--orange-soft); }
.badge.red { color: var(--red); background: var(--red-soft); }
.badge.blue { color: var(--blue); background: var(--blue-soft); }
.badge.gray { color: #69746d; background: #eef0ed; }
.date-navigator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
  padding: 18px;
}
.date-preset-group,
.date-custom-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.date-preset {
  min-width: 96px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid #d7deea;
  border-radius: 11px;
  color: #182235;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(34,54,88,.03);
}
.date-preset.active {
  color: white;
  border-color: #6071d9;
  background: #6071d9;
  box-shadow: 0 12px 24px rgba(96,113,217,.18);
}
.date-custom-group { color: #8b94a3; font-weight: 900; }
.date-custom-group b { color: #8b94a3; }
.date-input {
  height: 44px;
  min-width: 168px;
  padding: 0 12px;
  border: 1px solid #d7deea;
  border-radius: 11px;
  color: #182235;
  background: white;
  outline: none;
  font-size: 14px;
  font-weight: 700;
}
.date-input:focus { border-color: #6071d9; box-shadow: 0 0 0 3px rgba(96,113,217,.1); }
.org-navigator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.org-chip {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #526058;
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: .16s ease;
}
.org-chip:hover { color: var(--green); border-color: #c7dccf; background: #f7fbf8; }
.org-chip.active { color: #173e30; border-color: var(--lime); background: var(--lime); box-shadow: 0 10px 22px rgba(217,242,124,.2); }
tfoot td {
  border-top: 2px solid #dce8df;
  color: #173e30;
  background: #f1f8f4;
  font-weight: 900;
}
.annual-table th {
  text-align: center;
  border-right: 1px solid #e4e9e2;
}
.annual-table td {
  text-align: center;
  border-right: 1px solid #eef1ee;
}
/* 字体放大：渠道总览 / 目标总览 / 年度对比 三个模块 */
.channel-table th,
.channel-table td,
.target-table th,
.target-table td,
.annual-table th,
.annual-table td {
  font-size: 13px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.channel-table td strong,
.target-table td strong,
.annual-table td strong {
  font-size: 13px;
}
.channel-table .org-cell strong,
.target-table .org-cell strong,
.annual-table .org-cell strong {
  font-size: 13px;
}
.channel-table .org-cell small,
.target-table .org-cell small,
.annual-table .org-cell small {
  font-size: 11px;
}
.annual-table tbody td:first-child,
.annual-table tfoot td:first-child,
.annual-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
/* 目标进度表：序号/机构左对齐，其余列居中 */
.goals-table td { text-align: left; }
.goals-table td:nth-child(n+3) { text-align: center; }
.goals-table tfoot td { text-align: center; }
.goals-table tfoot td:first-child { text-align: left; }
  z-index: 2;
  text-align: left;
  background: #fbfcfa;
}
.annual-table thead tr:first-child th:first-child { z-index: 4; background: #d9e2f3; }
.annual-table thead tr:first-child th {
  color: #07101a;
  background: #d9e2f3;
  font-size: 18px;
  font-weight: 900;
}
.annual-table thead tr:nth-child(2) th {
  color: #526159;
  background: #eef3fb;
  font-size: 12px;
  font-weight: 900;
}
.annual-table thead tr:nth-child(2) th:nth-child(4),
.annual-table thead tr:nth-child(2) th:nth-child(8),
.annual-table thead tr:nth-child(2) th:nth-child(12),
.annual-total-cell {
  background: #e5f3db;
  font-weight: 900;
}
.annual-table .positive { color: var(--green); font-weight: 900; }
.annual-table .negative { color: var(--red); font-weight: 900; }
.channel-table {
  table-layout: fixed;
  min-width: 1040px;
}
.channel-table col.channel-org-col { width: 128px; }
.channel-table col.channel-value-col { width: 86px; }
.channel-table col.channel-total-col { width: 70px; }
.channel-table th,
.channel-table td {
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.channel-table th:first-child,
.channel-table td:first-child {
  text-align: left;
}
/* 统一数据表：深色表头、居中数值、斑马纹和清晰汇总行。 */
.goals-table th, .goals-table td,
.channel-table th, .channel-table td,
.target-table th, .target-table td,
.annual-table th, .annual-table td {
  padding: 13px 14px;
  border-right: 1px solid #e3eae7;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
}
.goals-table th, .channel-table th, .target-table th, .annual-table th {
  color: #fff;
  background: #18383a;
  border-color: rgba(255,255,255,.14);
  font-size: 14px;
  font-weight: 800;
}
.goals-table tbody tr:nth-child(even),
.channel-table tbody tr:nth-child(even),
.target-table tbody tr:nth-child(even),
.annual-table tbody tr:nth-child(even) { background: #f5f8f7; }
.goals-table tbody tr:hover,
.channel-table tbody tr:hover,
.target-table tbody tr:hover,
.annual-table tbody tr:hover { background: #edf6f1; }
.goals-table tfoot td, .channel-table tfoot td, .target-table tfoot td, .annual-table tfoot td {
  color: #38564b;
  background: #fffaf0;
  border-top: 0;
}
.goals-table .org-cell, .channel-table .org-cell { justify-content: center; text-align: left; }
.goals-table .org-cell span:last-child { text-align: left; }
.goals-table .rank-num { margin: 0 auto; }
.goals-table td:first-child, .goals-table tfoot td:first-child { text-align: center; }
.annual-table tbody td:first-child,
.annual-table tfoot td:first-child,
.annual-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}
.annual-table thead tr:first-child th:first-child { z-index: 4; background: #18383a; }
.annual-table thead tr:first-child th,
.annual-table thead tr:nth-child(2) th { color: #fff; background: #18383a; font-weight: 800; }
.annual-table thead tr:nth-child(2) th { background: #285055; font-size: 12px; }
.annual-table tbody td:first-child { background: #fff; }
.annual-table tbody tr:nth-child(even) td:first-child { background: #f5f8f7; }
.annual-table tfoot td:first-child { background: #fffaf0; }
.annual-table thead tr:nth-child(2) th:nth-child(4),
.annual-table thead tr:nth-child(2) th:nth-child(8),
.annual-table thead tr:nth-child(2) th:nth-child(12),
.annual-total-cell { background: #e8f3ed; font-weight: 900; }
.annual-table .positive { color: var(--green); font-weight: 900; }
.annual-table .negative { color: var(--red); font-weight: 900; }
.channel-table { table-layout: fixed; min-width: 1040px; }
.channel-table col.channel-org-col { width: 150px; }
.channel-table col.channel-rank-col { width: 64px; }
.channel-table col.channel-value-col { width: 86px; }
.channel-table col.channel-total-col { width: 80px; }
.channel-table th, .channel-table td { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.35; }
/* 数据面板：去除网格线，将信息层级交给留白、底色和状态色。 */
.table-card { border: 0; box-shadow: 0 16px 38px rgba(23, 62, 48, .055); }
.table-toolbar { padding: 21px 26px; border-bottom: 0; }
.stat-strip { gap: 10px; padding: 10px; border: 0; background: transparent; box-shadow: none; }
.stat-strip > div { border: 0 !important; border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(23, 62, 48, .045); }
.goals-table, .channel-table, .target-table, .annual-table {
  border-collapse: separate;
  border-spacing: 0 6px;
  background: #f7f9f8;
}
.goals-table th, .channel-table th, .target-table th, .annual-table th,
.goals-table td, .channel-table td, .target-table td, .annual-table td {
  border: 0;
}
.goals-table thead th, .channel-table thead th, .target-table thead th, .annual-table thead th {
  box-shadow: none;
}
.goals-table thead th:first-child, .channel-table thead th:first-child, .target-table thead th:first-child,
.annual-table thead tr:first-child th:first-child { border-radius: 12px 0 0 12px; }
.goals-table thead th:last-child, .channel-table thead th:last-child, .target-table thead th:last-child,
.annual-table thead tr:first-child th:last-child { border-radius: 0 12px 12px 0; }
.goals-table tbody td, .channel-table tbody td, .target-table tbody td, .annual-table tbody td { background: #fff; }
.goals-table tbody tr:nth-child(even) td, .channel-table tbody tr:nth-child(even) td,
.target-table tbody tr:nth-child(even) td, .annual-table tbody tr:nth-child(even) td { background: #f1f5f3; }
.goals-table tbody td:first-child, .channel-table tbody td:first-child, .target-table tbody td:first-child,
.annual-table tbody td:first-child { border-radius: 12px 0 0 12px; }
.goals-table tbody td:last-child, .channel-table tbody td:last-child, .target-table tbody td:last-child,
.annual-table tbody td:last-child { border-radius: 0 12px 12px 0; }
.goals-table tbody tr:hover td, .channel-table tbody tr:hover td, .target-table tbody tr:hover td,
.annual-table tbody tr:hover td { background: #e8f3ed; }
.goals-table tfoot td, .channel-table tfoot td, .target-table tfoot td, .annual-table tfoot td {
  background: #fbf7ed; box-shadow: none;
}
.goals-table tfoot td:first-child, .channel-table tfoot td:first-child, .target-table tfoot td:first-child,
.annual-table tfoot td:first-child { border-radius: 12px 0 0 12px; }
.goals-table tfoot td:last-child, .channel-table tfoot td:last-child, .target-table tfoot td:last-child,
.annual-table tfoot td:last-child { border-radius: 0 12px 12px 0; }
.annual-table tbody td:first-child { background: #fff; }
.annual-table tbody tr:nth-child(even) td:first-child { background: #f1f5f3; }
.annual-table tbody tr:hover td:first-child { background: #e8f3ed; }
.annual-table tfoot td:first-child { background: #fbf7ed; }
.annual-total-cell { background: #e9f3ec !important; }
.annual-table { border-spacing: 0; }
.annual-table tbody td { border-bottom: 6px solid #f7f9f8; }
/* 本地预览：更克制的数据系统样式，取消行卡片和叠加色块。 */
.table-card { border: 0; box-shadow: 0 12px 30px rgba(23, 62, 48, .04); }
.table-toolbar { padding: 22px 28px; border-bottom: 0; }
.stat-strip { gap: 12px; padding: 0; }
.stat-strip > div { padding: 19px 22px; border: 0 !important; border-radius: 12px; box-shadow: none; }
.stat-strip span { font-size: 12px; }
.stat-strip strong { font-size: 26px; }
.goals-table, .channel-table, .target-table, .annual-table {
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
}
.goals-table th, .channel-table th, .target-table th, .annual-table th,
.goals-table td, .channel-table td, .target-table td, .annual-table td {
  padding: 17px 16px;
  border: 0;
  font-size: 15px;
}
.goals-table th, .channel-table th, .target-table th, .annual-table th {
  background: #1b3d3d;
  color: #fff;
  font-size: 16px;
  letter-spacing: .01em;
}
.goals-table tbody td, .channel-table tbody td, .target-table tbody td, .annual-table tbody td { background: transparent; }
.goals-table tbody tr:nth-child(even), .channel-table tbody tr:nth-child(even),
.target-table tbody tr:nth-child(even), .annual-table tbody tr:nth-child(even) { background: #f6f8f7; }
.goals-table tbody tr:hover, .channel-table tbody tr:hover,
.target-table tbody tr:hover, .annual-table tbody tr:hover { background: #eef5f1; }
.goals-table tbody td:first-child, .channel-table tbody td:first-child, .target-table tbody td:first-child,
.annual-table tbody td:first-child, .goals-table tbody td:last-child, .channel-table tbody td:last-child,
.target-table tbody td:last-child, .annual-table tbody td:last-child { border-radius: 0; }
.goals-table .org-cell, .channel-table .org-cell { justify-content: center; }
.goals-table .org-cell strong, .channel-table .org-cell strong, .target-table td strong, .annual-table td strong { font-size: 15px; }
.goals-table .org-cell small { font-size: 12px; }
.goals-table tfoot td, .channel-table tfoot td, .target-table tfoot td, .annual-table tfoot td {
  color: #255641;
  background: #e8f3eb;
  border: 0;
  font-size: 16px;
}
.goals-table tfoot td:first-child, .channel-table tfoot td:first-child, .target-table tfoot td:first-child,
.annual-table tfoot td:first-child, .goals-table tfoot td:last-child, .channel-table tfoot td:last-child,
.target-table tfoot td:last-child, .annual-table tfoot td:last-child { border-radius: 0; }
.annual-table thead tr:first-child th, .annual-table thead tr:nth-child(2) th { background: #1b3d3d; color: #fff; }
.annual-table thead tr:first-child th { font-size: 18px; }
.annual-table thead tr:nth-child(2) th { font-size: 14px; }
.annual-table tbody td:first-child, .annual-table tbody tr:nth-child(even) td:first-child { background: inherit; }
.annual-table tbody tr:hover td:first-child { background: inherit; }
.annual-table tbody td { border-bottom: 0; }
.annual-table .annual-total-cell { background: #edf5ef !important; }
/* 年度对比列宽以核心指标为主，序号与机构列保持紧凑。 */
.annual-table { min-width: 1300px; table-layout: fixed; }
/* 年度对比：序号与机构列收窄并同时固定，给核心年度数据留出更多宽度。 */
.annual-table { min-width: 1300px; }
.annual-table col.annual-rank-col { width: 58px; }
.annual-table col.annual-org-col { width: 118px; }
.annual-table col.annual-value-col { width: 78px; }
.annual-table .annual-rank-cell,
.annual-table .annual-org-cell { white-space: nowrap; }
.annual-table .annual-rank-cell,
.annual-table .annual-rank-header {
  position: sticky;
  left: 0;
  z-index: 8;
  background: #fff !important;
}
.annual-table .annual-org-cell,
.annual-table .annual-org-header {
  position: sticky;
  left: 58px;
  z-index: 8;
  background: #fff !important;
  box-shadow: 8px 0 14px rgba(25, 56, 50, .08);
}
.annual-table .annual-rank-cell .rank-num { margin: 0 auto; }
.annual-table.sticky-data-table thead tr:first-child .annual-rank-header,
.annual-table.sticky-data-table thead tr:first-child .annual-org-header {
  top: 0;
  z-index: 15;
  height: 114px;
  background: #1b3d3d !important;
}
.annual-table.sticky-data-table thead tr:first-child .annual-org-header {
  box-shadow: 8px 0 14px rgba(14, 43, 39, .22);
}
.annual-table tfoot .annual-rank-cell,
.annual-table tfoot .annual-org-cell {
  z-index: 9;
  background: #e8f3eb !important;
}
.annual-table .positive { color: #2b6d4c; }
.annual-table .negative { color: #b15e55; }
/* 渠道总览首列与其他数据列保持同一居中基线。 */
.channel-table th:first-child, .channel-table td:first-child { text-align: center; }
.channel-table .rank-num { margin: 0 auto; }
/* 年度对比：两层标题视为同一固定标题块，统一色调并覆盖旧的汇总列配色。 */
.annual-table.sticky-data-table thead tr:first-child th,
.annual-table.sticky-data-table thead tr:nth-child(2) th {
  color: #fff !important;
  background: #1b3d3d !important;
  box-shadow: none;
}
.annual-table.sticky-data-table thead tr:first-child th {
  top: 0;
  z-index: 12;
  height: 62px;
}
.annual-table.sticky-data-table thead tr:nth-child(2) th {
  top: 62px;
  z-index: 11;
  height: 52px;
}
.annual-table.sticky-data-table thead tr:first-child th:first-child {
  top: 0;
  z-index: 13;
  height: 114px;
  background: #1b3d3d !important;
}
.annual-table tfoot td:first-child { background: #e8f3eb !important; }
/* 年度对比：横向滚动时机构列保持可见，数据行不再使用交替底色；仅保留汇总列的淡绿强调。 */
.annual-table { min-width: 1360px; }
.annual-table tbody tr,
.annual-table tbody tr:nth-child(even),
.annual-table tbody tr:hover { background: transparent; }
.annual-table tbody td,
.annual-table tbody tr:nth-child(even) td,
.annual-table tbody tr:hover td { background: #fff; }
.annual-table tbody td:first-child,
.annual-table tbody tr:nth-child(even) td:first-child,
.annual-table tbody tr:hover td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  background: #fff !important;
  box-shadow: 8px 0 14px rgba(25, 56, 50, .08);
}
.annual-table.sticky-data-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 14;
  box-shadow: 8px 0 14px rgba(14, 43, 39, .22);
}
.annual-table tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 7;
  background: #e8f3eb !important;
  box-shadow: 8px 0 14px rgba(25, 56, 50, .08);
}
.annual-table .annual-total-cell { background: #edf5ef !important; }
.grade { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font: 800 10px Georgia, serif; }
.grade.a { color: #176b4b; background: #dff2e7; }
.grade.b { color: #936020; background: #fff0d4; }
.grade.c { color: #a3453e; background: #f8e2e0; }
.grade.empty { color: #909a93; background: #eef1ee; }
.progress-cell { width: 130px; }
.progress-cell .labels { display: flex; justify-content: flex-end; margin-bottom: 5px; font-size: 9px; }
.progress-cell .labels span { color: var(--muted); }
.progress-cell .bar-track { height: 5px; }
.row-action { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 15px; overflow: hidden; }
.stat-strip > div { padding: 17px 20px; border-right: 1px solid var(--line); }
.stat-strip > div:last-child { border-right: 0; }
.stat-strip span { display: block; color: var(--muted); font-size: 10px; }
.stat-strip strong { display: block; margin-top: 6px; font: 700 22px Georgia, serif; }
.calendar-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.heat-cell { min-height: 53px; padding: 8px; border-radius: 9px; background: #f0f3ef; font-size: 9px; }
.heat-cell strong { display: block; margin-top: 8px; font: 700 14px Georgia, serif; }
.heat-cell.l1 { background: #e8f3ed; }.heat-cell.l2 { background: #cee7d9; }.heat-cell.l3 { color: white; background: #6aaa8d; }.heat-cell.l4 { color: white; background: #246f51; }
.stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
.stock-summary { padding: 20px; }
.stock-summary .big { margin: 12px 0 4px; font: 700 30px Georgia, serif; }
.stock-summary .note { color: var(--muted); font-size: 10px; }
.stock-bars { display: flex; align-items: flex-end; gap: 10px; height: 115px; margin-top: 17px; padding-top: 10px; border-top: 1px dashed var(--line); }
.stock-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 100%; text-align: center; color: var(--muted); font-size: 8px; }
.stock-bar i { display: block; min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--green-2); }
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }
.source-card { padding: 20px; }
.source-slot-card { display: grid; gap: 10px; }
.file-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--green); background: var(--green-soft); font-size: 18px; }
.source-card h3 { margin: 15px 0 5px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-card p { margin: 0 0 16px; color: var(--muted); font-size: 10px; }
.source-slot-card h3 { margin-bottom: 0; }
.source-slot-card p { margin-bottom: 0; min-height: 30px; line-height: 1.5; }
.source-status { display: grid; gap: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.source-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--line); font-size: 9px; }
.source-foot span:first-child { color: var(--green); }
.source-upload-button { width: 100%; justify-content: center; }
.empty-state { padding: 50px 20px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 7px; color: var(--ink); }
.auth-screen {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 24px; background:
    radial-gradient(circle at 18% 12%, rgba(217,242,124,.28), transparent 31%),
    radial-gradient(circle at 82% 88%, rgba(44,139,102,.24), transparent 34%),
    rgba(20,62,48,.94);
}
.auth-screen[hidden] { display: none; }
.auth-card {
  width: min(390px, 100%); display: grid; gap: 14px; padding: 30px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: white;
  box-shadow: 0 30px 80px rgba(7,32,22,.28); animation: modalIn .2s ease;
}
.auth-card .brand-symbol { margin-bottom: 4px; }
.auth-card h1 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.auth-card p { margin: -4px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-field { display: grid; gap: 7px; }
.auth-field span { color: #59655e; font-size: 10px; font-weight: 800; }
.auth-hint { display: none; color: var(--muted); font-size: 10px; text-align: center; }
#logoutButton[hidden] { display: none; }
body.auth-required .global-search,
body.auth-required .notice-button,
body.guest-mode .global-search,
body.guest-mode .notice-button,
body.guest-mode .sidebar-card,
body.guest-mode .nav-label,
body.guest-mode .nav-item[data-page="overview"],
body.guest-mode .nav-item[data-page="goals"],
body.guest-mode .nav-item[data-page="annual"],
body.guest-mode .nav-item[data-page="arrivals"],
body.guest-mode .nav-item[data-page="inventory"],
body.guest-mode .nav-item[data-page="sources"],
body.guest-mode .nav-item[data-page="visitors"],
body.guest-mode .nav-item[data-page="settings"],
body.guest-mode .nav-item[data-page="accounts"],
body.guest-mode .nav-item[data-page="mobile"] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(14,35,27,.42); backdrop-filter: blur(5px);
}
.modal-backdrop[hidden] { display: none; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 20px; background: white; box-shadow: 0 30px 80px rgba(10,35,25,.25); animation: modalIn .2s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 3px 0 0; font-size: 19px; }
.modal-header .icon-button { font-size: 25px; color: var(--muted); }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 22px 24px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #59655e; font-size: 10px; font-weight: 700; }
.field textarea { min-height: 82px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 24px 22px; border-top: 1px solid var(--line); }
.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: grid; gap: 9px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 13px 15px; border-radius: 12px; color: white; background: #173e30; box-shadow: var(--shadow); animation: toastIn .25s ease; font-size: 11px; }
.toast i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #173e30; background: var(--lime); font-style: normal; font-weight: 800; }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } }
.privacy { color: var(--muted); font-size: 9px; }
.public-page { min-height: calc(100vh - 147px); }
.public-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 16px; padding: 28px 30px; color: white; border-radius: 22px;
  background: linear-gradient(125deg, #143e30 0%, #1f6248 65%, #2c7e5e 100%);
}
.public-hero::after { content: "↗"; position: absolute; right: 3%; bottom: -42px; color: rgba(217,242,124,.1); font: 180px/1 Georgia, serif; }
.public-hero h1 { margin: 6px 0 8px; font-size: 29px; }
.public-hero p { margin: 0; color: #c9ddd3; font-size: 11px; }
.public-wordmark { position: relative; z-index: 1; display: grid; justify-items: end; color: white; }
.public-wordmark strong { font-size: 23px; letter-spacing: .16em; }
.public-wordmark small { margin-top: 5px; color: #bdd3c8; font-size: 10px; letter-spacing: .12em; }
.public-meta { display: flex; align-items: center; gap: 8px; margin-top: 15px; font-size: 10px; color: #c9ddd3; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(217,242,124,.12); }
.public-kpi-bottom { margin-top: 15px; }
.public-footer { padding: 18px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.wechat-gate {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding: 22px;
}
.wechat-card {
  width: min(520px, 100%);
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow);
}
.wechat-card h1 { margin: 8px 0 10px; font-size: 28px; letter-spacing: -.04em; }
.wechat-card p { margin: 0 auto 22px; max-width: 390px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.wechat-qr-wrap { display: grid; justify-items: center; gap: 17px; }
.wechat-qr {
  width: 230px;
  height: 230px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}
.wechat-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.visitor-form { display: grid; gap: 13px; text-align: left; }
.visitor-form label { display: grid; gap: 7px; color: #59655e; font-size: 10px; font-weight: 800; }
.visitor-form textarea {
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  resize: vertical;
}
.settings-form { display: grid; gap: 13px; }
.settings-form label { display: grid; gap: 7px; color: #59655e; font-size: 10px; font-weight: 800; }
.settings-form .button { justify-self: start; margin-top: 4px; }
.settings-grid .risk-item { grid-template-columns: 35px 1fr; }
.permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.check-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcfa;
  color: #23342b;
  font-size: 11px;
  font-weight: 800;
}
.check-card input { accent-color: var(--green); }
.account-list { display: grid; gap: 10px; }
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}
.account-row strong { display: block; font-size: 12px; }
.account-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.6; white-space: normal; }
.account-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.super-account-row { background: #f1f8ef; border-color: #d8ead8; }
.visitor-table-card .visitor-source {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visitor-device {
  display: inline-flex;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
body.public-mode .sidebar, body.public-mode .topbar { display: none; }
body.public-mode .app-shell { display: block; }
body.public-mode .main { width: 100%; }
body.public-mode .page { padding: 24px clamp(16px, 4vw, 58px) 38px; }
body.public-mode #page-public { display: block; }
.mobile-preview-layout { display: grid; grid-template-columns: minmax(360px, 430px) minmax(280px, 1fr); gap: 26px; align-items: start; }
.mobile-preview-layout.phone-only { display: block; }
.mobile-preview-layout.phone-only .phone-device { width: min(100%, 430px); }
.phone-device {
  position: relative; width: min(100%, 390px); margin: 0 auto; padding: 14px;
  border-radius: 42px; background: #14251e; box-shadow: 0 30px 70px rgba(22,45,34,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone-speaker { position: absolute; top: 16px; left: 50%; width: 82px; height: 5px; border-radius: 20px; background: rgba(255,255,255,.16); transform: translateX(-50%); z-index: 2; }
.phone-screen { overflow: hidden; min-height: 760px; border-radius: 31px; background: #f4f6f2; }
.phone-status { height: 40px; display: flex; align-items: end; justify-content: space-between; padding: 0 22px 8px; color: #16221c; background: white; font-size: 11px; font-weight: 800; }
.phone-appbar { height: 48px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid #edf0ec; background: white; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.phone-appbar i { position: absolute; right: 18px; color: #18241e; font-style: normal; letter-spacing: .12em; }
.phone-board { padding: 14px 14px 20px; }
.phone-hero-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 18px;
  border-radius: 23px; color: white; background: linear-gradient(135deg, #143e30, #227150); box-shadow: 0 18px 36px rgba(25,84,61,.18);
}
.phone-eyebrow { color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.phone-hero-card h2 { margin: 7px 0 6px; font-size: 22px; line-height: 1.15; }
.phone-hero-card p { margin: 0; color: #cfe1d8; font-size: 10px; }
.phone-ring {
  --p: 0; position: relative; flex: 0 0 74px; display: grid; place-items: center; width: 74px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(255,255,255,.16) 0);
}
.phone-ring::before { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #19513c; }
.phone-ring strong, .phone-ring small { position: relative; display: block; text-align: center; }
.phone-ring strong { font: 800 17px Georgia, serif; }
.phone-ring small { margin-top: 2px; color: #cfe1d8; font-size: 8px; }
.phone-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.phone-kpi-row::-webkit-scrollbar { display: none; }
.phone-kpi-row article { min-width: 82px; padding: 11px 10px; border: 1px solid #e8ece6; border-radius: 17px; background: white; box-shadow: 0 5px 14px rgba(32,58,46,.04); }
.phone-kpi-row span { display: block; color: var(--muted); font-size: 9px; }
.phone-kpi-row strong { display: block; margin-top: 8px; font: 800 20px/1 Georgia, "Times New Roman", serif; letter-spacing: -.03em; }
.phone-kpi-row em { color: var(--muted); font: 700 10px "Microsoft YaHei UI"; }
.phone-kpi-row small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.phone-section-title { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 9px; }
.phone-section-title b { font-size: 13px; }
.phone-section-title span { color: var(--muted); font-size: 9px; }
.phone-target-select { height: 28px; max-width: 86px; padding: 0 7px; border-radius: 8px; font-size: 9px; }
.phone-field-head, .phone-field-row { display: grid; grid-template-columns: minmax(120px, 1.5fr) repeat(4, minmax(42px, .72fr)); gap: 6px; align-items: center; }
.phone-field-head { padding: 0 10px 7px; color: var(--muted); font-size: 8px; font-weight: 800; }
.phone-field-head span:not(:first-child) { text-align: right; }
.phone-field-head .phone-arrival-head { color: var(--green); font-weight: 900; }
.phone-field-list { display: grid; gap: 7px; }
.phone-field-row { padding: 9px 10px; border: 1px solid #e9ede7; border-radius: 15px; background: white; box-shadow: 0 4px 12px rgba(32,58,46,.03); }
.phone-field-row > strong { text-align: right; font: 800 11px Georgia, serif; }
.phone-field-row > strong.phone-arrival-value {
  justify-self: end; min-width: 38px; padding: 5px 7px; border-radius: 10px;
  color: #0f4f36; background: #e5f5ec; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(23,107,75,.08);
}
.phone-field-row > strong.due { color: #aa5a27; }
.phone-field-row > strong.done { color: var(--green); }
.phone-org-cell { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: center; }
.phone-org-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.phone-org-cell small { grid-column: 2; margin-top: -5px; color: var(--muted); font-size: 8px; }
.phone-kpi-bottom { margin: 13px 0 0; }
.phone-rank-list { display: grid; gap: 8px; }
.phone-rank-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #e9ede7; border-radius: 16px; background: white; }
.phone-rank-num { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 9px; font-weight: 900; }
.phone-rank-num.top { color: #244b38; background: var(--lime); }
.phone-rank-main { min-width: 0; display: grid; gap: 7px; }
.phone-rank-main > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone-rank-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.phone-rank-main em { flex: 0 0 auto; color: var(--muted); font-style: normal; font-size: 9px; }
.phone-rank-row > strong { font: 800 14px Georgia, serif; }
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .bottom-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr 1fr; }
  .global-search { width: 210px; }
  .mobile-preview-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  .main { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .topbar { height: 62px; padding: 0 16px; }
  .menu-button { display: block; margin-right: 7px; }
  .global-search, .date-pill { display: none; }
  .page { padding: 21px 16px 38px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .date-navigator {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .date-preset-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .date-preset {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }
  .date-custom-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .date-custom-group b { display: none; }
  .date-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    font-size: 12px;
  }
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .kpi-grid::-webkit-scrollbar { display: none; }
  .kpi-card {
    min-height: 96px;
    padding: 13px 14px;
    scroll-snap-align: start;
  }
  .kpi-card::after { width: 58px; height: 58px; right: -24px; top: -24px; }
  .kpi-top { font-size: 10px; }
  .kpi-icon { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
  .kpi-value { margin: 12px 0 6px; font-size: 24px; }
  .kpi-foot { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 9px; line-height: 1.35; }
  .stock-grid, .source-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip > div:nth-child(2) { border-right: 0; }
  .stat-strip > div { border-bottom: 1px solid var(--line); }
  .modal-body { grid-template-columns: 1fr; }
  .search-input { width: 100%; }
  #page-public {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 18px 12px 34px;
  }
  #page-public .public-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  #page-public .public-hero {
    width: 100%;
    max-width: 100%;
    min-height: 172px;
    margin: 0 0 14px;
    padding: 22px 18px;
    gap: 10px;
    border-radius: 20px;
    align-items: flex-end;
  }
  #page-public .public-hero h1 {
    max-width: 210px;
    margin: 9px 0 10px;
    font-size: clamp(31px, 8.8vw, 38px);
    line-height: 1.12;
    letter-spacing: -.05em;
  }
  #page-public .public-hero .eyebrow {
    display: block;
    max-width: 100%;
    font-size: 11px;
    letter-spacing: .16em;
    white-space: nowrap;
  }
  #page-public .public-wordmark {
    flex: 0 0 86px;
    align-self: center;
    justify-items: center;
    text-align: center;
  }
  #page-public .public-wordmark strong {
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: .08em;
  }
  #page-public .public-wordmark small {
    font-size: 10px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  #page-public .public-hero::after {
    right: -18px;
    bottom: -24px;
    font-size: 132px;
  }
  #page-public .public-meta {
    margin-top: 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  #page-public .table-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
  }
  #page-public .table-toolbar {
    align-items: center;
    padding: 16px 14px;
  }
  #page-public .table-toolbar strong {
    font-size: 18px;
  }
  #page-public .target-select {
    height: 40px;
    min-width: 112px;
    border-radius: 14px;
    font-size: 14px;
  }
  #page-public .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  #page-public table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    white-space: normal;
  }
  #page-public th,
  #page-public td {
    padding: 11px 6px;
    font-size: 12px;
    text-align: center;
  }
  #page-public th:first-child,
  #page-public td:first-child {
    width: 34%;
    padding-left: 12px;
    text-align: left;
  }
  #page-public th:nth-child(2),
  #page-public td:nth-child(2) { width: 21%; }
  #page-public th:nth-child(3),
  #page-public td:nth-child(3) { width: 13%; }
  #page-public th:nth-child(4),
  #page-public td:nth-child(4) { width: 15%; }
  #page-public th:nth-child(5),
  #page-public td:nth-child(5) { width: 17%; }
  #page-public .org-cell {
    min-width: 0;
    gap: 8px;
  }
  #page-public .org-cell span:last-child {
    min-width: 0;
  }
  #page-public .org-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  #page-public .org-cell small {
    font-size: 11px;
  }
  #page-public .org-logo.rank-logo {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  #page-public .arrival-value {
    min-width: 54px;
    padding: 7px 9px;
    border-radius: 13px;
    font-size: 23px;
  }
  #page-public .badge {
    padding: 5px 8px;
    font-size: 10px;
  }
  #page-public .public-kpi-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .phone-device { width: min(100%, 360px); padding: 10px; border-radius: 34px; }
  .phone-screen { min-height: 690px; border-radius: 26px; }
  .phone-kpi-row { grid-template-columns: repeat(4, minmax(78px, 1fr)); }
}

@media (max-width: 420px) {
  #page-public { padding-left: 10px; padding-right: 10px; }
  #page-public .public-hero { min-height: 164px; padding: 20px 16px; }
  #page-public .public-hero h1 { max-width: 190px; font-size: 32px; }
  #page-public .public-wordmark { flex-basis: 74px; }
  #page-public .public-wordmark strong { font-size: 21px; }
  #page-public th,
  #page-public td { padding-left: 4px; padding-right: 4px; font-size: 11px; }
  #page-public th:first-child,
  #page-public td:first-child { width: 36%; padding-left: 9px; }
  #page-public th:nth-child(2),
  #page-public td:nth-child(2) { width: 20%; }
  #page-public th:nth-child(3),
  #page-public td:nth-child(3) { width: 12%; }
  #page-public th:nth-child(4),
  #page-public td:nth-child(4) { width: 15%; }
  #page-public th:nth-child(5),
  #page-public td:nth-child(5) { width: 17%; }
  #page-public .org-logo.rank-logo { flex-basis: 30px; width: 30px; height: 30px; }
  #page-public .org-cell { gap: 6px; }
  #page-public .org-cell strong { font-size: 13px; }
  #page-public .arrival-value { min-width: 48px; padding: 6px 7px; font-size: 21px; }
}

/* 本地预览：公开看板阅读字号提升。 */
#page-public .public-hero h1 { font-size: 35px; }
#page-public .public-hero .eyebrow { font-size: 13px; }
#page-public .public-meta { font-size: 12px; }
#page-public .public-wordmark strong { font-size: 27px; }
#page-public .public-wordmark small { font-size: 12px; }
#page-public .table-toolbar strong { font-size: 20px; }
#page-public th, #page-public td { font-size: 16px; }
#page-public .org-cell strong { font-size: 16px; }
#page-public .org-cell small { font-size: 12px; }
#page-public .arrival-value { font-size: 27px; }
#page-public .badge { font-size: 11px; }
#page-public .kpi-card .kpi-value { font-size: 31px; }
#page-public .kpi-card .kpi-top, #page-public .kpi-card .kpi-foot { font-size: 11px; }
@media (max-width: 760px) {
  #page-public .public-hero h1 { font-size: 34px; }
  #page-public th, #page-public td { font-size: 13px; }
  #page-public .org-cell strong { font-size: 14px; }
  #page-public .org-cell small { font-size: 11px; }
  #page-public .arrival-value { font-size: 24px; }
}
@media (max-width: 420px) {
  #page-public th, #page-public td { font-size: 12px; }
}

/* 年度对比最终列宽：非核心的序号与机构列保持紧凑。 */
.annual-table { min-width: 1300px; table-layout: fixed; }