/* Quiet, readable recruitment dashboard. */
:root { color-scheme: light; --ink: #182b43; --secondary: #6d7b8e; --line: #e7ebf0; --arrived: #158577; --waiting: #5479ae; --vacant: #e6d3b7; }
body { background: #f5f6f8; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
body::before, body::after { display: none; }
.topbar { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none; height: 80px; padding: 0 max(24px, calc((100vw - 1320px) / 2)); grid-template-columns: 240px 1fr auto; gap: 25px; }
.brand img { width: 184px; height: 49px; object-fit: contain; }
.primary-nav { justify-self: start; background: #f3f5f8; border: 0; box-shadow: none; border-radius: 10px; padding: 4px; }
.nav-item { color: #627187; border-radius: 7px; min-height: 38px; box-shadow: none; font-size: 14px; }
.nav-item.active { color: #fff; background: #233e61; box-shadow: none; }
.nav-item::before, .nav-item::after { display: none; }
.header-actions { gap: 14px; }
.live { color: #738193; font-size: 12px; }
.live i { background: #158577; box-shadow: none; animation: none; }
.admin-login { background: #fff; border: 1px solid #dce3ec; color: #314e70; border-radius: 7px; box-shadow: none; }
.icon-button { background: #fff; border: 1px solid #e1e6ed; color: #52677f; border-radius: 7px; box-shadow: none; }
.page-shell { width: min(1320px, calc(100% - 56px)); padding: 0 0 32px; }
.intro-line { min-height: 50px; margin: 0; padding: 13px 0 5px; align-items: center; }
.motto { gap: 14px; font-size: 16px; filter: none; text-shadow: none; }
.motto::before, .motto::after { display: none; }
.motto span { background: none; -webkit-text-fill-color: #63778f; color: #63778f; filter: none; text-shadow: none; animation: none; }
.updated { color: #788696; font-size: 11px; background: none; border: 0; padding: 0; box-shadow: none; }
.updated strong { color: #526378; font-size: 11px; }
.overview-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 12px 0 24px; }
.heading-kicker { color: #728096; font-size: 12px; letter-spacing: 1px; }
.overview-heading h1 { margin: 8px 0; font-size: 30px; letter-spacing: 1px; font-weight: 700; color: #172d47; }
.overview-heading p, .department-section-heading p { margin: 0; color: #768397; font-size: 13px; line-height: 1.6; }
.overview-detail-button { display: inline-flex; gap: 18px; align-items: center; background: #fff; color: #294668; border: 1px solid #dbe2eb; border-radius: 8px; padding: 11px 17px; font-size: 13px; cursor: pointer; }
.overview-detail-button:hover { background: #edf2f8; border-color: #a5b7cd; }
button:focus-visible, a:focus-visible { outline: 3px solid #6a97cf; outline-offset: 3px; }
.overview-summary { display: grid; grid-template-columns: 1fr 360px; padding: 0; min-height: 0; background: #fff; border: 1px solid #e2e7ee; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px #243c5b04; }
.summary-main { padding: 28px 32px; }
.summary-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-eyebrow { font-size: 14px; font-weight: 600; color: #29496f; }
.summary-badge { font-size: 11px; color: #7b899b; }
.overview-kpis { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; margin: 26px 0 28px; }
.overview-kpis > div { padding: 0 24px; border-left: 1px solid #e9edf3; }
.overview-kpis > div:first-child { padding-left: 0; border: 0; }
.overview-kpis span { font-size: 13px; color: #6b7b90; }
.overview-kpis strong { display: block; font-family: system-ui, sans-serif; font-size: 52px; line-height: 1.2; margin: 9px 0 8px; font-weight: 650; letter-spacing: -2px; color: #254a77; font-variant-numeric: tabular-nums; }
.overview-kpis .kpi-total strong { color: #172f4e; }
.overview-kpis .kpi-gap strong { color: #a47736; }
.overview-kpis small { font-family: "Microsoft YaHei", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 7px; color: #8390a1; }
.overview-kpis p { margin: 0; font-size: 11px; color: #7c8999; white-space: nowrap; }
.overall-bar-heading { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 10px; color: #6f7e90; }
.overall-bar-heading strong { color: #254a77; font-size: 14px; }
.recruit-bar { height: 14px; display: flex; background: #edf0f4; border-radius: 4px; overflow: hidden; gap: 2px; }
.recruit-bar-large { height: 18px; }
.recruit-bar span { flex-shrink: 1; }
.bar-arrived, .key-arrived { background: var(--arrived); }
.bar-waiting, .key-waiting { background: var(--waiting); }
.bar-vacant, .key-vacant { background: var(--vacant); }
.bar-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #718095; margin-top: 12px; }
.bar-labels > span { display: flex; align-items: center; gap: 5px; }
.bar-labels i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.bar-labels b { color: #394f68; margin-left: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary-channels { background: #f8fafc; padding: 28px 28px 20px; border-left: 1px solid #e7ecf2; }
.summary-channels h2 { margin: 0 0 22px; font-size: 14px; color: #2e4869; }
.channel-table-head, .channel-table-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; align-items: center; }
.channel-table-head { font-size: 10px; color: #8290a3; padding-bottom: 7px; }
.channel-table-row { padding: 15px 0; border-bottom: 1px solid #e8edf3; font-size: 12px; color: #53667e; }
.channel-table-head > :not(:first-child), .channel-table-row > :not(:first-child) { text-align: right; }
.channel-table-row strong { font-size: 19px; font-family: system-ui, sans-serif; color: #304e72; font-weight: 600; font-variant-numeric: tabular-nums; }
.channel-table-row .channel-gap { color: #9a753f; }
.channel-note { font-size: 10px; color: #8996a7; margin-top: 17px; }
.recruitment-stages { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); align-items: center; gap: 20px; padding: 23px 26px; background: #eaf0f6; border-radius: 12px; margin: 16px 0 32px; }
.stage-caption strong { display: block; font-size: 13px; color: #324c6c; margin-bottom: 5px; }
.stage-caption span { font-size: 10px; color: #8592a3; }
.stage-tally { border-left: 1px solid #d9e2ed; padding-left: 24px; display: flex; flex-direction: column; gap: 5px; }
.stage-tally > span { color: #75859a; font-size: 11px; }
.stage-tally strong { font-family: system-ui, sans-serif; font-size: 23px; color: #335579; font-weight: 600; line-height: 1.1; }
.stage-tally small { font-family: "Microsoft YaHei", sans-serif; font-size: 10px; color: #7e8fa3; font-weight: 400; margin-left: 5px; }
.department-section-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; }
.department-section-heading h2 { margin: 0 0 7px; font-size: 21px; letter-spacing: .5px; color: #1e3552; }
.department-section-heading p { font-size: 11px; }
.department-count { font-size: 12px; color: #72859b; }
.dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dept-card { background: #fff; border: 1px solid #e2e7ee; border-radius: 13px; padding: 23px 26px 18px; transition: border-color .18s ease, box-shadow .18s ease; }
.dept-card:hover { border-color: #b9c8da; box-shadow: 0 6px 20px #243c5b06; }
.dept-card-heading { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.dept-card-heading h3 { color: #213b5b; font-size: 17px; margin: 0 0 6px; font-weight: 600; }
.dept-card-heading > div > span { color: #8995a6; font-size: 10px; }
.dept-card-heading button { border: 0; background: none; color: #66809f; padding: 5px 0 7px 12px; font-size: 11px; white-space: nowrap; cursor: pointer; }
.dept-card-heading button:hover { color: #234f86; }
.dept-card-heading button span { margin-left: 6px; }
.dept-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 23px 0 21px; }
.dept-stats > div { border-left: 1px solid #edf0f4; padding-left: 22px; }
.dept-stats > div:first-child { border: 0; padding-left: 0; }
.dept-stats span { display: block; color: #7e8ca0; font-size: 11px; margin-bottom: 5px; }
.dept-stats strong { font-family: system-ui, sans-serif; font-size: 34px; font-weight: 600; line-height: 1.2; color: #2b4e78; font-variant-numeric: tabular-nums; }
.dept-stats > div:first-child strong { color: #1d3452; }
.dept-stats .dept-gap strong { color: #a17b43; }
.dept-channels { border-top: 1px solid #edf0f4; margin-top: 18px; padding-top: 13px; display: grid; gap: 8px; font-size: 10px; color: #8793a4; }
.dept-channels > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dept-channels b { color: #5a6e88; font-weight: 500; margin-left: 3px; }
.dept-channels i { font-style: normal; padding: 0 9px; color: #bac3ce; }
.internal-summary { display: flex; justify-content: space-between; align-items: center; gap: 28px; background: #edf4f1; border: 1px solid #dce8e2; border-radius: 12px; margin-top: 20px; padding: 22px 26px; }
.internal-summary-title { display: flex; gap: 13px; align-items: center; }
.internal-icon { font-size: 23px; color: #408475; background: #deebe5; padding: 5px 11px; border-radius: 8px; }
.internal-summary h2 { font-size: 15px; color: #356252; margin: 0 0 6px; }
.internal-summary p { font-size: 10px; color: #7c948b; margin: 0; }
.internal-summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 52px; }
.internal-summary-stats span { display: block; font-size: 10px; color: #789088; margin-bottom: 4px; }
.internal-summary-stats strong { font-family: system-ui, sans-serif; font-size: 26px; color: #3d7363; font-weight: 600; }
.internal-summary-stats small { font-size: 10px; font-weight: 400; margin-left: 4px; color: #789088; }
.overview-footnote { color: #8b96a6; font-size: 10px; margin: 20px 0 0; line-height: 1.8; }
@media (min-width: 1600px) { .page-shell { width: min(1400px, calc(100% - 80px)); } }
@media (max-width: 1100px) {
  .topbar { grid-template-columns: 190px 1fr auto; gap: 12px; padding: 0 24px; }
  .header-actions { gap: 8px; }
  .overview-summary { grid-template-columns: 1fr 300px; }
  .summary-main { padding: 24px; }
  .overview-kpis > div { padding: 0 15px; }
  .overview-kpis strong { font-size: 44px; }
  .overview-kpis p { font-size: 10px; }
  .summary-channels { padding: 24px 22px; }
  .internal-summary-stats { gap: 32px; }
}
@media (max-width: 850px) {
  .topbar { height: auto; min-height: 76px; grid-template-columns: 1fr auto; padding: 14px 20px; gap: 14px; }
  .brand img { width: 160px; height: 40px; }
  .primary-nav { grid-row: 2; grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .header-actions { grid-row: 1; grid-column: 2; }
  .live { display: none; }
  .overview-summary { grid-template-columns: 1fr; }
  .summary-channels { border-left: 0; border-top: 1px solid #e7ecf2; padding: 20px 24px; }
  .summary-channels h2 { margin-bottom: 13px; }
  .channel-table-row { padding: 11px 0; }
  .recruitment-stages { gap: 12px; padding: 20px; grid-template-columns: repeat(5, 1fr); }
  .stage-caption { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; }
  .stage-tally { padding-left: 10px; }
  .stage-tally:nth-child(2) { border-left: 0; padding-left: 0; }
  .dept-grid { grid-template-columns: 1fr; }
  .internal-summary { flex-wrap: wrap; gap: 20px; }
  .internal-summary-stats { width: 100%; gap: 16px; }
}
@media (max-width: 480px) {
  .topbar { padding: 10px 16px; gap: 10px; position: relative; }
  .header-actions { gap: 6px; }
  .admin-login { font-size: 10px; padding: 8px; min-height: 32px; }
  .icon-button { width: 32px; height: 32px; min-width: 32px; }
  .brand img { width: 142px; height: 38px; }
  .nav-item { font-size: 12px; min-height: 36px; }
  .page-shell { width: calc(100% - 32px); }
  .intro-line { padding-top: 12px; min-height: 42px; }
  .motto { font-size: 13px; gap: 9px; }
  .updated { gap: 4px; }
  .updated, .updated strong { font-size: 9px; }
  .overview-heading { margin: 16px 0 20px; align-items: flex-start; flex-direction: column; gap: 15px; }
  .overview-heading h1 { font-size: 26px; }
  .heading-kicker { font-size: 10px; }
  .overview-heading p { font-size: 11px; }
  .overview-detail-button { padding: 9px 12px; font-size: 11px; }
  .summary-main { padding: 20px 18px; }
  .section-eyebrow { font-size: 12px; }
  .summary-badge { font-size: 9px; }
  .overview-kpis { margin: 24px 0; grid-template-columns: repeat(3, 1fr); }
  .overview-kpis > div { padding: 0 10px; }
  .overview-kpis > div:last-child { padding-right: 0; }
  .overview-kpis span { font-size: 10px; }
  .overview-kpis strong { font-size: 38px; margin-top: 8px; }
  .overview-kpis small { font-size: 10px; margin-left: 4px; }
  .overview-kpis p { font-size: 9px; white-space: normal; line-height: 1.7; min-height: 30px; }
  .summary-channels { padding: 18px; }
  .bar-labels { font-size: 10px; gap: 5px; }
  .bar-labels > span { gap: 4px; }
  .recruitment-stages { padding: 18px; margin-bottom: 28px; gap: 12px 6px; }
  .stage-tally > span { font-size: 9px; white-space: nowrap; }
  .stage-tally strong { font-size: 21px; }
  .stage-tally small { font-size: 8px; margin-left: 2px; }
  .department-section-heading h2 { font-size: 19px; }
  .department-section-heading p { font-size: 10px; }
  .department-count { font-size: 10px; }
  .dept-card { padding: 20px 18px 17px; }
  .dept-card-heading h3 { font-size: 16px; }
  .dept-stats { margin: 22px 0 20px; }
  .dept-stats > div { padding-left: 18px; }
  .dept-stats strong { font-size: 32px; }
  .dept-channels { font-size: 9px; }
  .dept-channels i { padding: 0 5px; }
  .internal-summary { padding: 20px 18px; }
  .internal-summary-stats strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Supporting labels remain readable without competing with the totals. */
.summary-badge, .channel-table-head, .channel-note, .stage-caption span,
.dept-card-heading > div > span, .dept-channels, .internal-summary p,
.internal-summary-stats span, .overview-footnote { color: #66788c; font-size: 12px; }
.bar-labels, .stage-tally > span, .department-section-heading p, .dept-stats span { color: #62758c; font-size: 12px; }
.dept-card-heading button { font-size: 12px; }
@media (max-width: 480px) {
  .summary-badge, .channel-table-head, .channel-note, .stage-caption span,
  .dept-card-heading > div > span, .dept-channels, .internal-summary p,
  .internal-summary-stats span, .overview-footnote, .bar-labels,
  .department-section-heading p, .dept-stats span, .dept-card-heading button { font-size: 11px; }
  .stage-tally > span { font-size: 10px; }
  .overview-kpis p { font-size: 10px; }
  .dept-channels i { padding: 0 3px; }
}